美文网首页
图片轮播

图片轮播

作者: 47号同学 | 来源:发表于2016-04-04 20:09 被阅读173次

    图片轮播

    图片轮播在APP中的使用常见度就不用多说。此demon主要使用到UIScrollView,NSTimer。当开始拖动UIScrollView时,NSTimer暂停使用;当UIScrollView结束拖动,NSTimer开始启动。

    1初始化轮播图片

    设置图片轮播

    CGFloat imageW = self.imageScrollView.frame.size.width;
    CGFloat imageH = self.imageScrollView.frame.size.height;
    CGFloat imageY = 0;
    
    //设置图片
    for(int i = 0;i<5;i++)
    {
        UIImageView *imageView = [[UIImageView alloc]init];
    
        CGFloat imageX = imageW * i;
    
        imageView.frame = CGRectMake(imageX, imageY, imageW, imageH);
    
        NSString *name = [NSString stringWithFormat:@"img_0%d", i + 1];
    
        imageView.image = [UIImage imageNamed:name];
    
        [self.imageScrollView addSubview:imageView];
    
    2设置UIScrollView滑动范围(不可缺少,否则不可以拖动)及一些属性

    设置内容尺寸

    CGFloat contentW = 5 * imageW;
    self.imageScrollView.contentSize = CGSizeMake(contentW, 0);
    
    //分页
    self.imageScrollView.pagingEnabled = YES;
    
    //去掉橡皮条
    
    self.imageScrollView.showsHorizontalScrollIndicator = NO;
    

    值得注意的时,如果设置了拖动范围后依然不可以多动,那就是Atuo Layout搞得鬼,这时候应该取消使用。

    QQ20160404-0.png
    3.由于UIScrollView设置为分页显示,所以使用UIPageControl来控制显示

    设置圆点个数

    self.pageConctrol.numberOfPages = 5;
    
    4.APP启动完成,开启定时器
    [self addTimer];
    
    
    /*
    *  添加定时器
    */
    - (void)addTimer
    {
        self.timer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(nextImage) userInfo:nil repeats:YES];
        [[NSRunLoop currentRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
        
    }
    
    
    - (void)nextImage
    {
        // 1.增加pageControl的页码
        int page = 0;
        if (self.pageConctrol.currentPage == 5 - 1) {
            page = 0;
        } else {
            page = self.pageConctrol.currentPage + 1;
        }
        
        // 2.计算scrollView滚动的位置
        CGFloat offsetX = page * self.imageScrollView.frame.size.width;
        CGPoint offset = CGPointMake(offsetX, 0);
        [self.imageScrollView setContentOffset:offset animated:YES];
    }
    
    
    5.UIScrollView代理办法

    -(void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView
    {

    NSLog(@"====");
    // 停止定时器(一旦定时器停止了,就不能再使用)
    [self removeTimer];
    

    }

    -(void)scrollViewDidScroll:(UIScrollView *)scrollView
    {

    // 根据scrollView的滚动位置决定pageControl显示第几页
    CGFloat scrollW = scrollView.frame.size.width;
    int page = (scrollView.contentOffset.x + scrollW * 0.5) / scrollW;
    self.pageConctrol.currentPage = page;
    

    }

    -(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
    {

    // 开启定时器
    [self addTimer];
    

    }

    -(void)removeTimer
    {

    [self.timer invalidate];
    self.timer = nil;
    

    }

    效果
    QQ20160404-1.png

    相关文章

      网友评论

          本文标题: 图片轮播

          本文链接:https://www.haomeiwen.com/subject/iotplttx.html