UIScrollView&UIPageControl的使用

UIScrollView是内容滚动视图，作为父视图时，可以添加多个视图控件，然后通过设置其特有的 contentSize 属性，以便控制进行水平方向，或垂直方向的滚动。

水平方向滚动时，只需要设置对应的宽度；垂直方向滚动时，只需要设置对应的高度。

 

 

// 水平方向滚动的scrollview
UIScrollView *scrollview001 = [[UIScrollView alloc] init];
[self.view addSubview:scrollview001];
scrollview001.backgroundColor = [UIColor redColor];
scrollview001.frame = CGRectMake(0.0, 0.0, CGRectGetWidth(self.view.bounds), 200.0);
// 添加子视图控件
NSInteger count001 = 10;
CGFloat originX = 0.0;
for (NSInteger index = 0; index < count001; index++)
{
        NSString *text = [NSString stringWithFormat:@"第 %@ 个label", @(index + 1)];
        
        UILabel *label = [[UILabel alloc] init];
        [scrollview001 addSubview:label];
        label.frame = CGRectMake(originX, 0.0, CGRectGetWidth(scrollview001.bounds), CGRectGetHeight(scrollview001.bounds));
        label.text = text;
        label.textAlignment = NSTextAlignmentCenter;
        label.backgroundColor = [UIColor colorWithWhite:(random() % 255) alpha:((random() % 10) / 10)];
        <span style="font-family: 'PingFang SC';">originX += CGRectGetWidth(label.bounds);</span>
}
    
// 重要属性，控制内容大小，设置后可水平方向，或垂直方向进行滚动显示更多内容控件
// 水平方向滚动时，只需要设置对应的宽度；垂直方向滚动时，只需要设置对应的高度；
scrollview001.contentSize = CGSizeMake(CGRectGetWidth(self.view.bounds) * count001, 200.0);
// 是否整页显示效果，默认为NO，即关闭
scrollview001.pagingEnabled = YES;
// 是否显示水平，或垂直滚动条，默认为YES，即显示
scrollview001.showsHorizontalScrollIndicator = NO;
// 是否可通过手势进行水平，或垂直进行滚动，默认为YEW，即可以
scrollview001.scrollEnabled = YES;
// tag设置，区别不同的scrollview
scrollview001.tag = 1000;
    
// 显示指定页，如显示第二页
[scrollview001 setContentOffset:CGPointMake(320.0, 0.0) animated:YES];
    
// 代理
/*
1 设置代理方法的实现对象
2 添加协议
3 实现代理方法
*/
scrollview001.delegate = self;

 

 

// 垂直方向滚动的scrollview
UIScrollView *scrollview002 = [[UIScrollView alloc] initWithFrame:CGRectMake(0.0, 210.0, CGRectGetWidth(self.view.bounds), 200.0)];
[self.view addSubview:scrollview002];
// 添加子视图控件
NSInteger count002 = 10;
CGFloat originY = 0.0;
for (NSInteger index = 0; index < count002; index++)
{
        NSString *text = [NSString stringWithFormat:@"第 %@ 个label", @(index + 1)];
        
        UILabel *label = [[UILabel alloc] init];
        [scrollview002 addSubview:label];
        label.frame = CGRectMake(0.0, originY, CGRectGetWidth(scrollview002.bounds), CGRectGetHeight(scrollview002.bounds));
        label.text = text;
        label.textAlignment = NSTextAlignmentCenter;
        label.backgroundColor = [UIColor colorWithWhite:0.5 alpha:0.3];
        
        originY += CGRectGetHeight(label.bounds);
}
    
// 重要属性，控制内容大小，设置后可水平方向，或垂直方向进行滚动显示更多内容控件
// 水平方向滚动时，只需要设置对应的宽度；垂直方向滚动时，只需要设置对应的高度；
scrollview002.contentSize = CGSizeMake(CGRectGetWidth(self.view.bounds), (CGRectGetHeight(scrollview002.bounds) * count002));
// 是否整页显示效果，默认为NO，即关闭
scrollview002.pagingEnabled = YES;
// tag设置，区别不同的scrollview
scrollview002.tag = 2000;
// 代理
scrollview002.delegate = self;

 

 

UIPageControl是页码控件，通常结合scro使用，用来页码，即当前页面，或总页面数。

UIPageControl *pagecontroll = [[UIPageControl alloc] init];
    [self.view addSubview:pagecontroll];
    pagecontroll.backgroundColor = [UIColor clearColor];
    pagecontroll.frame = CGRectMake(((CGRectGetWidth(self.view.bounds) - 200.0) / 2), (200.0 - 20.0 - 10.0), 200.0, 20.0);
    
    // 设置总页码数量
    pagecontroll.numberOfPages = count001;
    // 设置当前页码，即指定页面，默认从0开始，即0~n
    pagecontroll.currentPage = 1;
    // 设置当前页码控件的颜色
    pagecontroll.currentPageIndicatorTintColor = [UIColor greenColor];
    // 设置非当前页码控件的颜色
    pagecontroll.pageIndicatorTintColor = [UIColor whiteColor];
    // 设置tag值
    pagecontroll.tag = 3000;

 

@interface ViewController () <UIScrollViewDelegate>

@end

 

// UIScrollViewDelegate

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    NSInteger tag = scrollView.tag;
    if (1000 == tag)
    {
        // 内容滚动变化间距，水平方向
        CGFloat offsetX = scrollView.contentOffset.x;
        // 通过水平滚动变化间距与页面宽度计算出当前滚动后的页面
        NSInteger page = offsetX / CGRectGetWidth(self.view.bounds);
        NSLog(@"offsetX=%@,第 %@ 页", @(offsetX), @(page + 1));
        
        // 控件页码的当前页码
        UIPageControl *pagecontroll = (UIPageControl *)[self.view viewWithTag:3000];
        pagecontroll.currentPage = page;
        
        // 无限循环效果，即滑到指定范围后回到第一页
        // 内容滚动变化间距
        CGFloat offsetChange = (CGRectGetWidth(self.view.bounds) * (10 - 1) + 40.0);
        NSLog(@"offsetChange=%@", @(offsetChange));
        if (offsetX >= offsetChange)
        {
            // 从最后一页跳到第一页
            [scrollView setContentOffset:CGPointMake(0.0, 0.0) animated:NO];
            // 控件页码的当前页码
            pagecontroll.currentPage = 0;
        }
        else if (offsetX <= -40.0)
        {
            // 从第一页跳到最后一页
            [scrollView setContentOffset:CGPointMake((CGRectGetWidth(self.view.bounds) * (10 - 1)), 0.0) animated:NO];
            // 控件页码的当前页码
            pagecontroll.currentPage = 9;
        }
    }
    else if (2000 == tag)
    {
        // 内容滚动变化间距，垂直方向
        CGFloat offsetY = scrollView.contentOffset.y;
        // 通过水平滚动变化间距与页面宽度计算出当前滚动后的页面
        NSInteger page = offsetY / CGRectGetHeight(scrollView.bounds);
        NSLog(@"offsetY=%@,第 %@ 页", @(offsetY), @(page + 1));
    }
    
    NSLog(@"滚动");
}

// called on start of dragging (may require some time and or distance to move)
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    NSLog(@"即将开始拖动");
}

// called on finger up if the user dragged. velocity is in points/millisecond. targetContentOffset may be changed to adjust where the scroll view comes to rest
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset
{
    NSLog(@"即将结束拖动");
}

// called on finger up if the user dragged. decelerate is true if it will continue moving afterwards
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    NSLog(@"结束拖动");
}

// called on finger up as we are moving
- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView
{
    NSLog(@"拖动即将释放");
}

// called when scroll view grinds to a halt
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    NSLog(@"拖动已经释放");
    
    NSInteger tag = scrollView.tag;
    if (1000 == tag)
    {
        // 内容滚动变化间距，水平方向
        CGFloat offsetX = scrollView.contentOffset.x;
        // 通过水平滚动变化间距与页面宽度计算出当前滚动后的页面
        NSInteger page = offsetX / CGRectGetWidth(self.view.bounds);
        NSLog(@"offsetX=%@,第 %@ 页", @(offsetX), @(page + 1));
        
        // 控件页码的当前页码
        UIPageControl *pagecontroll = (UIPageControl *)[self.view viewWithTag:3000];
        pagecontroll.currentPage = page;
        
        // 无限循环效果，即滑到指定范围后回到第一页
        // 内容滚动变化间距
        CGFloat offsetChange = (CGRectGetWidth(self.view.bounds) * (10 - 1) + 40.0);
        NSLog(@"offsetChange=%@", @(offsetChange));
        if (offsetX >= offsetChange)
        {
            // 从最后一页跳到第一页
            [scrollView setContentOffset:CGPointMake(0.0, 0.0) animated:NO];
            // 控件页码的当前页码
            pagecontroll.currentPage = 0;
        }
        else if (offsetX <= -40.0)
        {
            // 从第一页跳到最后一页
            [scrollView setContentOffset:CGPointMake((CGRectGetWidth(self.view.bounds) * (10 - 1)), 0.0) animated:NO];
            // 控件页码的当前页码
            pagecontroll.currentPage = 9;
        }
    }
    else if (2000 == tag)
    {
        // 内容滚动变化间距，垂直方向
        CGFloat offsetY = scrollView.contentOffset.y;
        // 通过水平滚动变化间距与页面宽度计算出当前滚动后的页面
        NSInteger page = offsetY / CGRectGetHeight(scrollView.bounds);
        NSLog(@"offsetY=%@,第 %@ 页", @(offsetY), @(page + 1));
    }

}

// called when setContentOffset/scrollRectVisible:animated: finishes. not called if not animating
- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView
{
    
}

// any offset changes
- (void)scrollViewDidZoom:(UIScrollView *)scrollView
{
    
}

// return a view that will be scaled. if delegate returns nil, nothing happens
- (nullable UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
    return nil;
}

// called before the scroll view begins zooming its content
- (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(nullable UIView *)view
{
    
}

// scale between minimum and maximum. called after any 'bounce' animations
- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(nullable UIView *)view atScale:(CGFloat)scale
{
    
}

// return a yes if you want to scroll to the top. if not defined, assumes YES
- (BOOL)scrollViewShouldScrollToTop:(UIScrollView *)scrollView
{
    return YES;
}

// called when scrolling animation finished. may be called immediately if already at top
- (void)scrollViewDidScrollToTop:(UIScrollView *)scrollView
{
    
}

 

 

 

 

滚动到指定位置

方法1

[scrollView setContentOffset:CGPointMake(0.0, 200.0f) animated:YES];

方法2

[UIView animateWithDuration:0.3 animations:^{

            [scrollView setContentOffset:CGPointMake(0.0, 200.0f)];

}];

方法1和方法2都能使scrollView滚动到指定的位置，但是还是存在区别的。

（1）方法1的执行是在scrollView停止滑动后才去执行

（2）方法2的执行是在scrollView不需要停止滑动，即在滑动过程中就去执行了。