ios開發-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