LOGO  随机  美联社  函数  字符  H1  机场  圆角

您所在的位置:小祥子 » 编程 » IOS » 正文

IOS UIScrollView介绍 图片轮播器

时间:2015-07-06 编辑:apecoder 来源:Cnblogs
  • 移动设备的屏幕?大?小是极其有限的,因此直接展?示在?用户眼前的内容也相当有限

  • 当展?示的内容较多,超出?一个屏幕时,?用户可通过滚动?手势来查看屏幕以外的内容

  • 普通的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                                        
关键词:IOS ol 图片