SwiftUI Tutorial – How to create a Pinterest Hobbie Selection Grid using Xcode 12.

Welcome to a new SwiftUI tutorial. We are going to be talking about Grids, LazyVGrid in SwiftUI 2.0 and how we can create a Pinterest styled Hobbies selection.

This is what we want to achieve by the end of this tutorial!

Let’s get started 👌

Let’s open up Xcode 12

Then call the project HobbieGrid_SwiftUI or whatever you want, save the project. Now we are set up, we are going to start by adding some var’s and State that we will need for creating the Grid. Also we are going to create some simple data for the Grid.

We can now go ahead and create our List of Hobbies.

We are going to create the first grid now. We are going to create this inside and NavigationView and a ScrollView.

What is a matchedGeometryEffect or a namespace?

This defines a group of views with a synchronised geometry using an identifier and a namespace that we have provided above. 👍 Also, we have used onTapGesture so when the user taps on a hobbie this will move to the chosen hobbies.

That’s all done for the first Grid. We are going to start creating the second grid this is where the selected hobbies will be shown. First we are going to create some Text called Hobbies Chosen.

We are going to create our second grid now.

Let’s add a navigationTitle and some simple animation.

Conclusion 👏

Awesome, we have now finished this tutorial on how to create a Pinterest Hobbie Selection Grid using Xcode 12. We have learnt how to create columns, use LazyVGrid and much more. With this knowledge you should be able to create some dope Grids.

If you would like the whole source code of this tutorial GitHub

I hope you have enjoyed this tutorial! If you want to learn more about SwiftUI and Neumorphic Design, check out our YouTube channel for other awesome SwiftUI tutorials. Also make sure to keep yourself up to date with our upcoming tutorials on Instagram

Thank you all for reading this content.