How to make a simple collection view with Swift

Question

I m trying to learn how to use UICollectionView  The documentation is a little hard to understand and the tutorials that I found were either in Objective C or long complicated projects   When I was learning how to use UITableView  We   Swift s How to make a simple tableview with iOS 8 and Swift had a very basic setup and explanation to get me going  Is there anything like this for UICollectionView   The answer below is my attempt to learn to do this

User · Answer

UICollectionView is same as UITableView but it gives us the additional functionality of simply creating a grid view  which is a bit problematic in UITableView  It will be a very long post I mention a link from where you will get everything in simple steps

User · Answer

Delegates and Datasources of UICollectionView    MARK  UICollectionViewDataSource  override func numberOfSectionsInCollectionView collectionView  UICollectionView  - gt  Int       return 1       return number of sections in collection view    override func collectionView collectionView  UICollectionView  numberOfItemsInSection section  Int  - gt  Int       return 10      return number of rows in section    override func collectionView collectionView  UICollectionView  cellForItemAtIndexPath indexPath  NSIndexPath  - gt  UICollectionViewCell       let cell   collectionView dequeueReusableCellWithReuseIdentifier  collectionCell   forIndexPath  indexPath      configureCell cell  forItemAtIndexPath  indexPath      return cell        return your cell    func configureCell cell  UICollectionViewCell  forItemAtIndexPath  NSIndexPath        cell backgroundColor   UIColor blackColor           Customise your cell     override func collectionView collectionView  UICollectionView  viewForSupplementaryElementOfKind kind  String  atIndexPath indexPath  NSIndexPath  - gt  UICollectionReusableView       let view    collectionView dequeueReusableSupplementaryViewOfKind UICollectionElementKindSectionHeader  withReuseIdentifier   collectionCell   forIndexPath  indexPath  as UICollectionReusableView     return view      MARK  UICollectionViewDelegate override func collectionView collectionView  UICollectionView  didSelectItemAtIndexPath indexPath  NSIndexPath             When user selects the cell    override func collectionView collectionView  UICollectionView  didDeselectItemAtIndexPath indexPath  NSIndexPath            When user deselects the cell

User · Answer

For swift 4 2 --    MARK  UICollectionViewDataSource  func numberOfSectionsInCollectionView collectionView  UICollectionView  - gt  Int       return 1       return number of sections in collection view    func collectionView collectionView  UICollectionView  numberOfItemsInSection section  Int  - gt  Int       return 10      return number of rows in section    func collectionView collectionView  UICollectionView  cellForItemAtIndexPath indexPath  NSIndexPath  - gt  UICollectionViewCell       let cell   collectionView dequeueReusableCell withReuseIdentifier   collectionCell   for  indexPath as IndexPath      configureCell cell  cell  forItemAtIndexPath  indexPath      return cell        return your cell    func configureCell cell  UICollectionViewCell  forItemAtIndexPath  NSIndexPath        cell backgroundColor   UIColor black         Customise your cell     func collectionView collectionView  UICollectionView  viewForSupplementaryElementOfKind kind  String  atIndexPath indexPath  NSIndexPath  - gt  UICollectionReusableView       let view    collectionView dequeueReusableSupplementaryView ofKind  UICollectionElementKindSectionHeader  withReuseIdentifier   collectionCell   for  indexPath as IndexPath  as UICollectionReusableView     return view      MARK  UICollectionViewDelegate func collectionView collectionView  UICollectionView  didSelectItemAtIndexPath indexPath  NSIndexPath           When user selects the cell    func collectionView collectionView  UICollectionView  didDeselectItemAtIndexPath indexPath  NSIndexPath           When user deselects the cell

User · Answer

UICollectionView implementation is quite interesting  You can use the simple source code and watch a video tutorial using these links     https   github com Ady901 Demo02CollectionView git  https   www youtube com watch v 5SrgvZF67Yw  extension ViewController   UICollectionViewDataSource        func numberOfSections in collectionView  UICollectionView  - gt  Int           return 2            func collectionView   collectionView  UICollectionView  numberOfItemsInSection section  Int  - gt  Int           return nameArr count            func collectionView   collectionView  UICollectionView  cellForItemAt indexPath  IndexPath  - gt  UICollectionViewCell           let cell   collectionView dequeueReusableCell withReuseIdentifier   DummyCollectionCell   for  indexPath  as  DummyCollectionCell         cell titleLabel text   nameArr indexPath row          cell userImageView backgroundColor    blue         return cell           extension ViewController   UICollectionViewDelegate        func collectionView   collectionView  UICollectionView  didSelectItemAt indexPath  IndexPath            let alert   UIAlertController title   Hi   message     nameArr indexPath row     preferredStyle   alert          let action   UIAlertAction title   OK   style   default  handler  nil          alert addAction action          self present alert  animated  true  completion  nil

User · Answer

This project has been tested with Xcode 10 and Swift 4 2  Create a new project It can be just a Single View App  Add the code Create a new Cocoa Touch Class file  File  gt  New  gt  File     gt  iOS  gt  Cocoa Touch Class   Name it MyCollectionViewCell  This class will hold the outlets for the views that you add to your cell in the storyboard  import UIKit class MyCollectionViewCell  UICollectionViewCell             IBOutlet weak var myLabel  UILabel     We will connect this outlet later  Open ViewController swift and make sure you have the following content  import UIKit class ViewController  UIViewController  UICollectionViewDataSource  UICollectionViewDelegate            let reuseIdentifier    quot cell quot     also enter this string as the cell identifier in the storyboard     var items     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    quot 13 quot    quot 14 quot    quot 15 quot    quot 16 quot    quot 17 quot    quot 18 quot    quot 19 quot    quot 20 quot    quot 21 quot    quot 22 quot    quot 23 quot    quot 24 quot    quot 25 quot    quot 26 quot    quot 27 quot    quot 28 quot    quot 29 quot    quot 30 quot    quot 31 quot    quot 32 quot    quot 33 quot    quot 34 quot    quot 35 quot    quot 36 quot    quot 37 quot    quot 38 quot    quot 39 quot    quot 40 quot    quot 41 quot    quot 42 quot    quot 43 quot    quot 44 quot    quot 45 quot    quot 46 quot    quot 47 quot    quot 48 quot                    MARK  - UICollectionViewDataSource protocol             tell the collection view how many cells to make     func collectionView   collectionView  UICollectionView  numberOfItemsInSection section  Int  - gt  Int           return self items count                   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  reuseIdentifier  for  indexPath as IndexPath  as  MyCollectionViewCell                     Use the outlet in our custom class to get a reference to the UILabel in the cell         cell myLabel text   self items indexPath row     The row value is the same as the index of the desired text within the array          cell backgroundColor   UIColor cyan    make cell more visible in our example project                  return cell                   MARK  - UICollectionViewDelegate protocol          func collectionView   collectionView  UICollectionView  didSelectItemAt indexPath  IndexPath               handle tap events         print  quot You selected cell    indexPath item   quot            Notes  UICollectionViewDataSource and UICollectionViewDelegate are the protocols that the collection view follows  You could also add the UICollectionViewFlowLayout protocol to change the size of the views programmatically  but it isn t necessary  We are just putting simple strings in our grid  but you could certainly do images later   Set up the storyboard Drag a Collection View to the View Controller in your storyboard  You can add constraints to make it fill the parent view if you like   Make sure that your defaults in the Attribute Inspector are also  Items  1 Layout  Flow  The little box in the top left of the Collection View is a Collection View Cell  We will use it as our prototype cell  Drag a Label into the cell and center it  You can resize the cell borders and add constraints to center the Label if you like   Write  quot cell quot   without quotes  in the Identifier box of the Attributes Inspector for the Collection View Cell  Note that this is the same value as let reuseIdentifier    quot cell quot  in ViewController swift   And in the Identity Inspector for the cell  set the class name to MyCollectionViewCell  our custom class that we made   Hook up the outlets  Hook the Label in the collection cell to myLabel in the MyCollectionViewCell class   You can Control-drag   Hook the Collection View delegate and dataSource to the View Controller   Right click Collection View in the Document Outline  Then click and drag the plus arrow up to the View Controller     Finished Here is what it looks like after adding constraints to center the Label in the cell and pinning the Collection View to the walls of the parent   Making Improvements The example above works but it is rather ugly  Here are a few things you can play with  Background color In the Interface Builder  go to your Collection View  gt  Attributes Inspector  gt  View  gt  Background  Cell spacing Changing the minimum spacing between cells to a smaller value makes it look better  In the Interface Builder  go to your Collection View  gt  Size Inspector  gt  Min Spacing and make the values smaller   quot For cells quot  is the horizontal distance and  quot For lines quot  is the vertical distance  Cell shape If you want rounded corners  a border  and the like  you can play around with the cell layer  Here is some sample code  You would put it directly after cell backgroundColor   UIColor cyan in code above  cell layer borderColor   UIColor black cgColor cell layer borderWidth   1 cell layer cornerRadius   8  See this answer for other things you can do with the layer  shadow  for example   Changing the color when tapped It makes for a better user experience when the cells respond visually to taps  One way to achieve this is to change the background color while the cell is being touched  To do that  add the following two methods to your ViewController class     change background color when user touches cell func collectionView   collectionView  UICollectionView  didHighlightItemAt indexPath  IndexPath        let cell   collectionView cellForItem at  indexPath      cell  backgroundColor   UIColor red       change background color back when user releases touch func collectionView   collectionView  UICollectionView  didUnhighlightItemAt indexPath  IndexPath        let cell   collectionView cellForItem at  indexPath      cell  backgroundColor   UIColor cyan    Here is the updated look   Further study  A Simple UICollectionView Tutorial UICollectionView Tutorial Part 1  Getting Started UICollectionView Tutorial Part 2  Reusable Views and Cell Selection  UITableView version of this Q amp A  UITableView example for Swift

[ios] How to make a simple collection view with Swift

Examples related to ios

Examples related to swift

Examples related to uicollectionview