iOS開發主流控件說明之collectionView

UICollectionView簡介:

?在iOS中,要實現九宮格數據展示,最常用的做法就是使用UICollectionView

?UICollectionView繼承自UIScrollView,因此支持垂直滾動或水平滾動,而且性能極佳

?設置UICollectionView的dataSource、delegate

?UICollectionView多組數據和單組數據的展示

?UICollectionView、UICollectionViewFlowLayout的常見屬性

?UICollectionViewCell三種注冊方式(Class、Nib、storyboard)

?自定義UICollectionViewFlowLayout布局

?UICollectionView在iOS6中推出得,也是UIKit視圖類中的一顆新星。它和UITableView共享API設計,但也在UITableView上做了一些擴展。UICollectionView最強大、同時顯著超出UITableView的特色就是其完全靈活的布局結構

?UITableView和UICollectionView都是由dataSoure和delegate驅動的。他們為其顯示的子視圖集扮演為愚蠢的容器,對他們真實的內容毫不知情。

?UICollectionView進一步抽象了。它將其子視圖的位置,大小和外觀的控制權委托給一個單獨的布局對象。通過提供一個自定義布局對象,你幾乎可以實現任何你能想象到的布局。布局繼承自UICollectionViewLayout這個抽象基類。iOS6中以UICollectionViewFlowLayout類的形式提出了一個具體的布局實現。

?flowlayout可以被用來實現一個標準的gridview,這可能是在collectionview中最常見的使用案例了。盡管大多數人都這么想,但是Apple很聰明,沒有明確的命名這個類為UICollectionViewGridLayout。而使用了更為通用的術語flowlayout,這更好的描述了該類的能力:它通過一個接一個的放置cell來建立自己的布局,當需要的時候,插入橫排或豎排的分欄符。通過自定義滾動方向,大小和cell之間的間距,flowlayout也可以在單行或單列中布局cell。

如何展示數據

?UICollectionView需要layout和數據源(dataSource)來顯示數據,

?UICollecitonView會向數據源查詢一共有多少行數據以及每一個顯示什么數據等,在查詢每一個顯示什么數據前要確定設置了layout而且itemSize不能小于{0,0}

?沒有設置layout布局對象程序會崩潰

?沒有設置數據源和布局對象的UICollectionView只是個空殼

?凡是遵守UITableViewDataSource協議的OC對象,都可以是UICollectionView的數據源

UICollectionView常用數據源方法

1.調用數據源的下面方法得知一共有多少組數據

-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView;

2.調用數據源的下面方法得知每一組有多少項數據

-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section;

3.調用數據源的下面方法得知每一項顯示什么內容

-(UICollectionViewCell *)collectionView:(UICollectionView *) collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath;

UICollectionView的數據源必須實現第二個方法和第三個方法,第一個方法不實現默認就是1組

UICollectionView的常見屬性

1.布局對象

@property(nonatomic, strong) UICollectionViewLayout *collectionViewLayout;

2.背景視圖,會自動填充整個UICollectionView

@property(nonatomic, strong) UIView *backgroundView;

3.是否允許選中cell默認允許選中

@property(nonatomic) BOOL allowsSelection;

4.是否可以多選

默認只是單選

@property(nonatomic) BOOL allowsMultipleSelection;

UICollectionViewFlowLayout常用屬性

1.cell之間的最小行間距@property(nonatomic)CGFloatminimumLineSpacing;

2.cell之間的最小列間距@property(nonatomic)CGFloatminimumInteritemSpacing;

3.cell的尺寸@property(nonatomic)CGSizeitemSize;

4.cell的預估尺寸@property(nonatomic)CGSizeestimatedItemSize;

5.UICollectionView的滾動方向,默認是垂直滾動@property(nonatomic)UICollectionViewScrollDirectionscrollDirection;

6.HeaderView的尺寸@property(nonatomic)CGSizeheaderReferenceSize;

7.FooterView的尺寸@property(nonatomic)CGSizefooterReferenceSize;

8.分區的四邊距@property(nonatomic)UIEdgeInsetssectionInset;

9.設置是否當元素超出屏幕之后固定頁眉視圖位置,默認NO@property(nonatomic)BOOLsectionHeadersPinToVisibleBounds;

10.設置是否當元素超出屏幕之后固定頁腳視圖位置,默認NO@property(nonatomic)BOOLsectionFootersPinToVisibleBounds

自定義布局的常用方法

1.UICollectionView將要顯示時準備布局,每當布局更新時,調用該方法做布局前的準備-(void)prepareLayout;

2.創建指定索引的cell的布局屬性-(UICollectionViewLayoutAttributes*)layoutAttributesForItemAtIndexPath:(NSIndexPath*)indexPat;

3.返回UICollectionView內所有的控件的布局屬性

4.-(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect;

5.自定義布局時一定要實現此方法來返回UICollectionView的contentSize,內容尺寸,UICollectionView的滾動范圍-(CGSize)collectionViewContentSize;

瀑布流簡介

?瀑布流,又稱瀑布流式布局。是比較流行的一種網站頁面布局,視覺表現為參差不齊的多欄布局,隨著頁面滾動條向下滾動,這種布局還會不斷加載數據塊并附加至當前尾部。最早采用此布局的網站是Pinterest,逐漸在國內流行開來。國內大多數清新站基本為這類風格

瀑布流特點

1.琳瑯滿目:整版以圖片為主,大小不一的圖片按照一定的規律排列

2.唯美:圖片的風格以唯美的圖片為主

3.操作簡單:在瀏覽網站的時候只需要輕輕滑動一下鼠標滾輪,一切的美妙的圖片精彩便可呈現在你面前

瀑布流應用

?瀑布流對于圖片的展現,是高效而具有吸引力的,用戶一眼掃過的快速閱讀模式可以在短時間內獲得更多的信息量,而瀑布流里懶加載模式又避免了用戶鼠標點擊的翻頁操作

?瀑布流的主要特性便是錯落有致,定寬而不定高的設計讓頁面區別于傳統的矩陣式圖片布局模式,巧妙的利用視覺層級,視線的任意流動又緩解了視覺疲勞

使用瀑布流的網站

1.電商導購,如想去網、蘑菇街和美麗說、好享說,依托于淘寶平臺

2.興趣圖譜分享,如知美、花瓣等

3.細分垂直領域,如針對吃貨的零食控、針對家居行業的他部落等

瀑布流的優缺點

?優點

–有效的降低了界面復雜度,節省了空間:我們不再需要臃腫復雜的頁碼導航鏈接或按鈕了

–對觸屏設備來說,交互方式更符合直覺:在移動應用的交互環境當中,通過向上滑動進行滾屏的操作已經成為最基本的用戶習慣,而且所需要的操作精準程度遠遠低于點擊鏈接或按鈕

–更高的參與度:以上兩點所帶來的交互便捷性可以使用戶將注意力更多的集中在內容而不是操作上,從而讓他們更樂于沉浸在探索與瀏覽當中

?缺點

–有限的用例:無限滾動的方式只適用于某些特定類型產品當中一部分特定類型的內容

–額外的復雜度

–再見了,頁腳

–SEO:集中在一頁當中動態加載數據,不利于SEO,對于網站而言,存在一定的風險

–頁面的數量:如果網站需要通過更多的內容頁面展示更多的相關信息(包括廣告)是很重要的策略,那么單頁無限滾動的方式就不適用了

1. 用UICollectionView仿UITableView

UITableView默認分為兩種樣式

是否有頭尾標簽

如果沒有的—>

普通樣式:即使分組也看不出效果

分組樣式:組和組之間有一個空白的間隔

如果有標簽—>

普通樣式: 頭標簽始終處于界面的最上方,直到被下一個頭標簽替代

分組樣式: 頭標簽隨著界面的移動而移動

要用UICollectionView仿一個普通樣式的UITableView

關鍵: item沒有辦法加約束,而通過layout的圖形界面中又沒有辦法設置不同屏幕下的尺寸,所以需要通過代碼設置

注意: UICollectionView的頭尾,如果沒有實現代理方法,只有寬高起作用,內部的屬性 內容都不顯示

顯示為UITableView帶有頭標簽的普通樣式

self.flowLayout.sectionHeadersPinToVisibleBounds = YES;

2. 無限輪播

1. 滾動的方向

2. 最小間距

3. 分頁功能

4. 取消滾動條

5. 取消彈簧效果

5. UILabel顯示當前第幾頁

6. 無限循環

3. 相冊效果

3.1 如果發現控件是按照一條線的方式進行排列的,就是一個線性布局

3.2 使用了一個UICollectionView 寬度—>屏幕的寬 高->屏幕的1/3高

3.3 內部控件的滾動方向—>水平

3.4 設置行間距

需要優化的:

1. 滾動的方向

2. itemSize

3. 取消滾動條

4. 無限循環

5. 彈簧效果

6. 圖片放大

重點:自定義layout實現

最好是繼承自 UICollectionViewFlowLayout而不要繼承子UICollectionViewLayout

itemSize等一些設置,都在flowLayot中,如果是繼承子UICollectionViewLayout那所有的關于如何設置itme大小,間距都需要自己去做

7. 如何判斷contentOffset是正負

contentOffset是父控件的屬性

而滾動的時父控件,內部的控件,這個時候,去看相對于內部控件來說,父控件移動的方向

8. 讓圖片自動居中

當滾動停止的時候,判斷哪個圖片距離屏幕最近 就讓它居中

關鍵都是:如何去計算哪個控件距離屏幕中心點最近

1. 獲取屏幕的中心點

2. 獲取控件的中心點

9. 使用,一運行就把item的屬性都設置完成

計算控件的Y

1.定義一個數組,這個數組中存放的就是itemCount對應的Y

2.有幾個itemCount 就存幾個Y

3.默認存儲的時候,先將所有的Y 都設置為0

4.每添加一個控件,就更新對應位置的最大的Y

5.在獲取的時候 就能得到對應的列數

MVC

M :Model? V :View? Controller

1. 自己要做一件事情,這個事情自己完成不了,要交個別人做,別人沒做之前它不知道

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容