爬爬爬之路:UI(七) UIScrollView,UIScrollViewDelegate UIPageControl 方法总结

UIScrollView

UIScrollView 擅长处理滑动界面和缩放界面两大功能

常用属性

一. 滚动相关

1. @property (nonatomic) CGPoint contentOffset;
   偏移量, 设置原点的偏移
2. @property (nonatomic) CGSize contentSize;
   ScrollView内容的范围, 也就是可滑动的范围
   只有contentSize大于scrollView.frame.size的时候 能够滚动
3. @property (nonatomic) BOOL bounces;
   边界回弹, 默认是YES, 只有YES的时候才能让ScrollView在边界的时候可以弹动
4. @property (nonatomic) BOOL alwaysBounceVertical;
   上下回弹 默认是NO, 让页面边缘可以在上或者下响应回弹 若为YES, 前提是bounces为YES
5. @property (nonatomic) BOOL alwaysBounceHorizontal;
   左右回弹, 默认是NO, 让页面边缘左侧或者右侧可以回弹, 前提bounces为YES
6. @property (nonatomic,getter=isPagingEnabled) BOOL pagingEnabled;
   页面弹动, 也就是整屏翻页, 让scrollView的可视区域显示完整的图片 而不是图片的一半. 前提是图片必须是从(0,0)点开始添加的. 一页的标准是ScrollView的宽度
7. @property (nonatomic) BOOL showsHorizontalScrollIndicator;
   是否显示水平方向的滚动条. 默认是YES
8. @property (nonatomic) BOOL showsVerticalScrollIndicator;
   是否显示垂直方向的滚动条. 默认是YES
9. @property (nonatomic) BOOL scrollsToTop;
   点击滚动条 回到滚动条的顶部

二.缩放相关

1. @property(nonatomic) CGFloat minimumZoomScale;
   设置最小的缩放比例 默认为1.0
2. @property(nonatomic) CGFloat maximumZoomScale;
   设置最大的缩放比例. 注意最小和最大缩放比例数值不能相等, 否则会无法缩放! 只要两者不相等就能进行缩放(即使最大缩放比例小于最小缩放比例) 默认为1.0
3. @property(nonatomic) CGFloat zoomScale;
   变化比例, 通常用本属性的setter方法, 让子视图完成实现相应的缩放比例
4. @property(nonatomic,readonly,getter=isZooming) BOOL zooming;
   判断是否正在缩放状态
5. @property(nonatomic) BOOL bouncesZoom;
   控制缩放的时候是否会反弹 默认YES

实现缩放功能 必须先设置最小和最大缩放比例
其次要实现UIScrollViewDelegate里的
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView;
方法
只有步骤满足要求才可以实现scrollView子视图的缩放功能

常用方法:

1. 滚动相关方法:

   // 设置偏移量, 并可以指定是否带动画, 若带动画可以触发另一方法
   - (void)setContentOffset:(CGPoint)contentOffset animated:(BOOL)animated;
   

2. 缩放相关方法:

   // 重新设置图片比例, 缩放或者放大, 1表示原比例大小 不会触发另一方法
   - (void)setZoomScale:(CGFloat)scale animated:(BOOL)animated;
   

UIScrollViewDelegate

方法及触发条件介绍

/*-------------------滚动相关--------------------*/
// 只要滑动屏幕都会触发
- (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;

// 将要开始减速(结束拖拽动作时)时触发 
/* 
   可以理解为以某个速度拖拽图片的时候, 图片会有惯性, 当结束拖拽的时候
   图片会根据惯性继续向拖拽方向移动, 但是移动速度开始慢慢减缓
*/
- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView;

// 已经结束减速(图片完全静止, 本方法才是完全停止的触发方法而不是停止拖动方法)
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView;

// 利用带动画的设置偏移量方法, 在动画结束的时候触发本方法
- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView;


/* 状态大致步骤分为
   1. 将要开始拖拽
   2. 正在拖拽(滑动屏幕)
   3. 将要结束拖拽
   4. 已经结束拖拽
   5. 将要开始减速
   6. 已经结束减速
   6个步骤是环环相扣的
   第七个方法是独立出来响应setContentOffset:animated:方法的.
*/

/*-------------------缩放相关--------------------*/

// 指定返回一个要缩放的子视图 完成缩放功能必须实现的方法
// 通常写法类似于 return scrollView.subviews[0];
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView;

// 将要开始缩放时触发
- (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(UIView *)view;

// 图片缩放过程中触发
- (void)scrollViewDidZoom:(UIScrollView *)scrollView;

// 已经结束缩放触发
- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(CGFloat)scale;

/*  
    步骤分为以下三步:
    1. 将要开始缩放
    2. 正在缩放
    3. 已经结束缩放
    仅有三个步骤.
*/

/*-------------------独立方法--------------------*/

// 是否可以快速跳转到顶部
- (BOOL)scrollViewShouldScrollToTop:(UIScrollView *)scrollView;

// 跳回顶部触发
- (void)scrollViewDidScrollToTop:(UIScrollView *)scrollView;

---

UIPageControl

常用属性

1. @property(nonatomic) NSInteger numberOfPages;
   默认是0, 用于控制生成多少个代表页面的点
2. @property(nonatomic) NSInteger currentPage;
   默认是0, 用于设置当前被选中的点
3. @property(nonatomic,retain) UIColor *pageIndicatorTintColor;
   用来设置未选中点的填充色
4. @property(nonatomic,retain) UIColor *currentPageIndicatorTintColor;
   用来设置选中的点的填充色

主要方法

同其他UIControl类的子类相同

- (void)addTarget:(id)target action:(SEL)action forControlEvents:(UIControlEvents)controlEvents;
// 响应的事件为 UIControlEventValueChanged

---

UIScrollView和UIPageControl结合使用:

需求: 要求实现一个相册, 显示的图片要和PageControl的点一一对应. 且可以对每张图片进行缩放操作, 不受其他图片影响
要点:
1. 在pageControl的响应方法里让图片偏移到pageControl对应的图片位置
2. 由于要求图片可以独立进行缩放不受其他图片影响. 所以需要每个图片都对应一个UIScrollView, 并将这些ScrollView放在一个总得ScrollView上

// 设置根视图控制器为RootViewController
// RootViewController.m 中实现
#import "RootViewController.h"
#define kScreenHeight [UIScreen mainScreen].bounds.size.height
#define kScreenWidth [UIScreen mainScreen].bounds.size.width

@interface RootViewController () <UIScrollViewDelegate>
// 便于处理, 将根ScrollView和pageControl设为属性
@property (nonatomic, retain) UIScrollView *scroll;
@property (nonatomic, retain) UIPageControl *page;
@end

@implementation RootViewController

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

- (void)viewDidLoad {
    [super viewDidLoad];

    // 设置总scroll的大小
    self.scroll = [[UIScrollView alloc] initWithFrame:self.view.bounds];
    [self.view addSubview:self.scroll];
    self.scroll.tag = 1000; // 设置tag
    // 共4张图片, 设置可滑动区域为4个界面大小, 横向排列.
    self.scroll.contentSize = CGSizeMake(kScreenWidth * 4, kScreenHeight);
    // 设置页面弹动
    self.scroll.pagingEnabled = YES;
    // 关闭滚动条
    self.scroll.showsHorizontalScrollIndicator = NO;
    self.scroll.showsVerticalScrollIndicator = NO;
    // 关闭边缘弹动
    self.scroll.bounces = NO;
    // 给总的scrollView设置代理
    self.scroll.delegate = self;

    // 在scrollView上再铺放若干小的scrollview 在小的scrollview上铺设imageView 这样才能保证单独操作一张image不影响其他image
    for (int i = 0; i < 4; i++) {
        // 将小的ScrollView添加在总的scrollView上, 并和imageView对应
        UIScrollView *temp = [[UIScrollView alloc] initWithFrame:CGRectMake(i * kScreenWidth, 0, kScreenWidth, kScreenHeight)];
        // 关闭滚动条
        temp.showsVerticalScrollIndicator = NO;
        temp.showsHorizontalScrollIndicator = NO;

        // 添加图片
        UIImageView *imageView = [[UIImageView alloc] initWithFrame:[UIScreen mainScreen].bounds];
        imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"image%d.jpg", i + 1]];
        [temp addSubview:imageView];
        [imageView release];

        // 设置最小和最大的缩放比例
        temp.minimumZoomScale = 0.5;
        temp.maximumZoomScale = 2;
        // 给小的scrollView设置代理
        temp.delegate = self;
        [self.scroll addSubview:temp];
        [temp release];
    }
    [_scroll release];

    // 添加pageControl
    self.page = [[UIPageControl alloc] initWithFrame:CGRectMake(0, kScreenHeight - 30, kScreenWidth, 30)];
    // 设置页数为4
    self.page.numberOfPages = 4;
    // 初始值为0
    self.page.currentPage = 0;
    // 设置当前页面点颜色
    self.page.currentPageIndicatorTintColor = [UIColor yellowColor];
    // 设置为选中页面点颜色
    self.page.pageIndicatorTintColor = [UIColor grayColor];

    // 为page添加响应方法
    [self.page addTarget:self action:@selector(pageAction:) forControlEvents:(UIControlEventValueChanged)];
    [self.view addSubview:self.page];
    [_page release];
}

// 实现响应page值变化的方法
- (void)pageAction:(UIPageControl *)page {
    CGPoint point;
    // 计算偏移的横坐标
    point.x = page.currentPage * kScreenWidth;
    point.y = 0;
    // 改变大的scrollView的偏移量
    [self.scroll setContentOffset:point animated:YES];
}

// 大的scrollView响应的代理方法
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
    // 遍历每个小scrollView, 让每个小scrollView都还原各自的图片大小
    // 用if判断 隔绝小的scrollView响应本方法时候导致的崩溃问题
    if (scrollView.tag == self.scroll.tag) {
    // 由于小scrollView是直接放在总的scrollView上的, 可以直接取出
        NSArray *array = scrollView.subviews;
        for (UIScrollView *temp in array) {
            [temp setZoomScale:1 animated:YES];
        }
    }

}
// 大的scrollView响应的代理方法
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    self.page.currentPage = (scrollView.contentOffset.x) / kScreenWidth;
}


// 小的scrollView响应的代理方法
- (void)scrollViewDidZoom:(UIScrollView *)scrollView {
    // 保证在对图片缩放的时候, 图片永远居中显示
    UIImageView *view = scrollView.subviews[0];
    view.center = self.view.center;
}
// 小的scrollView响应的代理方法
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
    return scrollView.subviews[0];
}

@end