iOS 实现UIScrollView的无限轮播(原理)

作者 : 开心源码 本文共5889个字,预计阅读时间需要15分钟 发布时间: 2022-05-12 共95人阅读

同学们在写需求的时候一定会时常使用到UIScrollView。而说到UIScrollView,大家最先想到的一定就是它上面的无限轮播功能。苹果在UIScrollView上并没有提供相应的方法让大家实现轮播,所以就需要通过代码进行解决来实现。先上图

无限轮播效果图.gif

我先给大家讲讲其实现的原理:
我们假设使用几张图片实现轮播效果。首先,我们需要打开UIScrollView的分页滑动

/// 分页滑动_scrollView.scrollEnabled = YES;

它方便的帮助我们实现了轮播的效果,而后就需要我们来实现“无限的”轮播。接下来,我们就需要摆放图片了,在摆放图片时需要注意,我们需要在第一张图片的位置摆放最后一张图片(可能有点懵哈,不过不要焦急慢慢往下看),而后我们依次摆放图片(从第一张到最后一张),最后在所有图片的尾部我们再放上第一张图片。这样我们就多放了两张图片(分别在首尾多放了一张图)。我把对应的方法写一下:

/// 将图片放置在UIScrollView上-(void)setupImage {    /// 在UIScrollView的最前面增加一张图片    UIImageView *firstImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, self.scrollView.frame.size.height)];    /// 图片名是最后一张图片    firstImageView.image = [UIImage imageNamed:self.imageNameList.lastObject];    [self.scrollView addSubview:firstImageView];        /// 增加图片    for (NSInteger index = 0; index < self.imageNameList.count; index ++) {        /// UIScrollView上的每一张图片        UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake((index + 1) * kScreenWidth, 0, kScreenWidth, self.scrollView.frame.size.height)];        imageView.image = [UIImage imageNamed:self.imageNameList[index]];                [self.scrollView addSubview:imageView];        self.scrollView.contentSize = CGSizeMake((index + 2) * self.scrollView.bounds.size.width, 0);    }        /// 在UIScrollView的最后面增加一张图片    UIImageView *lastImageView = [[UIImageView alloc] initWithFrame:CGRectMake((self.imageNameList.count + 1) * kScreenWidth, 0, kScreenWidth, self.scrollView.frame.size.height)];    /// 图片名是第一张图片    lastImageView.image = [UIImage imageNamed:self.imageNameList.firstObject];    [self.scrollView addSubview:lastImageView];        /// 设置UIScrollView的偏移量    self.scrollView.contentSize = CGSizeMake((self.imageNameList.count + 2) * self.scrollView.bounds.size.width, 0);        /// 设置UIScrollView的起始偏移距离(将第一张图片跳过)    self.scrollView.contentOffset = CGPointMake(kScreenWidth, 0);        /// 图片总数    self.pageControl.numberOfPages = self.imageNameList.count;    self.pageControl.currentPage = 0;}

其实,假如大家看到这里,应该就会大致明白无线轮播的实现原理了。接下来就是最后一步,在UIScrollView的代理商方法里面写逻辑:判断UIScrollView的偏移量,当其滑动到首位时(显示的是最后一张图片),滑动中止,就把偏移量修改最后面图片的位置上(倒数第二张)。同理,当UIScrollView滑动到最后时(显示的是第一张图片),滑动中止,就把偏移量修改到第一张图片的位置上(正数第二张)。

#pragma mark - UIScrollViewDelegate-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {    /// 当UIScrollView滑动到第一位中止时,将UIScrollView的偏移位置改变    if (scrollView.contentOffset.x == 0) {        scrollView.contentOffset = CGPointMake(self.imageNameList.count * kScreenWidth, 0);        self.pageControl.currentPage = self.imageNameList.count;    /// 当UIScrollView滑动到最后一位中止时,将UIScrollView的偏移位置改变    } else if (scrollView.contentOffset.x == (self.imageNameList.count + 1)* kScreenWidth) {        scrollView.contentOffset = CGPointMake(kScreenWidth, 0);        self.pageControl.currentPage = 0;    } else {        self.pageControl.currentPage = scrollView.contentOffset.x / kScreenWidth - 1;    }}

ok,原理其实就是这样。在首尾多加两张图片当做占位符,而后当UIScrollView滑动到占位符的位置时,改变UIScrollView的偏移量,简单且方便。下面就是一律代码:

#import "ViewController.h"#define kScreenWidth [UIScreen mainScreen].bounds.size.width@interface ViewController () <UIScrollViewDelegate>/// 滑动控制器@property (nonatomic, strong) UIScrollView *scrollView;/// 图片数组@property (nonatomic, strong) NSArray<NSString *> *imageNameList;/// 页码控制器@property (nonatomic, strong) UIPageControl *pageControl;@end@implementation ViewController- (void)viewDidLoad {    [super viewDidLoad];        // 设置图片名的数组    self.imageNameList = @[@"image0", @"image1", @"image2", @"image3"];        // 增加图片    [self setupImage];}/// 将图片放置在UIScrollView上-(void)setupImage {    /// 在UIScrollView的最前面增加一张图片    UIImageView *firstImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, self.scrollView.frame.size.height)];    /// 图片名是最后一张图片    firstImageView.image = [UIImage imageNamed:self.imageNameList.lastObject];    [self.scrollView addSubview:firstImageView];        /// 增加图片    for (NSInteger index = 0; index < self.imageNameList.count; index ++) {        /// UIScrollView上的每一张图片        UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake((index + 1) * kScreenWidth, 0, kScreenWidth, self.scrollView.frame.size.height)];        imageView.image = [UIImage imageNamed:self.imageNameList[index]];                [self.scrollView addSubview:imageView];        self.scrollView.contentSize = CGSizeMake((index + 2) * self.scrollView.bounds.size.width, 0);    }        /// 在UIScrollView的最后面增加一张图片    UIImageView *lastImageView = [[UIImageView alloc] initWithFrame:CGRectMake((self.imageNameList.count + 1) * kScreenWidth, 0, kScreenWidth, self.scrollView.frame.size.height)];    /// 图片名是第一张图片    lastImageView.image = [UIImage imageNamed:self.imageNameList.firstObject];    [self.scrollView addSubview:lastImageView];        /// 设置UIScrollView的偏移量    self.scrollView.contentSize = CGSizeMake((self.imageNameList.count + 2) * self.scrollView.bounds.size.width, 0);        /// 设置UIScrollView的起始偏移距离(将第一张图片跳过)    self.scrollView.contentOffset = CGPointMake(kScreenWidth, 0);        /// 图片总数    self.pageControl.numberOfPages = self.imageNameList.count;    self.pageControl.currentPage = 0;}#pragma mark - UIScrollViewDelegate-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {    /// 当UIScrollView滑动到第一位中止时,将UIScrollView的偏移位置改变    if (scrollView.contentOffset.x == 0) {        scrollView.contentOffset = CGPointMake(self.imageNameList.count * kScreenWidth, 0);        self.pageControl.currentPage = self.imageNameList.count;    /// 当UIScrollView滑动到最后一位中止时,将UIScrollView的偏移位置改变    } else if (scrollView.contentOffset.x == (self.imageNameList.count + 1)* kScreenWidth) {        scrollView.contentOffset = CGPointMake(kScreenWidth, 0);        self.pageControl.currentPage = 0;    } else {        self.pageControl.currentPage = scrollView.contentOffset.x / kScreenWidth - 1;    }}#pragma mark - Get方法-(UIScrollView *)scrollView {    if (!_scrollView) {        _scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, 200)];        _scrollView.pagingEnabled = YES;        _scrollView.clipsToBounds = NO;        _scrollView.scrollEnabled = YES;        _scrollView.delegate = self;        _scrollView.bounces = NO;        _scrollView.showsHorizontalScrollIndicator = NO;        _scrollView.showsVerticalScrollIndicator = NO;                [self.view addSubview:_scrollView];    }        return _scrollView;}-(UIPageControl *)pageControl {    if (!_pageControl) {        _pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, 150, kScreenWidth, 50)];                _pageControl.pageIndicatorTintColor = [UIColor blackColor];        _pageControl.currentPageIndicatorTintColor = [UIColor grayColor];                [self.view addSubview:_pageControl];    }        return _pageControl;}@end

好了,假如大家用的是swift语言,还可以参考这篇文章:https://www.songma.com/p/0ba33e59a784

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » iOS 实现UIScrollView的无限轮播(原理)

发表回复