CODEWITHSUNDEEP
iosswiftuiscrollviewuicollectionviewuicollectionviewcell
Jonathan Solorzano
Jonathan Solorzano

Reputation: 7032

Set offset or initial position for a cell in a collection view

I want to add some space before the first cell in a collection view, something like an offset, my collection view has a horizontal scroll position.

Here is my current collection view:

current

It has a leading constraint of 35, what I want is the cell to start at an "x" position of 35 but with the ability to scroll full width like in this:

desired

Is there a way to create that initial offset in a collection view using Swift 3?

Upvotes: 8

Views: 14251

Answers (6)

DeFrenZ
DeFrenZ

Reputation: 2262

If you only want the cells in that section to have the padding, then use sectionInset from UICollectionViewFlowLayout as suggested in the other answers. But from what I can guess you're probably fine with instead setting contentInsets on the collection view itself (inherited from UIScrollView)

Upvotes: 0

A.Kant
A.Kant

Reputation: 2960

Swift 5 / Xcode 11

Thanks Alexander Spirichev.

Based on his answer, you can also set the left inset to 35 points programmatically:

let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .horizontal
layout.minimumLineSpacing = 8
layout.sectionInset = UIEdgeInsets(top: 0, left: 35, bottom: 0, right: 0)

collectionView.setCollectionViewLayout(layout, animated: false)

Upvotes: 9

H S W
H S W

Reputation: 7129

You can set space before the initial cell in collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) as follow:

if (indexPath.row == 0 || indexPath.row == 1) {
  // Set value according to user requirements
  cell.frame.origin.y = 10
}

Upvotes: 2

QuangLoc
QuangLoc

Reputation: 71

You need to set contentInset

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
    return UIEdgeInsetsMake(top, left, bottom, right);
}

you can see in detail here

Upvotes: 1

Alexander Spirichev
Alexander Spirichev

Reputation: 478

You could just set Section Insets for Collection View Flow Layout without code.

enter image description here

Upvotes: 11

Blakedallen
Blakedallen

Reputation: 664

A bit late to the party here, but I came across a couple solutions

The right way (scroll to first cell):

https://coderwall.com/p/e-ajeq/uicollectionview-set-initial-contentoffset

Simple hacky way: I add in a transparent "spacer" cell to the first item to offset the rest of the cells. 

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "collectionCell", for: indexPath)

    if (indexPath.row == 0) {
        cell.backgroundColor = UIColor.white
        return cell
    }

    cell.backgroundColor = UIColor.green
    return cell
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

    if (indexPath.row == 0){
        //spacer
        return CGSize(width:6, height:50)
    }
    return CGSize(width: 50, height: 50)
}

Upvotes: 0

Related Questions