ScrollView的循环滚动

做很多项目的时候，会有广告轮播图的需求。一般我们只需要用一个ScrollView就可以实现。但是我们平时的做法是有多少个轮播页就生成多少对象，这样子做比较浪费资源。最近我在模仿网云音乐的时候发现网易云音乐下面的ToolBar是可以左右滑动切歌的。如果当前歌单有100首歌甚至更多，我们去创建多个View就比较耗费资源。遇到这种时候我们其实可以只创建三个 View，重复利用比较节省资源。
首先创建ScrollView，用来轮播的三个View，还有一个记录轮播图个数的全局变量。

声明对象.png

创建一个记录当前页的index对象

CurrentIndex.png

初始化这些对象

- (void)initSubViewWithModelArr:(NSMutableArray<PlayerToolsModel *> *)modelArr{
/* 
使用这个方法 初始化的时候
左边的View放的是数组里面最后的图
中间的View放的是数组里面第一张图
第三个View放数组第二张图
*/
    [self layoutIfNeeded];
    _imageCount = modelArr.count;
    _currentIndex = 0;
    
    _modelArray = modelArr;
    // 判断轮播图的多少 如果少于2就只用一个View 不然会崩溃
    if (_imageCount >= 2) {
        _leftImageView = [UIImageView new];
        [_toolScrollView addSubview:_leftImageView];
        [_leftImageView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.width.height.mas_offset(40);
            make.left.equalTo(self.toolScrollView).offset(5 + 0*self.toolScrollView.frame.size.width);
            make.centerY.equalTo(self.toolScrollView);
        }];
        _leftImageView.image = [UIImage imageNamed:modelArr.lastObject.musicImageStr];
        _leftImageView.layer.cornerRadius = 20;
        _leftImageView.layer.masksToBounds = YES;
        
        _rightImageView = [UIImageView new];
        [_toolScrollView addSubview:_rightImageView];
        [_rightImageView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.width.height.mas_offset(40);
            make.left.equalTo(self.toolScrollView).offset(5 + 2*self.toolScrollView.frame.size.width);
            make.centerY.equalTo(self.toolScrollView);
        }];
        _rightImageView.image = [UIImage imageNamed:modelArr[1].musicImageStr];
        _rightImageView.layer.cornerRadius = 20;
        _rightImageView.layer.masksToBounds = YES;
        // 设置ScrllView的画布大小 
        _toolScrollView.contentSize = CGSizeMake((3 * _toolScrollView.frame.size.width) , 60);
    }
    else{
        _toolScrollView.contentSize = CGSizeMake((_imageCount * _toolScrollView.frame.size.width) , 60);
    }
    
    _centerImageView = [UIImageView new];
    [_toolScrollView addSubview:_centerImageView];
    [_centerImageView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.width.height.mas_offset(40);
        make.left.equalTo(self.toolScrollView).offset(5 + 1*self.toolScrollView.frame.size.width);
        make.centerY.equalTo(self.toolScrollView);
    }];
    _centerImageView.image = [UIImage imageNamed:modelArr[0].musicImageStr];
    _centerImageView.layer.cornerRadius = 20;
    _centerImageView.layer.masksToBounds = YES;
      //  设置ScrollView滚动到中间的View
    [self setScrollViewContentOffsetCenter];
}

随时保持ScrollView滚动到中间的View

/* 把scrollView 偏移到中心位置 **/
- (void)setScrollViewContentOffsetCenter {
    [self.toolScrollView setContentOffset:CGPointMake(CGRectGetWidth(self.toolScrollView.bounds), 0) animated:NO];
}

最主要的方式是重写CurrentIndex方法

// 重写 setCurrent 方法
- (void)setCurrentIndex:(NSInteger)currentIndex {
    if (_currentIndex != currentIndex) {
        
        _currentIndex = currentIndex;
        
        NSInteger leftImageIndex = (currentIndex+_imageCount-1)%_imageCount;
        NSInteger rightImageIndex= (currentIndex+1)%_imageCount;
        // 重新给三个View赋值，这是最重要的一步
        _centerImageView.image = [UIImage imageNamed:self.modelArray[currentIndex].musicImageStr];
        _leftImageView.image   = [UIImage imageNamed:self.modelArray[leftImageIndex].musicImageStr];
        _rightImageView.image  = [UIImage imageNamed:self.modelArray[rightImageIndex].musicImageStr];
        [self setScrollViewContentOffsetCenter];
    }
}

我做的低配版网易云音乐下面的ToolBar左右滑动的效果
Demo代码在Center>View>PlayerToolsTabbarView文件里面
链接:https://pan.baidu.com/s/1okVQ0xzXd5L2Rm6KeRtG9Q 密码:umwk