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