SwiftUI Crash Course
The course is part of this learning path
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.
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 work with lists. So, we don't have Table Views inside of SwiftUI but rather we have lists. So, come over here and create a new SwiftUI file. I'm going to call this ThirdView. And we're going to see how to work with lists because as you know, we work with tableViews a lot and we have to know the substitute of that method inside of SwiftUI as well. So, suppose that I have an array inside of my struct over here, and I want to display these elements, the elements of the array inside of a list. So, traditionally, we do that with tableView but now we're going to have a list and rows of data. So, let me create my array over here under my struct but not inside of my body, okay? So, my array will have the values of James, Lars, Kirk, and Rob. So, that's what I want to display inside of a list. So, how do I do that? Rather than having this text, I'm going to go for a list. So, let me delete this and just write List. So, there are two ways to do that actually. And as you can see, this presents the rows of data arranged in a single column. So, if you choose the list and open a curly brace, there are two ways to do that. You can use a for loop or for each loop or you can just give this array as a parameter inside of your list. So, open the parentheses and choose your array. Now, after doing that, you have to create your own closure. And in order to do that, you're just going to have to come write your curly braces, okay? After your curly braces, you have to assign some variable to hold the individual elements like this "element in". So, that will assign everything inside of your list to an element, and you can just come over here and say "text element". Now what this will do is this is going to take James, this is going to take Lars, Kirk, and Rob, one by one and assign it to be an element and we're going to shove them inside of a text. It has to work, but right now as you can see it gives us an error, so maybe we can see over here, in this case this is correct, but just keep in mind that SwiftUI doesn't show some very quality error messages, at least for right now. So, if you get any error message, it might not be the message that you are looking for. So, if you do something and if you get an error message somewhere else, then just check what you have done last, okay? I know this is not ideal but that is the case for SwiftUI right now, but in this case, this error message is actually correct; we have to make this array identifiable. And we're going to see how to do that structurally within a model later on, but right now we're going to do it manually. What means identifiable is that, the list has to understand which index it will shove the elements, okay? So, we're going to use the same index as our array right now. But later on we're going to create some identifiable models and they will have their own IDs. And in order to make this work right now, I'm going to assign this ID manually over here after I just give this myArray as a parameter to my list. So, if you say comma and say ID afterwards, as you can see it pops up. Then over here, we have to say something like /.self, okay? So, this means to use the array indexes. And as you can see, we have James, Lars, Kirk, and Rob displaying inside of a list. So, this is how you work with lists, this is how you work with arrays inside of SwiftUI. It's actually easier than it looks. You create the list, you give the array as a parameter and you display it in a way that you want. And you can change the font, you can add whatever you want inside of your list as well. So, this doesn't have to be some prototype cell that we have seen before. For example, I can even add an image over here easily. I can just call the metallica image, okay? And as you can see, now it displays in each row but it's too big. So, I'm going to make this resizabe and then later on I'm going to set the aspect ratio to be fit, okay? The content mode to be fit. And then later on, I'm going to give a very small frame so that we can display them inside of our list, our rows like this. So, this is very easy to do with SwiftUI as you can see. In traditional main storyboards, we had to create a new cell and we had to create a swift file for that cell and we had to work our way around this, but right now I just did it with a simple line. So, that's very cool. That's one of the powerful features of SwiftUI as well. And as I said before, this is not the only way to display data inside of lists. Actually, there is another way, but this list is actually a much better and much easier to work with. So, I suggest you go for this unless you have a specific reason to do the second method that I'm about to show you. The second method, actually, let` me just command this out for right now, okay? So, let me come over here and after opening this parentheses, I have to close this as well. So, inside of my list, I'm going to do a for loop. So, this time I'm going to go for forEach loop. So, this is kind of for loop, but rather than saying for element inside of list, we're going to say for each array in that element, okay? So, this is vice versa in terms of syntax. Let me show you what I mean. I'm going to give myArray as a parameter inside of my list and I have to say ID/.self one more time. I'm going to open my curly braces and then I'm going to close it and have my own closure one more time and then I can just say text elements. So, this is exactly the same as I did in the list but I'm doing it with a forEach loop. But if you want to bring in an image right now, you will have a problem over here. So, that I suggest you go for the list and give the array as a parameter to the list. And if you have a specific reason to use the forEach loop, then you can come over here and use it as well. We're going to see both examples later on when we deal with an app but just know that this is the way to go to create rableViews, to create rows of data and work inside of arrays with inside of SwiftUI. So, let's stop here. And within the next lecture, we're going to see how to work with data inside also SwiftUI as well.
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.