UI基础篇之UIScrollView

Posted 2020-07-07 悠然的南山

一、UIScrollView继承于UIView，它还有一个常用的子类UITableView；今天只介绍UIScrollView的基本使用：首先介绍一下它的几个常用属性，这里不做过多属性的介绍，有关其属性的相关信息可以command+鼠标左键，进入系统中自行查看

CGSize contentSize：用于设置滚动范围的，在创建一个UIScrollView对象之后，除了设置对象的frame还必须设置其滚动范围（CGSize contentSize）；CGPoint contentOffSet：当前显示的范围；CGFloat minimumZoomScale：最小缩放最小比例（默认是1不进行缩放）；CGFloat maximumZoomScale：最大缩放最小比例（默认是1不进行缩放）;self.scrollView.showsHorizontalScrollIndicator = NO;//是否设置水平方向的滚动条；self.scrollView.showsVerticalScrollIndicator = NO;//是否设置垂直方向的滚动条等等；滚动所用的方法别忘记设置协议<UIScrollViewDelegate>

下面举了简单的例子：实现多张图片的滑动（添加了UIPageControl）及缩放，图片滑过之后尺寸自动还原。

AppDelegate.m文件中：

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    // Override point for customization after application launch.
    self.window  = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
    self.window.backgroundColor = [UIColor whiteColor];
    [self.window makeKeyAndVisible];
    self.window.rootViewController = [[RootViewController alloc] init];
    return YES;
}
RootViewController.m

#import "RootViewController.h"
#import "RootView.h"

@interface RootViewController ()<UIScrollViewDelegate>
//自定义视图替换控制器自带的View，提升程序的灵活性、可移植性
@property (nonatomic, strong) RootView *rootView;

@end

@implementation RootViewController

-(void)loadView {
    //自定义视图替换控制器自带的View，提升程序的灵活性、可移植性
    self.rootView = [[RootView alloc] initWithFrame:[UIScreen mainScreen].bounds];
    self.view = self.rootView;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    //给“scrollView”设置代理
    self.rootView.scrollView.delegate = self;
    //给pageControl添加方法
    [self.rootView.pageControl addTarget:self action:@selector(pageControlAction:) forControlEvents:UIControlEventValueChanged];
    //设置初始尺寸
    self.rootView.scrollView.zoomScale = 1;
    //给每一个“scroll”设置代理
    for (int i = 10; i < 15; i++) {
        UIScrollView *scroll = [self.rootView.scrollView viewWithTag:i];
        scroll.zoomScale = 1;
        scroll.delegate = self;
    }
}

//返回进行缩放的“scroll”
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
    if (scrollView != self.rootView.scrollView) {
        return [scrollView.subviews objectAtIndex:0];
    }else
    return nil;
}
//设置pageControl，图片向后滑动一张，pageControl向后动一下
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    NSInteger index = scrollView.contentOffset.x / self.rootView.frame.size.width;
    self.rootView.pageControl.currentPage = index;
}
//上面pageControl方法的实现
- (void)pageControlAction:(UIPageControl *)sender {
    
    NSInteger index = self.rootView.pageControl.currentPage;
    CGPoint points = CGPointMake(index * self.rootView.frame.size.width, 0);

    [UIView animateWithDuration:0.5 animations:^{
        self.rootView.scrollView.contentOffset = points;
    }];
}
//将划过的图片还原
-(void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView {
    if (scrollView == self.rootView.scrollView) {
       NSUInteger index = self.rootView.pageControl.currentPage;
        [[scrollView.subviews objectAtIndex:index] setZoomScale:1.0];
    }
}
//图片缩放后居中
-(void)scrollViewDidZoom:(UIScrollView *)scrollView {
    [scrollView.subviews objectAtIndex:0].center = self.rootView.center;
}
@end

RootView.h

#import <UIKit/UIKit.h>

@interface RootView : UIView

@property (nonatomic, strong) UIScrollView *scrollView;

@property (nonatomic, strong) UIPageControl *pageControl;


@end

RootView.m

#import "RootView.h"

@implementation RootView

-(instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        [self addAllViews];
    }
    return self;
}

- (void)addAllViews {
    //布局scrollView
    self.scrollView = [[UIScrollView alloc]initWithFrame:self.frame];
    self.scrollView.backgroundColor = [UIColor redColor];
    self.scrollView.pagingEnabled = YES;
    self.scrollView.minimumZoomScale = 0.2;
    self.scrollView.maximumZoomScale = 3;
    [self addSubview:self.scrollView];
    self.scrollView.contentSize = CGSizeMake(self.frame.size.width * 5, 0);
    //创建多个scrollView，每张图片对应一个scrollView，进行缩放时，对每个图片所在的scrollView进行缩放，
    for (int i = 0; i < 5; i++) {
        UIScrollView *scrollViews = [[UIScrollView alloc] initWithFrame:CGRectMake(i * self.frame.size.width, 0, self.frame.size.width, self.frame.size.height)];
        scrollViews.contentSize = CGSizeMake(self.frame.size.width, self.frame.size.height);
        scrollViews.tag = i + 10;
        scrollViews.minimumZoomScale = 0.2;
        scrollViews.maximumZoomScale = 3;

        NSString *str = [NSString stringWithFormat:@"%d.jpg", i + 1];
        UIImageView *imageView = [[UIImageView alloc] init];
        imageView.frame = CGRectMake(0, 0, scrollViews.frame.size.width, scrollViews.frame.size.height);
        imageView.image = [UIImage imageNamed:str];

        [scrollViews addSubview:imageView];
        [self.scrollView addSubview:scrollViews];
    }
    //布局pageControl
    self.pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, self.frame.size.height - 40, self.frame.size.width, 40)];
    self.pageControl.numberOfPages = 5;
    self.pageControl.backgroundColor = [UIColor grayColor];
    [self addSubview:self.pageControl];
    
}
@end