UIScrollView
UIScrollView 擅长处理滑动界面和缩放界面两大功能
常用属性
一. 滚动相关
@property (nonatomic) CGPoint contentOffset;
偏移量, 设置原点的偏移@property (nonatomic) CGSize contentSize;
ScrollView内容的范围, 也就是可滑动的范围
只有contentSize大于scrollView.frame.size的时候 能够滚动@property (nonatomic) BOOL bounces;
边界回弹, 默认是YES, 只有YES的时候才能让ScrollView在边界的时候可以弹动@property (nonatomic) BOOL alwaysBounceVertical;
上下回弹 默认是NO, 让页面边缘可以在上或者下响应回弹 若为YES, 前提是bounces为YES@property (nonatomic) BOOL alwaysBounceHorizontal;
左右回弹, 默认是NO, 让页面边缘左侧或者右侧可以回弹, 前提bounces为YES@property (nonatomic,getter=isPagingEnabled) BOOL pagingEnabled;
页面弹动, 也就是整屏翻页, 让scrollView的可视区域显示完整的图片 而不是图片的一半. 前提是图片必须是从(0,0)点开始添加的. 一页的标准是ScrollView的宽度@property (nonatomic) BOOL showsHorizontalScrollIndicator;
是否显示水平方向的滚动条. 默认是YES@property (nonatomic) BOOL showsVerticalScrollIndicator;
是否显示垂直方向的滚动条. 默认是YES@property (nonatomic) BOOL scrollsToTop;
点击滚动条 回到滚动条的顶部
二.缩放相关
@property(nonatomic) CGFloat minimumZoomScale;
设置最小的缩放比例 默认为1.0@property(nonatomic) CGFloat maximumZoomScale;
设置最大的缩放比例. 注意最小和最大缩放比例数值不能相等, 否则会无法缩放! 只要两者不相等就能进行缩放(即使最大缩放比例小于最小缩放比例) 默认为1.0@property(nonatomic) CGFloat zoomScale;
变化比例, 通常用本属性的setter方法, 让子视图完成实现相应的缩放比例@property(nonatomic,readonly,getter=isZooming) BOOL zooming;
判断是否正在缩放状态@property(nonatomic) BOOL bouncesZoom;
控制缩放的时候是否会反弹 默认YES
实现缩放功能 必须先设置最小和最大缩放比例
其次要实现UIScrollViewDelegate里的
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView;
方法
只有步骤满足要求才可以实现scrollView子视图的缩放功能
常用方法:
滚动相关方法:
// 设置偏移量, 并可以指定是否带动画, 若带动画可以触发另一方法 - (void)setContentOffset:(CGPoint)contentOffset animated:(BOOL)animated;
缩放相关方法:
// 重新设置图片比例, 缩放或者放大, 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
常用属性
@property(nonatomic) NSInteger numberOfPages;
默认是0, 用于控制生成多少个代表页面的点@property(nonatomic) NSInteger currentPage;
默认是0, 用于设置当前被选中的点@property(nonatomic,retain) UIColor *pageIndicatorTintColor;
用来设置未选中点的填充色@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