iOS轮播图片的简单实现

发表于

大多数应用中在页面的顶部可能都会用到一种轮播图片的Banner，实现这个轮播的方式有很多种，这次我说的这个方式是最简单的，但是相对也会带来快速滑动卡顿的问题。

原理

先说一下原理吧，这次的方法是使用三个UIImageView,简单的说就是每次滑动之后都跳回到最中间的imageview，然后替换显示的图片数据。

首先我们这里有三个图片，我们这里用L（左），M（中），R（右）来代替，设定UIScrollView的contentOffset刚好显示第二张图片也就是M。

logo

这其中M显示的为第一张图片，L显示的是最后一张图片，R显示的是第二张图片。

在向右滑动的时候，屏幕中显示R，这时候要进行整个轮播最重要的部分，就是改变contentoffset的位置并且更新数据。这时候我们需要把contentoffset改变成显示M的位置，然后在M中显示第二张图片，L中显示第一张图片，R中显示第三种图片。

logo

向左滑动也是同样的道理。需要注意的就是当显示第一张和最后一张的时候需要对前后的图片显示进行处理，否则会出现问题。

实现

原理差不多就是这样，现在来看一下代码要如何实现吧。

首先先创建需要的view并初始化一些参数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@interface ZZRScrollView ()<UIScrollViewDelegate>
@property (nonatomic ,strong) UIScrollView              *mainScrollView;
@property (nonatomic ,strong) UIImageView               *leftImageView;
@property (nonatomic ,strong) UIImageView               *middleImageView;
@property (nonatomic ,strong) UIImageView               *rightImageView;
@property (nonatomic ,strong) UIPageControl             *pageControl;
@property (nonatomic ,assign) CGFloat                    scrollWidth;
@property (nonatomic ,assign) CGFloat                    scrollHeight;
@property (nonatomic ,retain) NSArray                   *imagesArr;
@property (nonatomic ,assign) NSInteger                  imageNum;          //图片个数
@property (nonatomic ,assign) NSInteger                  currentIndex;      //当前状态下标
@end
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
- (instancetype)initWithFrame:(CGRect)frame;
{
    self = [super initWithFrame:frame];
    
    if(self)
    {
        _scrollWidth = frame.size.width;
        _scrollHeight = frame.size.height;
        
        
        self.mainScrollView = [[UIScrollView alloc] initWithFrame:frame];
        self.mainScrollView.pagingEnabled = YES;
        self.mainScrollView.delegate = self;
        self.mainScrollView.contentSize = CGSizeMake(_scrollWidth * 3, _scrollHeight);
        self.mainScrollView.contentOffset = CGPointMake(_scrollWidth, 0);
        self.mainScrollView.showsHorizontalScrollIndicator = NO;
        
        self.leftImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, _scrollWidth, _scrollHeight)];
        self.leftImageView.contentMode = UIViewContentModeScaleAspectFit;
        
        self.middleImageView = [[UIImageView alloc] initWithFrame:CGRectMake(_scrollWidth, 0, _scrollWidth, _scrollHeight)];
        self.middleImageView.contentMode = UIViewContentModeScaleAspectFit;
        
        self.rightImageView = [[UIImageView alloc] initWithFrame:CGRectMake(_scrollWidth * 2, 0, _scrollWidth, _scrollHeight)];
        self.rightImageView.contentMode = UIViewContentModeScaleAspectFit;
        
        self.pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(_scrollWidth/2-100, _scrollHeight - 50, 200, 50)];
        
        
        [self addSubview:self.mainScrollView];
        [self.mainScrollView addSubview:self.leftImageView];
        [self.mainScrollView addSubview:self.middleImageView];
        [self.mainScrollView addSubview:self.rightImageView];
        [self addSubview:self.pageControl];
    }
    
    
    return self;
}
- (void)setUpViewWithImageUrls:(NSArray *)aUrls
{
    _currentIndex = 0;
    _imagesArr = aUrls;
    _imageNum = [_imagesArr count];
    
    self.leftImageView.backgroundColor = [_imagesArr objectAtIndex:_imageNum-1];
    self.middleImageView.backgroundColor = [_imagesArr objectAtIndex:_currentIndex];
    self.rightImageView.backgroundColor = [_imagesArr objectAtIndex:_currentIndex+1];
    
    self.pageControl.currentPage = _currentIndex;
    self.pageControl.numberOfPages = _imageNum;
    
}

然后在UIScrollView的代理方法中进行左滑还是右滑的判断，改变当前下标值，更新页面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    if(scrollView.contentOffset.x == 0)
    {
        //每次左滑下标-1.
        _currentIndex--;
        //当到达第一张的时候
        if(_currentIndex < 0)
        {
            _currentIndex = _imageNum - 1;
        }
        
        [self upDateImageAndContentOffset];
    
    }
    
    if(scrollView.contentOffset.x == _scrollWidth * 2)
    {
        //每次又滑下标+1.
        _currentIndex++;
        //当到达最后一张的时候
        if(_currentIndex == _imageNum)
        {
            _currentIndex = 0;
        }
        [self upDateImageAndContentOffset];
    }
}
- (void)upDateImageAndContentOffset
{
    self.pageControl.currentPage = _currentIndex;
    
    self.middleImageView.backgroundColor = [_imagesArr objectAtIndex:_currentIndex];
    //如果显示的是第一张图
    if(_currentIndex == 0)
    {
        self.leftImageView.backgroundColor = [_imagesArr objectAtIndex:_imageNum-1];
    }
    else
    {
        self.leftImageView.backgroundColor = [_imagesArr objectAtIndex:_currentIndex-1];
    }
    
    //如果显示的是最后一张图
    if(_currentIndex == _imageNum-1)
    {
        self.rightImageView.backgroundColor = [_imagesArr objectAtIndex:0];
    }
    else
    {
        self.rightImageView.backgroundColor = [_imagesArr objectAtIndex:_currentIndex+1];
    }
    
    
    self.mainScrollView.contentOffset = CGPointMake(_scrollWidth, 0);
}

这样一个简单的图片轮播器就做好了。这里我用的是背景色替代图片，用图片的话稍微改一下就可以了。最后Demo在这里。

logo