天天看點

iOS開發UI篇—無限輪播(循環利用)

一、無限輪播

1.簡單說明

  在開發中常需要對廣告或者是一些圖檔進行自動的輪播,也就是所謂的無限滾動。

  在開發的時候,我們通常的做法是使用一個uiscrollview,在uiscrollview上面添加多個imageview,然後設定imageview的圖檔,和scrollview的滾動範圍。

  以前的做法:

iOS開發UI篇—無限輪播(循環利用)

  一般而言,輪播的廣告或者是圖檔數量都不會太多(3~5張)。是以,并不會太多的去考慮性能問題。但是如果圖檔過多(比如有16張圖檔,就需要建立16個imageview),那麼就不得不考慮性能問題了。

  更甚,如果深入做一個圖檔浏覽的小程式,那麼可能會處理成百上千張圖檔,這會造成極大的記憶體浪費且性能低下。

圖檔數量衆多:

iOS開發UI篇—無限輪播(循環利用)

當使用者在檢視第一張圖檔的時候,後面的7張建立的時間太早,且使用者可能根本就沒機會看見(看完前面幾張就沒有興趣再看後面的内容 了)。

優化思路:隻有在需要用到的時候,再建立,建立的imageview進行村循環利用。比較好的做法,不論有多少張圖檔,隻需要建立3個imageview就夠了。

iOS開發UI篇—無限輪播(循環利用)

本文介紹使用collectionview來實作無限滾動的循環利用。它支援垂直和水準方向上的滾動。

二、實作

1.說明:

collectioncell的用法和tableviewcell的用法不太一樣,collectioncell

需要注冊,告訴它這種辨別對應的cell是什麼類型的cell,如果緩存池中沒有,那麼它就檢測當時這種辨別注冊的是什麼類型的cell,就會自動建立這種類型的cell。

2.實作步驟

  (1)向storyboard中添加一個uicollectionview,調整控件的寬高。

iOS開發UI篇—無限輪播(循環利用)

  (2)設定其寬高==一張圖檔的寬高==其一個cell的寬高

    設定cell的格子的大小。其預設為向上滾動的,調整為水準滾動。

iOS開發UI篇—無限輪播(循環利用)
iOS開發UI篇—無限輪播(循環利用)

  (3)連線,設定其資料源和代理

iOS開發UI篇—無限輪播(循環利用)

實作代碼:

iOS開發UI篇—無限輪播(循環利用)
iOS開發UI篇—無限輪播(循環利用)

    界面展示:

iOS開發UI篇—無限輪播(循環利用)

    列印檢視有沒有實作cell的循環利用。

iOS開發UI篇—無限輪播(循環利用)

    可以看出,整個程式中隻建立了兩個cell。

  (4)展示圖檔,自定義cell(兩種做法,可以使用xib也可以使用代碼)。

    自定義一個cell,用來展示圖檔。

iOS開發UI篇—無限輪播(循環利用)

    實作代碼:

yyimagecell.h檔案

iOS開發UI篇—無限輪播(循環利用)
iOS開發UI篇—無限輪播(循環利用)

yyimagecell.m檔案

iOS開發UI篇—無限輪播(循環利用)
iOS開發UI篇—無限輪播(循環利用)

  yyviewcontroller.m檔案

iOS開發UI篇—無限輪播(循環利用)
iOS開發UI篇—無限輪播(循環利用)

  界面實作:

iOS開發UI篇—無限輪播(循環利用)

  (5)細節處理

設定分頁

iOS開發UI篇—無限輪播(循環利用)

調整間距

iOS開發UI篇—無限輪播(循環利用)

隐藏水準滾動條。

iOS開發UI篇—無限輪播(循環利用)

清除其顔色。

iOS開發UI篇—無限輪播(循環利用)

繼續閱讀