UICollectionView: Using Flow Layout

UICollectionView를 사용하여 데이터를 정렬할 때 , UICollectionViewFlowLayout을 사용하여 UICollectionView 위에 아이템을 정렬할 수 있다. 

The flow layout implements a line-based breaking layout, which means that the layout object places cells on a linear path and fits as many cells along that line as it can. When the layout object runs out of room on the current line, it creates a new line and continues the layout process there. Figure 3-1 shows what this looks like for a flow layout that scrolls vertically. In this case, lines are laid out horizontally with each new line positioned below the previous line. The cells in a single section can be optionally surrounded with section header and section footer views.

flowLayout은 선 기반 분리 레이아웃을 구현합니다. 즉, 레이아웃 객체는 셀을 선형 경로에 배치하고 해당 라인을 따라 가능한 한 많은 셀을 위치시키도록 한다.현재 선의 배치 객체에 공간이 부족하면 새 선을 작성하고 배치 프로세스를 계속합니다.

 

You can configure the flow layout either programmatically or using Interface Builder in Xcode. The steps for configuring the flow layout are as follows:

1. Create a flow layout object and assign it to your collection view.

2. Configure the width and height of cells.

3. Set the spacing options (as needed) for the lines and items.

4. If you want section headers or section footers, specify their size.

5. Set the scroll direction for the layout.

 

 

Important: At a minimum, you must specify the width and height of cells. If you don’t, your items are assigned a width and height of 0 and will never be visible.

 

Customizing the Flow Layout Attributes

각 셀들의 사이즈를 갖도록 할 때

 

- itemSize: flow layout 위 객체들은 모두 같은 사이즈를 갖도록 함.

 

각 셀들의 사이즈 또는 스페이싱을 다양하게 배치할 때

 

- collectionView:layout:sizeForItemAtIndexPath

    ( 만약 , cell의 사이즈를 별개로 지정하고, cell 사이즈를 지정해주는 collectionView:layout:sizeForItemAtIndexPath 가 동시에 설정 되어 있다면,  cell 자체에 지정한 사이즈 대신 CollectionViewFlowLayout내 메서드(collectionView:layout:sizeForItemAtIndexPath)에서 설정한 size로 지정된다.)

 

 

Specifying the Space Between Items and Lines

Using the flow layout, you can specify the minimum spacing between items on the same line and the minimum spacing between successive lines. Keep in mind that the spacing you provide is only the minimum spacing. Because of how it lays out content, the flow layout object may increase the spacing between items to a value greater than the one you specified. The layout object may similarly increase the actual line-spacing when the items being laid out are different sizes.

 

FlowLayout를 사용하면 같은 선상의 아이템의 간격의 최소값을 선택할 수 있다. 그 이유는 컨텐츠의 배치 방법 때문이라고 한다. flow layout의 객체는 사용자가 설정한 spacing 값을 한층 더 증가시킬 수 있을지 모른다.