iOS之两个ImageView实现图片滚动

原创作者：codingZero

导语

在不少项目中，都会有图片轮播这个功能，现在网上关于图片轮播的框架层出不穷，千奇百怪，笔者根据自己的思路，用两个imageView也实现了图片轮播，这里说说笔者的主要思路以及大概步骤，具体代码请看这里，如果觉得好用，请献上你的star。

该轮播框架的优势：

文件少，代码简洁

不依赖任何其他第三方库，耦合度低

同时支持本地图片及网络图片

可修改分页控件位置，显示或隐藏

自定义分页控件的图片，就是这么个性

自带图片缓存，一次加载，永久使用

性能好，占用内存少，轮播流畅

实际使用

我们先看demo，代码如下

将imageView添加到scrollview内容视图的中间位置

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context {   //self.currIndex表示当前显示图片的索引，self.nextIndex表示将要显示图片的索引

  //_images为图片数组

    if(change[NSKeyValueChangeNewKey] == change[NSKeyValueChangeOldKey]) return;  

    if ([change[NSKeyValueChangeNewKey] intValue] == DirecRight) {    self.otherImageView.frame = CGRectMake(0, 0, self.width, self.height);

    self.nextIndex = self.currIndex - 1;    

    if (self.nextIndex < 0) self.nextIndex = _images.count – 1;

  } else if ([change[NSKeyValueChangeNewKey] intValue] == DirecLeft){    self.otherImageView.frame = CGRectMake(CGRectGetMaxX(_currImageView.frame), 0, self.width, self.height);    

self.nextIndex = (self.currIndex + 1) % _images.count;

  }  

self.otherImageView.image = self.images[self.nextIndex];

}

通过代理方法scrollViewDidEndDecelerating来监听滚动结束，结束后，会变成以下两种情况：

此时，scrollview的偏移量为0或者2x，我们通过代码再次将scrollview的偏移量设置为x，并将currImageView的图片修改为otherImageView的图片

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {

  [self pauseScroll];

}

- (void)pauseScroll {  self.direction = DirecNone;//清空滚动方向

    //判断最终是滚到了右边还是左边

  int index = self.scrollView.contentOffset.x / x;  if (index == 1) return; //等于1表示最后没有滚动，返回不做任何操作

  self.currIndex = self.nextIndex;//当前图片索引改变

  self.pageControl.currentPage = self.currIndex;  self.currImageView.frame = CGRectMake(x, 0, x, y);  self.currImageView.image = self.otherImageView.image;  self.scrollView.contentOffset = CGPointMake(x, 0);

}

那么我们看到的还是currImageView，只不过展示的是下一张图片，如图，又变成了最初的效果