ios图片轮播效果

一时失言乱红尘 2022-05-29 00:20 221阅读 0赞

> 代码地址如下：  
> [http://www.demodashi.com/demo/11959.html][http_www.demodashi.com_demo_11959.html]

# ImageCarousel #

简单封装的图片轮播器  
内存过大由于我加载的图片分辨率较高(4k)

## 文件目录 ##

![aA2UHSqxaQzor02KXKI.jpg][]

## 使用 ##

**初始化自定义view，并提供title和图片数组，设置控制器代理**

shufflingView *myView = [[shufflingView alloc]
                             initWithFrame:CGRectMake(0, 100, [UIScreen mainScreen].bounds.size.width,
                                                      230)];
    
    
        NSArray *picDataArray = @[ @"1", @"2", @"3", @"4", @"5" ];
        NSArray *titleDataArray = @[ @"1", @"2", @"3", @"4", @"5" ];
    
        myView.picDataArray = [picDataArray copy];
    
        myView.titleDataArray = [titleDataArray copy];
    
        myView.titleLabelTextColor =
        [UIColor colorWithRed:255/255 green:0 blue:0 alpha:1.0];
    
        myView.isAutomaticScroll = YES;
    
        myView.automaticScrollDelay = 2;
    
        myView.carouselViewStyle = ImageCarouselStyleBoth;
    
        myView.pageIndicatorTintColor = [UIColor colorWithRed:255/255 green:0/255 blue:255/255 alpha:1.0];
    
        myView.pageControlCurrentColor =
        [UIColor colorWithRed:0/255 green:255/255 blue:255/255 alpha:1.0];
    
        myView.delegate = self;
    
        myView.picDataArray = [picDataArray copy];
    
        [self.view addSubview:myView];

## 自定义view ##

typedef NS_ENUM(NSInteger, ImageCarouselStyleType) {
        ImageCarouselStyleNone,
        ImageCarouselStyleTitle,
        ImageCarouselStylePageControl,
        ImageCarouselStyleBoth
    };
    @protocol CarouselViewDelegate <NSObject>
    
    @optional
    
    - (void)didClick:(NSInteger)index;
    
    @end
    
    @interface shufflingView : UIView
    {
        float _automaticScrollDelay;
        ImageCarouselStyleType _carouselViewStyle;
    }
    @property(nonatomic, strong) NSArray *picDataArray;
    @property(nonatomic, strong) NSArray *titleDataArray;
    @property(nonatomic, weak) UIFont *titleLabelTextFont;
    @property(nonatomic, weak) UIColor *titleLabelTextColor;
    @property(nonatomic, weak) UIColor *pageIndicatorTintColor;
    @property(nonatomic, weak) UIColor *pageControlCurrentColor;
    
    // 是否自动滚动
    @property(nonatomic, assign) BOOL isAutomaticScroll;
    // 滚动时间间隔
    @property(nonatomic, assign) float automaticScrollDelay;
    /// 枚举
    @property(nonatomic, assign) ImageCarouselStyleType carouselViewStyle;
    
    @property(nonatomic, weak) id<CarouselViewDelegate> delegate;

**采用一个scrollivew和三个imageview**

// 默认滚动到中间imageview
        [_mainScrollView setContentOffset:CGPointMake(self.bounds.size.width, 0)
                                 animated:NO];
    
        // 添加三个imageView
        _leftImageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, KViewW, KViewH)];
        _rightImageView = [[UIImageView alloc]initWithFrame:CGRectMake(2*KViewW, 0, KViewW, KViewH)];
    
        _centerImageView = [[UIImageView alloc]initWithFrame:CGRectMake(KViewW, 0, KViewW, KViewH)];
        _centerImageView.userInteractionEnabled = YES;
        UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]
                                       initWithTarget:self
                                       action:@selector(scrollViewClick:)];
    
        [_centerImageView addGestureRecognizer:tap];
    
        [self.mainScrollView addSubview:_leftImageView];
        [self.mainScrollView addSubview:_rightImageView];
        [self.mainScrollView addSubview:_centerImageView];

## 核心代码 ##

**根据scrollview的偏移量来计算当前位于的imageView。然后重置左右两个image的图片**

#pragma mark - 无限滚动核心
    - (void)reloadImageViews {
        // 获取当前offset
        CGPoint scrollViewOffset = [_mainScrollView contentOffset];
        // 如果当前位于centerImageView
        if (scrollViewOffset.x == 2 * _mainScrollView.bounds.size.width) {
            if (_currentImageIndex == kImageCount - 1) {
                _currentImageIndex = 0;
            }else {
    
                _currentImageIndex = (_currentImageIndex +1) % kImageCount;
            }
    
        } else if (scrollViewOffset.x == 0) {
            if (_currentImageIndex == 0) {
                _currentImageIndex = kImageCount - 1;
            }else {
    
                _currentImageIndex = (_currentImageIndex -1) % kImageCount;
            }
    
        }
    
        _centerImageView.image =
        [UIImage imageNamed:_picDataArray[self.currentImageIndex]];
    
        // 重新设置左右图片
        _leftImageView.image =
        [UIImage imageNamed:_picDataArray[self.leftImageIndex]];
    
        _rightImageView.image =
        [UIImage imageNamed:_picDataArray[self.rightImageIndex]];
    
        _titleLabel.text = _titleDataArray[self.currentImageIndex];
        _pageControl.currentPage = self.currentImageIndex;
    
    }

**滚动过程中调整pageControl**

// MARK: - 滚动过程中
    - (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    
        CGPoint scrollViewOffset = scrollView.contentOffset;
    
        if (scrollViewOffset.x > 1.5 * _mainScrollView.bounds.size.width) {
    
            _pageControl.currentPage = self.rightImageIndex;
    
            _titleLabel.text = _titleDataArray[self.rightImageIndex];
    
        } else if (scrollViewOffset.x < 0.5 * _mainScrollView.bounds.size.width) {
    
            _pageControl.currentPage = self.leftImageIndex;
    
            _titleLabel.text = _titleDataArray[self.leftImageIndex];
        }
    
        else {
            _pageControl.currentPage = self.currentImageIndex;
    
            _titleLabel.text = _titleDataArray[self.currentImageIndex];
        }
    }

## 效果 ##

![09c30e48dbe4b8aaf176f1488f4751ce.gif][]ios图片轮播效果

> 代码地址如下：  
> [http://www.demodashi.com/demo/11959.html][http_www.demodashi.com_demo_11959.html]
> 
> 注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权

[http_www.demodashi.com_demo_11959.html]: http://www.demodashi.com/demo/11959.html
[aA2UHSqxaQzor02KXKI.jpg]: /images/20220529/435b478b69cc4f0bb1f55d0db67135b2.png
[09c30e48dbe4b8aaf176f1488f4751ce.gif]: https://storage1.cuntuku.com/2017/11/16/09c30e48dbe4b8aaf176f1488f4751ce.gif