图片滚动js_苹果免费gif制作软件

当app需要切换显示的图片少时，可以使用创建多个UIImageView，来实现多个图片切换显示；但是在图片较多时，这种做法显得很耗内存。所以以下总结了一下自己知道的几个方法与实现。

采用三个UIImageView+UIScrollView

• 在图片显示完全（endDecelerating）时，重新设置三个UIImageView的图片内容

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

如有图片1、2、3、4、5，默认存放图片5、1、2，显示中间图片1:

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

2. 图片显示完全时，重新设置UIImageView中的图片为图片1、2、3

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

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

5. 图片显示完全时，重新设置UIImageView中的图片为图片2、3、4

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

向前滚动同理。

如下图所示：

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

  

  Snip_26.png

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

  

  Snip_27.png

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

  

  Snip_28.png

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

  

  Snip_29.png

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

采用两个UIImageView＋UIScrollView

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

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

  

  初始状态

• 这时候，向右边滚动（是滚，不是滑...），UIV2就立即显示图片2，这是，在屏幕可以看见图片1、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