how to make dynamic width of the UICollectionViewCell

Question

I want to set the width of UICollectionViewCell dynamically. I found some code in swift and I want the code in Objective-C.

let flowLayout = collectionViewLayout as! UICollectionViewFlowLayout
    if indexPath.item % 3 == 0 {
        let cellWidth = (CGRectGetWidth(collectionView.frame) - (flowLayout.sectionInset.left + flowLayout.sectionInset.right))
        return CGSize(width: cellWidth, height: cellWidth / 2)
    } else {
        let cellWidth = (CGRectGetWidth(collectionView.frame) - (flowLayout.sectionInset.left + flowLayout.sectionInset.right) - flowLayout.minimumInteritemSpacing) / 2
        return CGSize(width: cellWidth, height: cellWidth)
    }

Sunjoong Kevin Kim · Accepted Answer · 2018-03-19 05:07:42Z

5

This is the simplest solution.

Your UIViewController should implement UICollectionViewDelegateFlowLayout. Then the function below needs to be implemented on your UIviewController.

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

    let width = self.collectionView.frame.size.width / 2;


    return CGSize(width: width, height: 230)

}

Furthermore, you can adjust each cell's spacing value on your storyboard. Click collectionView then see the size inspector.

edited Mar 19, 2018 at 5:07

answered Apr 17, 2017 at 12:15

Sunjoong Kevin Kim

1061 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Axel Guilmin · Accepted Answer · 2016-12-12 22:49:02Z

4

You can try this...

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {

    UICollectionViewFlowLayout *flowLayout = (UICollectionViewFlowLayout*) collectionView.collectionViewLayout;

    if (indexPath.item % 3 == 0) {
        float cellWidth = (CGRectGetWidth(collectionView.frame) - (flowLayout.sectionInset.left + flowLayout.sectionInset.right));
        return CGSizeMake(cellWidth, cellWidth / 2);
    } else {
        float cellWidth = (CGRectGetWidth(collectionView.frame) - (flowLayout.sectionInset.left + flowLayout.sectionInset.right) - flowLayout.minimumInteritemSpacing) / 2;
        return CGSizeMake(cellWidth, cellWidth);
    }
}

edited Dec 12, 2016 at 22:49

Axel Guilmin

11.8k9 gold badges57 silver badges68 bronze badges

answered Aug 30, 2016 at 10:19

SKD

1,47517 silver badges31 bronze badges

Comments

lozy219 · Accepted Answer · 2016-12-18 13:49:07Z

1

set cell's width to a percentage of the container view like:

cell.frame = CGRectMake(x, y, self.view.frame.size.width * 20 / 100, height);

or you can use CollectionView Delegates

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
    return CGSizeMake(self.view.frame.size.width*20/100, 192.f);
}

edited Dec 18, 2016 at 13:49

lozy219

5714 silver badges18 bronze badges

answered Aug 30, 2016 at 9:41

roozbeh mo

1099 bronze badges

Comments

koen · Accepted Answer · 2019-09-26 20:07:19Z

1

in case collection view cell has text, you just need to reference some label in the scene without width constraint for it, then every time in size for item, just assign to it your text, and call

Objective C:

NSString *text = [arrayOfItems objectAtIndex:indexPath.item];
_outletoflbl.text = text;
return CGSizeMake(_outletoflbl.intrinsicContentSize.width + 60, 40);

Swift:

let text = arrayOfItems[indexPath.item]
_outletoflbl.text = text
return CGRect(width:_outletoflbl.intrinsicContentSize.width + 60, height: 40)

The key is _outletoflbl, the label to assign it text to get width of it best fitting font and other attributes you assign from interface builder!

Check result:

edited Sep 26, 2019 at 20:07

koen

5,8627 gold badges60 silver badges104 bronze badges

answered Sep 24, 2019 at 13:32

IsPha

4196 silver badges9 bronze badges

Comments

sumit kumar · Accepted Answer · 2017-02-28 10:00:26Z

Swift 2.2

override func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
    var flowLayout = (collectionView.collectionViewLayout as! UICollectionViewFlowLayout)
    if indexPath.item % 3 == 0 {
        var cellWidth: Float = (CGRectGetWidth(collectionView.frame) - (flowLayout.sectionInset.left + flowLayout.sectionInset.right))
        return CGSizeMake(cellWidth, cellWidth / 2)
    }
    else {
        var cellWidth: Float = (CGRectGetWidth(collectionView.frame) - (flowLayout.sectionInset.left + flowLayout.sectionInset.right) - flowLayout.minimumInteritemSpacing) / 2
        return CGSizeMake(cellWidth, cellWidth)
    }
}

Swift 3.0

override func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    var flowLayout: UICollectionViewFlowLayout? = (collectionView.collectionViewLayout as? UICollectionViewFlowLayout)
    if indexPath.item % 3 == 0 {
        var cellWidth: Float? = (collectionView.frame.width - (flowLayout?.sectionInset?.left + flowLayout?.sectionInset?.right))
        return CGSize(width: CGFloat(cellWidth), height: CGFloat(cellWidth / 2))
    }
    else {
        var cellWidth: Float? = (collectionView.frame.width - (flowLayout?.sectionInset?.left + flowLayout?.sectionInset?.right) - flowLayout?.minimumInteritemSpacing) / 2
        return CGSize(width: CGFloat(cellWidth), height: CGFloat(cellWidth))
    }
}

Collectives™ on Stack Overflow

how to make dynamic width of the UICollectionViewCell

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related