为何要再写图片轮播控件
当然图片轮播控件这种东西真是被写烂了，这里再写一次的原因有三点：一是目前已知的图片轮播控件都在重复同样的功能点（类似于简书客户端的轮播），其实开发者对于图片轮播控件还有很多其它的需求；二是目前我并没有看到比较好的代码，同时基于开发者对于轮播控件的复杂需求，代码也会变得复杂起来（上千行的代码实现）；三是我在学校里组织的兴趣小组打算同时编写iOS、Android、Web（基于JS）三个平台的代码，提供一致的特性和服务，并将其开源。
version 0.1所实现的功能和提供的特性
输入：用户提供控件的frame，控件所要播放的images
输出：一个图片轮播组件，能够定时切换图片。
详情请见需求文档
着手实现version 0.1
实现原理请参照
私有属性列表
@interface LZPPictureCarousel ()
@property (nonatomic, strong, nonnull) NSArray<UIImage *> *images;
@property (nonatomic, strong, nonnull) UIScrollView *imageScrollView;
@property (nonatomic, strong, nonnull) NSArray *imageViewArray;
@property (nonatomic, strong, nonnull) UIPageControl *pageControl;
@property (nonatomic, strong, nullable) NSTimer *timer; // null when timer is invalidate
@end
images：被展示的图片所组成的数组
imageScrollView：可滚动区域
imageViewArray：代码实现中的imageView数组
pageControl：页码指示器
timer：计时器，用于定时切换图片
为每一个私有属性提供getter，在getter中只做逻辑初始化，以imageScrollView为例
- (UIScrollView *)imageScrollView
{
if (!_imageScrollView) {
_imageScrollView = ({
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
scrollView.backgroundColor = [UIColor lightGrayColor];
scrollView.showsHorizontalScrollIndicator = NO;
scrollView.showsVerticalScrollIndicator = NO;
scrollView.bounces = NO;
scrollView.pagingEnabled = YES;
scrollView;
});
}
return _imageScrollView;
}
实例初始化逻辑
- (instancetype)initWithFrame:(CGRect)frame andImages:(nonnull NSArray<UIImage *> *)images
{
// security checking...
if (images == nil || images.count <= 0) {
return nil;
}
for (id obj in images) {
if (![obj isMemberOfClass:[UIImage class]]) {
return nil;
}
}
// custom initializer
self = [super initWithFrame:frame];
if (self) {
self.images = images;
[self customInitialization];
}
return self;
}
- (void)customInitialization
{
[self addSubview:self.imageScrollView];
[self addImageViewToScrollView];
[self addPageControl];
}
图片切换逻辑
根据设计原理，定时器触发时，scrollView要做的动作很简单，就是向左滑动一页。滑动后根据scrollView的偏移量来调整pageControl和scrollView的偏移量
- (void)moveToNextPage
{
CGFloat contentOffsetX = self.imageScrollView.contentOffset.x + self.imageScrollView.frame.size.width;
[UIView animateWithDuration:0.5 animations:^{
[self.imageScrollView setContentOffset:CGPointMake(contentOffsetX, 0)];
} completion:^(BOOL finished) {
[self adjustPageIndicatorAndContentOffset];
}];
}
- (void)adjustPageIndicatorAndContentOffset
{
NSInteger currentPage = floorf(self.imageScrollView.contentOffset.x / self.imageScrollView.frame.size.width + 0.5);
if (currentPage == 0) {
// the last page
[self.imageScrollView setContentOffset:CGPointMake(self.imageScrollView.frame.size.width * self.images.count, 0)];
self.pageControl.currentPage = self.images.count;
} else if (currentPage == self.images.count + 1) {
// the first page
[self.imageScrollView setContentOffset:CGPointMake(self.imageScrollView.frame.size.width, 0)];
self.pageControl.currentPage = 0;
} else {
self.pageControl.currentPage = currentPage - 1;
}
}
让图片动起来
定时器大法好，废话不多说，直接上代码
- (void)willMoveToSuperview:(UIView *)newSuperview
{
[self startPlaying];
}
- (void)startPlaying
{
[self.imageScrollView setContentOffset:CGPointMake(self.imageScrollView.frame.size.width, 0)];
[self.timer fire];
}
- (void)stopPlaying
{
[self.timer invalidate];
self.timer = nil;
}
性能优化
考虑定时器（及其所触发的动画）带来的性能消耗，在控件被移除或隐藏时，应该invalidate定时器
- (void)removeFromSuperview
{
[super removeFromSuperview];
[self stopPlaying];
}
- (void)setHidden:(BOOL)hidden
{
[super setHidden:hidden];
if (hidden) {
[self stopPlaying];
} else {
[self startPlaying];
}
}
- (void)dealloc
{
if (!_timer) {
[_timer invalidate];
}
}
鲁棒性
其它的文章里应该给出了使用三个imageView实现功能做到内存方面的性能优化的问题。这里因为只是0.1版本，很多需求点都还没有实现，所以暂时不考虑内存方面的优化。后续版本应该会采用合适的方案优化内存。如果你想提前弄清楚如何实现内存上的优化，你可以访问其它作者的博客，譬如如何快速封装一个轮播广告,让代码更优雅!
代码和Demo已上传至Github，欢迎大家使用。
网友评论