天天看點

iOS流布局UICollectionView系列三——使用FlowLayout進行更靈活布局

        前面的部落格介紹了uicollectionview的相關方法和其協定中的方法,但對布局的管理類uicollectionviewflowlayout沒有着重探讨,這篇部落格介紹關于布局的相關設定和屬性方法。

通過layout的設定,我們可以編寫更加靈活的布局效果。

        在第一篇部落格中,通過uicollectionview,我們很輕松的完成了一個九宮格的布局,但是如此中規中矩的布局方式,有時候并不能滿足我們的需求,有時我們需要每一個item展示不同的大小,代碼如下:

<a href="http://my.oschina.net/u/2340880/blog/522748#">?</a>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

<code>- (</code><code>void</code><code>)viewdidload {</code>

<code>    </code><code>[super viewdidload];</code>

<code>    </code><code>// do any additional setup after loading the view, typically from a nib.</code>

<code>    </code><code>uicollectionviewflowlayout *layout = [[uicollectionviewflowlayout alloc]init];</code>

<code>    </code><code>layout.scrolldirection = uicollectionviewscrolldirectionvertical;</code>

<code>    </code><code>uicollectionview *collect = [[uicollectionview alloc]initwithframe:cgrectmake(0, 0, 320, 400) collectionviewlayout:layout];</code>

<code>    </code><code>collect.delegate=self;</code>

<code>    </code><code>collect.datasource=self;</code>

<code>    </code> 

<code>    </code><code>[collect registerclass:[uicollectionviewcell </code><code>class</code><code>] forcellwithreuseidentifier:@</code><code>"cellid"</code><code>];</code>

<code>  </code><code>;</code>

<code>    </code><code>[self.view addsubview:collect];</code>

<code>}</code>

<code>//設定每個item的大小,雙數的為50*50 單數的為100*100</code>

<code>-(cgsize)collectionview:(uicollectionview *)collectionview layout:(uicollectionviewlayout *)collectionviewlayout sizeforitematindexpath:(nsindexpath *)indexpath{</code>

<code>    </code><code>if</code> <code>(indexpath.row%2==0) {</code>

<code>        </code><code>return</code> <code>cgsizemake(50, 50);</code>

<code>    </code><code>}</code><code>else</code><code>{</code>

<code>        </code><code>return</code> <code>cgsizemake(100, 100);</code>

<code>    </code><code>}</code>

<code>//代理相應方法</code>

<code>-(nsinteger)numberofsectionsincollectionview:(uicollectionview *)collectionview{</code>

<code>    </code><code>return</code> <code>1;</code>

<code>-(nsinteger)collectionview:(uicollectionview *)collectionview numberofitemsinsection:(nsinteger)section{</code>

<code>    </code><code>return</code> <code>100;</code>

<code>-(uicollectionviewcell *)collectionview:(uicollectionview *)collectionview cellforitematindexpath:(nsindexpath *)indexpath{</code>

<code>    </code><code>uicollectionviewcell * cell  = [collectionview dequeuereusablecellwithreuseidentifier:@</code><code>"cellid"</code> <code>forindexpath:indexpath];</code>

<code>    </code><code>cell.backgroundcolor = [uicolor colorwithred:arc4random()%255/255.0 green:arc4random()%255/255.0 blue:arc4random()%255/255.0 alpha:1];</code>

<code>    </code><code>return</code> <code>cell;</code>

效果如下:

iOS流布局UICollectionView系列三——使用FlowLayout進行更靈活布局

現在的布局效果是不是炫酷了許多。

        uicollectionviewflowlayout是系統提供給我們一個封裝好的流布局設定類,其中有一些布局屬性我們可以進行設定:

設定行與行之間的間距最小距離

@property (nonatomic) cgfloat minimumlinespacing;

設定列與列之間的間距最小距離

@property (nonatomic) cgfloat minimuminteritemspacing;

設定每個item的大小

@property (nonatomic) cgsize itemsize;

設定每個item的估計大小,一般不需要設定

@property (nonatomic) cgsize estimateditemsize ns_available_ios(8_0);

設定布局方向

@property (nonatomic) uicollectionviewscrolldirection scrolldirection;

這個uicollectionviewscrolldirection的枚舉如下:

<code>typedef</code> <code>ns_enum(nsinteger, uicollectionviewscrolldirection) {</code>

<code>    </code><code>uicollectionviewscrolldirectionvertical,</code><code>//水準布局</code>

<code>    </code><code>uicollectionviewscrolldirectionhorizontal</code><code>//垂直布局</code>

<code>};</code>

設定頭視圖尺寸大小

@property (nonatomic) cgsize headerreferencesize;

設定尾視圖尺寸大小

@property (nonatomic) cgsize footerreferencesize;

設定分區的edgeinset

@property (nonatomic) uiedgeinsets sectioninset;

這個屬性可以設定分區的偏移量,例如我們在剛才的例子中添加如下設定:

<code> </code><code>layout.sectioninset = uiedgeinsetsmake(20, 20, 20, 20);</code>

效果如下,會看到分區的邊界閃出了20像素

iOS流布局UICollectionView系列三——使用FlowLayout進行更靈活布局

下面這兩個方法設定分區的頭視圖和尾視圖是否始終固定在螢幕上邊和下邊

@property (nonatomic) bool sectionheaderspintovisiblebounds ns_available_ios(9_0);

@property (nonatomic) bool sectionfooterspintovisiblebounds ns_available_ios(9_0);

        上面的方法在建立flowlayout時靜态的進行設定,如果我們需要動态的設定這些屬性,就像我們例子中的,每個item的大小會有差異,我們可以通過代理來實作。

        uicollectionviewdelegateflowlayout是uicollectionviewdelegate的子協定,其中常用方法如下,我們隻需要實作我們需要的即可:

動态設定每個item的尺寸大小

- (cgsize)collectionview:(uicollectionview *)collectionview layout:(uicollectionviewlayout*)collectionviewlayout sizeforitematindexpath:(nsindexpath *)indexpath;

動态設定每個分區的edgeinsets

- (uiedgeinsets)collectionview:(uicollectionview *)collectionview layout:(uicollectionviewlayout*)collectionviewlayout insetforsectionatindex:(nsinteger)section;

動态設定每行的間距大小

- (cgfloat)collectionview:(uicollectionview *)collectionview layout:(uicollectionviewlayout*)collectionviewlayout minimumlinespacingforsectionatindex:(nsinteger)section;

動态設定每列的間距大小

- (cgfloat)collectionview:(uicollectionview *)collectionview layout:(uicollectionviewlayout*)collectionviewlayout minimuminteritemspacingforsectionatindex:(nsinteger)section;

動态設定某個分區頭視圖大小

- (cgsize)collectionview:(uicollectionview *)collectionview layout:(uicollectionviewlayout*)collectionviewlayout referencesizeforheaderinsection:(nsinteger)section;

動态設定某個分區尾視圖大小

- (cgsize)collectionview:(uicollectionview *)collectionview layout:(uicollectionviewlayout*)collectionviewlayout referencesizeforfooterinsection:(nsinteger)section;

繼續閱讀