ios開發-UI-UIScrollView，-ui-uiscrollview

ios開發-UI-UIScrollView，-ui-uiscrollview

　　[注意]轉載時請註明出處部落格園-吃唐僧肉的小悟空http://www.cnblogs.com/hukezhu/

　　1.什麼是UIScrollView

　　　　UIScrollView 是一個能夠滾動的視圖控制項,可以用來展示大量的內容,並且可以通過滾動查看所有的內容.

　　　 因為行動裝置的螢幕大小是有限的,因此直接顯示在使用者眼前的內容也相當有限.當展示的內容超過螢幕大小時,我們需要通過滾動手機螢幕來查看更多的內容,但是普通的UIView沒有支援的滾動功能,不能顯示過多的內容,所以有這個UIScrollView,可以展示大量內容.

　　2.UIScrollView的基本使用

　　　　2.1使用步驟:

• • 在storyboard中拖拽一個UIScrollView
  • 把需要滾動的內容放到UIScrollView中
  • 設定UIScrollView的contentSize屬性(滾動的範圍)

　　　　2.2出現無法滾動的原因分析:

• • 首先檢查contentSize是否設定
  • 查看其屬性scrollEnabled(為NO即無法拖動)
  • 查看其屬性userInteractionEnabled(為NO即無法拖動)　　　

　　　

　　3.UIScrollView的常見屬性

//UIScrollView常用屬性//滾動的位置 螢幕左上方的位置相對於圖片左上方的位置,圖片左上方的位置為0,0 //scrollView相對於內容的位移@property(nonatomic) CGPoint contentOffset; // default CGPointZero//滾動範圍@property(nonatomic) CGSize contentSize; // default CGSizeZero//上下左右,逆時針順序,增加邊距。預設不顯示這個距離,滾動之後才有@property(nonatomic) UIEdgeInsets contentInset;// default UIEdgeInsetsZero. add additional scroll area around content//是否啟用彈簧效果。預設啟用@property(nonatomic) BOOL bounces;// default YES. if YES, bounces past edge of content and back again//啟用滾動@property(nonatomic,getter=isScrollEnabled)BOOL scrollEnabled;//橫向捲軸@property(nonatomic) BOOL showsHorizontalScrollIndicator;// default YES. show indicator while we are tracking. fades out after tracking//縱向捲軸@property(nonatomic) BOOL showsVerticalScrollIndicator;// default YES. show indicator while we are tracking. fades out after tracking

 

 

　　4.UIScrollView的代理(delegate)

　　很多時候,我們想在UIScrollView正在滾動或者滾動到某個位置或者將要停止滾動時做某些事情,要想實現這樣的功能,前提條件就是監聽到UIScrollView的整個滾動過程,當UIScrollView發生一系列的滾動時,會自動通知它的代理對象,給它的代理髮送相應的訊息,讓代理得知他的滾動情況.也就是說,我們想要監聽UIScrollView的滾動過程,必須先給它設定一個代理對象,然後通過代理得知它的滾動過程.

　　UIScrollView中聲明了一個代理的屬性.

@property(nonatomic,assign) id<UIScrollViewDelegate>      delegate;                       // default nil. weak reference

 

　　所以,我們使用時,直接使用即可.

　　　　設定scrollView代理的步驟:

• • 首先遵守UIScrollViewDelegate協議
  • 設定代理(可以通過拖線或者代碼方式完成)
  • 實現協議中的方法

 

 

　　下面通過一個小的應用運用上面提到的知識

　　圖片輪播器(比如電商頁面上自動播放的滾動的商品簡介頁面,也就是廣告之類的):

　　　　功能分析:

• • 介面片一直進行輪播
  • 固定之間自動進入下一張
  • 使用者拖動圖片時,停止滾動輪播
  • 使用者停止拖動時,自動開始進行輪播

　　　　步驟分析:

• • 搭建UI介面(一個UIScrollView,一個UIPageControl)
  • 拖線,擷取這兩個屬性
  • 代碼建立UIImageView,添加圖片
  • 設定定時器,自動調用"下一頁"方法,實現自動跳轉

 此處,簡單介紹一下定時器:NSTimer

　　　　主要作用:在指定的時間執行指定的任務;每隔一段時間執行指定的任務

 

 

　　　　啟動定時器的兩種方法:

　　

//第一種方法//timerWithTimeInterval需要手工把timer加入到訊息迴圈中NSTimer *timer = [NSTimer timerWithTimeInterval:2.0 target:self selector: @selector(nextImage) userInfo:nil repeats:YES];NSRunLoop *loop = [NSRunLoop currentRunLoop];[loop addTimer:timer forMode:NSDefaultRunLoopMode]; //這個方法僅僅是提前執行timer要執行的方法[timer fire];//scheduledTimerWithTimeInterval自動把timer加入到訊息迴圈中NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(nextImage) userInfo:nil repeats:YES];

　通過-(void)invalidate方法可以停止定時器,但是一旦定時器被停止,就不能再次執行任務.只能再建立一個新的定時器

 

storyboard及結構

 

程式原始碼:

　　 ViewController.m

  1 //  2 //  ViewController.m  3 //  03-圖片輪播器  4 //  5 //  Created by hukezhu on 15/5/18.  6 //  7 //  8   9 #import "ViewController.h" 10  11 @interface ViewController () <UIScrollViewDelegate> 12  13 /** 14  *  scrollView屬性 15  */ 16 @property (weak, nonatomic) IBOutlet UIScrollView *scrollView; 17  18 /** 19  *  pageControl屬性 20  */ 21 @property (weak, nonatomic) IBOutlet UIPageControl *pageControl; 22  23  24 /** 25  *  聲明一個定時器屬性 26  */ 27 @property (nonatomic,strong)NSTimer *timer; 28  29 @end 30  31 @implementation ViewController 32  33 - (void)viewDidLoad { 34     [super viewDidLoad]; 35  36     //首先建立imageView,添加圖片 37     CGFloat imageW = self.scrollView.frame.size.width; 38     CGFloat imageH = self.scrollView.frame.size.height; 39     CGFloat imageY = 0; 40     for (int i = 0; i < 5; i++) { 41         UIImageView *imageView = [[UIImageView alloc]init]; 42         CGFloat imageX = i * imageW; 43         imageView.frame = CGRectMake(imageX, imageY, imageW, imageH); 44         imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"img_%02d",i+1]]; 45         [self.scrollView addSubview:imageView]; 46     } 47     //設定scrollView的contentSize 48     self.scrollView.contentSize = CGSizeMake(5 * imageW, 0); 49     //實現分頁功能 50     self.scrollView.pagingEnabled = YES; 51     //隱藏水平的 52     self.scrollView.showsHorizontalScrollIndicator = NO; 53      54      55     //拖線設定了scrollview的代理 56     self.scrollView.delegate = self; 57      58      59     //添加定時器 60     [self startTimer]; 61      62      63 } 64  65 /** 66  *  添加定時器 67  */ 68 - (void)startTimer{ 69  70     //添加一個定時器: 71     self.timer  = [NSTimer timerWithTimeInterval:2.0 target:self selector:@selector(nextPage) userInfo:nil repeats:YES]; 72      73 //    [[NSRunLoop mainRunLoop]addTimer: self.timer forMode:NSDefaultRunLoopMode]; 74     [[NSRunLoop mainRunLoop]addTimer:self.timer forMode:NSRunLoopCommonModes]; 75      76 } 77 /** 78  *  停止定時器 79  * 80  */ 81 - (void)stopTimer:(NSTimer *)timer{ 82     //停止定時器 83     [timer invalidate]; 84     //將定時器清空(因為一旦定時器被停止,就不能再次被使用,所以停止之後立即清空) 85     timer = nil; 86 } 87  88 /** 89  *  下一頁功能 90  */ 91 - (void)nextPage{ 92  93     NSInteger page = self.pageControl.currentPage; 94     if (page == self.pageControl.numberOfPages -1) { 95         page = 0; 96     }else{ 97         page ++; 98     } 99     self.pageControl.currentPage = page;100     101     //圖片跟著換102     CGFloat contentOffsetX = page * self.scrollView.frame.size.width;103 104     105     106     //動畫107     [UIView animateWithDuration:1.0 animations:^{108             self.scrollView.contentOffset = CGPointMake(contentOffsetX, 0);109     }];110 }111 112 /**113  *  使用者拖動的時候就會調用114  *115  */116 -(void)scrollViewDidScroll:(UIScrollView *)scrollView{117     118     //取出當前的contentOffset的x的值119     CGFloat offsetx = scrollView.contentOffset.x;120     //計算當前頁數,round方法,使用四捨五入121     CGFloat page = round( offsetx / scrollView.frame.size.width);122     123     if (page != self.pageControl.currentPage) {124         self.pageControl.currentPage = page;125     }126 127 }128 129 /**130  *  使用者將要開始拖拽的時候調用131  *132  */133 - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{134 135     //停止定時器136     [self stopTimer:self.timer];137     138 }139 /**140  *  使用者將要停止拖拽的時候調用141  *142  */143 - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{144 145     //開始定時器146     [self startTimer];147 }148 @end