IOS 05 UIScrollView介紹 圖片輪播器，iosuiscrollview

IOS 05 UIScrollView介紹 圖片輪播器，iosuiscrollview

 

• 行動裝置的螢幕⼤大⼩小是極其有限的,因此直接展⽰示在⽤使用者眼前的內容也相當有限

• 當展⽰示的內容較多,超出⼀一個螢幕時,⽤使用者可通過滾動⼿手勢來查看螢幕以外的內容

• 普通的UIView不具備滾動功能,不能顯⽰示過多的內容

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

• 在IOS中UIScrollView這個控制項還是比較常用和重要的。
• 很多時候,我們想在UIScrollView正在滾動 或 滾動到某個位置 或者 停⽌止滾動 時做⼀一些 特定的操作

• 要想完成上述功能,前提條件就是能夠監聽到UIScrollView的整個滾動過程

  • 當UIScrollView發⽣生⼀一系列的滾動操作時, 會⾃自動通知它的代理(delegate)對象,給

  它的代理髮送相應的訊息,讓代理得知它的滾動情況
  • 也就是說,要想監聽UIScrollView的滾動過程,就必須先給UIScrollView設定⼀一個代理

  對象,然後通過代理得知UIScrollView的滾動過程 

  // ⽤使用者開始拖拽時調⽤用
  - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView;
  // 滾動到某個位置時調⽤用
  - (void)scrollViewDidScroll:(UIScrollView *)scrollView;
  // ⽤使用者結束拖拽時調⽤用
  - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate; 

   

  UIScrollView的常⻅見屬性

  • @property(nonatomic)CGPointcontentOffset; ➢ 這個屬性⽤用來表⽰示UIScrollView滾動的位置

  • @property(nonatomic)CGSizecontentSize;
  ➢ 這個屬性⽤用來表⽰示UIScrollView內容的尺⼨寸,滾動範圍(能滾多遠)

  • @property(nonatomic)UIEdgeInsetscontentInset;➢ 這個屬效能夠在UIScrollView的4周增加額外的捲動區域 

  2 介紹完UIScrollView的基本屬性，下面做一個小的圖片輪播器程式：2.1程式如。 2.2這個程式上有5個圖，當滑動螢幕時，螢幕上的圖片也會跟著變化，同時導航按鍵也會跟著變動，同時如果不滑動螢幕時，每過兩秒，螢幕圖片也自己變化，程式就是這麼個功能，在很多APP中可以常看到，下面講代碼。 2.3 設計檢視，視圖比較簡單，只有一個Scroll View和一個page control,如下： 2.4 視圖設計好以後，然後匯入圖片到項目中，這裡我們簡單點做就把圖片放到項目中Imagees.xcassets中。2.5 做完這些之後，然後就要寫代碼實現功能了，第1步，建立Scroll View和page control的屬性，如何建立屬性不講了。

  //Scroll View屬性

  @property (weak, nonatomic) IBOutlet UIScrollView *ScllView;

  //pageControl屬性

  @property (weak, nonatomic) IBOutlet UIPageControl *PageControl;

  2.6 建立完視圖上的兩個控制項的屬性後，我們就要開始讀取圖片儲存然後儲存到Scroll View中了，代碼如下： //建立UIImageView在Scrool view中的位置 //W.H,Y值對是一樣的，但每個UIImageView的X值就會不一樣了 CGFloat FloatW=self.ScllView.frame.size.width; CGFloat FloatH=self.ScllView.frame.size.height; CGFloat FloatY=0; //這裡5張圖片寫死了，迴圈所有圖片 //建立UIimageView,然後設定每個UIimageView的位置， for (int i=0; i<imageCont; i++) { UIImageView *imageView=[[UIImageView alloc] init]; //計算X值， CGFloat FloatX=i*FloatW; imageView.frame=CGRectMake(FloatX, FloatY, FloatW, FloatH); NSString *imagename=[NSString stringWithFormat:@"img_0%i",i+1]; imageView.image=[UIImage imageNamed:imagename]; //把UIImageView增加到Scroll View中 [self.ScllView addSubview:imageView]; }View Code

  在這裡最主要的就是要計算每個UIiamgeView的X值了，其實X值也簡單因為每個圖片的W值和Scroll View一樣，所以每個UIiamgeView的X值就可以*ScllView.frame.size.width值就可以了。

  2.7這樣我們就把圖片全部加到視圖上的Scroll View 中了，然後就要讓Scrool View裡面的圖片可以滑動，要讓Scrool View裡面的圖片可以滑動，我們就要用到代理，用到代理就要匯入UIScrollViewDelegate，如下：

  @interface ViewController ()<UIScrollViewDelegate>

  匯入完UIScrollViewDelegate後，然後設定Scrool View相對應的屬性：

  PagingEnabled這個分頁的屬性是每一次滑動都是滑動一整個圖片，讓螢幕只能顯示一張完整的圖片，

  同時設定視圖中page control控制項的個數，當然這個個數和圖片的個數是一樣多的。

   //2.滾動視圖的內容的大小    self.ScllView.contentSize=CGSizeMake(FloatW *imageCont, 0);        //去掉水平指標    self.ScllView.showsHorizontalScrollIndicator=NO;        //設定分頁    self.ScllView.pagingEnabled=YES;        //設定pageControl顯示的頁數    self.PageControl.numberOfPages=imageCont;

  2.8 做完這些，螢幕上的圖片就可能自由的滑動了，但有個小問題是螢幕上的page control這個控制項不會當螢幕圖片變動時也跟著變動，

  這個如何?呢?這個要在代理方法中來做，如下：

  //設定代理

      self.ScllView.delegate=self;

  //代理方法//代理內建方法，視圖正在滾動的時候一直在執行-(void)scrollViewDidScroll:(UIScrollView *)scrollView{    CGFloat scrolViewW=self.ScllView.frame.size.width;            CGFloat pageCount=(self.ScllView.contentOffset.x+scrolViewW *0.5)/scrolViewW;        self.PageControl.currentPage=pageCount;}

  這樣，整個圖片播放器就OK了，下面再來做個定時播放功能，當程式起動時，自動播放，多的不說了，直接上所有代碼：如下

  #import "ViewController.h"#define imageCont 5@interface ViewController ()<UIScrollViewDelegate>//Scroll View屬性@property (weak, nonatomic) IBOutlet UIScrollView *ScllView;//pageControl屬性@property (weak, nonatomic) IBOutlet UIPageControl *PageControl;//定時器@property(strong,nonatomic)NSTimer *timer;@end@implementation ViewController//去掉手機最上面的狀態顯示-(BOOL)prefersStatusBarHidden{ return YES;}- (void)viewDidLoad{ [super viewDidLoad]; //建立UIImageView在Scrool view中的位置 //W.H,Y值對是一樣的，但每個UIImageView的X值就會不一樣了 CGFloat FloatW=self.ScllView.frame.size.width; CGFloat FloatH=self.ScllView.frame.size.height; CGFloat FloatY=0; //這裡5張圖片寫死了，迴圈所有圖片 //建立UIimageView,然後設定每個UIimageView的位置， for (int i=0; i<imageCont; i++) { UIImageView *imageView=[[UIImageView alloc] init]; //計算X值， CGFloat FloatX=i*FloatW; imageView.frame=CGRectMake(FloatX, FloatY, FloatW, FloatH); NSString *imagename=[NSString stringWithFormat:@"img_0%i",i+1]; imageView.image=[UIImage imageNamed:imagename]; //把UIImageView增加到Scroll View中 [self.ScllView addSubview:imageView]; } //2.滾動視圖的內容的大小 self.ScllView.contentSize=CGSizeMake(FloatW *imageCont, 0); //去掉水平指標 self.ScllView.showsHorizontalScrollIndicator=NO; //設定分頁 self.ScllView.pagingEnabled=YES; //設定pageControl顯示的頁數 self.PageControl.numberOfPages=imageCont; //設定代理 self.ScllView.delegate=self; [self addTime];}//建立定時器方法-(void)addTime{ self.timer=[NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(nextPage) userInfo:nil repeats:YES ]; [[NSRunLoop currentRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];}//移除計時器-(void)removeTime{ [self.timer invalidate]; self.timer = nil;}-(void)nextPage{ int page=0; if(self.PageControl.currentPage==imageCont-1) { page=0; } else { page=self.PageControl.currentPage+1; } CGPoint point=CGPointMake(page *self.ScllView.frame.size.width, 0); //設定Scroll View 要顯示的圖片 [self.ScllView setContentOffset:point animated:YES]; }//代理方法//代理內建方法，視圖正在滾動的時候一直在執行-(void)scrollViewDidScroll:(UIScrollView *)scrollView{ CGFloat scrolViewW=self.ScllView.frame.size.width; CGFloat pageCount=(self.ScllView.contentOffset.x+scrolViewW *0.5)/scrolViewW; self.PageControl.currentPage=pageCount;}-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{ //會將計時器永久關掉 [self removeTime];}-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)d{ [self addTime];}@endView Code