Hi, Alex here from rebeloper.com. In today's video I am going to show you some top
SwiftUI tips you need to know how to create this list here in just a few
lines of code. If you want to know exactly what I recommend in terms of
creating dynamics list then keep on watching.
Hit that subscribe button, open up Xcode and let's dive in. So let's just jump
right into the demo so we can show you what we are going to build out today and
as you can see I have already prepared for you some starter files here that we
are going to go through it's nothing that much special but here we go we have
our rebeloper works and this is what we are going to build out today. How awesome
is that. So let's just go into Milkyway Mania. Awesome, so these are my apps that
I have build let see See it buddy. Now take a look at them on the AppStore.
So that is a that. Go ahead and take a look at the resources folder so
you can create your starter project and here is my starter project, there we go.
We have a ContentView with the hello world text pretty awesome right but we
have added our constants file service file and list views and of course
there's a list element model. So let's go through each one of them because I
believe that you most importantly don't need to know the syntax, you need to know
the thinking behind how you can create dynamic lists. So first of all constants.
You need to have icon names and image names of course and head is priority to
not have typos in your assets you know here we have, let me just drag and drop my
assets here. Here we have our icon and image. So that is that, great. Now that we
have our constants and assets ready let's take a look at our
service. Basically that is the data that you will somehow maybe fatch from a server
or you already have it in your app this is basically an array of list elements
and the list element is I'm going to talk about that in just a moment it's
basically a model for our list data elements and it has an icon, this is an
icon name and image name, a title and the text. So all of these are strings.
So let's take a look at this model that we have created here and we have icon image,
title, text. All of them are strings. Now here comes the most important part that
you might not have seen in UIKit. We have to have this identifiable on the list
element and that is because Swift UI on the background
handles all of your changes in the list with this identifiable and of course you
have to have an ID and we add this, we just simply add an equal sign here
because we want to have this as a unique identifier, a uuid. So most important part
from our list element model it needs to be adhering to identifiable and you need
to add an ID, okay. That's that, let's take a look at our list element view
because that is how we are going to lay out, that is basically a row in our list
and pretty straightforward we have an image here,
a vertical stack with a title and subheadline line with the text of course and yeah
pretty straightforward here and we are inserting our list element as an item
here as you can see we have we are grabbing an icon and title and text from
that item. Now what do we want to show you further and that is the last view
and that is the list detail view. This is when we are
going to show or present this new view and we have our scroll view here with
the item icon, item title and item image and some text of course, okay. That is
self-explanatory you already should know at this and now let's take a look at our
content view and you'll be amazed that in just a few lines of code we are ready
so hang in there. So first let's delete all of this and
let's create a navigation view because we are going to navigate of
course in this app. Next up let's create our list here and what we are going to
do is add in here some data and that is pretty straightforward we are going to
use our service dot and here we go list a data. Now inside our list we want to
create a navigation link. So navigation link but before we do that let me just
add in here our item in because of course each item will be represented
from our service list data with this item. So let's add in our navigation
link here and this needs to have a destination destination auto-completion,
there we go and let me just remove this label we don't need that but in that the
destination will be the least detail view. So list detail view, there we go.
And the least detail view of course needs an item and how convenient this is
a list element and that is the item, there we go, item that we are
getting from our list data. Again the list data is an array of list elements.
Okay, there we go, here we have our navigation link and now we need to feed
this navigation link basically if you are coming from UIKit the cell.
So the row view that we are going to use and that is the least element view.
So list element view and this also requires an item that is of type list
element and item. How awesome is that and finally we want to add a navigation
bar title and we are going to use rebeloper apps or something like that or
maybe best apps from rebeloper and believe it or not we are ready with our
dynamic list. So let's build and run and see how this looks like. Here we go.
So here we have best apps from rebeloper maybe we need to make this best apps and
yeah so we can see all of all of the title of our navigation bar, there we go.
Best apps, if I tap on it all of this is taken to our list detail view, that's
what it's called and if we go back to best apps, capture, there we go. We have our
dynamic list right and running. Now if you like this simple list setup with
all of the setup that I have already explained you go ahead and comment down
below with #rebeloper so I may know that you really like this video.
Okay! That is it for our dynamic list. Now if you are someone who is still stuck at
mastering your application state then I want you to hit the notification bell
because in my next video I am going to show you how to use state and binding in
SwiftUI. So if you are interested make sure to hit that navigation bell so you
don't miss that video. In the meantime while you wait for that video to come
out make sure you also check out these two videos where I talk about iOS
development SwiftUI and how to code smarter. So make sure to
check out these two videos as well and as always I will see you in the next one.