iOS6 進(jìn)階UICollectionView(一)

在前面的章節(jié)中,你學(xué)到了很多關(guān)于UICollectionView,但這里你將會遇到更多。UICollectionView支持不同類型的布局,但到目前為止,你只能看到了一種類型的布局 - Flow Layout。
  Flow Layout流布局是iOS 6SDK自帶的collection view布局。但是,您可以編寫自己的 - 并通過這樣做,你可以輕松地創(chuàng)建令人驚嘆的界面和令人羨慕的影響。
  本章將引導(dǎo)您完成創(chuàng)建三個這樣的自定義布局。首先,我會告訴你如何模仿照片應(yīng)用程序的行為,讓用戶增刪照片。



  然后您將學(xué)習(xí)如何創(chuàng)建一個堆疊欄布局像Pi??nterest的使用。這種布局在普及獲得了與開發(fā)商,因為這樣的作品真的很好,用于顯示可變大小圖像的天然單一視圖:

最后,你將實現(xiàn)蘋果公司的音樂應(yīng)用程序,你所知道和喜愛的簡單而優(yōu)雅,“Cover Flow”的布局:


  最重要的是,讓你的手指編碼涂滿這些布局,您將非常熟悉UICollectionView API。這將使你裝上火藥,準(zhǔn)備創(chuàng)建自己的自定義布局,以任何方式你可能想象到顯示數(shù)據(jù) , 用有史以來最少最簡潔的代碼!

深入collection view

在您開始代碼,關(guān)于UICollectionView怎么樣建立和維護(hù)布局的認(rèn)識是很重要的。因此,讓我們來看看所有關(guān)于UICollectionView的類,它們?nèi)绾螀f(xié)同工作和布局的生命周期。

了解層級


如你所想,中心是UICollectionView。當(dāng)你創(chuàng)建一個UICollectionView,你需要給它三類信息,a datasource,a delegate,a layout。

  • The data source:實現(xiàn)UICollectionViewDataSource協(xié)議的類。它的主要任務(wù)是提供顯示的數(shù)據(jù),并為每個元素(cells, supplementaryviews, and decoration views)返回UICollectionResuableViews。在下一章,將設(shè)置此項。
  • The delegate:實現(xiàn)UICollectionViewDelegate協(xié)議的類。當(dāng)事件發(fā)生,它被調(diào)用,如用戶選擇cell的事件。
  • The layout:UICollectionViewLayout的子類。這是本章的意義所在!它的任務(wù)是告訴collection view在何處放置所有不同的元素。
      UIKit提供的唯一布局稱為UICollectionViewFlowLayout。有一個小問題小主意,當(dāng)您使用此布局 - 當(dāng)你使用它,collection view的代理必須是一個UICollectionViewDelegateFlowLayout。這是UICollectionViewDelegate的子協(xié)議,只是增加了一些更多的方法來對一個flow layout所需的基礎(chǔ)協(xié)議。

布局屬性(Layout attributes)

UICollectionView處理所有復(fù)雜cell管理,并與UICollectionViewDataSource接口,找出哪些元素來顯示。您可以實現(xiàn)數(shù)據(jù)源告訴collectionView section的個數(shù)和cell的內(nèi)容,并配置最終會被顯示的cell。
UICollectionView結(jié)合UICollectionViewLayout子接口,弄清楚如何在屏幕上布局單元格。 UICollectionViewLayout是一個抽象基類,所以需重寫來創(chuàng)建自定義布局。

注意:抽象類是,你必須繼承并不能直接實例化一個類。在Objective-C,這并不完全正確,你不能實例化一個抽象類的實例,因為沒有機(jī)制來執(zhí)行本。但是,如果文檔指定它作為一個抽象類,那么你應(yīng)該繼承它。
  當(dāng)collection view想知道在哪里放置ells, supplementary views,and decoration views,它會訪問layout的布局屬性。封裝了這些數(shù)據(jù)的類被稱為UICollectionViewLayoutAttributes,它描述了以下布局的詳細(xì)信息:

?bounds:collection view的坐標(biāo)系內(nèi),視圖的位置。
?center:坐標(biāo)系統(tǒng)內(nèi)的視圖的中心。這可以用尺寸參數(shù)代替的幀參數(shù)來設(shè)置沿。
?sizw:視圖的大小。這可以與中心參數(shù)代替的幀參數(shù)來設(shè)置沿。
?Transform3D:如果要旋轉(zhuǎn),縮放或改造它被應(yīng)用到視圖的CATransform3D對象。
?alpha:視圖的透明度。
?zIndex:相對于其他視圖的視圖的順序。這可以用來定義視圖具體地說是否應(yīng)在或低于其他視圖頂部。具有較高的z索引視圖將在具有較低z索引視圖的頂部顯示。
?hidden:是否該視圖隱藏。

layout的生命周期

collection view調(diào)用它的布局了很多不同的方法,來收集所需繪制所有元素在正確的屏幕地方的信息。了解laoyout的周期有點(diǎn)復(fù)雜,所以我畫了一個流程圖來幫助你。
  在下圖中,藍(lán)框表示由collection view調(diào)用的布局方法,橙框代表collection view的狀態(tài)和綠框是讓用戶調(diào)用的方法??焖贋g覽一下圖,然后閱讀詳細(xì)的解釋。

生命周期

  周期開始時,collection view不知道的布局任何信息。它首先調(diào)用prepareLayout - 這個方法是布局的機(jī)會,設(shè)置任何它需要的內(nèi)部數(shù)據(jù)結(jié)構(gòu)。
  至此,collection view確定它需要的數(shù)據(jù)的一切,但仍然對布局layout一無所知。這意味著,你可以愉快地調(diào)用numberOfSections或numberOfItemsInSection這兩個方法,這兩個實在prepareLayout內(nèi)部調(diào)用的。
  然后collection view通過調(diào)用collectionViewContentSize獲取其內(nèi)容的大小。這是在布局layout必須告訴collection view可滾動區(qū)域究竟需要多大,使用戶能夠瀏覽到所有項目。
  在此之后,collection view調(diào)用layoutAttributesForElementsInRect:,用滾動區(qū)域的初始可見部分的矩形作為參數(shù),調(diào)用上述方法。布局必須返回矩形框內(nèi)所有的元素的布局屬性。
  現(xiàn)在collection view了解足夠的信息來滾動,并要求其訪問每個元素的代理,并適當(dāng)?shù)夭贾盟鼈冊谄聊簧?。?dāng)用戶滾動屏幕和新的cell映入眼簾,collection view繼續(xù)呼吁layoutAttributesForElementsInRect:確定布局的新的可見元素。
  而在該狀態(tài)下,沒有其他方法會被調(diào)用,直到三種情況之一發(fā)生:
1.invalidateLayout。在這一點(diǎn)上,布局將被再次從頭開始訪問所有的布局信息。布局失效,異味著如果某些改變,布局屬性layout attributes也會隨之改變。例如,如果布局屬性是依賴于某個變量,該變量變化,那么你需要在此變量的setter方法內(nèi),失效布局,調(diào)用invalidateLayout。
2.insertItemsAtIndexPaths或者deleteItemsAtIndexPaths等被調(diào)用。如果用戶添加或刪除cell,這將導(dǎo)致collection view調(diào)用prepareForCollectionViewUpdates布局方法來通知,更新即將發(fā)生。如果是插入item,它會獲取新的cell布局屬性??。最后,調(diào)用finalizeCollectionViewUpdates。該collection view然后返回到正常狀態(tài)(橙框 Normal State)。
3.collection view的bounds改變,如切換橫豎屏,重排屏幕布局。這將導(dǎo)致collection view調(diào)用prepareForAnimatedBoundsChange。然后,將更改后的bounds被獲取,finalizeAnimatedBoundsChange被調(diào)用。
  通常情況下,你不必太擔(dān)心這個生命周期的復(fù)雜性。知道它存在,當(dāng)你想知道為什么方法剛剛被調(diào)用,或者想對某些事件的順序,就參考一下上述圖表。
  這一點(diǎn)你會在本章中得到了大量的實踐,并通過本章的最后,更為直觀!

自定義布局要重寫的方法(Methods to override in a custom layout)

你可以在自定義布局子類中實現(xiàn)許多方法。然而,大部分時間,僅少數(shù)??的這些方法需要被實現(xiàn)。這里有三個最重要的:
?collectionViewContentSize - 此方法返回collection view的內(nèi)容大小,這意味著collection view所有內(nèi)容的大小,不僅僅是可見區(qū)域。例如,一個簡單的表,寬度等于視圖的寬度,高度等于所以cell的高度和。
?layoutAttributesForItemAtIndexPath:(NSIndexPath *) - 此方法接受一個索引路徑,并返回該cell的布局屬性。
?layoutAttributesForElementsInRect:(CGRect) - 這個方法需要一個矩形參數(shù),并返回布局的屬性數(shù)組對應(yīng)于所有那些在該矩形可見的元素(cells, supplementary views, and decoration views)。
  如果從最后一章記得,蘋果已經(jīng)提供了一個名為UICollectionViewFlowLayout默認(rèn)布局。它只是簡單規(guī)定了從左到右,從top到bottom。如果你愿意,你也可以繼承的flow layout。如果您的自定義布局和系統(tǒng)flow layout非常相似,只是對每個單元的屬性需要一些調(diào)整。
  在本章中,你將繼承這兩個抽象基類和flow layout創(chuàng)建一些自定義布局。所以,讓我們開始flow layout派對!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 最近將 UICollectionView 進(jìn)行了一個全面的學(xué)習(xí)及總結(jié),參考了網(wǎng)上大量的文章,把官方文檔進(jìn)行了大概翻...
    varlarzh閱讀 22,154評論 3 93
  • 翻譯自“Collection View Programming Guide for iOS” 0 關(guān)于iOS集合視...
    lakerszhy閱讀 4,078評論 1 22
  • 父類:NSObject UICollectionViewLayout是抽象基類,你可以使用它的子類來生成對coll...
    Shmily落墨閱讀 1,863評論 3 3
  • UICollectionView 在 iOS6 中第一次被引入,也是 UIKit視圖類中的一顆新星。它和 UITa...
    評評分分閱讀 1,719評論 0 10
  • 來到峨眉山是一種美麗的心情。 如果你愿意,如果你耐心,我愿意天天對你說謝謝你,我會感謝照在肌膚上的每一縷陽光,感謝...
    游苑Tina閱讀 878評論 4 2

友情鏈接更多精彩內(nèi)容