什么是UIScrollView
移動設備的屏幕?小是極其有限的,因此直接展?在用戶眼前的內(nèi)容也相當有限
當展?的內(nèi)容較多,超出一個屏幕時,用戶可通過滾動手勢來查看屏幕以外的內(nèi)容
UIScrollView是?個能夠滾動的視圖控件,可以?來展示大量的內(nèi)容,并且可以通過滾動查看所有的內(nèi)容
-
舉例:
Snip20151112_3.png 上面是網(wǎng)易新聞APP的新聞滾動欄,這篇文章就是要利用UIScrollView做出這種效果
UIScrollView的基本使用
// 創(chuàng)建UIScrollView
UIScrollView *myScrollView = [UIScrollView alloc] init];
// 創(chuàng)建UIImageView
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image_01"]];
// 添加圖片
[self.scrollView addSubview:imageView];
// 設置滾動范圍
self.scrollView.contentSize = imageView.frame.size;
// 設置內(nèi)邊距(在原來內(nèi)容的周邊,添加內(nèi)邊距)
self.scrollView.contentInset = UIEdgeInsetsMake(10, 20, 40, 80);
UIScrollView的常用屬性
/*表示UIScrollView內(nèi)容的尺寸,滾動范圍(能滾多遠) **/
@property(nonatomic)CGSizecontentSize;
/*表示UIScrollView滾動的位置 **/
@property(nonatomic)CGPointcontentOffset;
/*這個屬性能夠在UIScrollView的4周增加額外的滾動區(qū)域,一般用來避免scrollView的內(nèi)容被其他控件擋住**/
@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實現(xiàn)內(nèi)容的縮放
- 當?戶在UIScrollView?上使用捏合手勢時,UIScrollView會給代理發(fā)送一條消息,詢問代理究竟要縮放?己內(nèi)部的哪?個子控件(哪一塊內(nèi)容)
/**
* 返回一個需要進行縮放的子控件（scrollView的子控件）
*/
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
return self.imageView;
}
- 縮放的實現(xiàn)
- (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實現(xiàn)分頁功能
- 將UIScrollView的pageEnabled設置為YES,UIScrollView就會被分割成多個獨立頁面,里面的內(nèi)容就能分頁顯示
- 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實現(xiàn)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];
}
// 設置內(nèi)容大小
// contentSize.height == 0 僅僅代表豎直方向上不能滾動
self.scrollView.contentSize = CGSizeMake(count * w, 0);
// 分頁
// 每一頁的尺寸都是跟scrollView的frame.size一樣的
self.scrollView.pagingEnabled = YES;
// 設置總頁數(shù)
self.pageControl.numberOfPages = count;
// 單頁時自動隱藏pageControl
self.pageControl.hidesForSinglePage = YES;
#pragma mark - 定時器相關
- (void)startTimer
{
// 返回一個自動開始執(zhí)行任務的定時器
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];
}
// 程序一啟動就會創(chuàng)建一條主線程
/**
* 顯示下一頁
*/
- (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];
}
/**
* 當用戶已經(jīng)結(jié)束拖拽scrollView時议街，開啟定時器
*/
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
[self startTimer];
}
@end
