User Interface

Contents

keyboard_tab

The course is part of this learning path

Start course
Overview
Difficulty
Intermediate
Duration
2h 13m
Students
5
Description

In this course, we're going to create a Snapchat clone using structs and various advanced techniques of Firestore.

Transcript

Hi, within this lecture, we're going to go ahead and start working on our User Interface. What I'm going to do, I'm going to try and finish our user interface at least most of them so that we won't focus on user interface anymore from that point on and we're going to focus on calling. So, in the first View Controller, we're going to have the sign in capability, right? So, I'm going to come over here and say 'Refactor' and 'Rename', I'm going to rename this View Controller to be signInVC. Once we refactor and rename this, it just changes all the names related to View Controller anywhere in the project, okay? So, I'm going to say SignInVC, I'm going to rename this and now that's okay. So, let me come back to my Main.storyboard and see if we are connected over here from identity inspector. As you can see, class name here is changed as well. Now, let me bring in what I need. What I need is text fields, right, because we're going to ask for input from the user like user name, like user email and password. So, let me bring in one. And then let me open the attributes inspector and say name or email over here. First we have to ask for email because it's really necessary to create an account and then we're going to ask for user name, okay? And then for last one we can ask for passwords. So, let me zoom in a little bit. So, over here I'm going to ask for password. And of course we're going to need two buttons. First of which is sign in. Okay, so let me make this a little bit bigger and this will sign the users in if they have account. So, let me copy and paste it. And bring in another button and this will be a sign up button. So, if they don't have an account, they will register from here. And let me choose everything from here and bring down a little bit so that I can have a label over here. And I'm going to call this label snapchat clone so that we can have a title. So, let me come over here and say Snapchat Clone. So, that's it, Snapchat Clone. So, let me increase the font size a little bit so it will look better; here you go. Now I believe we are ready. So, let me give the constraints. And then later on we can bring all of these views inside of our signInVC. So, let me come over here and bring in the emailText, okay, so say emailText. Yeah, it doesn't seem to be working and if you get any error like this, it should be a bug, I believe it's because we have changed the name of the signInVC. So, let me do a product clean and try one more time. So, let me come over here and say emailText. Yeah, it doesn't work, so let me close this down. Okay, and open it one more time. So, it will resolve the issue. So, if you ever come across in a situation like this, so you're certain that you assigned the class in the identity inspector, but it still doesn't work, just close it down and open it one more time, you will see it indexing over here. Okay, it means that it's indexing the files, it's synchronizing the files. So, after the indexing completes, you will be able to bring in the views one more time. So, I'm going to wait until it's done and then try the emailText over here. So, emailText, yeah now it's working. So, let me bring in the other views as well like this userNameText. So, this is going to be userNameText. And then finally I'm going to need my third one, the passwordText. So, this is passwordText. And then we're going to have two actions. First of which is signInClicked. Okay, and then signUpClicked. So, let me bring in this as well and say signUpClicked. So, here we go. Now we have the buttons, we have the text fields as well. So, we are done over here. So, let me bring in a Tab Bar Controller because remember we had a tab bar in our prototype as well. So, let me bring in the tab bar. So, this is going to be our tab bar and we're going to need another one, but for right now I'm just going to do a segue from here to here. If you choose present modally and if you come here and choose the identity inspector, you can go for full screen and then it will be okay. So, over here let me give an identifier as well. So, this will be toFeedVC. So, I'm going to call this feed View Controller one more time. So, rather than saying item one, I'm going to say feed and for image I believe we have new images over here. So, that's good but I'm going to go for the old one, like the F with circular image. Okay, so let me look for it a little bit. If we cannot find it, we can just choose any random image right now because we are just doing a test. Yeah, this one this looks good. So, f.circle.fill. So, I'm going to do the same thing for upload as well. So, this is where we're going to upload our pictures. And let me find the U letter with fill circle fill. So, let me find it over here. this one u.circle.fill. So, now it looks good I believe feed and upload. So, what we're going to do we're going to bring in the cocoa touch classes. Right, because we need cocoa touch classes for item one and item two. So, say new file and choose 'Cocoa touch class' and make sure it's your View Controller and say feedVC. Once you do that you can hit "Next" and 'Save' it under your current project folder. Now let me bring this up so that under main.storyboard we can choose it, but I'm going to go ahead and create the other ones as well. So, this will be uploadVC. Okay, and finally we're going to need another one. So, let me do that as well before we continue. So, I'm going to say new file and new cocoa touch class. And I'm going to call this settingsVC. Okay, so here we go. Now, we have our View Controllers of course, we're going to need another one later one, but I believe that's okay for right now. And since we have so much, I'm going to create some groups over here because we're going to have a lot of files in this project. So, my group will have the name of View Controllers. So, I'm going to choose every View Controller I have and I'm going to bring it under my View Controllers. So, let me make sure this is closed. And if I bring them over, it will just put them under View Controller's folder. So, now it looks a little bit better I believe. So, we can do that for delegates as well, right, so we have this up delegate unseen delegates. So, let me create a new group and call this delegates. So, I'm going to bring in those two inside of my delegates folder. So, now I have a neater look. So, let me come over my main.storyboard and find feed View Controller, okay, so I'm going to choose feedVC from the identity inspector over here. I'm going to do the same thing for upload View Controller as well. So, now I have my upload View Controller and I have my feed View Controller. So, let me bring in a new View Controller, okay, and this will be our settings View Controller. So, in the settings View Controller, we're going to only have one button, but anyway we're going to have the segue. Okay, and this will be a relationship segue because we're doing it from the tab bar and this will have the class of settingsVC. So, let me choose it. Okay, settingsVC, yeah, that's good. So, let me come over here and say settings and this way settings and for image, we're going to have to find the circular S, again so that it will be consistent with each other. So, I cannot seem to find it. So, let me try to see, is this it? So, let me just choose it. Yeah, this is an S, but I believe it's not circular, it's kind of square, but in the others we have circular, even though it doesn't matter, I'm just going to find the circular one as well so that they will be consistent with each other. So, here we go. Now we can see it. So, we have real nice icons. We have real nice tab bar. So, let me bring in the settings button over here, okay, so let me place it in the middle of our View Controller. Let me make this a little bit bigger. And I'm going to call this settings. And let me give the constraints as well. So, say reset to suggested constraints. And let me try to open the assistant editor with settings View Controller and let me bring in this and by the way this should be log out rather than settings, So, let me bring in the logout and say logout clicked. So, once I do that, I still got this error. So, I believe there is something wrong with the project, but I'm going to close it down and I'm going to open it anyway to let it index. So, it should be automatic but sometimes it gets stuck like this, so I believe we're good to go after this indexes itself. So, once it indexes, I believe it would be better for us because it would work on FeedVC and UploadVC as well. So, let me say logout clicked, and here we go. Now it works. So, we are done with settings. And in the Upload, we're going to have only one image and also an Upload button. So, this is very easy, so let me bring in one Image View like this. So, let me bring in and we can make this a little bit bigger than usual, I believe, because we're only going to have this one really. So, after that, we're just going to bring in some real small button so it can be big. No, this won't create any problems. So, let me bring in a button and this will be our Upload button. So, let me call this upload, and here we go. Now let me just reset to suggested constraints, and I'm going to give fixed width and height in order to prevent any distortions over here right now. Once I do that, it gives me some errors regarding constraints. So, I'm going to say update constraint constants and now it's okay. Now we can bring in these views inside of our Upload View Controller as well. So, let me choose this and let's see if this works. So, I'm going to call this uploadImageView, okay? And here we go, now it works. So, bring in the Upload button as well. So, let me delete everything from here and say uploadClicked. So, here we go. Now we are done with UploadVC. Let's move on to our FeedViewController, we're going to have a Table View over here. Okay, so let me bring in the Table View and I'm going to say 000 to all constraints to stretch it out because we're only going to have Table View inside of our View Controller. So, let me bring this in inside of FeedViewController. This is going to be our Table View. So, here we go. Now, of course, later on, I'm going to create a new prototype cell in the FeedViewController, but right now we can just skip it and do it later on. So, let me bring in another View Controller. Remember when a user taps on one of these snaps, it pops open another View Controller and it displacing inside of an image slider. So, we'll need another View Controller to display the snaps, okay? And I'm going to call the Snap View Controller. So, after you click our View Controllers folder, you can go ahead and create the Cocoa Touch Class for SnapVC, okay? So, make sure this is UIViewController and create this under your View Controllers. So, now I can come over here and I can click over here and choose SnapVC from this list. So, here we go, SnapVC. Now it's assigned as SnapVC. So, I'm going to do a segue from here to here. And this will be a show segue. It displays as a popover, but I believe that's okay in our case. So, again, this will have an identifier, and the identifier will be toSnapVC, okay? And in the Snap View Controller, we're only going to have a time label and a big image slider, right? And for image slider we're not going to use an old UIImageView but rather we're going to bring in another library later on. Right now, I'm just going to create our label in which we will display the time left, okay? So, let me say something like time left over here. So, this will display the time left to deletion. So, this will be time left and make it centrally aligned and make this a little bit bigger so that we can put it over here, and here we go. Now, we can just bring this in inside of this Snap View Controller, and let's 'Ctrl+Drag' and say time label, okay? So, that's it. So, let's close this down, and let's not forget to give some suggested constraints over here. And we are done with user interface. Of course, we need some more tweaks over here, but we are done for most of it. And now it is time to focus on coding. So, let's stop here. And within the next lecture, we're going to create users and sign them in.

 

About the Author
Students
414
Courses
55
Learning Paths
3

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