List with Sections


SwiftUI Crash Course
What is SwiftUI?
8m 3s
8m 34s
8m 11s
5m 10s

The course is part of this learning path

Start course
1h 19m

This course delves into SwiftUI, which you can use to create user interfaces for your apps. We're going to cover how to use it, how to create views, and how to leverage it to create responsive apps that work in all screen sizes.

Intended Audience

This course is designed for anyone who wants to:

  • Learn about iOS development and coding
  • Move into a career as an iOS developer
  • Master Swift skills


To get the most out of this course, you should have some basic knowledge of iOS.


Hi, within this lecture, we're going to complete our model and we're going to have our List with Sections. So, we have created our favoriteBands. Now, I'm going to copy all of this because we're going to create the same thing with our favoriteMovies. So, this will be the '//Bands' and this will be the '//Movies'.

So, the first movie that I'm going to create is the 'pulpfiction'. This will be, again, a 'FavoriteElements'. And this time, I'm going to call this '"Pulp Fiction"' and the 'imagename: "pulpfiction"' as well. So, rather than saying No. 1 Music Band, I'm going to call this '"No. 1 Movie"'. And I'm going to do the same thing for others as well.

Of course, in a real time real life example, you may just call something like the director name, or the IMDB rating, or some other explicit description as well. The second one will be '"The Dark Knight"'. So, the 'imagename: "thedarkknight"'. So, this way, '"thedarkknight"' and this will be '"No. 2 Movie"'. And the third one and the last one will be 'killbill'. So, this is, again, a Tarantino, but let's go for it. The 'name: '"Kill Bill"'. And the 'image: "killbill"'. And the 'description: "No. 3 Movie"', sorry. And, rather than saying FavoriteBands, I'm going to call this 'FavoriteMovies' and FavoriteModel will be titled as 'FavoriteMovies'. And this will have 'pulpfiction' and 'thedarkknight', instead of megadeth. This one, yes, thedarkknight. And rather than ironmaiden, I'm going to call this 'killbill'. So, after that, I'm done with creating my models. I'm going to go ahead and find some related images for my models.

So, we already have a Metallica image over here. So, I'm going to search for another one and, I believe, the second one is Megadeth. So, let's go for 'Images'. And I'm going to take this one and download it. And the third one will be Iron Maiden. And we have some fancy images over here. So, let's go for this one. Yes, bring this in. And this is it for FavoriteBands. Now, let's move to movies. So, I'm going to search for 'Pulp Fiction'. And, I believe, this one is good. So, let me choose this one. I'm going to download this. And let's go for 'The Dark Knight'. So, let's find a cool Batman picture. This looks good, but I believe this is too small. Let's go for this one. Yes, this is too small as well. Yes, this is good, I believe. So, let me bring in this Batman. And, finally, I'm going to go for Kill Bill. So, let's say, 'Kill Bill'. And let's find some good Uma Thurman picture like this or this one. Yes, this is good. Let's bring this in.

So, after downloading all of these, let me 'Close' this down and let me rename everything in my Downloads folder. So, I'm going to call this 'killbill'. So, it has to be the exact thing that I have called in my model. So, this is 'thedarkknight'. And this is 'ironmaiden', and this is 'megadeth', and we have to have one more. Yes, this one, 'pulpfiction'. So, let me go into my 'Assets' folder and bring everything in. So, this has to be like that. Yes, five of them.

Now, I have six images and my model is complete. Now, I have to bring these FavoriteBands and FavoriteMovies inside of an array so that I can display them inside of a list. So, I'm going to call my array, 'myFavorites', and this will have only the 'favoriteBands' and 'favoriteMovies'. Okay, that's it. Now, I can use this myFavorite arrays inside of my list as a parameter to display all these titles and all these elements.

So, let's do that in our ContentView. So, let's go back to our 'ContentView' and we're going to display everything one by one and we're going to display these titles as section names. And we're going to display these names as regular names. So, we're going to use ForEach to do that. So, rather than having texts and let me open my 'Canvas' so that we can see all the change over here. And, let me say, 'Resume'. Once we see the preview, we can go ahead and change this. So, let's wait for Build Succeeded. Yes, everything seems to be working and let's delete this text. And, rather than Text, I'm going to have a 'List'. I can give myFavorites array as a parameter inside of my List.

And now, I don't have to give a manual ID because myFavorites is already identifiable. I can just call this 'favorite' and have my own closure and display this 'favorite' inside of a Text like this. So, if I say, 'favorite', it won't display it because myFavorite is not actually a String. It's a model. It's a struct. Let me just come over here. It's an instance of a struct rather than a struct. And, I have to say, favorite.title in order to get this String. So, I can come over here and say, 'favorite.title' and it will just display the titles of these FavoriteModels as you can see. But, that's not quite what I had in mind. I want to have this as a Section title. And then, under the Sections, I want to have my related elements.

So, how do we do that? I'm going to use ForEach loop. And inside of that ForEach loop, I'm going to call ForEach one more time to list the elements. So, how do we do that? Of course, I'm going to delete this and I'm going to work with a List. So, this will be a List. But, under that List, I'm going to have a ForEach loop. So, I'm going to give 'myFavorites' as a parameter one more time. And in fact, I'm going to open a curly brace and I have my favorite closure. And rather than favorites, I'm going to call it favorite because it will be an individual favorite. And rather than showing this inside of a Text, I'm going to show this inside of a 'Section'. So, Section is to create a hierarchical view content.

So, that's how it goes. You either create a footer or you create a header. So, we want a header because we want to show the titles in the beginning of a Section, not the end of a Section. So, choose this one. And for 'header: favorite.title'. And for 'content', if you hit 'Enter' over here, it will create a coding block for you in which you will have your second ForEach loop.

And this, I believe, gives us an error. And, in order to solve this error, let me see. Yes, we we didn't actually write text over here. So, let me just delete this and come over here to my header and say something like 'Text(favorite.title)'. And this will show us the Favorite Titles as a title. And again, under these Titles, we're going to have our ForEach loops. So, let me close this left pane and right pane down and call our 'ForEach'. Now, I have to give the second array as a parameter.

In order to reach that, I'm going to say, 'favorite.elements'. Remember, inside of our favorite.elements like this. So, come over here to your struct. So, if you say, 'favorite.elements', this will give you a favorite.elements array. And that's what we want. That's what we want to give as a parameter so that we can reach the individual elements inside of that list. So, let's go and say, 'element in'. And this time, I'm just going to call 'Text('. So, once I do that, I will get this beautiful view with section headers, section titles, and related items inside of that section titles. So, that's cool. Now, what I want to do, when I just hit on one of the items, it will take me to another view in which we will display the details of the selected element. Let's do that within the next lecture and see how to do navigation, how to have a second view, and pass information between views.


About the Author
Learning Paths

Atil is an instructor at Bogazici University, where he graduated back in 2010. He is also co-founder of Academy Club, which provides training, and Pera Games, which operates in the mobile gaming industry.

Covered Topics