UI基础-UIScrollView、UIPageControl

UIScrollView

UIScrollView是可以滚动的view,UIView本⾝身不能滚动,子类
UIScrollview拓展了滚动方面的功能。 UIScrollView是所有滚动视图的基类。以后的UITableView,UITextView等视图都是继承于该类。
使用场景:显示不下(单张大图);内容太多(图⽂文混排);滚动头条(图片);相册等

核心功能

UIScrollview主要专长于两个方面:
滚动:contentSize大于frame.size的时候,能够滚动。 缩放:自带缩放,可以指定缩放倍数。

滚动相关属性

   1.定义内容区域大小,决定是否能够滑动
   contentSize
   2.视图左上角距离坐标原点的偏移量
   contentOffest
   3.滑动到顶部（点状态条的时候）
   scrollsToTop
   4.是否整屏翻动
   pagingEnabled
   5.边界是否回弹（总开关，以下两个若要开启，则必须先开启总的）
   bounces
   1.控制垂直方向遇到边框是否会反弹
     alwaysBounceVertical
   2.控制水平方向遇到边框是否回弹
     alwaysBounceHorizontal
   6.是否能够滚动
   scrollEnabled
   7.控制是否显示水平方向的滚动条
   showsHorizontalScrollIndicator
   8.控制是否显示垂直方向的滚动条
   showsVerticalScrollIndicator

缩放相关属性

  1.缩小的最小比例
    minimumZoomScale
  2.放大的最大比例
   maximumZoomScale
  3.设置变化比例
   zoomScale
  4.判断是否正在进行缩放反弹
   zooming
  5.控制缩放的时候是否会反弹
   bouncesZoom

常用代理方法

滚动代理方法

 1.滚动就会触发
 —（void）scrollViewDidScroll：(UIScrollView *)scrollView
 2.开始拖拽时触发
 - （void）scrollViewWillBeginDragging：(UIScrollView *)scrollView 
 3.结束拖拽时触发
 - （void）scrollViewDidEndDragging:（UIScrollView *）scrollView willDecelerate：（BOOL）decelerate
 4.开始减速时触发
 - （void）scrollViewWillBeginingDecelerating：（UIScrollView *）scrollView
 5.结束减速时触发
 - （void）scrollViewDidEndDecelerating：（UIScrollView *）scrollView

缩放代理方法

1.完成放大缩小触发
- （void）scrollViewDidEndZooming：（UIScrollView *）scrollView withView：（UIView *）view atScale：（float）scale
2.指定某个UIScrollView的子视图可以被放大缩小
- （UIView *）viewForZoomingInScrollView：（UIScrollView *）scrollView

UIPageControl

UIPageControl与UILabel相似
用于指示当前第几页(代码)
通常与UIScrollView配合使用

常用属性

1.当前页
currentPage
2.指定页面的个数
numberOfPages

事件触发使用的是UIControlEventsValueChanged

UIPageControl和UIScrollView相结合

通常在ScrollView滚动的时候修改pageControl的currentPage
使用场景：引导页 首页的轮播图

例题：实现轮播图
1.新建工程，创建视图控制器，指定为根视图控制器

RootViewController *rootVC = [[RootViewController alloc] init];
self.window.rootViewController = rootVC;
[rootVC release];

2.在根视图控制器中创建一个大的ScrollView 控制左右滑动，并设置相关属性

UIScrollView *bgScrollView = [[UIScrollView alloc] initWithFrame:[UIScreen mainScreen].bounds];
    bgScrollView.backgroundColor = [UIColor whiteColor];

    // 设置整页滑动
    bgScrollView.pagingEnabled = YES;

    // 设置代理
    bgScrollView.delegate = self;

    // 设置 显示的区域（滑动的范围）[这里我放入了七张图]
    bgScrollView.contentSize = CGSizeMake(kScreenWidth * 7, kScreenHeight);
    // 回弹属性
    bgScrollView.bounces = YES;
    bgScrollView.alwaysBounceVertical = YES;
    bgScrollView.alwaysBounceHorizontal = YES;
    [self.view addSubview:bgScrollView];
    [bgScrollView release];

3.循环创建小的ScrollView，放在大的ScrollView上 用于控制视图的缩放

for (int i = 1; i < 7; i++) {
        UIScrollView *smallScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake((i - 1) * kScreenWidth, 0, kScreenWidth, kScreenHeight)];
        [bgScrollView addSubview:smallScrollView];
        [smallScrollView release];

        // 设置缩放比例
        smallScrollView.minimumZoomScale = 0.5;
        smallScrollView.maximumZoomScale = 2;

        // 设置tag值
        smallScrollVoew.tag = i; 

        // 设置代理
        smallScrollView.delegate = self;

        // 添加图片
        NSString *imageName = [NSString stringWithFormat:@"%d.jpg",i];
        UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:imageName]];
        [smallScrollView addSubview:imageView];
        [imageView release];
    }

4.添加一张假图，用于图片可以实现轮播

UIScrollView *scrollViewFake = [[UIScrollView alloc] initWithFrame:CGRectMake(kScreenWidth * 6, 0, kScreenWidth, kScreenHeight)];
    scrollViewFake.delegate = self;
    scrollViewFake.minimumZoomScale = 0.5;
    scrollViewFake.maximumZoomScale = 2;

    scrollViewFake.tag = 8;

    [bgScrollView addSubview:scrollViewFake];
    [scrollViewFake release];

    UIImageView *imageViewFake = [[UIImageView alloc] initWithFrame:CGRectMake(0, 50, kScreenWidth, kScreenHeight - 100)];
    imageViewFake.image = [UIImage imageNamed:@"1.jpg"];
    [scrollViewFake addSubview:imageViewFake];
    [imageViewFake release];

4.创建pageControl控制页码

UIPageControl *pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, kScreenHeight - 50, kScreenWidth, 50)];
    pageControl.backgroundColor = [UIColor whiteColor];

    // 设置一共多少页 以及当前显示第几页
    pageControl.numberOfPages = 6;
    pageControl.currentPage = 0;

    // 设置tag值
    pageControl.tag = 100;

    // 设置选中 和 未选中 颜色
    pageControl.pageIndicatorTintColor = [UIColor yellowColor];
    pageControl.currentPageIndicatorTintColor = [UIColor purpleColor];

    // 添加点击事件
    [pageControl addTarget:self action:@selector(pageControlClick:) forControlEvents:(UIControlEventValueChanged)];
    [self.view addSubview:pageControl];
    [pageControl release];

}
// 实现pageControl的点击事件
- (void)pageControlClick:(UIPageControl *)pageControl
{
    // 取出大的 更改其偏移量
    UIScrollView *bgScrollView = (UIScrollView *)self.view.subviews[0];
    [bgScrollView setContentOffset:CGPointMake(kScreenWidth * （pageControl.currentPage + 1）, 0) animated:YES];
}

5.连接pageControl的代理方法

// 图片停止减速时 触发
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    // 注意： 这时 触发代理方法的是大的scrollView
    // 通过偏移量的x坐标 来关联currentPage
    UIPageControl *pageControl = (UIPageControl *)[self.view viewWithTag:100];
    CGFloat x = scrollView.contentOffset.x;
    NSInteger a = x / kScreenWidth;
    if (a == 0) {

        pageControl.currentPage = 6;
    } else
    {
        pageControl.currentPage = a - 1;
    }

// 每个图片都可以放大缩小,并且翻到第二张图时,再翻回来就变成原来的大小
for (int i = 1; i < 8; i++) {
        UIScrollView *scrollView = (UIScrollView *)[self.view viewWithTag:i];
        if (scrollView.zoomScale != 1) {
            [scrollView setZoomScale:1 animated:YES];
            scrollView.center = self.view.center;
        }
    }  
}

5.实现缩放的方法

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
    // 指定要缩放的视图
    // 触发这个方法的是小的scrollView
    return scrollView.subviews[0];
}

6.缩放结束的方法（保证图片中心点与视图中心点保持一致）

- (void)scrollViewDidZoom:(UIScrollView *)scrollView
{
    UIImageView *imageView = (UIImageView *)scrollView.subviews[0];
    imageView.center = self.view.center;
}

7.视图一动就会触发的方法(当向左移动到假图时，设置其偏移量至原点，到达第一张图。当从第一张向右移动时，设置其偏移量到达最后一张图)

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    UIScrollView *bgscrollView = (UIScrollView *)self.view.subviews[0];
    if (scrollView == bgscrollView) {
        if (scrollView.contentOffset.x < 0) {
            [scrollView setContentOffset:CGPointMake(kScreenWidth * 6, 0) animated:NO];
    }
        if (scrollView.contentOffset.x > kScreenWidth * 6) {
            [scrollView setContentOffset:CGPointMake(0, 0) animated:NO];
        }

    }
}

8.添加计时器 实现轮播
- (void)timer:(NSTimer *)timer
{
UIScrollView bgScrollView = (UIScrollView )self.view.subviews[0];

// 改变contentOffSet
// 如果需要重新定位 先定位再动画， 否则直接动画
CGFloat x = bgScrollView.contentOffset.x;
CGFloat width = bgScrollView.frame.size.width;

if (width + x >= bgScrollView.contentSize.width) {

    // 先定位
    [bgScrollView setContentOffset:(CGPointMake(0, 0)) animated:NO];
    // 再动画
    [bgScrollView setContentOffset:(CGPointMake(width, 0)) animated:YES];

} else{

    [bgScrollView setContentOffset:(CGPointMake(x + width, 0)) animated:YES];
}
// 把pageControl写在动画里就行了。   

}
9.自动轮播

- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView
{
    UIPageControl *pageControl = (UIPageControl *)[self.view viewWithTag:100];
    // 获取偏移量
    CGFloat x = scrollView.contentOffset.x;
    CGFloat width = scrollView.frame.size.width;

    NSInteger page = x / width;

    if (page == 0) {

        pageControl.currentPage = 6;
    } else
    {
        pageControl.currentPage = page - 1;
    }

}