Hi. Within this lecture, we're going to finish our user interface. We have to test the Save button to see if that works. We have to add a new button over here to our UI navigation bar so that we can do a segue between view controllers and then we're going to finish up our user interface and then go to write our code data work. So, in the table view, I'm going to create this UI BarButton programmatically. So, it means that I'm going to write a code in order to reach that. So, you have to go for navigation controller,

but I believe it doesn't show up in here. So, let me try to delete this, and do a comment B to build this up so that I can try later on one more time. So, let's write navigation and it still doesn't show up. Let me delete this and write it from scratch, so maybe we can see it. navigation controller. Now, we see it. So, this brings us the UI navigation controller. So, if I click on this, I can reach the UI navigation bar as well. So, after you write this you can do a dot and navigation bar and it brings you the navigationBar. And if you do topItem, you reach the top item of the navigation bar. So, we reached actually this area in the main storyboard. Let me show you so you can understand it better. So, we reached this area. So, on this area I'm going to reach for the right hand side. So, you can just go and say that right BarButtonItem. And aside from right, we have a left BarButtonItem as well, but we're going to go for right because that's what usually developers do. So, we're going to actually go for the convention and

create this right BarButtonItem. So, this will expect us to create a UI BarButtonItem. So, this one, and as you can see this is a special button for placing on the toolbar or the tab bar. So, we can create this BarButton, and we can actually reach and choose the target, we can choose the selector. We can choose what will happen when we click on this BarButtonItem. So, here you will see some options. For example, we have this title options. If you want to write something inside of your button,

you can go for this, you can go for a title but I don't want to actually write anything. I'm just going to create this from the built-in icons from the Swift from the Xcode. So, I'm going to show you how it works. So, choose the system one. And if you hit 'Enter' and hit 'dot', you will see the options. For example, we have the action, we have the add and these bring us some icons that represents the related action. For example, if we choose the add, it will display a plus button. If we choose camera for instance, it will display a camera icon.

So, you can go for other options as well. For example, if you choose to compose, it will display a button representing compose items. So, developers use this to work with consistent icon look within apple applications. So, I'm going to go for add. So, you will see a plus button appearing on the BarButton, navigation BarButton when we run this. So, target will be self because we're going to call the selector action selector from this view controller like we used to do before. So, I'm going to create this function with @objc func addButton. Okay, addButtonClicked(). So, in this addButtonClicked, I'm just going to do a performSegue and the segue identifier that I'm looking for is toDetailsVC and the sender is nil. So, if I come over here and say addButtonClicked, then if I run this, you will see a UI bar button item on the UI navigation bar. And when I click on it, it will bring me to the details ViewController so that we can actually test if our detailsVC is working or not because we fixed the bug, remember.

So, let me open our simulator and test this. And in fact, we didn't even make the setup for a table view but it doesn't matter. We're just going to see an empty table view like here. And we have the plus button on the right hand side of UI navigation bar. If you click on it, it brings us here. In here, we're going to have a UI image view and text field seems okay. And if I click on 'Save', it prints out texts. So, everything seems to be working right now.

And if I click on one of these text fields, the key keyboard will come up and there is a problem in here. As you can see this keyboard actually prevents us from reaching the save button. Even if I click one of the non text field areas of the view controller like here or here, it doesn't go back. So, it's a problem. We have to make sure that if user taps on anywhere on the view, it should go back so we can reach the save button. So, we generally use keyboard this way. We say Toggle,

and we don't see any problem while we use this. However, the user will experience this problem in the real world. So, we have to make sure we take care of this problem again. So, in order to do that, we're going to work with a tap gesture recognizer one more time. Because why? Because we want a user tapping on anywhere on the view. And when he taps, we have to understand this gesture, and we have to act accordingly. Before, we made this gesture recognizers for UI image views, right? Image views actually. So, in this image view, when the user taps on the image view, we perform some operation. But right now, I want to create this gesture recognizer one more time, and I want users to tap anywhere on the view and I'm going to show you how it's done. And actually, bringing down the keyboard is very easy. So, it's one line of code, but we have to take care of the gesture recognizer first, so that we can implement the function

with the gesture recognizer. So, let's do it. First, we have to create a tap gesture recognizer. In order to do that, I'm going to say let gestureRecognizer = UITapGestureRecognizer() Okay, remember this asks for a target and an action. So, target of course will be self again, and the action will be a selector that we will create. So, let's say selector. And in here, I'm going to go for creating another function, so I'm going to say func hideKeyboard. Okay.

So, this will hide the keyboard for me. And in order to hide the keyboard, it's very easy, you just have to say view. Okay. It will bring up the view. So, this is a pre-defined word in Swift. It refers to UI view and editing. So, when you do that it, actually finishes up everything regarding to editing including bringing down the keyboard. So, you have to say view.endEditing(true). So, now I have to make sure that this hideKeyboard is given here as a selector. Okay.

And I have to make sure that this gestureRecognizer is added to the view as a gestureRcognizer. So, rather than assigning to an image view, rather than assigning to this to any view, I'm just going to assign this to my view itself. So, whenever wherever our user taps rather than the keyboard, it will bring down the keyboard. So, you can say view.addGesturerecognizer  so the gestureRecognizer is the choice. So, here you go, this will work. Let me test this.

Okay, let me open this from scratch, and let me go to the other view. Let me click one of the text fields so my keyboard will come up if I click on anywhere, as you can see it goes down. So, I can reach the save button. So, we're done here. Actually, this user interface can be much more better. There's no point to put the save button here, we can just put the save button to the UI navigation bar. For example, here, so it will look much more better,

but I'm not going to spend much more time on the user interface. We are here to learn about code data, and this is more than enough for us to perform our tasks. Okay. That's what it comes right now. So, I'm going to stop here. And within the next lecture, we're going to continue building our art book.