Everything about iOS app development
Grid To List Layout In IOS With Swift UicollectionViewlayout Flow Layout

From grid to list layout in iOS using Swift

I was approached by a fellow developer with a problem he wanted to solve on his own, but couldn’t get to the solution.

In this tutorial I want to show you how you can achieve the same effect that you see in the default Photos app, where you start with a grid layout and after selecting an image, you are taken to a new UIViewController displaying the images in a horizontal layout.

The solution

The solution is quite easy, all you need is two UIViewControllers and two UICollectionViewFlowLayouts. One viewController that has a collectionView in it, with a custom two column layout and vertical scrolling, and another one that display the items in a horizontal direction with paging enabled, so the current item is always in the center of the screen.

As you can see the layout is simple, as for the cells’ size it uses the collectionView’s frame size. So each cell takes up the whole size of the view. Datasource object is responsible for managing the data, that holds all the objects we wish to display, and conforms to UICollectionViewDataSource.

Enjoy the video.

Hope you liked this tutorial, if you did and feel like supporting the channel, please subscribe and check out my other videos as well.

Click on the button below to get the project.