随意细解：UI -- UIScrollView、UIPageControl

最新推荐文章于 2016-09-12 10:35:42 发布

M_MU_U

最新推荐文章于 2016-09-12 10:35:42 发布

阅读量592

点赞数

分类专栏： UI 文章标签： ui

本文链接：https://blog.csdn.net/m_mu_u/article/details/49914405

版权

UI 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

UIScrollView

UIScrollView是可以滚动的view，是所有滚动视图的基类。

属性

contentSize

定义内容区域⼤⼩，决定是否能够滑动
contentOffset

视图左上⾓距离坐标原点的偏移量
scrollsToTop

滑动到顶部（点状态条的时候）
pagingEnabled

是否整屏翻动
bounces

边界是否回弹
scrollEnabled

是否能够滚动
showsHorizontalScrollIndicator

控制是否显⽰⽔平⽅向的滚动条
showVerticalScrollIndicator

控制是否显⽰垂直⽅向的滚动条
alwaysBounceVertical

控制垂直⽅向遇到边框是否反弹
alwaysBounceHorizontal

控制⽔平⽅向遇到边框是否反弹
minimumZoomScale

缩⼩的最⼩⽐例
maximumZoomScale

放⼤的最⼤⽐例
zoomScale

设置变化⽐例
zooming

判断是否正在进⾏缩放反弹
bouncesZoom

控制缩放的时候是否会反弹

代码演示

UIScrollView *scrollView = [[UIScrollView alloc]initWithFrame:[UIScreen mainScreen].bounds];
    scrollView.backgroundColor = [UIColor whiteColor];
    [self.view addSubview:scrollView];
    [scrollView release];

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

    // 设置显示内容区域（滑动的范围）
    scrollView.contentSize = CGSizeMake( kScreenWidth, kScreenHeihgt);

    // 关闭滚动条的显示
    scrollView.showsHorizontalScrollIndicator = NO;
    scrollView.showsVerticalScrollIndicator = NO;

    // 设置回弹效果
    scrollView.bounces = YES;
    scrollView.alwaysBounceHorizontal = YES;
    scrollView.alwaysBounceVertical = YES;

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

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

UIScrollView代理方法

滑动时一直触发

- (void)scrollViewDidScroll:(UIScrollView *)scrollView；

缩放时一直触发

- (void)scrollViewDidZoom:(UIScrollView *)scrollView；

指定要缩放的视图，并且是ScrollView的子视图

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView；

将要开始拖拽

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView；

已经结束拖拽

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate；

将要开始减速

- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView;

已经结束减速

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView;

缩放已经结束触发

- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(CGFloat)scale;

动画结束后触发

- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView;

UIPageControl

pageControl不单独使⽤，通常与scrollView结合使⽤。

这里写图片描述

属性

numberOfPages
```
设置页数
```
currentPage
```
当前页
```
pageIndicatorTintColor
```
未选中颜色
```
currentPageIndicatorTintColor
```
选中颜色
```

代码演示

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

pageControl与scrollView结合使⽤

要实现每一张图片都能进行缩放。缩放是UIScrollView的方法，要指定一个子视图进行缩放。要保持一个UIScrollView就一个子视图，只有这样才能保证缩放互不影响。
这时候需要的结构：先创建一个大的UIScrollView，专门控制左右滑动。
大的UIScrollView上面再创建小的UIScrollView，利用小的UIScrollView来控制上面视图进行缩放。如果需要6张图，则要在第六张图后放置第一张图作为假图。当移动到假图时，改变偏移量。


#import "RootViewController.h"

#define kScreenWidth [UIScreen mainScreen].bounds.size.width
#define kScreenHeight [UIScreen mainScreen].bounds.size.height

@interface RootViewController ()

@property (nonatomic,retain) UIPageControl *page;


@end

@implementation RootViewController

- (void)dealloc
{
    [_page release];
    [super dealloc];
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.

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

    UIScrollView *bgscrollView = [[UIScrollView alloc]initWithFrame:[UIScreen mainScreen].bounds];
    [self.view addSubview:bgscrollView];
    [bgscrollView release];

    bgscrollView.contentSize = CGSizeMake(kScreenWidth * 7, kScreenHeight);

    bgscrollView.bounces = YES;
    bgscrollView.alwaysBounceHorizontal = YES;
    bgscrollView.alwaysBounceVertical = NO;
    bgscrollView.delegate = self;

    // 设置整页滑动
    bgscrollView.pagingEnabled = YES;
    bgscrollView.tag = 400;

    for (int i = 1; i < 7; i++) {
        UIScrollView *scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(kScreenWidth * (i - 1), 0, kScreenWidth, kScreenHeight)];
        // 把小的加到大的上面
        [bgscrollView addSubview:scrollView];
        [scrollView release];
        // 设置回弹效果
        scrollView.bounces = YES;
        // 打开水平回弹
        scrollView.alwaysBounceHorizontal = YES;
        // 关闭垂直回弹
        scrollView.alwaysBounceVertical = NO;
        // 设置最小缩放比例
        scrollView.minimumZoomScale = 0.5;
        // 设置最大缩放比例
        scrollView.maximumZoomScale = 2;
        // 设置代理
        scrollView.delegate = self;

        scrollView.tag = i + 300;

        UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 100, 375, 400)];
        imageView.center = self.view.center;
        NSString *str = [NSString stringWithFormat:@"%d",i ];
        imageView.image = [UIImage imageNamed:str];
        [scrollView addSubview:imageView];
        [imageView release];

    }

    UIScrollView *scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(kScreenWidth * 6, 0, kScreenWidth, kScreenHeight)];
    // 把小的加到大的上面
    [bgscrollView addSubview:scrollView];
    [scrollView release];
    scrollView.delegate = self;
    // 设置最小缩放比例
    scrollView.minimumZoomScale = 0.5;
    // 设置最大缩放比例
    scrollView.maximumZoomScale = 2;
    UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 100, 375, 400)];
    imageView.center = self.view.center;
    imageView.image = [UIImage imageNamed:@"1"];
    [scrollView addSubview:imageView];
    [imageView release];


    self.page = [[UIPageControl alloc]initWithFrame:CGRectMake(0, kScreenHeight - 50, kScreenWidth, 50)];
    self.page.numberOfPages = 6;
    self.page.currentPage = 0;
    self.page.pageIndicatorTintColor = [UIColor yellowColor];
    self.page.currentPageIndicatorTintColor = [UIColor greenColor];
    [self.view addSubview:self.page];
    [self.page release];

     [self.page addTarget:self action:@selector(pageControlClick:) forControlEvents:(UIControlEventValueChanged)];

}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    // 取出大的scrollView
    UIScrollView *view = self.view.subviews[0];
    // 判断是否是大的scrollView
    if (view == scrollView) {
         // 如果偏移量小于0，设置偏移量为最后一张图的偏移量
        if (scrollView.contentOffset.x < 0) {
            [scrollView setContentOffset:CGPointMake(6 * kScreenWidth, 0) animated:NO]；
        }
        // 如果偏移量大于最后一张图的偏移量，设置偏移量为第一张图的偏移量
        if (scrollView.contentOffset.x > kScreenWidth * 6) {
            [scrollView setContentOffset:CGPointMake(0, 0) animated:NO];
        }
    }



}
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    // 注意：这时处理代理方法的是大scrollView

    NSInteger number = scrollView.contentOffset.x / kScreenWidth;
    if (number == 6){
        number = 0;
    }
    self.page.currentPage = number;

    UIScrollView *view = self.view.subviews[0];
    NSArray *arr = view.subviews;
    for (int i = 0 ; i < 7 ; i++) {
        UIScrollView *scrollView1 = arr[i];
        if(scrollView1.zoomScale != 1){
           UIImageView *imageView = scrollView1.subviews[0];
            imageView.center = self.view.center;
            [scrollView1 setZoomScale:1 animated:NO];
        }
    }
}

- (void)pageControlClick:(UIPageControl *)pageControl
{
    UIScrollView *scroll = self.view.subviews[0];
    [scroll setContentOffset:CGPointMake(pageControl.currentPage * kScreenWidth, 0) animated:YES];
}

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

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

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end