什么是UIScrollView
移动设备的屏幕⼤小是极其有限的,因此直接展⽰在用户眼前的内容也相当有限
当展⽰的内容较多,超出一个屏幕时,用户可通过滚动手势来查看屏幕以外的内容
UIScrollView是⼀个能够滚动的视图控件,可以⽤来展示大量的内容,并且可以通过滚动查看所有的内容
-
举例:
Snip20151112_3.png 上面是网易新闻APP的新闻滚动栏,这篇文章就是要利用UIScrollView做出这种效果
UIScrollView的基本使用
// 创建UIScrollView
UIScrollView *myScrollView = [UIScrollView alloc] init];
// 创建UIImageView
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image_01"]];
// 添加图片
[self.scrollView addSubview:imageView];
// 设置滚动范围
self.scrollView.contentSize = imageView.frame.size;
// 设置内边距(在原来内容的周边,添加内边距)
self.scrollView.contentInset = UIEdgeInsetsMake(10, 20, 40, 80);
UIScrollView的常用属性
/*表示UIScrollView内容的尺寸,滚动范围(能滚多远) **/
@property(nonatomic)CGSizecontentSize;
/*表示UIScrollView滚动的位置 **/
@property(nonatomic)CGPointcontentOffset;
/*这个属性能够在UIScrollView的4周增加额外的滚动区域,一般用来避免scrollView的内容被其他控件挡住**/
@property(nonatomic)UIEdgeInsetscontentInset;
-
用下面的图片概括一下
Snip20151112_14.png
UIScrollView的其他属性
● 设置UIScrollView是否需要弹簧效果
@property(nonatomic) BOOL bounces;
● 设置UIScrollView是否能滚动
@property(nonatomic,getter=isScrollEnabled)BOOLscrollEnabled;
● 设置UIScrollView是否显⽰示⽔水平滚动条
@property(nonatomic) BOOL showsHorizontalScrollIndicator;
● 设置UIScrollView是否显⽰示⽔垂直滚动条
@property(nonatomic) BOOL showsVerticalScrollIndicator;
利用UIScrollView实现内容的缩放
- 当⽤户在UIScrollView⾝上使用捏合手势时,UIScrollView会给代理发送一条消息,询问代理究竟要缩放⾃己内部的哪⼀个子控件(哪一块内容)
/**
* 返回一个需要进行缩放的子控件（scrollView的子控件）
*/
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
return self.imageView;
}
- 缩放的实现
- (void)viewDidLoad {
[super viewDidLoad];
// 添加图片
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"minion"]];
[self.scrollView addSubview:imageView];
self.imageView = imageView;
self.scrollView.contentSize = imageView.frame.size;
// 设置缩放比例
self.scrollView.maximumZoomScale = 2.0;
self.scrollView.minimumZoomScale = 0.2;
}
#pragma mark - <UIScrollViewDelegate>
/**
* 返回一个需要进行缩放的子控件（scrollView的子控件）
*/
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
return self.imageView;
}
利用UIScrollView实现分页功能
- 将UIScrollView的pageEnabled设置为YES,UIScrollView就会被分割成多个独立页面,里面的内容就能分页显示
- UIPageContro的常见属性
@property(nonatomic) NSInteger numberOfPages;
@property(nonatomic) NSInteger currentPage;
@property(nonatomic) BOOLhidesForSinglePage;
@property(nonatomic,retain) UIColor *pageIndicatorTintColor;
@property(nonatomic,retain) UIColor *currentPageIndicatorTintColor
Snip20151112_17.png
利用NStimer实现UIScollView的自动翻页
- (void)viewDidLoad {
[super viewDidLoad];
// 添加图片
CGFloat w = self.scrollView.frame.size.width;
CGFloat h = self.scrollView.frame.size.height;
int count = 5;
for (int i = 0; i<count; i++) {
UIImageView *imageView = [[UIImageView alloc] init];
NSString *name = [NSString stringWithFormat:@"img_0%d", i + 1];
// imageView的size为图片的size
imageView.image = [UIImage imageNamed:name];
// imageView的size为scrollView的size
imageView.frame = CGRectMake(i * w, 0, w, h);
[self.scrollView addSubview:imageView];
}
// 设置内容大小
// contentSize.height == 0 仅仅代表竖直方向上不能滚动
self.scrollView.contentSize = CGSizeMake(count * w, 0);
// 分页
// 每一页的尺寸都是跟scrollView的frame.size一样的
self.scrollView.pagingEnabled = YES;
// 设置总页数
self.pageControl.numberOfPages = count;
// 单页时自动隐藏pageControl
self.pageControl.hidesForSinglePage = YES;
#pragma mark - 定时器相关
- (void)startTimer
{
// 返回一个自动开始执行任务的定时器
self.timer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(nextPage:) userInfo:nil repeats:YES];
// 修改NSTimer在NSRunLoop中的模式：NSRunLoopCommonModes
// 主线程不管在处理什么操作，都会抽时间处理NSTimer
[[NSRunLoop mainRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
}
- (void)stopTimer
{
[self.timer invalidate];
}
// 程序一启动就会创建一条主线程
/**
* 显示下一页
*/
- (void)nextPage:(NSTimer *)timer
{
// 计算出下一页
NSInteger page = self.pageControl.currentPage + 1;
// 如果超过了最后一页
if (page == 5) {
page = 0;
}
// 让scrollView滚动到下一页
CGPoint offset = CGPointMake(page * self.scrollView.frame.size.width, 0);
[self.scrollView setContentOffset:offset animated:YES];
}
#pragma mark - <UIScrollViewDelegate>
/**
* 当scrollView滚动的时候,计算当前页码
*/
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
int page = (int)(scrollView.contentOffset.x / scrollView.frame.size.width + 0.5);
self.pageControl.currentPage = page;
}
/**
* 当用户即将开始拖拽scrollView时，停止定时器
*/
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
[self stopTimer];
}
/**
* 当用户已经结束拖拽scrollView时，开启定时器
*/
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
[self startTimer];
}
@end
