UI基础知识 -- UIScrollView UIPageControl

UIScrollView

属性

1.初始化

UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:[UIScreen mainScreen].bounds];

2.加个颜色

scrollView.backgroundColor = [UIColor purpleColor];

3.设置显示内容区域(滑动的范围)

scrollView.contentSize = CGSizeMake(kScreenWidth * 3, kScreenHeight);

4.能够一页页翻

scrollView.pagingEnabled = YES;

5.设置滚动条

scrollView.showsHorizontalScrollIndicator = NO;
scrollView.showsVerticalScrollIndicator = NO;

6.设置回弹效果

三个需要一起设置:

scrollView.bounces = YES;
scrollView.alwaysBounceHorizontal = YES;
scrollView.alwaysBounceVertical = YES;

7.设置缩放比例

scrollView.minimumZoomScale = 0.5;
scrollView.maximumZoomScale = 2;

8.设置代理

需遵守 UIScrollViewDelegate 协议

scrollView.delegate = self;

9.添加tag值

scrollView.tag = 100;

10.添加一个图片

    UIImageView *imageView = [[UIImageView alloc] initWithFrame:[UIScreen mainScreen].bounds];
    UIImage *image = [UIImage imageNamed:@"1.jpg"];
    imageView.image = image;
    // 注意将imageView 加到 scrollView上
    [scrollView addSubview:imageView];
    [imageView release];

协议方法

// 滑动
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
     // NSLog(@"只要滑动 一直触发");
     // 这里可以瞬间切换scrollView 的偏移量
}

- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView
{
    // 改变偏移量的动画结束后 会触发
    NSLog(@"动画结束后触发");
}

// 缩放
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
    // 指定要缩放的视图 并且是ScrollView的子视图

    return scrollView.subviews[0];
}

- (void)scrollViewDidZoom:(UIScrollView *)scrollView
{
    NSLog(@"缩放时 一直触发");
    // 缩放时 按中心点 来缩放
    // 改变imageView的中心点
    // 让imageView的中心点 始终等于 self.view中心点
    UIImageView *image = scrollView.subviews[0];
    image.center = self.view.center;
}

- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(CGFloat)scale
{
    NSLog(@"缩放已经结束缩放");
}

// 拉拽
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    NSLog(@"将要开始拖拽");
}

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    NSLog(@"已经结束拖拽");

}



// 减速
- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView
{
    NSLog(@"将要开始减速");
}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    // 最终图片停止在这个方法
    NSLog(@"已经结束减速");
    // 此处能写改变UIPageControl当前页数的方法



}

方法

以某个动画切换滚动视图偏移量

- (void)setContentOffset:(CGPoint)contentOffset animated:(BOOL)animated;

UIPageControl

// 初始化pageControl
    UIPageControl *pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, kScreenHeight - 50, kScreenWidth, 50)];
    pageControl.backgroundColor = [UIColor brownColor];
// 设置一共有多少页
    pageControl.numberOfPages = 5;
// 设置当前显示第几页
    pageControl.currentPage = 1;
// 设置选中和未选中颜色
    pageControl.pageIndicatorTintColor = [UIColor blueColor];
    pageControl.currentPageIndicatorTintColor = [UIColor yellowColor];
// 添加点击事件
    [pageControl addTarget:self action:@selector(pageControlAction:) forControlEvents:UIControlEventValueChanged];
// 不能加载图片上 否则会被划走
    [self.view addSubview:pageControl];
    [pageControl release];
}

UIScrollView UIPageControl综合使用

// 要实现每一张图片都能够进行缩放
// 缩放是scrollView的方法 要指定一个子视图进行缩放 要保证 一个scrollView就一个子视图
// 只有这样 才能保证 缩放互不影响
// 这时候 需要的结构:
// 先创建一个 大的scrollView 专门控制左右滑动
// 大的scrollView 上面 再创建许多小的scrollView
// 利用这个小的scrollView 来控制 上面视图进行缩放

// 创建大scrollView
    UIScrollView *bgScrollView = [[UIScrollView alloc] initWithFrame:[UIScreen mainScreen].bounds];
    bgScrollView.backgroundColor = [UIColor grayColor];
    bgScrollView.contentSize = CGSizeMake(kScreenWidth * 7, kScreenHeight * 2);
    bgScrollView.bounces = YES;
    bgScrollView.alwaysBounceHorizontal = YES;
    bgScrollView.alwaysBounceVertical = YES;
    bgScrollView.pagingEnabled = YES;
    bgScrollView.delegate = self;
    bgScrollView.tag = 100;
    bgScrollView.showsHorizontalScrollIndicator = YES;
    [self.view addSubview:bgScrollView];
    [bgScrollView release];


// 创建小scrollView

    for (int i = 1; i <= 7; i++) {
        UIScrollView *smallScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(kScreenWidth * (i - 1) , 0, kScreenWidth, kScreenHeight)];
        smallScrollView.backgroundColor = [UIColor purpleColor];
        smallScrollView.delegate = self;
        smallScrollView.minimumZoomScale = 0.5;
        smallScrollView.maximumZoomScale = 2;
        smallScrollView.tag = 1000 + i;
        UIImageView *imageView = [[UIImageView alloc] initWithFrame:[UIScreen mainScreen].bounds];
        NSString *str = [NSString stringWithFormat:@"%d.jpg",i];
        imageView.image = [UIImage imageNamed:str];
        [smallScrollView addSubview:imageView];
        [bgScrollView addSubview:smallScrollView];
        [imageView release];
        [smallScrollView release];
    }



// 创建UIPageControl
    self.pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, 600, kScreenWidth, 50)];

    self.pageControl.numberOfPages = 6;
    self.pageControl.currentPage = 0;
    self.pageControl.currentPageIndicatorTintColor = [UIColor redColor];
    [self.view addSubview:self.pageControl];
    [_pageControl release];

    [self.pageControl addTarget:self action:@selector(pageControlAction:) forControlEvents:UIControlEventTouchUpInside];
}

// 返回缩放的smallScrollView
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
    return scrollView.subviews[0];
}

// 缩放后应该实现的方法
- (void)scrollViewDidZoom:(UIScrollView *)scrollView
{
    UIImageView *imageView = (UIImageView *)scrollView.subviews[0];
    imageView.center = self.view.center;
}

// bgscrollView 滚动的每一下 都会出发下面方法
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    if (scrollView.contentOffset.x < 0) {
        [scrollView setContentOffset:CGPointMake(kScreenWidth * 6, 0) animated:NO];
    }else if (scrollView.contentOffset.x > kScreenWidth * 6 ){
        [scrollView setContentOffset:CGPointMake(0, 0) animated:NO];
    }

}


- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView
{
  // 将开始减速  
}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
// 这时触发代理方法的是大scrollView
    if (scrollView.contentOffset.x / kScreenWidth == 6) {
        self.pageControl.currentPage = 0;
    }else{
    self.pageControl.currentPage = scrollView.contentOffset.x / kScreenWidth;
    }


    for (int i = 1001; i <= 1007; i++) {
        UIScrollView *scrollView = (UIScrollView *)[self.view viewWithTag:i];
        if (scrollView.zoomScale != 1) {
            [scrollView setZoomScale:1 animated:YES];
        }
    }
}

- (void)pageControlAction:(UIPageControl *)pageControl
{
    UIScrollView *scrollView = (UIScrollView *)[self.view viewWithTag:100];
    [scrollView setContentOffset:CGPointMake(pageControl.currentPage * kScreenWidth, 0) animated:YES];
}