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