1. 程式人生 > >iOS 自定義圖片無限輪播控制元件

iOS 自定義圖片無限輪播控制元件

這裡寫圖片描述

一:簡介

圖片輪播功能在App中是一個非常常見的功能,即允許定時滾動,也允許拖拽滾動,也可以點選每張圖片觸發事件。

二:實現方式

圖片輪播功能的實現方式有很多中,

  • UIScrollView + N個UIImageView
  • UIScrollView + 3個UIImageView
  • UICollectionView
  • 其它方式

1. UIScrollView + N個UIImageView

一般初學者都會採用這種方式:UIView作為父檢視,將UIScrollView和UIPageControl新增到父檢視UIView上,然後再將所有UIImageView從頭到尾依次新增到UIScrollView上,滾動檢視的偏移量 offset.x 預設為0。

這種方式最簡單易懂,一般圖片輪播功能的圖片張數在10張以內,因為UIScrollView沒有迴圈利用的功能,假如圖片超過10張有很多張(比如100個)那麼就要建立100個UIImageView,這是比較浪費記憶體的,顯然這種方式只能玩玩不能用於實際開發當中。

這裡寫圖片描述

2. UIScrollView + 3個UIImageView

方式一當圖片個數過多的情況下會建立很多個UIImageView,為了解決這個問題,方式二將採用始終建立3個UIImageView的方式來處理。

該方式採用以UIView作為父檢視,UIScrollView和UIPageControl 作為子檢視,建立3個UIImageView依次新增到UIScrollView中, 第一張圖片顯示陣列中的最後一張圖片,第二張圖片顯示陣列中的第一張圖片,第三張圖片顯示陣列中的第二張圖片,然後再讓UIScrollView的偏移量為一個滾動檢視的寬度offset.x = ScreenWidth, 這樣使用者看到的就是從圖片的第一張開始看的,向左滑動看到第二張圖片,向右滑動看到最後一張圖片,這樣的邏輯沒毛病,這種邏輯和方式一的邏輯最大的不同是初始化時偏移了一個寬度(假如有7張圖片)

這裡寫圖片描述

當用戶向左前進時此時,此時沒有什麼特殊之處,此時滾動檢視會再偏移一個寬度,達到下面的狀態

這裡寫圖片描述

這種狀態滾動結束之後如果不進行處理的話,使用者就沒法繼續向左滾動了,因為已經滾動到頭了,所以接下來要做特殊邏輯處理:

  • 偷偷替換3張圖片:
    • 將中間的UIImageView0對應的圖片換成當前螢幕上UIImageView1的圖片images[1];
    • 將最後一個UIImageView1對應的圖片換成UIImageView0對應的圖片的下一張圖片,即images[1];
    • 將第一個UIImageView2對應的圖片換成當前螢幕顯示的圖片的上一張圖片即images[0];
      這裡寫圖片描述
  • 重置UIScrollView的偏移量為一個螢幕寬度offset.x = ScreenWidth;
    這裡寫圖片描述

經過上述2個過程,使用者又可以進行滾動了,向左向右滾動都沒有問題

注意:這種邏輯有一個需要注意的地方就是當用戶滾動臨界點,比如滾動到最後一張使用者還要往後滾動不能出現數組越界錯誤,下一張應該為第一張圖片images[0],不能出現images[7],當用戶滾動第一張時還要繼續往前滾動也不能出現數組越界錯誤, 前面的圖片應該為images[6],不能出現images[-1], 陣列越界問題需要特殊的控制

這裡寫圖片描述

這裡寫圖片描述

該示例只分析了一直向左活動的操作,像右滑動的操作邏輯是和向左的完全一樣的

UICollectionView實現方式

方式二解決了UIScrollView沒有重用機制的問題,而有重用機制的控制元件有UITableView和UICollectionView,而UITableView的滾動方向是垂直方向,可以通過對UITableView進行旋轉90°,這樣就可以水平方向了,但是UITableViewCell中的內容是反的,還要對內容再旋轉90°更正方向,這樣處理比較麻煩;而UICollectionView是支援水平方向的滾動的,所以UICollectionView即允許水平滾動又有重用機制,所以非常適合,唯一有個缺點是:UICollectionView是不支援無限輪播的,當滾動到頭就不能再滾動了,為了實現無限輪播還需要特殊處理

  1. 增加圖片陣列的元素,將原始圖片的最後一張插入到第0個位置,將原始圖片的第0個元素追加到最後
    這裡寫圖片描述

  2. 初始化時先便宜一個寬度來顯示第一張圖片
    這裡寫圖片描述

  3. 當用戶向右滾動到最前面狀態時(圖一),需要偷偷的立即將當前的偏移量定位到倒數第二個圖片(圖二),offset.x = CGPointMake((self.images.count - 1) * ScreenWidth,0), 這樣一來使用者就可以能向左滾動又可以向右滾動了
    這裡寫圖片描述
    這裡寫圖片描述

  4. 當用戶向右滾動到最後一張圖片時(圖一),需要偷偷的立即將當前偏移量定位到正數第二個位置(圖二),這樣使用者就又可以即可以向左滑動,又可以向右滑動。
    這裡寫圖片描述

這裡寫圖片描述

使用UICollectionView和使用UIScrollView的方式思想差不多