How to set UICollectionViewCell Width and Height programmatically

Question

I am trying to implement a CollectionView  When I am using Autolayout  my cells won t change the size  but their alignment   Now I would rather want to change their sizes to e g     var size   CGSize width  self view frame width 10  height  self view frame width 10    I tried setting in my CellForItemAtIndexPath  collectionCell size   size   it didn t work though   Is there a way to achieve this   edit   It seems  that the answers will only change my CollectionView width and height itself  Is there are conflict in Constraints possible  Any ideas on that

User · Answer

An other way is to set the value directly in the flow layout       let layout   collectionView collectionViewLayout as  UICollectionViewFlowLayout     layout itemSize   CGSize width  size  height  size

User · Answer

Swift 5  Programmatic UICollectionView setting Cell width and height    MARK  MyViewController  final class MyViewController  UIViewController  UICollectionViewDataSource  UICollectionViewDelegateFlowLayout            private lazy var collectionViewLayout  UICollectionViewFlowLayout             let layout   UICollectionViewFlowLayout           let spacing  CGFloat   1         let numOfColumns  CGFloat   3         let itemSize  CGFloat    UIScreen main bounds width -  numOfColumns - spacing  - 2    3         layout itemSize   CGSize width  itemSize  height  itemSize          layout minimumInteritemSpacing   spacing         layout minimumLineSpacing   spacing         layout sectionInset   UIEdgeInsets top  spacing  left  spacing  bottom  spacing  right  spacing          return layout                  private lazy var collectionView  UICollectionView             let collectionView   UICollectionView frame  view bounds  collectionViewLayout  collectionViewLayout          collectionView backgroundColor    white         collectionView dataSource   self         collectionView delegate   self         collectionView translatesAutoresizingMaskIntoConstraints   false         return collectionView                  override func viewDidLoad             super viewDidLoad           configureCollectionView                  private func configureCollectionView             view addSubview collectionView          NSLayoutConstraint activate               collectionView topAnchor constraint equalTo  view safeAreaLayoutGuide topAnchor               collectionView bottomAnchor constraint equalTo  view safeAreaLayoutGuide bottomAnchor               collectionView leadingAnchor constraint equalTo  view safeAreaLayoutGuide leadingAnchor               collectionView trailingAnchor constraint equalTo  view safeAreaLayoutGuide trailingAnchor                     collectionView register PhotoCell self  forCellWithReuseIdentifier   quot PhotoCell quot                     MARK  UICollectionViewDataSource      func collectionView   collectionView  UICollectionView  numberOfItemsInSection section  Int  - gt  Int           return 20                func collectionView   collectionView  UICollectionView  cellForItemAt indexPath  IndexPath  - gt  UICollectionViewCell           let cell   collectionView dequeueReusableCell withReuseIdentifier   quot PhotoCell quot   for  indexPath  as  PhotoCell         cell backgroundColor    red         return cell                  MARK  PhotoCell  final class PhotoCell  UICollectionViewCell            lazy var imageView  UIImageView             let imageView   UIImageView           imageView contentMode    scaleAspectFill         imageView translatesAutoresizingMaskIntoConstraints   false         imageView layer masksToBounds   true         return imageView                  override init frame  CGRect            super init frame  frame          setupViews                  required init  coder aDecoder  NSCoder            fatalError  quot init  coder   not implemented quot                  func setupViews             addSubview imageView          NSLayoutConstraint activate               topAnchor constraint equalTo  topAnchor               bottomAnchor constraint equalTo  bottomAnchor               leadingAnchor constraint equalTo  leadingAnchor               trailingAnchor constraint equalTo  trailingAnchor

User · Answer

A simple way  If you just need a simple fixed size  class SizedCollectionView  UIICollectionView       override func common             super common           let l   UICollectionViewFlowLayout           l itemSize   CGSize width  42  height  42          collectionViewLayout   l          That s all there is to it  In storyboard  just change the class from UICollectionView to SizedCollectionView  But     Notice the base class there is  quot UI  I  CollectionView quot     I  for Initializer  It s not that easy to add an initializer to a collection view  Here s a common approach  Collection view     with initializer  import UIKit  class UIICollectionView  UICollectionView       private var commoned  Bool   false          override func didMoveToWindow             super didMoveToWindow           if window    nil  amp  amp   commoned               commoned   true             common                            internal func common              In most projects  you need  quot a collection view with an initializer quot   So you will probably anyway have UIICollectionView  note the extra I for Initializer   in your project

User · Answer

Try to use UICollectionViewDelegateFlowLayout method  In Xcode 11 or later  you need to set Estimate Size to none from storyboard   func collectionView   collectionView  UICollectionView  layout collectionViewLayout   UICollectionViewLayout  sizeForItemAt indexPath  IndexPath  - gt  CGSize       let padding  CGFloat    170     let collectionViewSize   advertCollectionView frame size width - padding     return CGSize width  collectionViewSize 2  height  collectionViewSize 2

User · Answer

Make sure to add the protocol UICollectionViewDelegateFlowLayout in your class declaration  class MyCollectionViewController  UICollectionViewController  UICollectionViewDelegateFlowLayout         MARK  - UICollectionViewDelegateFlowLayout      func collectionView   collectionView  UICollectionView  layout collectionViewLayout  UICollectionViewLayout  sizeForItemAt indexPath  IndexPath  - gt  CGSize              return CGSize width  100 0  height  100 0

User · Answer

If  like me  you need to keep your custom flow layout s itemSize dynamically updated based on your collection view s width  you should override your UICollectionViewFlowLayout s prepare   method  Here s a WWDC video demoing this technique  class MyLayout  UICollectionViewFlowLayout            override func prepare             super prepare                    guard let collectionView   collectionView else   return                    itemSize   CGSize width       height

User · Answer

Size ratio according to iPhone size    Here s what you can do to have different width and height for cell s regarding the iPhone size     func collectionView collectionView  UICollectionView  layout collectionViewLayout  UICollectionViewLayout  sizeForItemAtIndexPath indexPath  NSIndexPath  - gt  CGSize       let width    self view frame size width - 12   3    3   some width     let height   width   1 5   ratio     return CGSize width  width  height  height      And maybe you should also disable your AutoLayout constraints on cell for this answer to work

User · Answer

Swift 5 Add these protocols  -  UICollectionViewDelegate           -  UICollectionViewDataSource         -  UICollectionViewDelegateFlowLayout   Your code will then look like this extension YourViewController  UICollectionViewDelegate         Write Delegate Code Here    extension YourViewController  UICollectionViewDataSource         Write DataSource Code Here    extension YourViewController  UICollectionViewDelegateFlowLayout       func collectionView   collectionView  UICollectionView  layout collectionViewLayout  UICollectionViewLayout  sizeForItemAt indexPath  IndexPath  - gt  CGSize           return CGSize width  screenWidth  height  screenWidth           Now the final and crucial step to see this take effect is to go to your viedDidLoad function inside your Viewcontroller      override func viewDidLoad             super viewDidLoad           collection dataSource   self    Add this         collection delegate   self    Add this                     Do any additional setup after loading the view         Without telling your view which class the delegate is it won t work

User · Answer

The collection view has a layout object  In your case  it is probably a flow layout  UICollectionViewFlowLayout   Set the flow layout s itemSize property

User · Answer

If one is using storyboard and overriding UICollectionViewDelegateFlowLayout then in swift 5 and Xcode 11 also set Estimate size to None

User · Answer

If you are not using UICollectionViewController  you need to add conformance to it by setting delegates UICollectionViewDelegate  UICollectionViewDataSource  UICollectionViewDelegateFlowLayout    extension ViewController  UICollectionViewDelegate  UICollectionViewDataSource  UICollectionViewDelegateFlowLayout  After that  you have to set a delegate to your collection view that is added to ViewController    collectionView delegate   self   collectionView dataSource   self       And finally  you have to add layout to your collection view    let collectionLayout   UICollectionViewFlowLayout     collectionView collectionViewLayout   collectionLayout  After these steps  you can change size in func    func collectionView   collectionView  UICollectionView  layout collectionViewLayout  UICollectionViewLayout  sizeForItemAt indexPath  IndexPath  - gt  CGSize

User · Answer

So you need to setting from storyboard for attribute for collectionView in cell section estimate Size to none  and in your ViewController you need had delegate method for implementing this method   optional func collectionView   collectionView  UICollectionView  layout collectionViewLayout  UICollectionViewLayout  sizeForItemAt indexPath  IndexPath  - gt  CGSize

User · Answer

Swift 5 Programmatically  lazy var collectionView  UICollectionView             let layout   UICollectionViewFlowLayout           layout scrollDirection    horizontal            Provide Width and Height According to your need         let cellWidth   UIScreen main bounds width   10         let cellHeight   UIScreen main bounds height   10         layout itemSize   CGSize width  cellWidth  height  cellHeight             You can also provide estimated Height and Width         layout estimatedItemSize   CGSize width  cellWidth  height  cellHeight             For Setting the Spacing between cells         layout minimumInteritemSpacing   0         layout minimumLineSpacing   0          return UICollectionView frame  self view frame  collectionViewLayout  layout

User · Answer

swift4 swift 4 ios collection view collectionview example xcode latest code working sample Add this on Delegate section of the top UICollectionViewDelegateFlowLayout and use this function func collectionView   collectionView  UICollectionView  layout collectionViewLayout  UICollectionViewLayout  sizeForItemAt indexPath  IndexPath  - gt  CGSize       let width    self view frame size width - 20    3   some width     let height   width   1 5   ratio     return CGSize width  width  height  height           sample complete code create on collection view and collectionview cell in storyboard give reference to the collection as  IBOutlet weak var cvContent  UICollectionView  paste this in View controller  import UIKit  class ViewController  UIViewController  UICollectionViewDelegate  UICollectionViewDataSource  UICollectionViewDelegateFlowLayout        var arrVeg    String        var arrFruits    String        var arrCurrent    String              IBOutlet weak var cvContent  UICollectionView                   override func viewDidLoad             super viewDidLoad           arrVeg     quot Carrot quot   quot Potato quot    quot Tomato quot   quot Carrot quot   quot Potato quot    quot Tomato quot   quot Carrot quot   quot Potato quot    quot Tomato quot   quot Carrot quot   quot Potato quot    quot Tomato quot                    arrVeg     quot Mango quot   quot Papaya quot   quot Orange quot   quot Mango quot   quot Papaya quot   quot Orange quot   quot Mango quot   quot Papaya quot   quot Orange quot   quot Mango quot   quot Papaya quot   quot Orange quot   quot Mango quot   quot Papaya quot   quot Orange quot   quot Mango quot   quot Papaya quot   quot Orange quot   quot Mango quot   quot Papaya quot   quot Orange quot   quot Mango quot   quot Papaya quot   quot Orange quot   quot Mango quot   quot Papaya quot   quot Orange quot   quot Mango quot   quot Papaya quot   quot Orange quot   quot Mango quot   quot Papaya quot   quot Orange quot   quot Mango quot   quot Papaya quot   quot Orange quot   quot Mango quot   quot Papaya quot   quot Orange quot   quot Mango quot   quot Papaya quot   quot Orange quot   quot Mango quot   quot Papaya quot   quot Orange quot   quot Mango quot   quot Papaya quot   quot Orange quot   quot Mango quot   quot Papaya quot   quot Orange quot   quot Mango quot   quot Papaya quot   quot Orange quot   quot Mango quot   quot Papaya quot   quot Orange quot   quot Mango quot   quot Papaya quot   quot Orange quot                             arrCurrent   arrVeg             MARK  - CollectionView            func collectionView   collectionView  UICollectionView  layout collectionViewLayout  UICollectionViewLayout  sizeForItemAt indexPath  IndexPath  - gt  CGSize           let width    self view frame size width - 20    3   some width         let height   width   1 5   ratio         return CGSize width  width  height  height                 func numberOfSections in collectionView  UICollectionView  - gt  Int            return 1                func collectionView   collectionView  UICollectionView  numberOfItemsInSection section  Int  - gt  Int                             return arrCurrent count                          func collectionView   collectionView  UICollectionView  cellForItemAt indexPath  IndexPath  - gt  UICollectionViewCell           let cell   collectionView dequeueReusableCell withReuseIdentifier   quot cell quot   for  indexPath  as  ContentCollectionViewCell         cell backgroundColor    UIColor green         return cell

User · Answer

Try below method  func collectionView collectionView  UICollectionView  layout collectionViewLayout  UICollectionViewLayout  sizeForItemAtIndexPath indexPath  NSIndexPath  - gt  CGSize       return CGSize width  100 0  height  100 0

User · Answer

Absolutely simple way  class YourCollection  UIViewController       UICollectionViewDelegate       UICollectionViewDataSource    You must add  quot UICollectionViewDelegateFlowLayout quot  or  there is no autocomplete  class YourCollection  UIViewController       UICollectionViewDelegate       UICollectionViewDataSource       UICollectionViewDelegateFlowLayout    Type  quot sizeForItemAt    quot   You re done  class YourCollection  UIViewController       UICollectionViewDelegate       UICollectionViewDataSource       UICollectionViewDelegateFlowLayout          func collectionView   collectionView  UICollectionView        layout collectionViewLayout  UICollectionViewLayout        sizeForItemAt indexPath  IndexPath  - gt  CGSize              return CGSize width  37  height  63     That s it  Example  if you want  quot each cell fills the whole collection view quot        guard let b   view superview  bounds else             return CGSize width  b width  height  b height

User · Answer

in Swift3 and Swift4 you can change cell size by adding UICollectionViewDelegateFlowLayout and implementing it s like this     func collectionView   collectionView  UICollectionView  layout collectionViewLayout  UICollectionViewLayout  sizeForItemAt indexPath  IndexPath  - gt  CGSize           return CGSize width  100  height  100          or if create UICollectionView programmatically you can do it like this        let layout   UICollectionViewFlowLayout                       layout scrollDirection    horizontal   this is for direction                     layout minimumInteritemSpacing   0    this is for spacing between cells                     layout itemSize   CGSize width  view frame width  height  view frame height    this is for cell size let collectionView   UICollectionView frame  self view bounds  collectionViewLayout  layout

User · Answer

This is my version  find your suitable ratio to get the cell size as per your requirement   -  CGSize collectionView  UICollectionView   collectionView layout  UICollectionViewLayout   collectionViewLayout sizeForItemAtIndexPath  NSIndexPath   indexPath     return CGSizeMake CGRectGetWidth collectionView frame  4  CGRectGetHeight collectionView frame  4

User · Answer

Use this method to set custom cell height width   Make sure to add this protocols  UICollectionViewDelegate  UICollectionViewDataSource  UICollectionViewDelegateFlowLayout   If you are using swift 5 or xcode 11 and later you need to set Estimate Size to none using storyboard in order to make it work properly  If you will not set that than below code will not work as expected        Swift 4 or Later   extension YourViewController  UICollectionViewDelegate         Write Delegate Code Here    extension YourViewController  UICollectionViewDataSource         Write DataSource Code Here    extension YourViewController  UICollectionViewDelegateFlowLayout       func collectionView   collectionView  UICollectionView  layout collectionViewLayout  UICollectionViewLayout  sizeForItemAt indexPath  IndexPath  - gt  CGSize           return CGSize width  screenWidth  height  screenWidth               Objective-C    interface YourViewController   UIViewController lt UICollectionViewDelegate UICollectionViewDataSource UICollectionViewDelegateFlowLayout gt   -  CGSize collectionView  UICollectionView   collectionView layout  UICollectionViewLayout   collectionViewLayout sizeForItemAtIndexPath  NSIndexPath   indexPath       return CGSizeMake CGRectGetWidth collectionView frame    CGRectGetHeight collectionView frame

User · Answer

Finally got the answer  You should extend UICollectionViewDelegateFlowLayout  This should be working with answers above

User · Answer

Swift 4 You have 2 ways in order to change the size of CollectionView  First way - gt  add this protocol UICollectionViewDelegateFlowLayout for In my case I want to divided cell into 3 part in one line  I did this code below extension ViewController  UICollectionViewDelegate  UICollectionViewDataSource  UICollectionViewDelegateFlowLayout      func collectionView   collectionView  UICollectionView  layout collectionViewLayout  UICollectionViewLayout  sizeForItemAt indexPath  IndexPath  - gt  CGSize                      In this function is the code you must implement to your code project if you want to change size of Collection view             let width     view frame width-20  3             return CGSize width  width  height  width             func collectionView   collectionView  UICollectionView  numberOfItemsInSection section  Int  - gt  Int           return collectionData count                func collectionView   collectionView  UICollectionView  cellForItemAt indexPath  IndexPath  - gt  UICollectionViewCell           let cell   collectionView dequeueReusableCell withReuseIdentifier   quot CollectionViewCell quot   for  indexPath          if let label   cell viewWithTag 100  as  UILabel               label text   collectionData indexPath row                    return cell          Second way - gt  you don t have to add UICollectionViewDelegateFlowLayout but you have to write some code in viewDidload function instead as code below class ViewController  UIViewController    IBOutlet weak var collectionView1  UICollectionView          var collectionData     quot 1  quot    quot 2  quot    quot 3  quot    quot 4  quot    quot 5  quot    quot 6  quot    quot 7  quot    quot 8  quot    quot 9  quot    quot 10  quot    quot 11  quot    quot 12  quot        override func viewDidLoad             super viewDidLoad           let width    view frame width-20  3         let layout   collectionView collectionViewLayout as  UICollectionViewFlowLayout         layout itemSize   CGSize width  width  height  width             extension ViewController  UICollectionViewDelegate  UICollectionViewDataSource            func collectionView   collectionView  UICollectionView  numberOfItemsInSection section  Int  - gt  Int           return collectionData count                func collectionView   collectionView  UICollectionView  cellForItemAt indexPath  IndexPath  - gt  UICollectionViewCell           let cell   collectionView dequeueReusableCell withReuseIdentifier   quot CollectionViewCell quot   for  indexPath          if let label   cell viewWithTag 100  as  UILabel               label text   collectionData indexPath row                        return cell          Whatever you write a code as the first way or second way you will get the same result as above   I wrote it   It worked for me

[swift] How to set UICollectionViewCell Width and Height programmatically

Examples related to swift

Examples related to uicollectionview