iOS开发>学无止境 - UIImage图片无限滚动的实现

当app须要切换显示的图片少时，可使用建立多个UIImageView，来实现多个图片切换显示；可是在图片较多时，这种作法显得很耗内存。因此如下总结了一下本身知道的几个方法与实现。

采用三个UIImageView+UIScrollView

• 在图片显示彻底（endDecelerating）时，从新设置三个UIImageView的图片内容

• 调整UIScrollView的偏移量，始终显示中间的UIImageView

若有图片一、二、三、四、5，默认存放图片五、一、2，显示中间图片1:

1. 向后滚动，显示图片2

2. 图片显示彻底时，从新设置UIImageView中的图片为图片一、二、3

3. 设置UIScrollView的偏移量，使其显示中间的UIImageView，即图片2

4. 向后滚动，显示图片3

5. 图片显示彻底时，从新设置UIImageView中的图片为图片二、三、4

6. 设置UIScrollView的偏移量，使其显示中间的UIImageView，即图片3

向前滚动同理。

以下图所示：

• 初始时显示图片1，而后向左滑动

  

  Snip20150531_26.png

• 滑动完成时显示的是图片2

  

  Snip20150531_27.png

• 在滑动完成时，修改UIImageView显示的内容以下图所示

  

  Snip20150531_28.png

• 接着上一步，当即修改UIScrollView的偏移量，使其显示中间的UIImageView，即图片2

  

  Snip20150531_29.png

  
  如上，最终结果显示的都是最中间的UIImageView，看起来像是无限个UIImageView同样

采用两个UIImageView＋UIScrollView

这个方法，和上面的方法原理是同样的。
假设使用UIV1表示始终显示的UIImageView，使用UIV2表示备份的UIImageView

• 首先，初始状态以下图所示，显示的是图片1（为了方便查看，我把UIImageView下移了，实际上和上面一排重合）

  

  初始状态

• 这时候，向右边滚动（是滚，不是滑...），UIV2就当即显示图片2，这是，在屏幕能够看见图片一、2

  

  向右滚动

• 当滚动完成时只能看见图片2，以下

  

  滚动完成

• 这是，将UIV1的图片换成图片2，同时将UIScrollView的偏移量设置到中间的位置（这个过程很快，实际看不出来有修改和移动）

  

  修改图片

   

  

  修改偏移量

• 向左滚动的状况

  

  左滚动

• 当即将UIV2的frame修改至最左边的位置，并设置图片为0

  

  左滚动修改UIV2图片并移动

• 修改完成后状况

  

  移动完成

• 修改UIV1图片为图片0，而且设置UIScrollView偏移至中间位置

  

  修改UIV1图片

   

  

使用UICollectionView

由于UICollectionView有cell重用机制，因此只须要两个cell，便可完成上面的功能，内存压力也不会太大。

设置UICollectionView的属性

UICollectionViewFlowLayout *collectionViewLayout = [[UICollectionViewFlowLayout alloc] init];
 // 设置cell间距
  collectionViewLayout.minimumLineSpacing = 0;
// 设置尺寸为view的大小
  collectionViewLayout.itemSize = self.bounds.size;
// 设置为水平滑动
  collectionViewLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;

  UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:self.bounds collectionViewLayout:collectionViewLayout];

  collectionView.delegate = self;
  collectionView.dataSource = self;
 // 设置页切换容许
  collectionView.pagingEnabled = YES;
  collectionView.bounces = NO;

对cell进行注册

[collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"tpc"];

而后根据外界传入的图片，设置数据源方法便可实现了

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 1;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return self.images.count;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"tpc" forIndexPath:indexPath];
    UIImageView *imageView = [[UIImageView alloc] initWithImage:self.images[indexPath.row]];
    imageView.frame = self.bounds;
    cell.backgroundView = imageView;

    return cell;
}

总结

对于前面两种方法，我使用了UIImageView的tag来记录对应图片的下标，因此也省去了一个变量。

获取演示代码：https://github.com/tripleCC/TPCPageScrollView

来自：tripleCC