Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Placing a margin around each edge of the UICollectionView

Tags:

When the UICollectionView is populated with items they always go right to the edges of the UICollectionView like so:

--------------- |X X X X X X X| |X X X X X X X| |X X X X X X X| |X X X X X X X| |X X X X X X X| |X X X X X X X| --------------- 

I would like to place a margin around each edge like so:

--------------- | X X X X X X | | X X X X X X | | X X X X X X | | X X X X X X | | X X X X X X | | X X X X X X | --------------- 

I tried to achieve this by placing the UICollectionView inside its hosting UIView by setting its Frame to simulate a border but it scrolls within the Frame so gets cut off at the top and bottom and the scroller also appears in the bounds of the frame.

I have looked at the API but I cannot see anything obvious to achieve this. Any ideas?

like image 714
Adam Avatar asked Jun 05 '13 08:06

Adam


People also ask

What is UICollectionView flow layout?

Overview. A flow layout is a type of collection view layout. Items in the collection view flow from one row or column (depending on the scrolling direction) to the next, with each row containing as many cells as will fit. Cells can be the same sizes or different sizes.

How does UICollectionView work?

The collection view presents items onscreen using a cell, which is an instance of the UICollectionViewCell class that your data source configures and provides. In addition to its cells, a collection view can present data using other types of views.

What is Section inset?

Section insets are margins applied only to the items in the section. They represent the distance between the header view and the first line of items and between the last line of items and the footer view. They also indicate the spacing on either side of a single line of items.


1 Answers

I know this is an old question, but don't forget that UICollectionView inherits from UIScrollView.

UICollectionView *collectionView = [[UICollectionView alloc] init]; collectionView.contentInset = UIEdgeInsetsMake(x.x, x.x, x.x, x.x); 
// Swift 3 for good measure let collectionView = UICollectionView() collectionView.contentInset = UIEdgeInsets(top: x.x, left: x.x, bottom: x.x, right: x.x) 

Be aware that both contentInset and sectionInset may change the spacing of cells in your view. For more information on that, see this post.

like image 170
Tyler Cloutier Avatar answered Sep 22 '22 22:09

Tyler Cloutier