Hi. Within this lecture, we're going to design our first user interface, and then we're going to write our first codes, and we will build our first application. Of course, it's going to be a really easy application. The point is that we're not going to even learn about coding at all, but we're going to focus on using Xcode. So, what I want to do, I want to create an image over here. So, I will put an image inside of my application, and also I will have a button in on which when I tap on the button, it would change the picture. So, I will have a picture over here when I tap on the button I wanted to change. So, I needed these two images, right?

So, what I'm going to, I'm going to download those images, so that you can see how images are downloaded and then just integrated into our Xcode as well. Again, the point over here is that we're not even going to learn about coding at all, but we're trying to get familiarized with the Xcode. So, I'm going to search for Metallica, which is my favorite band. So, you go ahead and do that for your own favorite artist or your own favorite band. So, I'm going to need two images, as I said before, but I don't need them to be too much in size, like I don't need too big pictures. So, what I'm going to do, I'm going to go over here to tools, and for the size, I'm going to choose the medium. So, if you change the size, you can choose whatever you want in the Google images. 

So, obviously, it doesn't matter if you want a large or medium, just right now we're doing this as an example, and we don't need any kind of big image, so that's why I'm doing it like this. So, I'm going to save this image, and I'm going to call this something like metallica and in here you shouldn't have like special characters or spaces, just simple, metallica is enough and of course, you're doing that with your own pictures with your own band or whatever. And of course, if you have already pictures in your own macOS, you can go ahead and use them as well. But I'm going to find two pictures of Metallica. So, I'm going to name this metallica2 like this, and here you go. 

Right now, I have two images sitting on my desktop. So, what I'm going to do, I'm going to take those pictures and put it on my Xcode. There are a couple of ways to do that. I'm going to show you one of the ways, and we're going to see the other ways later on during the lectures. We're going to see the most basic one right now. So again, you can choose this Metallica pictures, we're going to drag and drop them into our Xcode. And in order to do that, you need to know where to drag and drop them specifically. So, let me close this down, and let me go back to Xcode, and let me go to this assets folder in which we can put the icons, we can put the images and stuff. So, this is the Assests folder of our project. So, this is where I want to put my pictures. So, how you can put it over here? You can just drag and drop them in this no selection page

in the middle, I mean. And later on again in the design section, we're going to see how to work with this Assessts folder in a detailed way. But right now, I'm just going to drag and drop and see the metallica, metallica2 over here. So, these 2x, 3x are the scaled versions. We are going to come back to those later, but right now I have what I need so I can just display them in my storyboard. So, I'm going to go back to my storyboard. So, what I'm going to do over here, I'm going to have an image. So, I'm going to open my library again. Just click on this 'plus' button and find the Image View. You can search it from here, or you can just scroll down a little bit and you can see the Image View. This is one of the most common things that are used. 

So, this is a view where you put images in it. So, it's very basic. You can just search it from here as well or you can just see within like a couple of scroll down limit. And once you do that, you can just delete this, or you can just put it over here somewhere. And I'm going to drag and drop, and make this a little bit bigger like that, so that it will look much better. So, once you choose this UIImageView, you can see the properties on the right hand side, and you can make this anything you want. You can just put any image you want in this Image View by changing this image property. So, choose the metallica or whatever you downloaded from here, so that you can display the image. So, here we go. We can choose either of those. I'm going to go with the metallica first. And with code, I'm going to change it to metallica2 later on. So, let me change my name from here. So, for example, I'm going to call this Metallica App, like this. So, you can call it anything you want, it really doesn't make sense. We're just doing this as an example, right?

And finally, we need a button. When we click on that button, the image will change. So, button is one of the most common views  that are used in the iOS development, so you can find it over here. So, this is something that you click on that you tap on. So, once you click on the 'Button', you can see you can just change or you can do anything you want with code actually. So, if you want to download something then a click of a button, you can do that. We're going to do those a lot during lectures. So, I'm going to make this a little bit bigger. And once it's done, I'm going to change, change its title as well. Like here we go, it says Button, I'm going to say change or change picture or change image, whatever you want. I'm going to just call it Change. 

So, this is good. This is cool, right? So, what I'm going to do, actually give the constraints right now, when the views are in the place that I want them to be. So, choose the 'View Controller' from here, and come over here to the result or the layout issues, say 'Clear Constraints', because we added some of those before for the label, and then say reset to suggested constraints or add missing constraints over here. We're going to see how to work with these constraints in detail in the layout section, as I said before, but right now we just want our views to be in the place that we want. So, make sure you choose this at suggested constraints. So, I'm going to run this and see how it looks like, if it's like distorts the view or something like that. I'm running this on iPhone 11, and as you can see, it actually looks pretty good. This is exactly what I had in mind, my image, my button. When I click on that 'Button', I wanted to change, but I didn't write the code, right? I haven't written anything yet. So, that's what's missing. We're going to stop here. And we're going to write the codes. We are going to write our first codes in the next lecture.