SwiftUI Collection View Scrolling Layout with List, NavigationView, and Stack! (2019) Xcode 11
Create a horizontal collection view style layout in Apples new WWDC19 announced framework, Swift UI with List, ScrollView, Stack, and NavigationView.
Well fancy seeing you here, my name is Maxwell, and I run maxcodes.io. Nice to finally meet you.
I recorded a video on this exact topic found here.
Today we will create a scrollable list in SwiftUI with Images and Text. This is the closest solution to a UICollectionView in SwiftUI I have found yet. Btw, you can use UICollectionView’s WITH SwiftUI but the goal in this article is to create a collectionView style layout in SwiftUI and ONLY SwiftUI.
Requirements: Xcode 11 Beta
Step 1 — Create a Project
First, create a single view application in Xcode 11 Beta. When you create the project make sure Use SwiftUI is selected.
Step 2— Add a NavigationView
Next, we will add a Navigation View with a Navigation Bar Title.
(notice I am using the canvas preview live editor or whatever the junk they are calling it) You do not have to use this, you can compile to the simulator.
This is required if you are still running on Mojave. Catalina however, will allow you access to the live preview simulator.
Step 3 — Declare A Box Struct.
- declare your Box type
- create an array called Boxes with several boxes
Step 4 — Create a BoxView View Struct
Write this code below your ContentView struct. This will give you a nice view with a small image with a nice border radius with a solid title right below it.
I encourage you to play around with the values as it will give you more skill in SwiftUI and development in general!
If you want to watch me gradually get to this point you can watch the video tutorial I put here on YouTube of this exact article.
Your output should still be the same as what you had at the end of step 2 since we haven’t added any code to the ContentView since that step.
Step 5 — Iterate Over Your Box Data and Finish
- add a ScrollView
- Add a horizontal stack, also known as HStack.
- Iterate over boxes and pass in a box for each BoxView instance (lines 31–33)
Now if you have ever written React.js code, you’ll see this is very similar to React in many manners. I mention this due to how strange this new syntax looks. Line 31 has us writing some interesting code. This is similar to React in which you have to provide a key to each element. This is very similar with \.id, but we don’t have to provide it to the BoxView.
Step 6 — YOU’RE DONE.
Congrats my friend, you have now created a collectionView style layout and provided custom data to that layout.
SwiftUI makes this extremely easy and I really love the direction we see Swift going!
If you want to keep receiving high-quality content from me, please leave a clap, and share this article with your iOS home boys & girls!
I’ve also created a full SwiftUI Class which is open for enrollment!
You can find the SwiftUI course right here!
NOTE: I will be putting ALL future course on my website Maxcodes.io
Tweet me your article and video requests and I will make them!
Thanks, Dawg.
I truly appreciate those of you who watch my videos, read my articles, and take my courses.
Thanks,
And as always, I will see you in the very next video.
-Max
