{"id":2429,"date":"2015-10-04T07:19:25","date_gmt":"2015-10-04T07:19:25","guid":{"rendered":"http:\/\/truelogic.org\/wordpress\/?p=2429"},"modified":"2015-10-04T07:20:23","modified_gmt":"2015-10-04T07:20:23","slug":"how-to-make-an-image-grid-in-swift","status":"publish","type":"post","link":"https:\/\/truelogic.org\/wordpress\/2015\/10\/04\/how-to-make-an-image-grid-in-swift\/","title":{"rendered":"How to Make an Image Grid in Swift"},"content":{"rendered":"            <script type=\"text\/javascript\" src=\"https:\/\/truelogic.org\/wordpress\/wp-content\/plugins\/wordpress-code-snippet\/scripts\/shBrushJava.js\"><\/script>\n<h4>OVERVIEW<\/h4>\n<p>The best and most effective way to make a rectangular grid of images is to use the CollectionView object. Though one would assume the TableView would be a better approach, but the CollectionView offers far more in terms of customization and features and the usage is basically the same as that of a TableView.<\/p>\n<p>I am going to use the default ViewController for this purpose and not creating a separate Controller for the CollectionView. I am using the Storyboard and it is assumed that the View will contain other components apart from the image grid, which is quite often a real-world case.<\/p>\n<h4>IMAGE DATA<\/h4>\n<p>The images used to populate the grid are taken from images in the Assets.xcassets list. In this case there are two images, which are stored in an array and they are repeated through the grid.<\/p>\n<p>&nbsp;<\/p>\n<h4>STEPS<\/h4>\n<p>It is not complicated to setup a CollectionView , but generally it involves several small steps and its easy to sometimes forget one step, which causes the CollectionView to not work. The steps are given below:<\/p>\n<p>1.Create a Single View Application<\/p>\n<p><a href=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.05.44-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-medium wp-image-2431\" src=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.05.44-AM-620x435.png\" alt=\"Screen Shot 2015-10-04 at 11.05.44 AM\" width=\"620\" height=\"435\" srcset=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.05.44-AM-620x435.png 620w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.05.44-AM-300x210.png 300w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.05.44-AM.png 763w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.06.22-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-medium wp-image-2432\" src=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.06.22-AM-620x447.png\" alt=\"Screen Shot 2015-10-04 at 11.06.22 AM\" width=\"620\" height=\"447\" srcset=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.06.22-AM-620x447.png 620w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.06.22-AM-300x216.png 300w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.06.22-AM.png 747w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>2.Open Storyboard and put a title label in the center. Set the constraints so that it is centered horizontally.<\/p>\n<p><a href=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.07.42-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-medium wp-image-2433\" src=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.07.42-AM-620x279.png\" alt=\"Screen Shot 2015-10-04 at 11.07.42 AM\" width=\"620\" height=\"279\" srcset=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.07.42-AM-620x279.png 620w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.07.42-AM-300x135.png 300w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.07.42-AM-940x423.png 940w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.07.42-AM-900x405.png 900w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.07.42-AM.png 1366w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.08.28-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-medium wp-image-2434\" src=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.08.28-AM-620x440.png\" alt=\"Screen Shot 2015-10-04 at 11.08.28 AM\" width=\"620\" height=\"440\" srcset=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.08.28-AM-620x440.png 620w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.08.28-AM-300x213.png 300w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.08.28-AM.png 822w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.08.39-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-medium wp-image-2435\" src=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.08.39-AM-620x433.png\" alt=\"Screen Shot 2015-10-04 at 11.08.39 AM\" width=\"620\" height=\"433\" srcset=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.08.39-AM-620x433.png 620w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.08.39-AM-300x210.png 300w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.08.39-AM.png 783w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>3.We are going to use the iPhone 6 simulator. But you are free to use any target device.<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.08.59-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-2436\" src=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.08.59-AM.png\" alt=\"Screen Shot 2015-10-04 at 11.08.59 AM\" width=\"583\" height=\"512\" srcset=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.08.59-AM.png 583w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.08.59-AM-300x263.png 300w\" sizes=\"auto, (max-width: 583px) 100vw, 583px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>4.On building and running the app, this is how the title label should look.<\/p>\n<p><a href=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.11.40-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-medium wp-image-2438\" src=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.11.40-AM-620x538.png\" alt=\"Screen Shot 2015-10-04 at 11.11.40 AM\" width=\"620\" height=\"538\" srcset=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.11.40-AM-620x538.png 620w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.11.40-AM-300x260.png 300w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.11.40-AM.png 785w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>5.Now we will add a CollectionView to the View. Let it fill the whole width of the view and as much height as you want. Note that we will not be adding a Collection View Controller or a Collection View Cell, since the default View Controller will handle our Collection and the CollectionView already has a CollectionViewCell.<\/p>\n<p><a href=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.11.58-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-2439\" src=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.11.58-AM.png\" alt=\"Screen Shot 2015-10-04 at 11.11.58 AM\" width=\"304\" height=\"213\" srcset=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.11.58-AM.png 304w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.11.58-AM-300x210.png 300w\" sizes=\"auto, (max-width: 304px) 100vw, 304px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.12.21-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-medium wp-image-2440\" src=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.12.21-AM-620x501.png\" alt=\"Screen Shot 2015-10-04 at 11.12.21 AM\" width=\"620\" height=\"501\" srcset=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.12.21-AM-620x501.png 620w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.12.21-AM-300x243.png 300w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.12.21-AM.png 701w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>6.We are using two images added to our assets folder<\/p>\n<p><a href=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.13.29-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-medium wp-image-2441\" src=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.13.29-AM-620x375.png\" alt=\"Screen Shot 2015-10-04 at 11.13.29 AM\" width=\"620\" height=\"375\" srcset=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.13.29-AM-620x375.png 620w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.13.29-AM-300x181.png 300w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.13.29-AM-940x568.png 940w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.13.29-AM-900x544.png 900w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.13.29-AM.png 1108w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>7.We will now set the size of each of the Cell in the CollectionView which will hold the images. This is done by clicking the CollectionView in the storyboard and going to the Size Inspector . Change the Cell Size to 100 x 100 as shown below. This is because our images will be 95 x 95 in size, and we want to keep a little padding around each image. Set the Min Spacing for Cells and Lines to 2. This represents the gap between cells and rows.<\/p>\n<p><a href=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.14.39-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-medium wp-image-2442\" src=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.14.39-AM-620x254.png\" alt=\"Screen Shot 2015-10-04 at 11.14.39 AM\" width=\"620\" height=\"254\" srcset=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.14.39-AM-620x254.png 620w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.14.39-AM-300x123.png 300w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.14.39-AM-940x385.png 940w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.14.39-AM-900x369.png 900w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.14.39-AM.png 996w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>8. We will now add an ImageView to the CollectionView cell. Drag the ImageView over the cell till it gets highlighted in blue and then drop it.<\/p>\n<p><a href=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.14.58-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-2443\" src=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.14.58-AM.png\" alt=\"Screen Shot 2015-10-04 at 11.14.58 AM\" width=\"287\" height=\"358\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>9.Click on the ImageView and then change the size from the Size Inspector to make it 95 x 95<\/p>\n<p><a href=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.15.45-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-medium wp-image-2444\" src=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.15.45-AM-620x358.png\" alt=\"Screen Shot 2015-10-04 at 11.15.45 AM\" width=\"620\" height=\"358\" srcset=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.15.45-AM-620x358.png 620w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.15.45-AM-300x173.png 300w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.15.45-AM-940x542.png 940w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.15.45-AM-900x519.png 900w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.15.45-AM.png 997w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>10.The CollectionView needs to be assigned a Delegate and a DataSource . This will be the current ViewController in which the CollectionView is placed. Right click on the CollectionView, \u00a0Under Outlets. drag the empty circle in front of dataSource and drag it to the yellow icon at the top of the View Controller. Repeat the same for delegate.<\/p>\n<p><a href=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.17.16-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-medium wp-image-2446\" src=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.17.16-AM-620x467.png\" alt=\"Screen Shot 2015-10-04 at 11.17.16 AM\" width=\"620\" height=\"467\" srcset=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.17.16-AM-620x467.png 620w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.17.16-AM-300x226.png 300w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.17.16-AM.png 779w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.17.30-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-medium wp-image-2447\" src=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.17.30-AM-620x342.png\" alt=\"Screen Shot 2015-10-04 at 11.17.30 AM\" width=\"620\" height=\"342\" srcset=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.17.30-AM-620x342.png 620w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.17.30-AM-300x166.png 300w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.17.30-AM-120x67.png 120w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.17.30-AM.png 797w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>11. We need to create a new Class which will control the CollectionViewCell in the Collection. All that this class will contain are the subviews that will go into the Cell. In our case, it will contain only an Image. So we create a new Class first by going to File-&gt;New-&gt;File-&gt;Cocoa Touch Class and entering a name for our Class: MyImageCell<\/p>\n<p><a href=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.20.22-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-medium wp-image-2448\" src=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.20.22-AM-620x435.png\" alt=\"Screen Shot 2015-10-04 at 11.20.22 AM\" width=\"620\" height=\"435\" srcset=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.20.22-AM-620x435.png 620w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.20.22-AM-300x211.png 300w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.20.22-AM.png 765w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>12.In the Storyboard, we select the CollectionViewCell, open the Identity Inspector and assign it the classname of MyImageCell. Note that this Class is assigned to the Cell and not the ImageView which is contained in it.<\/p>\n<p><a href=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.22.52-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-medium wp-image-2449\" src=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.22.52-AM-620x317.png\" alt=\"Screen Shot 2015-10-04 at 11.22.52 AM\" width=\"620\" height=\"317\" srcset=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.22.52-AM-620x317.png 620w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.22.52-AM-300x153.png 300w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.22.52-AM-940x481.png 940w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.22.52-AM-900x460.png 900w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.22.52-AM.png 1113w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>13.We now need to create an IBOutlet for the ImageView within the Cell. Keeping the Storyboard open and ImageView selected, click on Assistant Editor. You will have to manually choose the MyImage.Swift file and then ctrl-drag the ImageView into the swift file to create an IBOutlet. Lets call it image<\/p>\n<p><a href=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.23.57-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-medium wp-image-2450\" src=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.23.57-AM-620x341.png\" alt=\"Screen Shot 2015-10-04 at 11.23.57 AM\" width=\"620\" height=\"341\" srcset=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.23.57-AM-620x341.png 620w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.23.57-AM-300x165.png 300w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.23.57-AM-940x518.png 940w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.23.57-AM-120x67.png 120w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.23.57-AM-900x496.png 900w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.23.57-AM.png 1095w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>14.In Storyboard, select the CollectionViewCell, (not ImageView) and open the Attributes Inspector. Give it an id which will be called in the swift code.<\/p>\n<p><a href=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.26.03-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-medium wp-image-2451\" src=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.26.03-AM-620x330.png\" alt=\"Screen Shot 2015-10-04 at 11.26.03 AM\" width=\"620\" height=\"330\" srcset=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.26.03-AM-620x330.png 620w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.26.03-AM-300x160.png 300w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.26.03-AM-940x501.png 940w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.26.03-AM-900x479.png 900w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.26.03-AM.png 1104w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>15.Select the CollectionView and set the height and width as required. We are going to make it fill up the screen width.<\/p>\n<p><a href=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.30.31-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-medium wp-image-2453\" src=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.30.31-AM-620x427.png\" alt=\"Screen Shot 2015-10-04 at 11.30.31 AM\" width=\"620\" height=\"427\" srcset=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.30.31-AM-620x427.png 620w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.30.31-AM-300x206.png 300w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.30.31-AM.png 811w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>16.Now we will add in the code to the ViewController.swift file.<\/p>\n<ul>\n<li>Two variables: <em>imageData<\/em> to hold a string array of the image names, <em>imageCounter<\/em>, which will be used to iterate through the imageData.<\/li>\n<li>ViewController will declare\u00a0<em>UICollectionViewDelegateFlowLayout, UICollectionViewDataSource\u00a0<\/em> in its definition since it is acting as a controller and datasource for the CollectionView<\/li>\n<li>Four methods which need to be implemented for handling the Collection:<\/li>\n<li><em>\u00a0 \u00a0 \u00a0 \u00a0collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -&gt; UICollectionViewCell<\/em><\/li>\n<li><em>\u00a0 \u00a0 numberOfSectionsInCollectionView(collectionView: UICollectionView) -&gt; Int<\/em><\/li>\n<li><em>\u00a0 \u00a0 collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -&gt; Int<\/em><\/li>\n<li><em>\u00a0 \u00a0collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout,\u00a0 \u00a0 \u00a0sizeForItemAtIndexPath indexPath: NSIndexPath) -&gt; CGSize<\/em><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>The <em>collectionView<\/em> function with <em>cellForItemAtIndexPath<\/em> handles the actual populating of the image data. The <em>numberOfSectionsInCollectionView<\/em> sets up the number of sections in the Collection, which is 1 in this case. <em>numberOfItemsInSection<\/em> sets how many items are there in the section. We have hard coded it to 20.\u00a0<em>sizeForItemAtIndexPath<\/em> sets the width and height\u00a0of the invidual cells. This value decides when a new row will be started. Generally a new row will start if the remaining space in the current row is less than the size of the Cell.<br \/>\n<pre class=\"brush: java\">\/\/\r\n\/\/  ViewController.swift\r\n\/\/  ImageGrid\r\n\/\/\r\n\/\/  Created by Amit Sengupta on 10\/4\/15.\r\n\/\/  Copyright &copy; 2015 amit. All rights reserved.\r\n\/\/\r\n\r\nimport UIKit\r\n\r\nclass ViewController: UIViewController,  UICollectionViewDelegateFlowLayout, UICollectionViewDataSource {\r\n\r\n    var imageData: [String] = [String]()\r\n    var imageCounter: Int = 0\r\n    \r\n    override func viewDidLoad() {\r\n        super.viewDidLoad()\r\n        \/\/ Do any additional setup after loading the view, typically from a nib.\r\n        imageData = [&quot;box-8&quot;, &quot;box-9&quot;]\r\n    }\r\n\r\n    override func didReceiveMemoryWarning() {\r\n        super.didReceiveMemoryWarning()\r\n        \/\/ Dispose of any resources that can be recreated.\r\n    }\r\n\r\n    \r\n    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -&gt; UICollectionViewCell {\r\n        \r\n            let cell = collectionView.dequeueReusableCellWithReuseIdentifier(&quot;cellId&quot;, forIndexPath: indexPath) as! MyImageCell\r\n            cell.backgroundColor = UIColor.blackColor()\r\n            var currImage:String = &quot;&quot;\r\n            currImage = self.imageData[self.imageCounter]\r\n            self.imageCounter += 1\r\n            if self.imageCounter &gt;= self.imageData.count {\r\n                    self.imageCounter = 0\r\n            }\r\n        \r\n            cell.image.image = UIImage(named: currImage)\r\n            return cell\r\n       \r\n        \r\n    }\r\n    \r\n    \r\n    func numberOfSectionsInCollectionView(collectionView: UICollectionView) -&gt; Int {\r\n        return 1\r\n    }\r\n    \r\n    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -&gt; Int {\r\n        return 20\r\n        \r\n     }\r\n    \r\n    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout,\r\n        sizeForItemAtIndexPath indexPath: NSIndexPath) -&gt; CGSize {\r\n                  return CGSize(width: 90, height: 90)\r\n        \r\n    }\r\n\r\n\r\n}\r\n<\/pre><br \/>\nThe output should look like this.<\/p>\n<p><a href=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.31.42-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-medium wp-image-2456\" src=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.31.42-AM-620x556.png\" alt=\"Screen Shot 2015-10-04 at 11.31.42 AM\" width=\"620\" height=\"556\" srcset=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.31.42-AM-620x556.png 620w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.31.42-AM-300x269.png 300w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-04-at-11.31.42-AM.png 755w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"mh-excerpt\"><p>OVERVIEW The best and most effective way to make a rectangular grid of images is to use the CollectionView object. Though one would assume the <a class=\"mh-excerpt-more\" href=\"https:\/\/truelogic.org\/wordpress\/2015\/10\/04\/how-to-make-an-image-grid-in-swift\/\" title=\"How to Make an Image Grid in Swift\">[&#8230;]<\/a><\/p>\n<\/div>","protected":false},"author":1,"featured_media":2456,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[310],"tags":[],"class_list":["post-2429","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-xcode-swift"],"_links":{"self":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts\/2429","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/comments?post=2429"}],"version-history":[{"count":8,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts\/2429\/revisions"}],"predecessor-version":[{"id":2458,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts\/2429\/revisions\/2458"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/media\/2456"}],"wp:attachment":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/media?parent=2429"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/categories?post=2429"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/tags?post=2429"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}