Everything about iOS app development
Switch Between Grid Layout To List Layout Ios Swift

How to switch from one layout to another in UICollectionView

Post Series: Create an iOS app

To display your content in an UICollectionView you’ll need a layout. What layout you come up with is up to you (or to your client). In the last 1-2 years, I fell in love with UICollectionViews and UICollectionViewFlowLayouts. If you were to create a custom looking layout within your app, these would be your go to objects.

In this post I’m going to show you how to create a custom list layout with UICollectionViewFlowLayout object and switch to another grid layout with a touch of a button. If you wish to read more about them, make sure to check out Apple’s documentation here.

Check it on my Youtube channel

Check out the previous tutorial here, as this project is built on top of that.

Create a new List Layout

Creating a new layout in this project is actually the same as creating the grid in my previous example. What you would need to do is just, create a new file, subclass it from UICollectionViewFlowLayout and name it ListLayout.

Than go to the GridLayout class and copy everything from there. (We could also use the GridLayout object, as it supports 1 column setup as well, but if you were to customise the hell out of your list layout, this approach is better).

The only thing we need to change for our new layout is the initialiser method. Since the width of the cells are set (equal to the width of the collectionView), we just need to set the height for them. Our init method will look like this:

We need to add a new property to the class and call it itemHeight which will be the height of each cell.

Now we need to overwrite the itemSize get method to tell the layout what sizes it should use to configure the cells.

So basically we modify the itemWidth property, and creating a new CGSize value from the calculated width and the itemHeight we provided at the init method.

Switch from one layout to another

Now that we have the new class, it is time to add an option to switch between them. We need 3 things for that.

  1. Add a button somewhere on your screen (in my example I added an UIBarbuttonItem onto the navigationBar.
  2. Initialise the new layout object
  3. Add a method that is called when the button is pressed, that makes the switch.

Adding the button is simple, just go to the Storyboard and drag and drop the barbuttonItem to your navigationBar, or call this in your viewDidLoad method:

Than, implement the method that you specified in the button’s selector:

So, basically what you see here is an if statement, that check the current layout which is attached to the collectionView. If it is the gridlayout, than it changes it to the list one, if it’s the list, than switches to the grid.

And of course, don’t forget to initialise.

That’s all you need to get this thing running and to switch between the 2 layouts.

Hope you guys enjoyed this little tutorial, if you have any comments, leave them down below, see you in the next one!