iOS UIScrollView控件

UIScrollView控件用来展示超出一屏的视图。

1. UIScrollView的使用

主要属性

// 内容视图的尺寸大小
@property(nonatomic) CGSize contentSize;
// 内容视图的偏移值，默认是CGPointZero
@property(nonatomic) CGPoint contentOffset;

// 是否具有弹簧效果，默认是YES
@property(nonatomic) BOOL bounces;
// 当bounces是YES时，即使contentSize比bounds小，垂直方向仍然具有弹簧效果，默认是NO
@property(nonatomic) BOOL alwaysBounceVertical;
// 当bounces是YES时，即使contentSize比bounds小，水平方向仍然具有弹簧效果，默认是NO
@property(nonatomic) BOOL alwaysBounceHorizontal;

// 是否可以滚动，默认是YES 
@property(nonatomic,getter=isScrollEnabled) BOOL scrollEnabled;
// 是否显示垂直滚动条，默认是YES
@property(nonatomic) BOOL showsVerticalScrollIndicator; 
// 是否显示水平滚动条，默认是YES
@property(nonatomic) BOOL showsHorizontalScrollIndicator;
// 滚动条样式，UIScrollViewIndicatorStyle类型
@property(nonatomic) UIScrollViewIndicatorStyle indicatorStyle;

// 点击状态栏，滚动视图会直接回到顶部，默认是YES
@property(nonatomic) BOOL  scrollsToTop;
// 委托对象，UIScrollViewDelegate类型
@property(nullable,nonatomic,weak) id<UIScrollViewDelegate> delegate;

UIScrollViewDelegate协议

@protocol UIScrollViewDelegate<NSObject>

// 滚动时调用
- (void)scrollViewDidScroll:(UIScrollView *)scrollView;

// 开始滚动时调用，只执行一次。
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView;

// 滑动结束时调用，手指离开时执行，只执行一次
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset;

// 滑动结束时调用，手指离开时执行，只执行一次。
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate;

// 滑动减速开始时调用该方法，在scrollViewDidEndDragging后调用
- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView;

// 滑动减速结束时调用该方法，只执行一次
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView;

// 滚动动画结束时调用
- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView;

// 缩放时调用
- (void)scrollViewDidZoom:(UIScrollView *)scrollView;

// 开始缩放时调用，只执行一次
- (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(nullable UIView *)view;

// 缩放结束时调用，只执行一次
- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(nullable UIView *)view atScale:(CGFloat)scale;

// 返回将要缩放的UIView对象
- (nullable UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView;     

// 户点击状态栏后，滚动视图是否能够滚动到顶部
- (BOOL)scrollViewShouldScrollToTop:(UIScrollView *)scrollView;

// 户点击状态栏后，视图滚动到顶部
- (void)scrollViewDidScrollToTop:(UIScrollView *)scrollView;

示例代码

UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(10, 100, 240, 360)];
scrollView.bounces = YES;
scrollView.showsHorizontalScrollIndicator = YES;
scrollView.showsVerticalScrollIndicator = NO;
scrollView.indicatorStyle = UIScrollViewIndicatorStyleBlack;
scrollView.contentSize = CGSizeMake(480, 720);
scrollView.contentOffset = CGPointMake(120, 180);
scrollView.scrollsToTop = YES;
scrollView.delegate = self;

UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 480, 720)];
imageView.image = [UIImage imageNamed:@"bg"];
[scrollView addSubview:imageView];

[self.view addSubview: scrollView];

显示如下

2. 缩放

UIScrollView除了支持拖动之外，还支持缩放。需要设置最小和最大缩放比例，同时实现UIScrollViewDelegate的-(UIView *)viewForZoomingInScrollView:(UIScrollView *)方法。

// 当前的缩放比例
@property(nonatomic) CGFloat zoomScale;
// 最小放大比例，默认值为1
@property(nonatomic) CGFloat minimumZoomScale;
// 最大放大比例，默认值为1
@property(nonatomic) CGFloat maximumZoomScale;

// 在缩放超过缩放比例时，是否具有弹簧效果，默认是YES
@property(nonatomic) BOOL  bouncesZoom;

示例代码

- (void)viewDidLoad {
    [super viewDidLoad];
    
    UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(10, 100, 320, 480)];
    scrollView.minimumZoomScale = 1;
    scrollView.maximumZoomScale = 4;
    scrollView.zoomScale = 1;
    scrollView.bouncesZoom = NO;
    scrollView.delegate = self;
    
    self.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 320, 480)];
    self.imageView.image = [UIImage imageNamed:@"bg"];
    [scrollView addSubview:self.imageView];
    
    [self.view addSubview:scrollView];
}

// 返回将要缩放的UIView对象
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
    return self.imageView;
}

显示如下

3. 分页显示

将UIScrollView的pageEnable属性设置为YES，可以视图分页显示。可以和UIPageControl配合使用，增加分页效果。

示例代码

- (void)viewDidLoad {
    [super viewDidLoad];
   
    self.scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(10, 100, 320, 150)];
    self.scrollView.contentSize = CGSizeMake(320*5, 150);
    self.scrollView.pagingEnabled = YES;
    self.scrollView.showsHorizontalScrollIndicator = NO;
    
    for (int index = 1; index <= 5; index++) {
        UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(320 * (index - 1), 0, 320, 150)];
        imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"switcher%d", index]];
        [self.scrollView addSubview:imageView];
    }
    
    [self.view addSubview:self.scrollView];
    self.scrollView.delegate = self;

    self.pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(10, 230, 320, 20)];
    self.pageControl.numberOfPages = 5;
    self.pageControl.currentPage = 0;
    self.pageControl.currentPageIndicatorTintColor = [UIColor magentaColor];

    [self.view addSubview:self.pageControl];
    [self.pageControl addTarget:self action:@selector(onPageControlValueChanged:) forControlEvents:UIControlEventValueChanged];
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    CGFloat width = scrollView.contentOffset.x;
    NSInteger page = width/320 + 0.5;
    self.pageControl.currentPage = page;
}

- (void)onPageControlValueChanged:(UIPageControl *)sender {
    NSInteger page = sender.currentPage;
    [self.scrollView setContentOffset:CGPointMake(320*page, 0) animated:YES];
}

显示如下