Creating a UICollectionView programmatically

Question

I m looking for a guide or tutorial that will show me how to set up a simple UICollectionView using only code   I m wading through the documentation on Apples site  and I m using the reference manual as well    But I would really benefit from a simple guide that can show me how to set up a UICollectionView without having to use Storyboards or XIB NIB files - but unfortunately when I search about  all I can find is tutorials that feature the Storyboard

User · Answer

For swift4 user --  class TwoViewController  UIViewController  UICollectionViewDataSource  UICollectionViewDelegateFlowLayout  UICollectionViewDelegate        override func viewDidLoad             super viewDidLoad            self collectionView   UICollectionView frame  self view bounds  collectionViewLayout  flowLayout          collectionView register UICollectionViewCell self  forCellWithReuseIdentifier   collectionCell           collectionView delegate   self         collectionView dataSource   self         collectionView backgroundColor   UIColor cyan         self view addSubview collectionView             func collectionView   collectionView  UICollectionView  numberOfItemsInSection section  Int  - gt  Int           return 20            func collectionView   collectionView  UICollectionView  cellForItemAt indexPath  IndexPath  - gt  UICollectionViewCell          var cell   collectionView dequeueReusableCell withReuseIdentifier   collectionCell   for  indexPath as IndexPath          cell backgroundColor   UIColor green        return cell            func collectionView collectionView  UICollectionView  layout collectionViewLayout  UICollectionViewLayout  sizeForItemAtIndexPath indexPath  NSIndexPath  - gt  CGSize           return CGSize width  50  height  50             func collectionView collectionView  UICollectionView  layout collectionViewLayout  UICollectionViewLayout  insetForSectionAtIndex section  Int  - gt  UIEdgeInsets           return UIEdgeInsets top  5  left  5  bottom  5  right  5

User · Answer

Apple Docs   -  id initWithFrame  CGRect frame        collectionViewLayout  UICollectionViewLayout   layoutParameters      Use this method when initializing a collection view object   programmatically  If you specify nil for the layout parameter  you   must assign a layout object to the collectionViewLayout property   before displaying the collection view onscreen  If you do not  the   collection view will be unable to present any items onscreen       This method is the designated initializer    This method is used to initialize the UICollectionView  here you provide frame and a UICollectionViewLayout object   UICollectionViewFlowLayout  layout     UICollectionViewFlowLayout alloc init     At the end  add UICollectionView as a subview to your view   Now collection view is added pro grammatically  You can go on learning  Happy learning   Hope it helps you

User · Answer

For Swift 2 0  Instead of implementing the methods that are required to draw the CollectionViewCells   func collectionView collectionView  UICollectionView  layout collectionViewLayout  UICollectionViewLayout  sizeForItemAtIndexPath indexPath  NSIndexPath  - gt  CGSize               return CGSizeMake 50  50              func collectionView collectionView  UICollectionView  layout collectionViewLayout  UICollectionViewLayout  insetForSectionAtIndex section  Int  - gt  UIEdgeInsets               return UIEdgeInsetsMake 5  5  5  5     top left bottom right         Use UICollectionViewFlowLayout  func createCollectionView         let flowLayout   UICollectionViewFlowLayout           Now setup the flowLayout required for drawing the cells     let space   5 0 as CGFloat         Set view cell size     flowLayout itemSize   CGSizeMake 50  50          Set left and right margins     flowLayout minimumInteritemSpacing   space         Set top and bottom margins     flowLayout minimumLineSpacing   space         Finally create the CollectionView     let collectionView   UICollectionView frame  CGRectMake 10  10  300  400   collectionViewLayout  flowLayout          Then setup delegates  background color etc      collectionView  dataSource   self     collectionView  delegate   self     collectionView  registerClass UICollectionViewCell self  forCellWithReuseIdentifier   cellID       collectionView  backgroundColor   UIColor whiteColor       self view addSubview collectionView       Then implement the UICollectionViewDataSource methods as required   func collectionView collectionView  UICollectionView  numberOfItemsInSection section  Int  - gt  Int           return 20        func collectionView collectionView  UICollectionView  cellForItemAtIndexPath indexPath  NSIndexPath  - gt  UICollectionViewCell       var cell UICollectionViewCell collectionView dequeueReusableCellWithReuseIdentifier  collectionCell   forIndexPath  indexPath  as UICollectionViewCell      cell backgroundColor   UIColor greenColor        return cell    func numberOfSectionsInCollectionView collectionView  UICollectionView  - gt  Int           warning Incomplete implementation  return the number of sections     return 1

User · Answer

For whose want create a Custom Cell    CustomCell h    import  lt UIKit UIKit h gt    interface HeaderCollectionViewCell   UICollectionViewCell  property  strong nonatomic  UIImageView  image   end     CustomCell m    import  HeaderCollectionViewCell h    implementation HeaderCollectionViewCell  define IMAGEVIEW BORDER LENGTH 5  -  instancetype initWithFrame  CGRect frame       self    super initWithFrame frame       if  self             self setup             return self      - void setup       image     UIImageView alloc  initWithFrame  CGRectInset self bounds  IMAGEVIEW BORDER LENGTH  IMAGEVIEW BORDER LENGTH          self addSubview  image       end    UIViewController h    import  lt UIKit UIKit h gt     interface HomeViewController   UIViewController lt UICollectionViewDataSource UICollectionViewDelegateFlowLayout gt   property  strong nonatomic  UICollectionView  collectionView    end    UIViewController m    import  HomeViewController h   import  HomeView h   import  HeaderCollectionViewCell h    interface HomeViewController     property  nonatomic  NSString  cellID    end   implementation HomeViewController    -  void viewDidLoad        super viewDidLoad       self view backgroundColor   UIColor whiteColor        cellID     id        UICollectionViewFlowLayout  layout     UICollectionViewFlowLayout alloc  init        collectionView     UICollectionView alloc  initWithFrame self view frame collectionViewLayout layout           collectionView registerClass  HeaderCollectionViewCell class  forCellWithReuseIdentifier  cellID            collectionView setDataSource self         collectionView setDelegate self         collectionView backgroundColor   UIColor redColor         self view addSubview  collectionView         -  NSInteger collectionView  UICollectionView   collectionView numberOfItemsInSection  NSInteger section      return 4     -    kindof UICollectionViewCell   collectionView  UICollectionView   collectionView cellForItemAtIndexPath  NSIndexPath   indexPath       HeaderCollectionViewCell  cell    collectionView dequeueReusableCellWithReuseIdentifier  cellID forIndexPath indexPath        cell image image    UIImage imageNamed   premium-icon         return cell     - UITabBarItem   tabBarItem      return   UITabBarItem alloc  initWithTitle   In  cio  image  UIImage imageNamed   home-icon   tag 0        end

User · Answer

Swift 5 XCode 11 5 import UIKit     1  When creating this view  instanciate this class with the param  quot collectionViewLayout  UICollectionViewFlowLayout quot    class BespokeCollectionViewController  UICollectionViewController  UICollectionViewDelegateFlowLayout       var cellId    quot AwesomeCell quot           override func viewDidLoad             super viewDidLoad                       2  Register a reusable cell          collectionView register UICollectionViewCell self  forCellWithReuseIdentifier  cellId                    3  Return number of items      override func collectionView   collectionView  UICollectionView  numberOfItemsInSection section  Int  - gt  Int           return 5                   4  Define the reusable cell      override func collectionView   collectionView  UICollectionView  cellForItemAt indexPath  IndexPath  - gt  UICollectionViewCell           let cell   collectionView dequeueReusableCell withReuseIdentifier  cellId  for  indexPath             You can cast type above as such     for  indexPath  as  BespokeCell         return cell                   5  Define the size of the cell  This depends on protocol  UICollectionViewDelegateFlowLayout  to work      func collectionView   collectionView  UICollectionView  layout collectionViewLayout  UICollectionViewLayout  sizeForItemAt indexPath  IndexPath  - gt  CGSize           let width   view frame width    In this example the width is the same as the whole view          let height   CGFloat 200          return CGSize width  width  height  height           To use your bespoke class  don t forget the collectionViewLayout param  let layout   UICollectionViewFlowLayout   let myViewController   WorkoutViewController collectionViewLayout  layout   If you re not using the storyboard  you need to attach this view to the window  That s a different problem  Systems up to iOS 12 will handle the window logic on the AppDelegate file  On iOS 13   this logic is handled on the SceneDelegate file  window  rootViewController   someController  Good luck

User · Answer

Swift 3  class TwoViewController  UIViewController  UICollectionViewDataSource  UICollectionViewDelegateFlowLayout  UICollectionViewDelegate        override func viewDidLoad             super viewDidLoad            let flowLayout   UICollectionViewFlowLayout            let collectionView   UICollectionView frame  self view bounds  collectionViewLayout  flowLayout          collectionView register UICollectionViewCell self  forCellWithReuseIdentifier   collectionCell           collectionView delegate   self         collectionView dataSource   self         collectionView backgroundColor   UIColor cyan          self view addSubview collectionView             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   collectionCell   for  indexPath as IndexPath           cell backgroundColor   UIColor green         return cell            func collectionView   collectionView  UICollectionView  layout collectionViewLayout  UICollectionViewLayout  sizeForItemAt indexPath  IndexPath  - gt  CGSize               return CGSize width  50  height  50             func collectionView   collectionView  UICollectionView  layout collectionViewLayout  UICollectionViewLayout  insetForSectionAt section  Int  - gt  UIEdgeInsets               return UIEdgeInsets top  5  left  5  bottom  5  right  5

User · Answer

You can handle custom cell in uicollection view see below code   -  void viewDidLoad     UINib  nib2    UINib nibWithNibName   YourCustomCell  bundle nil        CollectionVW registerNib nib2 forCellWithReuseIdentifier   YourCustomCell          UICollectionViewFlowLayout  flowLayout     UICollectionViewFlowLayout alloc  init        flowLayout setItemSize CGSizeMake 200  230        flowLayout minimumInteritemSpacing   0       flowLayout setScrollDirection UICollectionViewScrollDirectionVertical        CollectionVW setCollectionViewLayout flowLayout         CollectionVW reloadData       pragma mark - COLLECTIONVIEW  pragma mark Collection View CODE  - NSInteger numberOfSectionsInCollectionView  UICollectionView   collectionView       return 1     -  NSInteger collectionView  UICollectionView   collectionView numberOfItemsInSection  NSInteger section       return Array count     -  UICollectionViewCell   collectionView  UICollectionView   collectionView cellForItemAtIndexPath  NSIndexPath   indexPath       static NSString  cellIdentifier     YourCustomCell       YourCustomCell  cell    YourCustomCell    collectionView dequeueReusableCellWithReuseIdentifier cellIdentifier forIndexPath indexPath        cell MainIMG image  UIImage imageNamed  Array objectAtIndex indexPath row          return cell     - void collectionView  UICollectionView   collectionView didSelectItemAtIndexPath  NSIndexPath   indexPath       pragma mark Collection view layout things    Layout  Set cell size -  CGSize collectionView  UICollectionView   collectionView layout  UICollectionViewLayout  collectionViewLayout sizeForItemAtIndexPath  NSIndexPath   indexPath       CGSize mElementSize      mElementSize CGSizeMake kScreenWidth 3 4  150       return mElementSize      -  CGFloat collectionView  UICollectionView   collectionView layout  UICollectionViewLayout  collectionViewLayout minimumLineSpacingForSectionAtIndex  NSInteger section       return 5 0        Layout  Set Edges -  UIEdgeInsets collectionView   UICollectionView   collectionView layout  UICollectionViewLayout  collectionViewLayout insetForSectionAtIndex  NSInteger section       if  isIphone5    isiPhone4                return UIEdgeInsetsMake 15 15 5 15       top  left  bottom  right           else if  isIphone6                return UIEdgeInsetsMake 15 15 5 15       top  left  bottom  right           else if  isIphone6P                return UIEdgeInsetsMake 15 15 5 15       top  left  bottom  right            return UIEdgeInsetsMake 15 15 5 15       top  left  bottom  right

User · Answer

swift 4 code          ViewController swift     coolectionView        import UIKit  class ViewController  UIViewController   UICollectionViewDataSource  UICollectionViewDelegate UICollectionViewDelegateFlowLayout       IBOutlet weak var collectionView  UICollectionView       var items     1    2    3    4    5    6    7    8    9    10    11    12    13    14    15    16    17    18    19    20    21    22    23    24    25    26    27    28    29    30    31    32    33    34    35    36    37    38    39    40    41    42    43    44    45    46    47    48        override func viewDidLoad             super viewDidLoad              Do any additional setup after loading the view  typically from a nib             override func didReceiveMemoryWarning             super didReceiveMemoryWarning              Dispose of any resources that can be recreated             func collectionView   collectionView  UICollectionView  numberOfItemsInSection section  Int  - gt  Int           return self items count           func collectionView   collectionView  UICollectionView  layout collectionViewLayout  UICollectionViewLayout  sizeForItemAt indexPath  IndexPath  - gt  CGSize               if indexPath row   3    0                   return CGSize width collectionView frame width 2 - 7 5   height  100                    else                       return CGSize width collectionView frame width - 10   height  100                            make a cell for each cell index path     func collectionView   collectionView  UICollectionView  cellForItemAt indexPath  IndexPath  - gt  UICollectionViewCell               get a reference to our storyboard cell         let cell   collectionView dequeueReusableCell withReuseIdentifier   CollectionViewCell1234   for  indexPath as IndexPath  as  CollectionViewCell1234             Use the outlet in our custom class to get a reference to the UILabel in the cell         cell lbl1 text   self items indexPath item          cell backgroundColor   UIColor cyan    make cell more visible in our example project         cell layer borderColor   UIColor black cgColor         cell layer borderWidth   1         cell layer cornerRadius   8          return cell           func collectionView   collectionView  UICollectionView  didSelectItemAt indexPath  IndexPath               handle tap events         print  You selected cell    indexPath item

User · Answer

Building off  Warewolf s answer  the next step is to create your own custom cell   Go to File - gt  New - gt  File - gt  User Interface - gt  Empty - gt  Call this nib  customNib   In your customNib drag a UICollectionView Cell in  Give it reuse cell identifier   Cell   File - gt  New - gt  File - gt  Cocoa Touch Class - gt  Class named  CustomCollectionViewCell  subclass if UICollectionViewCell  Go back to the custom nib  click cell and make this custom class  CustomCollectionViewCell   Go to your viewDidLoad viewcontroller and instead of     collectionView registerClass  UICollectionViewCell class  forCellWithReuseIdentifier   cellIdentifier     have   UINib  nib    UINib nibWithNibName   customNib  bundle nil     collectionView registerNib nib forCellWithReuseIdentifier   Cell    Also  change  to your new cell identifier   UICollectionViewCell  cell  collectionView dequeueReusableCellWithReuseIdentifier   Cell  forIndexPath indexPath

User · Answer

colection view exam       import  CollectionViewController h   import  BuyViewController h   import  CollectionViewCell h    interface CollectionViewController          NSArray  mobiles      NSArray   costumes      NSArray  shoes      NSInteger selectpath      NSArray  mobilerate      NSArray  costumerate      NSArray  shoerate     end   implementation CollectionViewController  -  void viewDidLoad        super viewDidLoad       self title   self receivename      mobiles     NSArray alloc initWithObjects   7 jpg    6 jpg    5 jpg   nil       costumes     NSArray alloc initWithObjects   shirt jpg    costume2 jpg    costume1 jpg   nil       shoes     NSArray alloc initWithObjects   shoe jpg    shoe1 jpg    shoe2 jpg   nil       mobilerate     NSArray alloc initWithObjects   10000    11000    13000  nil       costumerate     NSArray alloc initWithObjects   699    999    899   nil       shoerate     NSArray alloc initWithObjects   599    499    300   nil     -  void didReceiveMemoryWarning        super didReceiveMemoryWarning      - NSInteger numberOfSectionsInCollectionView  UICollectionView   collectionView       return 1    - NSInteger collectionView  UICollectionView   collectionView numberOfItemsInSection  NSInteger section       return 3    - UICollectionViewCell   collectionView  UICollectionView   collectionView cellForItemAtIndexPath  NSIndexPath   indexPath       static NSString  cellId     cell       UICollectionViewCell  cell    collectionView dequeueReusableCellWithReuseIdentifier cellId forIndexPath indexPath        UIImageView  collectionImg    UIImageView    cell viewWithTag 100        if   self receivename isEqualToString   Mobiles                  collectionImg image    UIImage imageNamed  mobiles objectAtIndex indexPath row              else if   self receivename isEqualToString   Costumes                  collectionImg image    UIImage imageNamed  costumes objectAtIndex indexPath row              else               collectionImg image    UIImage imageNamed  shoes objectAtIndex indexPath row              return cell     - void collectionView  UICollectionView   collectionView didSelectItemAtIndexPath  NSIndexPath   indexPath        selectpath   indexPath row       self performSegueWithIdentifier   buynow  sender self             In a storyboard-based application  you will often want to do a little -  void prepareForSegue  UIStoryboardSegue   segue sender  id sender       if   segue identifier isEqualToString   buynow                  BuyViewController  obj   segue destinationViewController          if   self receivename isEqualToString   Mobiles                          obj reciveimg    mobiles objectAtIndex selectpath               obj labelrecive    mobilerate objectAtIndex selectpath                      else if   self receivename isEqualToString   Costumes                          obj reciveimg    costumes objectAtIndex selectpath               obj labelrecive    costumerate objectAtIndex selectpath                     else                       obj reciveimg    shoes objectAtIndex selectpath               obj labelrecive    shoerate objectAtIndex selectpath                            Get the new view controller using  segue destinationViewController                  Pass the selected object to the new view controller            end    h file   interface CollectionViewController   UIViewController lt UICollectionViewDelegate UICollectionViewDataSource gt   property  strong  nonatomic  IBOutlet UICollectionView  collectionView   property  strong nonatomic  NSString  receiveimg   property  strong nonatomic  NSString  receivecostume   property  strong nonatomic NSString  receivename    end

User · Answer

Header file --   interface ViewController   UIViewController lt UICollectionViewDataSource UICollectionViewDelegateFlowLayout gt        UICollectionView   collectionView      Implementation File --  -  void viewDidLoad         super viewDidLoad        self view     UIView alloc  initWithFrame   UIScreen mainScreen  bounds          UICollectionViewFlowLayout  layout   UICollectionViewFlowLayout alloc  init        collectionView   UICollectionView alloc  initWithFrame self view frame collectionViewLayout layout         collectionView setDataSource self         collectionView setDelegate self          collectionView registerClass  UICollectionViewCell class  forCellWithReuseIdentifier   cellIdentifier          collectionView setBackgroundColor  UIColor redColor          self view addSubview  collectionView            Do any additional setup after loading the view  typically from a nib     -  NSInteger collectionView  UICollectionView   collectionView numberOfItemsInSection  NSInteger section       return 15        The cell that is returned must be retrieved from a call to -dequeueReusableCellWithReuseIdentifier forIndexPath  -  UICollectionViewCell   collectionView  UICollectionView   collectionView cellForItemAtIndexPath  NSIndexPath   indexPath       UICollectionViewCell  cell  collectionView dequeueReusableCellWithReuseIdentifier   cellIdentifier  forIndexPath indexPath        cell backgroundColor  UIColor greenColor       return cell     -  CGSize collectionView  UICollectionView   collectionView layout  UICollectionViewLayout  collectionViewLayout sizeForItemAtIndexPath  NSIndexPath   indexPath       return CGSizeMake 50  50       Output---

User · Answer

pragma mark -      pragma mark - UICollectionView Datasource and Delegates      - NSInteger numberOfSectionsInCollectionView  UICollectionView   collectionView               return 1             - NSInteger collectionView  UICollectionView   collectionView numberOfItemsInSection  NSInteger section               return Arr AllCulturalButtler count             - UICollectionViewCell   collectionView  UICollectionView   collectionView cellForItemAtIndexPath  NSIndexPath   indexPath               static NSString  coll   FromCulturalbutlerCollectionViewCell           FromCulturalbutlerCollectionViewCell  cell  collectionView dequeueReusableCellWithReuseIdentifier coll forIndexPath indexPath           cell lbl categoryname text   Arr AllCulturalButtler objectAtIndex indexPath row  Category name           cell lbl date text   Arr AllCulturalButtler objectAtIndex indexPath row  event Start date           cell lbl location text   Arr AllCulturalButtler objectAtIndex indexPath row  Location name            cell Img Event setImageWithURL  APPDELEGATE getURLForMediumSizeImage   EventObj    Arr AllCulturalButtler objectAtIndex indexPath row  Event image name   placeholderImage nil usingActivityIndicatorStyle UIActivityIndicatorViewStyleGray           cell button Bookmark selected   Arr AllCulturalButtler objectAtIndex indexPath row  Event is bookmarked            cell button Bookmark addTarget self action  selector btn bookmarkClicked   forControlEvents UIControlEventTouchUpInside           cell button Bookmark tag indexPath row            return cell            -  void collectionView  UICollectionView   collectionView didSelectItemAtIndexPath  NSIndexPath   indexPath                 self performSegueWithIdentifier SEGUE CULTURALBUTLER KULTURELLIS DETAIL sender self             stroy board navigation -  void prepareForSegue  UIStoryboardSegue   segue sender  id sender       if   segue identifier isEqualToString   Overview Register                  WDRegisterViewController  obj  WDRegisterViewController    segue destinationViewController           obj str Title   Edit Profile           obj isRegister NO                        self performSegueWithIdentifier   Overview Measure  sender nil          UIStoryboard  sb    UIStoryboard storyboardWithName   Main  bundle nil       WDPeekViewController  Peek    WDPeekViewController    sb instantiateViewControllerWithIdentifier   WDPeekViewController      self navigationController pushViewController tabBarController animated YES

[ios] Creating a UICollectionView programmatically

Examples related to ios

Examples related to objective-c

Examples related to cocoa-touch

Examples related to uicollectionview