1 00:00:00,250 --> 00:00:03,990 Play again in this lesson we will talk about the Interface Builder. 2 00:00:04,050 --> 00:00:08,890 This is essentially where you build the visual elements of your application. 3 00:00:09,150 --> 00:00:18,270 Now if you exclude project most probably has a visual side such as this file main that the storyboard 4 00:00:18,600 --> 00:00:24,960 in this client application does not to say that every application must have a storyboard but it is most 5 00:00:24,960 --> 00:00:27,670 likely that you will see a storyboard file. 6 00:00:27,870 --> 00:00:29,920 In most of your application. 7 00:00:30,000 --> 00:00:31,580 So let's get start with that. 8 00:00:31,590 --> 00:00:32,460 I'm going to select. 9 00:00:32,550 --> 00:00:39,510 I'm actually going to maximize this view so it shows me a view controller which is the same proportions 10 00:00:39,810 --> 00:00:41,000 as an iPhone. 11 00:00:41,010 --> 00:00:46,510 Now what a view control in a specific is or what is this hierarchy of different elements. 12 00:00:46,530 --> 00:00:53,430 We'll get to that at some other time when we talk more in-depth about our different part of this storyboard. 13 00:00:53,640 --> 00:00:59,820 Now for now all I want to do is I want to be able to either one or two elements to my storyboard or 14 00:00:59,820 --> 00:01:01,880 to this viewer essentially. 15 00:01:02,310 --> 00:01:07,800 Now depending on the version of I was for X code that you're using you might be seeing your elements 16 00:01:07,860 --> 00:01:12,470 either down in here or you will see a little button up here called the library. 17 00:01:12,480 --> 00:01:18,810 So when I click on this library it shows me a set of different objects that they could be adding to 18 00:01:18,810 --> 00:01:20,680 my to my view controller. 19 00:01:20,880 --> 00:01:27,210 So the school had the library or if you have an older version of Estcourt down here on the utility window 20 00:01:27,660 --> 00:01:32,910 I'm going to look for an outlet called a label somewhere right in here. 21 00:01:33,180 --> 00:01:38,320 And what I just it in a way that it sits nice and tidy on the top. 22 00:01:38,460 --> 00:01:40,410 I mean a little bit. 23 00:01:40,550 --> 00:01:40,930 Right. 24 00:01:40,940 --> 00:01:46,550 So I get like that maybe place it in here. 25 00:01:47,710 --> 00:01:51,530 That I'm going to go on the street even though I'm going to go to the attributes. 26 00:01:51,530 --> 00:01:57,370 Inspector This is what I see that the friend attributes of the currently selected element. 27 00:01:57,530 --> 00:02:02,000 So if we select different things you will obviously see different attributes. 28 00:02:02,030 --> 00:02:06,590 So I'm going to select my label and save my label it actually says hello. 29 00:02:07,040 --> 00:02:15,170 And also it's text is the line to the center is a lot larger and larger font and then down in here I'm 30 00:02:15,170 --> 00:02:22,510 going to say Give me a background color and I'm going to use a custom color such as an orange kind of 31 00:02:22,560 --> 00:02:28,100 I don't know if these things really matter or just play around with them for a little bit to spend some 32 00:02:28,100 --> 00:02:30,470 time just to get a sense of some of them. 33 00:02:30,530 --> 00:02:33,320 Some of them are quite you know easily understandable. 34 00:02:33,320 --> 00:02:36,970 These are the text lines or the color of the text. 35 00:02:37,030 --> 00:02:41,940 Some of them might be a little bit more complicated and we will get to them at some point and be talking 36 00:02:41,940 --> 00:02:45,950 more in-depth about different parts of the outlets. 37 00:02:45,950 --> 00:02:49,270 Now I have this one to one more in here. 38 00:02:49,520 --> 00:02:51,930 Let's say another label. 39 00:02:52,140 --> 00:02:54,320 When I see it with the first one. 40 00:02:54,480 --> 00:02:59,890 And as you have guessed it but of course we're right ward in the second one. 41 00:02:59,900 --> 00:03:04,960 That's a very common practice when you're learning your programming language or your learning you know 42 00:03:05,060 --> 00:03:06,110 development. 43 00:03:06,110 --> 00:03:07,860 So if you write a hello world. 44 00:03:07,910 --> 00:03:10,920 Let me just make this a little bit even larger. 45 00:03:10,960 --> 00:03:17,940 I have a banging on colors such as some sort of green back on something like that. 46 00:03:18,200 --> 00:03:19,910 So that's my application. 47 00:03:19,910 --> 00:03:24,340 It only shows me these two things saying hello world in an interface. 48 00:03:24,500 --> 00:03:30,570 And the next thing I have to do is I have to run this application or essentially compile this application. 49 00:03:30,680 --> 00:03:37,910 That is a process from going from this interface X code interface to an actual iPhone device and be 50 00:03:37,950 --> 00:03:39,310 compiled things. 51 00:03:39,470 --> 00:03:43,670 So to do that they have to press this little by then that is better than wrong. 52 00:03:43,850 --> 00:03:49,250 But before I do that them zoom into them a little bit so we know what I'm talking about this one which 53 00:03:49,250 --> 00:03:53,330 is like a play button essentially build and run the current scheme. 54 00:03:53,600 --> 00:03:57,930 Before I do that I want to mention something quite important to you guys. 55 00:03:58,000 --> 00:04:00,690 IPhone has many different variations. 56 00:04:00,690 --> 00:04:04,870 Do you have iPhone 8 which is the current one in here I'm using. 57 00:04:05,030 --> 00:04:10,030 You have the iPhone 8 plus which is a little bit larger and you have the iPhone 10. 58 00:04:10,170 --> 00:04:17,000 And of course you have the smaller iPhone with the older iPhones now something to keep in mind is that 59 00:04:17,150 --> 00:04:23,270 when you switch from one iPhone to the other one your outlets may not necessarily look the same. 60 00:04:23,270 --> 00:04:23,590 Right. 61 00:04:23,600 --> 00:04:27,880 Right now I have left a similar margin to the left and to the right. 62 00:04:27,890 --> 00:04:34,460 But the moment they switch to the iPhone plus that changes of course down the track we learn different 63 00:04:34,460 --> 00:04:36,020 ways of managing that. 64 00:04:36,020 --> 00:04:39,710 Most notably using the auto layout out constraints. 65 00:04:39,800 --> 00:04:46,390 But for now I want to suggest something that is change your of you to be on iPhone 8. 66 00:04:46,430 --> 00:04:50,600 So you design everything as if you're working for an iPhone 8. 67 00:04:50,660 --> 00:04:57,770 No obligation and change your simulator to iPhone 8 as well and make sure that they're both exactly 68 00:04:57,770 --> 00:04:58,920 the same thing. 69 00:04:59,000 --> 00:05:06,830 If you do that that makes sure that whatever the design in here exactly identically mirrors on the simulator 70 00:05:07,160 --> 00:05:13,040 and this way you don't need to worry about things such as placing the outlets for different devices 71 00:05:13,040 --> 00:05:17,400 or assigning constraints and worrying about or to lay out our models or such. 72 00:05:17,490 --> 00:05:23,290 David keep those for the Section 4 to lay out comes up in a while now. 73 00:05:23,510 --> 00:05:28,670 So with that in mind we can go ahead and simulate our application. 74 00:05:28,670 --> 00:05:34,970 Now if I place the simulate it should take a little while and it should run the Iowa simulator only 75 00:05:34,970 --> 00:05:37,340 to show me this application. 76 00:05:37,430 --> 00:05:43,430 I must mention that there is a chance that this will not work for you and I will tell you how to fix 77 00:05:43,430 --> 00:05:45,030 it in the next lesson. 78 00:05:45,080 --> 00:05:52,640 So if this thing you know you press the play and run on it took a while but this interface didn't load. 79 00:05:52,640 --> 00:05:58,310 Don't worry about it in the next hour so and I will explain what this simulator is and how you can fix 80 00:05:58,310 --> 00:06:06,110 it if it did work however you should see something similar to this on iPhone interface for iPhone 8 81 00:06:06,200 --> 00:06:09,890 which kind of shows us what we have designed in here. 82 00:06:09,890 --> 00:06:15,470 Obviously right now there is no interactivity and nothing is working simply because there are just two 83 00:06:15,590 --> 00:06:19,430 static pieces of text that we have assembled together. 84 00:06:19,430 --> 00:06:20,640 Let's keep it up to here. 85 00:06:20,660 --> 00:06:25,560 Whether it did work for you or not they're going to move on to the next lesson which is about the simulators 86 00:06:25,570 --> 00:06:31,400 where we learn about these different things up here and we learn about how to customize them for the 87 00:06:31,400 --> 00:06:33,170 ways that we need them. 88 00:06:33,200 --> 00:06:35,060 So I'll see you in the next lesson.