概述
移動設備的屏幕大小是極其有限的,因此直接展示在用戶眼前的內容也相當有限.當展示的內容較多,超出一個屏幕時,用戶可通過滾動手勢來查看屏幕以外的內容,普通的UIView不具備滾動功能,不能顯示過多的內容。UIScrollView是一個能夠滾動的視圖控件,可以用來展示大量的內容,并且可以通過滾動查看所有的內容
- UIScrollView的常見屬性
- UIScrollView的常用代理方法
- UIScrollView的縮放
UIScrollView使用
基本使用
UIScrollView的用法很簡單,將需要展示的內容添加到UIScrollView中
設置UIScrollView的contentSize屬性,告訴UIScrollView所有內容的尺寸,也就是告訴它滾動的范圍
界面設計
點擊滾動,圖片往下移。實現代碼:
#import "MJViewController.h"@interface MJViewController () @property (weak, nonatomic) IBOutlet UIScrollView *scrollView; @property (weak, nonatomic) IBOutlet UIImageView *minionView; - (IBAction)scroll; @end@implementation MJViewController - (void)viewDidLoad {[super viewDidLoad];// 設置scrollView內容的尺寸(滾動的范圍) // self.scrollView.contentSize = CGSizeMake(892, 480); // self.scrollView.contentSize = self.minionView.image.size;self.scrollView.contentSize = self.minionView.frame.size; // 總體內容的范圍(滾動范圍) }- (IBAction)scroll {CGPoint offset = self.scrollView.contentOffset;offset.x += 10;offset.y += 10;[self.scrollView setContentOffset:offset animated:YES]; } @end
無法滾動的解決辦法
如果UIScrollView無法滾動,可能是以下原因:
- 沒有設置contentSize
- scrollEnabled = NO
- 沒有接收到觸摸事件:userInteractionEnabled = NO
- 沒有取消autolayout功能(要想scrollView滾動,必須取消autolayout)

常見屬性
@property(nonatomic) CGPoint contentOffset;
這個屬性用來表示UIScrollView滾動的位置
@property(nonatomic) CGSize contentSize;
這個屬性用來表示UIScrollView內容的尺寸,滾動范圍(能滾多遠)
@property(nonatomic) UIEdgeInsets contentInset;
這個屬性能夠在UIScrollView的4周增加額外的滾動區域
@property(nonatomic) BOOL bounces;
設置UIScrollView是否需要彈簧效果
@property(nonatomic,getter=isScrollEnabled) BOOL scrollEnabled;
設置UIScrollView是否能滾動
@property(nonatomic) BOOL showsHorizontalScrollIndicator;
是否顯示水平滾動條
@property(nonatomic) BOOL showsVerticalScrollIndicator;
是否顯示垂直滾動條
?
代理delegate
很多時候,我們想在UIScrollView正在滾動 或 滾動到某個位置 或者 停止滾動 時做一些特定的操作
要想完成上述功能,前提條件就是能夠監聽到UIScrollView的整個滾動過程
當UIScrollView發生一系列的滾動操作時, 會自動通知它的代理(delegate)對象,給它的代理發送相應的消息,讓代理得知它的滾動情況
也就是說,要想監聽UIScrollView的滾動過程,就必須先給UIScrollView設置一個代理對象,然后通過代理得知UIScrollView的滾動過程
實現代理分三步:
第一步:就設置UIScrollView所在的控制器 為 UIScrollView的delegate
通過代碼(self就是控制器)
self.scrollView.delegate = self;
或者 通過storyboard拖線(右擊UIScrollView)

第二步:控制器應該遵守UIScrollViewDelegate協議

第三步:實現協議中定義的相關方法
常用的代理方法有:
// 用戶開始拖拽時調用 - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView; // 滾動到某個位置時調用 - (void)scrollViewDidScroll:(UIScrollView *)scrollView; // 用戶結束拖拽時調用 - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate;
內容縮放
縮放實現步驟
- 設置UIScrollView的id<UISCrollViewDelegate> delegate代理對象
- 設置minimumZoomScale :縮小的最小比例
- 設置maximumZoomScale :放大的最大比例
- 讓代理對象實現下面的方法,返回需要縮放的視圖控件
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView;
跟縮放相關的其他代理方法
縮放完畢的時候調用
- (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(UIView *)view
正在縮放的時候調用
- (void)scrollViewDidZoom:(UIScrollView *)scrollView
實例代碼
#import "MJViewController.h"@interface MJViewController () <UIScrollViewDelegate> @property (weak, nonatomic) IBOutlet UIScrollView *scrollView; @property (weak, nonatomic) IBOutlet UIImageView *minionView; @end // 代理 \ 委托@implementation MJViewController- (void)viewDidLoad {[super viewDidLoad];// 設置內容尺寸self.scrollView.contentSize = self.minionView.frame.size;// 設置self.scrollView.delegate = self;// 設置最大和最小的縮放比例self.scrollView.maximumZoomScale = 2.0;self.scrollView.minimumZoomScale = 0.2; }/*** 當用戶開始拖拽scrollView時就會調用*/ - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {NSLog(@"開始拖拽-----"); }/*** 只要scrollView正在滾動,就會調用*/ - (void)scrollViewDidScroll:(UIScrollView *)scrollView {NSLog(@"----正在滾動--%@", NSStringFromCGPoint(scrollView.contentOffset)); }/*** 當用戶使用捏合手勢的時候會調用** @return 返回的控件就是需要進行縮放的控件*/ - (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {NSLog(@"----開始縮放");return self.minionView; }/*** 正在縮放的時候會調用*/ - (void)scrollViewDidZoom:(UIScrollView *)scrollView {NSLog(@"----正在縮放"); }- (void)didReceiveMemoryWarning {[super didReceiveMemoryWarning];// Dispose of any resources that can be recreated. }@end
效果:
實踐-圖片輪播
UIPageControl分頁
只要將UIScrollView的pageEnabled屬性設置為YES,UIScrollView會被分割成多個獨立頁面,里面的內容就能進行分頁展示
一般會配合UIPageControl增強分頁效果,UIPageControl常用屬性如下:
一共有多少頁
property(nonatomic) NSInteger numberOfPages;
當前顯示的頁碼
@property(nonatomic) NSInteger currentPage;
只有一頁時,是否需要隱藏頁碼指示器
@property(nonatomic) BOOL hidesForSinglePage;
其他頁碼指示器的顏色
@property(nonatomic,retain) UIColor *pageIndicatorTintColor;
當前頁碼指示器的顏色
@property(nonatomic,retain) UIColor *currentPageIndicatorTintColor;
NSTimer定時器
NSTimer叫做“定時器”,它的作用如下
- 在指定的時間執行指定的任務
- 每隔一段時間執行指定的任務
調用下面的方法就會開啟一個定時任務
+ (NSTimer *)scheduledTimerWithTimeInterval:(NSTimeInterval)ti target:(id)aTargetselector:(SEL)aSelectoruserInfo:(id)userInforepeats:(BOOL)yesOrNo;
每隔ti秒,調用一次aTarget的aSelector方法,yesOrNo決定了是否重復執行這個任務
通過invalidate方法可以停止定時器的工作,一旦定時器被停止了,就不能再次執行任務。只能再創建一個新的定時器才能執行新的任務
- (void)invalidate; //時鐘停止
實例代碼:
// // UYViewController.m // 圖片輪播器 // // Created by jiangys on 15/5/23. // Copyright (c) 2015年 uxiaoyuan. All rights reserved. // #import "UYViewController.h" #define kImageCount 5@interface UYViewController ()<UIScrollViewDelegate>@property (nonatomic,strong) UIScrollView *scrollView; @property (nonatomic,strong) UIPageControl *pageControl;@property (nonatomic, strong) NSTimer *timer;@end@implementation UYViewController-(UIScrollView *)scrollView {if (_scrollView==nil) {//如果為空,創建一個_scrollView=[[UIScrollView alloc] initWithFrame:CGRectMake(10, 20, 300, 130)];_scrollView.backgroundColor=[UIColor redColor];//取消彈簧效果_scrollView.bounces=NO;// 取消水平滾動條_scrollView.showsHorizontalScrollIndicator = NO;_scrollView.showsVerticalScrollIndicator = NO;// 要分頁_scrollView.pagingEnabled = YES;// contentSize_scrollView.contentSize = CGSizeMake(kImageCount * _scrollView.bounds.size.width, 0);// 設置代理_scrollView.delegate = self;[self.view addSubview:_scrollView];}return _scrollView;}- (UIPageControl *)pageControl {if (_pageControl == nil) {// 分頁控件,本質上和scrollView沒有任何關系,是兩個獨立的控件_pageControl = [[UIPageControl alloc] init];// 總頁數_pageControl.numberOfPages = kImageCount;// 控件尺寸CGSize size = [_pageControl sizeForNumberOfPages:kImageCount];_pageControl.bounds = CGRectMake(0, 0, size.width, size.height);_pageControl.center = CGPointMake(self.view.center.x, 130);// 設置顏色_pageControl.pageIndicatorTintColor = [UIColor redColor];_pageControl.currentPageIndicatorTintColor = [UIColor blackColor];[self.view addSubview:_pageControl];// 添加監聽方法/** 在OC中,絕大多數"控件",都可以監聽UIControlEventValueChanged事件,button除外" */[_pageControl addTarget:self action:@selector(pageChanged:) forControlEvents:UIControlEventValueChanged];}return _pageControl; }// 分頁控件的監聽方法 - (void)pageChanged:(UIPageControl *)page {// 根據頁數,調整滾動視圖中的圖片位置 contentOffsetCGFloat x = page.currentPage * self.scrollView.bounds.size.width;[self.scrollView setContentOffset:CGPointMake(x, 0) animated:YES]; }- (void)viewDidLoad {[super viewDidLoad];//設置圖片for (int i=0; i<kImageCount; i++) {NSString *imageName=[NSString stringWithFormat:@"img_%02d",i+1];UIImage *image=[UIImage imageNamed:imageName];UIImageView *imageView=[[UIImageView alloc] initWithFrame:self.scrollView.bounds];imageView.image=image;[self.scrollView addSubview:imageView];}//計算imageView[self.scrollView.subviews enumerateObjectsUsingBlock:^(UIImageView *imageView, NSUInteger idx, BOOL *stop) {// 調整x => origin => frameCGRect frame = imageView.frame;frame.origin.x = idx * frame.size.width;imageView.frame = frame;}];// 分頁初始頁數為0self.pageControl.currentPage = 0;// 啟動時鐘 [self startTimer];}- (void)startTimer {self.timer = [NSTimer timerWithTimeInterval:2.0 target:self selector:@selector(updateTimer) userInfo:nil repeats:YES];// 添加到運行循環 [[NSRunLoop currentRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes]; }- (void)updateTimer {// 頁號發生變化// (當前的頁數 + 1) % 總頁數int page = (self.pageControl.currentPage + 1) % kImageCount;self.pageControl.currentPage = page;// 調用監聽方法,讓滾動視圖滾動 [self pageChanged:self.pageControl]; }- (void)didReceiveMemoryWarning {[super didReceiveMemoryWarning];// Dispose of any resources that can be recreated.s }#pragma mark - ScrollView的代理方法 // 滾動視圖停下來,修改頁面控件的小點(頁數) - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {// 計算頁數int page = scrollView.contentOffset.x / scrollView.bounds.size.width;self.pageControl.currentPage = page; }/**修改時鐘所在的運行循環的模式后,抓不住圖片解決方法:抓住圖片時,停止時鐘,松手后,開啟時鐘*/ - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {// 停止時鐘,停止之后就不能再使用,如果要啟用時鐘,需要重新實例化 [self.timer invalidate]; }/*** 停止滾動,開啟時鐘*/ - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {[self startTimer]; }@end
效果:
源碼下載:點擊下載
?