A beginners guide to UICollectionView Introduction of UICollectionView is a part of which enables you to add view in your App. This is highly flexible to meet your custom requirements. You can show list in any fashion i.e. Horizontal columns, Vertical rows, and grid etc. UICollectionView UIKit Framework list iOS In this tutorial, we are going to see how we can add a list to programmatically (We will not use ). ViewController storyboards Project setup Create a new XCode prepares the project and opens the General Tab XCode Project. Xcode project initial setup Since we are not going to use , we need to do some basic operations. Storyboards Delete (from project folder) Main.storyboard Delete (from project folder) LaunchScreen.storyboard Clear field in section of General tab Main Interface Deployment Info Main Interface cleared If we run the app now, you will get a completely black screen. By default, There is no window in your application. Hence we need to prepare one. Open your AppDelegate.swift file and navigate to the method and add the following code. didFinishLaunchingWithOptions Now go to your and add some background color to ViewController. This will help you identify the right view controller launched. ViewController and…. we get this Run it, ViewController with red background Now that we are at our , we can add to it. ViewController UICollectionView Adding UICollectionView to (Programmatically) ViewController Add a field in your and assign it a closure. After this, we need to add it as a subview of our `s view. Like, ViewController ViewController Every view in iOS needs a position on the screen. So it needs a frame or Constraints to place itself. Now add a helper method that applies constraints to it. and Call this method in after addition of collectionView. viewDidLoad() The above method applies constraints on collectionView to take up full screen. This view will be sticking to all the edges of ViewController To confirm this, we are going to add some background color to our collectionView. Add this line in method before adding subview. viewDidLoad() collectionView.backgroundColor = UIColor.blue Run the app and you will get a completely blue(or whatever color you have assigned to it) screen. This shows that your collectionView has inflated fully. Now we can change its background color to white. Let`s get some basics before jumping into code. A CollectionView requires a and a to render its content properly. layout object data source provides the layout information of each cell in the list. To be more specific, it provides the of each cell in collectionView. The is of type Hence each cell has x-origin, y-origin, height and width. Layout object frame frame CGRect . We have passed this layout object at the time of CollectionView initialization. let layout = UICollectionViewFlowLayout() let cv = UICollectionView(frame: .zero, collectionViewLayout: layout) is responsible for data supply to it e.g. number of Items in the collection view, cells etc. Data source Add DataSouce to UICollectionView Follow the steps: Add at the bottom of collectionView.dataSource = self viewDidLoad() Make your ViewController confirm to and protocol UICollectionViewDataSource UICollectionViewDelegateFlowLayout After adding protocols, your Xcode will throw an error and force you to add some method stubs. So expand the error and click the fix button. It will add the 2 stubs ( and to your Controller file. numberOfItemsInSection cellForItemAt) 4. Return some count of cells from method numberOfItemsInSection 5. Register a dummy cell in . Each cell in collectionView is a child of . CollectionView requires the cell registration with an identifier. viewDidLoad() UICollectionViewCell 6. Return a cell from method. In the previous step, we registered a cell. Now you need to dequeue the cell using the same identifier and return it. (There is no background color of the cell by default, so we need to set one to see it on screen). cellForItemAt Your controller file should look something like Now run the application, and you will get 6 blue square blocks. Since we know that the layout object provides the layout attributes such as the size of cell and position using the frame. By default, provides the cell with a dimension of 50x50 and hence you are getting small squared cells. Behind the scenes: UICollectionViewFlowLayout Now that we want to change the size of the cell, we can do this using method of . Add the following method to your controller sizeForItemAt UICollectionViewDelegateFlowLayout In addition to that, you need to conform to and like in UICollectionViewDelegate set the controller as a delegate to collection view collectionView.delegate = self viewDidLoad() Run the app, you will see a list Now the cells are enlarged. We can change the colors of the cell to look more vibrant. Let`s add an array of colors and apply the color according to the item`s indexPath. Now you will get and it looks better now. Finally, we have a working collection view with colored cells. You can get the complete source code at https://github.com/bxute/UICollectionViewExample What`s Next? Till now we have learned how to add collection view and dummy cells/items to it. You must be wondering about some texts, images or other components in the item of the cell. Here comes the Customization of . In the next blog, we will learn how to prepare a custom cell with and display some real data on the list. UICollectionViewCell
