无限轮播图

作者: Mr丶炎 | 来源:发表于2016-07-16 16:00 被阅读62次
    无限轮播图.png

    特别注意这个bug,第一次显示最后一张! 加上这句后,第一张就对应了

    _scrollView.contentOffset = CGPointMake(width, 0);
    

    思路:
    用三个imageView,左中右,进行无限滑动!用currentNumber记录当前显示的页数,这里

    当我们滑动到第一张的时候,左边应该显示最后一张图片, 下面这句就完美做到了

    (_currentNumber - 1 + _imageNames.count) % _imageNames.count
    

    当我们滑动到第最后一张的时候,右边应该显示第一张图片, 下面这句也完美做到了

    (_currentNumber + 1) % _imageNames.count;
    

    源码如下

    #import "MyScrollView.h"
    
    @interface MyScrollView ()<UIScrollViewDelegate>
    /** 滑动视图 */
    @property(nonatomic,strong)UIScrollView *scrollView;
    /** 分页控件 */
    @property(nonatomic, strong)UIPageControl *pageControl;
    /** 左边视图 */
    @property(nonatomic, strong)UIImageView *leftImageView;
    /** 中间视图 */
    @property(nonatomic, strong)UIImageView *middleImageView;
    /** 右边视图 */
    @property(nonatomic, strong)UIImageView *rightImageView;
    /** 当前页 */
    @property(nonatomic, assign)NSInteger currentNumber;
    /** 定时器 */
    @property (nonatomic, strong) NSTimer *timer;
    /** 手势识别器 */
    @property (nonatomic, strong) UITapGestureRecognizer *tapGesture;
    
    
    @end
    
    
    @implementation MyScrollView
    
    -(instancetype)initWithFrame:(CGRect)frame {
        
        if (self = [super initWithFrame:frame]) {
            
        }
        
        return self;
    }
    
    
    -(void)setImageNames:(NSArray *)imageNames {
        
        _imageNames = imageNames;
        
        //创建子控件
        [self creatSubViews];
        
        [self startTimer];
    }
    
    #pragma mark - 1.创建子视图
    -(void)creatSubViews {
        
        CGFloat width = self.frame.size.width;
        CGFloat height = self.frame.size.height;
        
        _scrollView = [[UIScrollView alloc] initWithFrame:self.bounds];
        _scrollView.delegate = self;
        _scrollView.pagingEnabled = YES;
        _scrollView.showsHorizontalScrollIndicator = NO;
        _scrollView.showsVerticalScrollIndicator = NO;
        _scrollView.contentSize = CGSizeMake(width * 3, height);
        _scrollView.contentOffset = CGPointMake(width, 0);
        [self addSubview:_scrollView];
        
        //创建分页控件
        _pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, self.frame.size.height - 30, width, 30)];
        
        _pageControl.numberOfPages = _imageNames.count;
        _pageControl.currentPage = 0;
        
        _pageControl.pageIndicatorTintColor = [UIColor whiteColor];
        
        _pageControl.currentPageIndicatorTintColor = [UIColor grayColor];
        
        [self addSubview:_pageControl];
    
        
        //3.创建左中右三个图片视图
        _leftImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, width, height)];
        
        _middleImageView = [[UIImageView alloc] initWithFrame:CGRectMake(width, 0, width, height)];
        
        _rightImageView = [[UIImageView alloc] initWithFrame:CGRectMake(width *2 , 0, width, height)];
        
        
        [_scrollView addSubview:_leftImageView];
        [_scrollView addSubview:_middleImageView];
        [_scrollView addSubview:_rightImageView];
        
        //设置单击手势
        _tapGesture = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(handleTap:)];
        _tapGesture.numberOfTapsRequired = 1;
        _tapGesture.numberOfTouchesRequired = 1;
        [_scrollView addGestureRecognizer:_tapGesture];
        
        [self loadImage];
    }
    
    #pragma mark 单击手势
    -(void)handleTap:(UITapGestureRecognizer*)sender
    {
        // 判断代理有没有这个方法
        if ([self.delegate respondsToSelector:@selector(didClickPage:atIndex:)]) {
            [self.delegate didClickPage:self atIndex:_currentNumber];
        }
    }
    
    -(void)loadImage {
        
        _middleImageView.image = [UIImage imageNamed:_imageNames[_currentNumber]];
        
        
        NSInteger leftIndex = (_currentNumber - 1 + _imageNames.count) % _imageNames.count;
        _leftImageView.image = [UIImage imageNamed:_imageNames[leftIndex]];
        
        
        NSInteger rightIndex = (_currentNumber + 1) % _imageNames.count;
        _rightImageView.image = [UIImage imageNamed:_imageNames[rightIndex]];
    
        
        // 设置分页控件的当前页数
        _pageControl.currentPage = _currentNumber;
    }
    
    
    #pragma mark - UIScrollViewDelegate
    -(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
        
        //1.判断滑动方向
        if (scrollView.contentOffset.x > scrollView.bounds.size.width) {//向左滑动
            
            _currentNumber = (_currentNumber + 1) % _imageNames.count;
            
        }else if(scrollView.contentOffset.x < scrollView.bounds.size.width){ //向右滑动
            _currentNumber = (_currentNumber - 1 + _imageNames.count) % _imageNames.count;
            
        }
        
        [self loadImage];
        
        scrollView.contentOffset = CGPointMake(_scrollView.bounds.size.width, 0);
        
    }
    
    
    - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
        [self stopTimer];
    }
    
    - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
        [self startTimer];
    }
    
    #pragma mark - 定时器方法
    - (void)stopTimer {
        [self.timer invalidate];
        self.timer = nil;
    }
    
    - (void)startTimer {
        
        self.timer =  [NSTimer scheduledTimerWithTimeInterval:1.5 target:self selector:@selector(nextPage) userInfo:nil repeats:YES];
        
        [[NSRunLoop mainRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
        
    }
    
    /** 下一页 */
    - (void)nextPage {
        
        // 说明向左在滑动
        _currentNumber = (_currentNumber + 1) % _imageNames.count;
        
        [self loadImage];
        
        //a) 偏移量设置
        _scrollView.contentOffset = CGPointMake(self.scrollView.frame.size.width, 0);
        
    }
    @end
    

    相关文章

      网友评论

        本文标题:无限轮播图

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