Advertisements
Everything about iOS app development
Create Custom Layout In IOS Using Swift CollectionViewCells

Create custom layout with multiple UICollectionViewCells

Post Series: Create an iOS app

I’m back with a new tutorial again, this time I created a custom design – check it out here – from my last tutorial and came up with a custom layout that I met a thousand times while making iOS apps.

The basic idea behind this UI was, that if you were to sell a product or offer your services to your customers, you will obviously put your best product/service in the first place, where nobody can miss it. This may generate additional revenue and also makes your app POP.

About the UI

This custom layout was setup to display multiple products in a horizontally scrollable view, and the rest in a 2 column grid view, plus some extra cells that displayed advertisements.

The first or the top section is for products/services that you want to highlight, they could be:

  • most popular products, videos, recipes, etc
  • recently added cars – for car dealers
  • sales, coupons
  • some images of your company

How to achieve such a custom layout

I used a custom layout subclassed from UICollectionViewFlowLayout to achieve the desired effect and custom objects that were also using custom UICollectionViewCells. The core logic lies behind the sizing method:

That ensures each cell with the given object type in it gets the right size. As you can see, you just request the item at the given indexPath – itemAt(indexPath) – and check the class of that item, and resized it accordingly.

I hope you enjoyed this tutorial, slowly but surely getting back at videos, but there is still a long way to make my communication and programming skills work together flawlessly.

If you enjoyed, like, share and subscribe so I get a confirmation it is something I should be doing.

You can download the project below.

%d bloggers like this: