IOS 05 UIScrollView介紹 圖片輪播器

 

• 移動設備的屏幕⼤大⼩小是極其有限的,所以直接展⽰示在⽤用戶眼前的內容也至關有限

• 當展⽰示的內容較多,超出⼀一個屏幕時,⽤用戶可經過滾動⼿手勢來查看屏幕之外的內容

• 普通的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];
  }
  @end

  View Code