Placing a margin around each edge of the UICollect

问题:

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?

回答1:

In

(UICollectionViewCell *)collectionView:(UICollectionView *)cv cellForItemAtIndexPath:(NSIndexPath *)indexPath {
}

you can give your cells some margin on the left side.

Or you can create custom cells, which have a margin.

or you can set the property .sectionInset of your CollectionviewFlowLayout, which should be the easiest way (if you use FlowLayout)

回答2:

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.

回答3:

You can make use of the following function.

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
  {
      return UIEdgeInsetsMake(50, 50,15,50);
  }

You will have to play around with the number to figure out how to force the collectionviewCells in a single line.

UIEdgeInsetsMake ( CGFloat top,CGFloat left,CGFloat bottom,CGFloat right); 

For Swift 3

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
    return UIEdgeInsetsMake(10, 4, 10, 4)
}

回答4:

You can pretty much control every aspect of the grid with collectionview's protocol. Here's an example:

- (UICollectionViewFlowLayout *)collectionViewFlowLayout
{
    UICollectionViewFlowLayout *flowLayout = [UICollectionViewFlowLayout new];
    flowLayout.itemSize = CGSizeMake(180, 255);
    flowLayout.sectionInset = UIEdgeInsetsMake(10, 30, 0, 30);
    flowLayout.minimumInteritemSpacing = 0.0f;
    flowLayout.minimumLineSpacing = 0.0f;
    flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;
    return flowLayout;
}

The one you would want to change in your case is the sectionInsets

回答5:

Swift 2.0

self.automaticallyAdjustsScrollViewInsets = false
self.collectionView.contentInset = UIEdgeInsets(top: 10, left: 0, bottom: 0, right: 0)

回答6:

On Xcode 8, if you're using the interface builder you can set the Section Insets right on the Size Inspector:

回答7:

Swift 3 version (Vinayak Kini answer) :

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {

    return UIEdgeInsetsMake(10, 10, 10, 10) //top, left, bottom, right
}