美文网首页程序员iOS Developer
UIScrollView无限广告轮播图

UIScrollView无限广告轮播图

作者: 蜡笔小新Zzz | 来源:发表于2016-03-30 22:47 被阅读398次

    1.广告轮播图,在不同的app上都能看到这样的效果,我用两种方法实现了,给大家说下思路,第一种是:如果有5张图片,5-1-2-3-4-5-1需要7个imageview来实现,添加UIPageContrl,NSTimer等这些基础的东西,大家自己实现,这个这里只是讲下具体代码

    - (void)initWithUIScrollView{
        _scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, KScreenWidth, AppRealValue(180))];
        _scrollView.contentSize = CGSizeMake(KScreenWidth * _imageArray.count, 0);
        _scrollView.pagingEnabled = YES;
        _scrollView.bounces = NO;
        _scrollView.backgroundColor = [UIColor purpleColor];
        self.scrollView.showsHorizontalScrollIndicator = NO;
        self.scrollView.delegate = self;
        self.scrollView.contentOffset = CGPointMake(KScreenWidth, 0);
        for (int i = 0; i < _imageArray.count; i++) {
            UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(KScreenWidth * i, 0, KScreenWidth, AppRealValue(180))];
            imageView.image = [UIImage imageNamed:_imageArray[i]];
            [self.scrollView addSubview:imageView];
        }
        [self.view addSubview:self.scrollView];
    }
    

    UIScrollView的代理方法来实现图片滑动

    - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
        NSInteger page = self.scrollView.contentOffset.x / KScreenWidth;
        if (page == 0) {
            [self.scrollView setContentOffset:CGPointMake(KScreenWidth * ([_imageArray count] - 2), 0) animated:NO];
            self.pageControl.currentPage = [self.imageArray count] - 3;
        }else if (page == [self.imageArray count] -1){
            [self.scrollView setContentOffset:CGPointMake(KScreenWidth, 0) animated:NO];
            self.pageControl.currentPage = 0;
        }else{
            self.pageControl.currentPage = page - 1;
        }
    }
    

    定时器自动显示不同图片

    - (void)nextImage{
        NSInteger page = self.pageControl.currentPage;
        if (page == [self.imageArray count] - 3) {
            self.pageControl.currentPage = 0;
            [self.scrollView setContentOffset:CGPointMake(KScreenWidth, 0) animated:NO];
        }else{
            self.pageControl.currentPage = page + 1;
            [self.scrollView setContentOffset:CGPointMake(KScreenWidth * (self.pageControl.currentPage + 1), 0) animated:NO];
        }
    }
    

    上面这种方法,可能在图片比较多的时候,没有下面这种方法好,而且动画也不如下面这种
    2.第二种方法是创建3个ImageView
    设置ImageView

    - (void)setUpImageView{
        self.leftImage = [[UIImageView alloc]init];
        self.leftImage.image = [UIImage imageNamed:[_arrayImage lastObject]];
        [self.scrollView addSubview:self.leftImage];
        
        self.centerImage = [[UIImageView alloc]init];
        self.centerImage.image = [UIImage imageNamed:_arrayImage[0]];
        [self.scrollView addSubview:self.centerImage];
        
        self.rightImage = [[UIImageView alloc]init];
        self.rightImage.image = [UIImage imageNamed:_arrayImage[1]];
        [self.scrollView addSubview:self.rightImage];
    }
    

    注意:scrollView的contentSize的设置

    self.scrollView.contentSize = CGSizeMake(3 * KScreenWidth, 0);
    [self.scrollView setContentOffset:CGPointMake(KScreenWidth, 0) animated:NO];
    

    设置刷新图片

    - (void)reloadImage{
        NSInteger page = self.scrollView.contentOffset.x / KScreenWidth;
        if (page == 0)
        {
            _currentPage = ((_currentPage - 1 + _arrayImage.count) % [_arrayImage count]);
            _leftImage.image = [UIImage imageNamed:_arrayImage[(_currentPage - 1 + _arrayImage.count) % _arrayImage.count]];
            _centerImage.image = [UIImage imageNamed:_arrayImage[_currentPage]];
            _rightImage.image = [UIImage imageNamed:_arrayImage[(_currentPage + 1 + _arrayImage.count ) % _arrayImage.count]];
        }else if (page == 2){
            _currentPage = (_currentPage + 1) % _arrayImage.count;
            _leftImage.image = [UIImage imageNamed:_arrayImage[(_currentPage - 1 ) % _arrayImage.count]];
            _centerImage.image = [UIImage imageNamed:_arrayImage[_currentPage]];
            _rightImage.image = [UIImage imageNamed:_arrayImage[(_currentPage + 1 ) % _arrayImage.count]];
        }
        [self.scrollView setContentOffset:CGPointMake(KScreenWidth, 0) animated:NO];
    }
    

    UIScrollView的代理方法与定时器的图片动画

    - (void)nextImage{
        [UIView animateWithDuration:1.0 animations:^{
            _scrollView.contentOffset = CGPointMake(KScreenWidth * 2, 0);
        } completion:^(BOOL finished) {
            [self reloadImage];
        }];
        NSInteger page = self.pageControl.currentPage;
        if (page == _arrayImage.count - 1) {
            self.pageControl.currentPage = 0;
        }else{
        self.pageControl.currentPage = _currentPage + 1;
        }
    }
    #pragma mark ----UIScrollViewDelegate代理方法(停止加速时调用)
    - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
        [self reloadImage];
        self.scrollView.contentOffset = CGPointMake(KScreenWidth,0);
        self.pageControl.currentPage = _currentPage;
        NSLog(@"停止了加速,停在第%ld页",self.pageControl.currentPage + 1);
    }
    

    全部的代码都已经贴出来了,爸妈再也不用担心我不会使用图片轮播了,谢谢大家!

    相关文章

      网友评论

        本文标题:UIScrollView无限广告轮播图

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