1 00:00:00,300 --> 00:00:07,950 Now that we've had our grand tour of Xcode, we're ready to design our app using iOS components inside 2 00:00:07,950 --> 00:00:09,390 the Xcode storyboard. 3 00:00:10,430 --> 00:00:17,330 Remember where our design file is located, it's right here in the main story, but a lot of students, 4 00:00:17,330 --> 00:00:22,440 when they're first starting out, often confuse the main DOT story board with the launch screen dot 5 00:00:22,460 --> 00:00:23,120 storyboard. 6 00:00:23,630 --> 00:00:29,570 The launch screen looks pretty much identical to the main DOT storyboard, which is why people get confused. 7 00:00:30,020 --> 00:00:36,920 But this is the part that you can design to determine what shows up in the first moments when your app 8 00:00:36,920 --> 00:00:37,730 gets launched. 9 00:00:38,300 --> 00:00:45,740 So very often you'll see a company logo or maybe the words loading, but it's going to appear in a flash 10 00:00:45,740 --> 00:00:47,040 and then it's going to disappear. 11 00:00:47,720 --> 00:00:50,430 So this is not where you want to design your app. 12 00:00:50,900 --> 00:00:56,660 Instead, you want to make sure your inside may not storyboard before you start adding UI components 13 00:00:56,660 --> 00:00:57,650 into the screen. 14 00:00:59,140 --> 00:01:07,300 Down here, you'll see you as followed by an iPhone model, in my case, it reads you as iPhone 11 and 15 00:01:07,300 --> 00:01:14,380 if you click on it, it starts giving you various options so you could change the type of device and 16 00:01:14,380 --> 00:01:17,350 notice how it doesn't have every single device. 17 00:01:17,350 --> 00:01:22,940 It doesn't have, for example, the iPhone seven or the six or the five, but it does have the four. 18 00:01:23,290 --> 00:01:24,340 So why is that? 19 00:01:24,790 --> 00:01:31,030 Well, it's because there's a number of iPhones that share the same aspect ratios. 20 00:01:31,390 --> 00:01:37,510 For example, the iPhone six, seven and eight, they all have the same aspect ratio screen, which 21 00:01:37,510 --> 00:01:39,700 is a four point seven inch screen. 22 00:01:40,630 --> 00:01:46,090 And that means if you were to select the iPhone, Southy, second generation camisoles, then the app 23 00:01:46,090 --> 00:01:52,150 will look exactly the same on an iPhone six, seven or eight because they all share a four point seven 24 00:01:52,150 --> 00:01:52,810 inch screen. 25 00:01:53,620 --> 00:02:00,690 But for other sizes, for example, the plus sizes, then it's got a different width and a height. 26 00:02:01,000 --> 00:02:05,440 So you might need to have a different canvas to see how it would be laid out. 27 00:02:06,220 --> 00:02:12,130 Now, you've also got the selection of the light and dark modes as well as the landscape and portrait. 28 00:02:12,580 --> 00:02:19,270 So you can change these as you're designing to quickly see what your design would look like on each 29 00:02:19,270 --> 00:02:20,800 of these different settings. 30 00:02:21,580 --> 00:02:27,160 So I'm going to use the iPhone 11 canvas, which has the same six point one inch screen as the iPhone 31 00:02:27,160 --> 00:02:27,730 X are. 32 00:02:28,090 --> 00:02:30,340 But you can use a different canvas, too, if you like. 33 00:02:30,820 --> 00:02:36,610 And as long as the cameras that you've chosen isn't much larger or much smaller than what I'm using, 34 00:02:37,010 --> 00:02:40,060 you shouldn't have any issues following along with me in this material. 35 00:02:40,600 --> 00:02:46,990 Besides, Apple regularly updates this list as they release new devices and update the Xcode software. 36 00:02:48,220 --> 00:02:54,400 So now that we have our canvas selected, let's go ahead and collapse that menu to again give ourselves 37 00:02:54,400 --> 00:03:00,810 as much space as possible and you can actually move around in the canvas using your trackpad. 38 00:03:01,240 --> 00:03:07,930 So if you put two fingers on the trackpad and you move left and right, then you can pan your canvas 39 00:03:07,930 --> 00:03:13,030 around, you move up and down, then you can also move it up and down as well. 40 00:03:13,570 --> 00:03:17,490 You can also do pinch to zoom to make it larger or smaller. 41 00:03:17,980 --> 00:03:23,290 But if you ever find yourself in a position where you can't actually find your screen anymore, then 42 00:03:23,290 --> 00:03:28,270 simply just click on The View controller seen in the document outline and it'll bring it back to the 43 00:03:28,270 --> 00:03:29,230 center of the screen. 44 00:03:29,920 --> 00:03:33,160 So now let's go ahead and add some stuff to our canvas. 45 00:03:33,520 --> 00:03:39,700 And to do this, we have to head over to the object library and we can bring up the object library by 46 00:03:39,700 --> 00:03:41,440 clicking the plus button. 47 00:03:41,800 --> 00:03:44,290 Notice how it's already telling me that this is the library. 48 00:03:45,010 --> 00:03:49,450 And the first thing that I'm going to drag on to the screen is going to be a label. 49 00:03:49,900 --> 00:03:56,440 So I'm going to click and select my label and it tells you a little bit about what this component is 50 00:03:56,440 --> 00:03:57,640 and what it does. 51 00:03:57,940 --> 00:04:01,720 It presents read only text, so you can't type into it. 52 00:04:01,720 --> 00:04:03,160 For example, you can't edit it. 53 00:04:03,760 --> 00:04:05,290 But this is exactly what we need. 54 00:04:05,300 --> 00:04:08,380 So we're going to click and drag it onto the screen. 55 00:04:09,560 --> 00:04:15,680 Now, when you drag things onto the screen, you see these little blue lines pop up and these are called 56 00:04:15,680 --> 00:04:19,640 the guidelines, they help you position your elements. 57 00:04:19,850 --> 00:04:25,330 So, for example, if I wanted it bang in the middle, then you can see that it shows up right here. 58 00:04:25,580 --> 00:04:33,410 Now, drag it on somewhere close to the top third of the app and make sure that it's in the middle and 59 00:04:33,410 --> 00:04:35,630 we're going to change what it says. 60 00:04:36,170 --> 00:04:41,900 Now, remember, if we want to change something in our design, we first have to select it and then 61 00:04:41,900 --> 00:04:47,960 we have to go into the attribute inspector, which is denoted by this symbol right here. 62 00:04:48,440 --> 00:04:54,110 And if you hover over them, they also tell you what they are inside the astrobee inspector. 63 00:04:54,120 --> 00:04:57,100 We can get started changing our label. 64 00:04:57,500 --> 00:05:00,550 So the first thing I'm going to do is I'm going to change what it says. 65 00:05:00,740 --> 00:05:07,210 So I'm going to write I am rich and then hit enter for that to update the text in my label. 66 00:05:07,940 --> 00:05:10,510 And now let's change some other things about it. 67 00:05:10,940 --> 00:05:17,890 Let's change the color to white, which of course will make it disappear from the screen. 68 00:05:17,900 --> 00:05:22,190 So if you ever need to find it again, then the document outline is your best friend. 69 00:05:22,490 --> 00:05:28,140 And if you don't see this pain, then simply just click on the toggle right here to bring it out. 70 00:05:28,880 --> 00:05:35,240 So now that we've got our white text, which is also very small, let's go ahead and change its size. 71 00:05:35,660 --> 00:05:42,350 So we click on this button right here and we can change the font size to something a lot bigger, say 72 00:05:42,350 --> 00:05:47,210 a size 14, and we can also change the style. 73 00:05:47,210 --> 00:05:53,240 So whether if it's bold or not bold, but if you want to change the font, you have to go in here and 74 00:05:53,240 --> 00:05:58,610 select custom first before it comes up with this dropdown for the font family. 75 00:05:59,120 --> 00:06:02,750 And you can change it to whichever font you prefer. 76 00:06:03,530 --> 00:06:10,040 Now I'm going to change it to the Helvetica Noya font and I'm going to keep it as regular. 77 00:06:10,040 --> 00:06:13,510 But I'm going to make sure that the font size is 40. 78 00:06:14,210 --> 00:06:21,470 So we've got this label, which we can vaguely select by using the document outline, but we can't see 79 00:06:21,470 --> 00:06:23,140 it because it's white on white. 80 00:06:23,570 --> 00:06:27,620 So the next thing I want to do is to change the background color of my app. 81 00:06:28,160 --> 00:06:34,490 Now notice that in my document outline I have my label, which I created just now, and it's sitting 82 00:06:34,490 --> 00:06:36,920 inside something called a view. 83 00:06:37,520 --> 00:06:46,070 Now the view is basically what you see in the background and we can change it by, again, selecting 84 00:06:46,070 --> 00:06:50,040 it in the document outline and going to the attribute inspector. 85 00:06:50,480 --> 00:06:52,880 And here we can change its background. 86 00:06:53,420 --> 00:06:57,220 So let's go ahead and select a random background color. 87 00:06:57,380 --> 00:06:58,490 We can make it purple. 88 00:06:59,150 --> 00:07:01,390 Notice how that changes the background color. 89 00:07:01,400 --> 00:07:09,080 And now my white text is visible once more so I can position it easily and I can select it easily on 90 00:07:09,080 --> 00:07:09,830 the canvas. 91 00:07:10,520 --> 00:07:15,860 Now, if you want a really specific color, then you can go to custom. 92 00:07:16,340 --> 00:07:24,610 And if you go into the slider tab and go to Agip Slider's, then you can actually enter a custom hex 93 00:07:24,620 --> 00:07:25,020 color. 94 00:07:25,520 --> 00:07:33,590 So let's add my hex color that I want to use, which is two four four nine five E and I'm going to hit 95 00:07:33,590 --> 00:07:40,350 enter and I get this nice sort of dark green, blue color, kind of indigo ish I would say. 96 00:07:41,030 --> 00:07:47,180 Now one of the tools that I rely on quite heavily is something called Callahans, and it's a website 97 00:07:47,180 --> 00:07:51,650 where professional designers have curated some of their favorite color palettes. 98 00:07:52,160 --> 00:07:59,390 So let's say if I really like this particular palette, well, then I can go ahead and click on this 99 00:07:59,660 --> 00:08:03,410 dark blue color and it copies the hex code right there. 100 00:08:03,860 --> 00:08:11,120 And now I can go into my background, select my view, changed the custom color by clicking on that 101 00:08:11,120 --> 00:08:15,050 custom and then paste in that hex code right here. 102 00:08:15,590 --> 00:08:21,590 And now, if I unselective you, you can see it's now the color that I got from the tool. 103 00:08:22,280 --> 00:08:29,660 And if I want to have a matching color palette, then I'm going to copy this pink color and change my 104 00:08:29,660 --> 00:08:32,750 title to use a custom color. 105 00:08:32,900 --> 00:08:39,020 And I'm going to make sure I've got AGIP sliders selected so I can paste in my hex code. 106 00:08:39,740 --> 00:08:44,730 And now I have a beautiful color palette without any hard work at all. 107 00:08:45,080 --> 00:08:51,530 All I've done is just browsed for one that I really liked and I've started using the colors in that 108 00:08:51,530 --> 00:08:53,000 particular palette sets. 109 00:08:53,660 --> 00:09:00,050 So this is a really easy way of making a really beautiful looking app without needing a lot of design 110 00:09:00,050 --> 00:09:00,440 knowledge. 111 00:09:01,190 --> 00:09:07,790 Now, if you want to undo anything that you've done, then simply just hold on command and hit Z or 112 00:09:07,790 --> 00:09:08,210 Zed. 113 00:09:08,770 --> 00:09:14,350 And as you keep going, you'll be able to revert to whichever stage you want to go back to. 114 00:09:14,650 --> 00:09:18,270 So that's a really neat trick if you just want to unwind the clock. 115 00:09:19,190 --> 00:09:25,640 So sometimes when you're working as an in-house developer, you might be working in a team and in your 116 00:09:25,640 --> 00:09:32,440 team, you might have somebody whose job is to design the canvas and the user interface. 117 00:09:32,870 --> 00:09:34,920 So you might have an app designer. 118 00:09:35,390 --> 00:09:42,350 And in those cases, you probably won't be able to just drag something around and just position it where 119 00:09:42,350 --> 00:09:43,130 you see fit. 120 00:09:43,340 --> 00:09:47,720 They might provide you with exact specifications for how it should look. 121 00:09:48,350 --> 00:09:49,940 So what do you do in that case? 122 00:09:50,240 --> 00:09:59,240 Well, let's say that I wanted this label to be 166 in width and 48 in height and a specific position. 123 00:09:59,690 --> 00:10:05,450 Then I would again select the label and instead of going to the attribute inspector, I would go to 124 00:10:05,690 --> 00:10:10,660 the size inspector to change the position and these sizes. 125 00:10:11,390 --> 00:10:20,000 So let's say that I change the exposition to 124, so move it to the right a little bit and I change 126 00:10:20,000 --> 00:10:30,380 my Y position to 156, move it up a little bit and I keep my width as it is and I change the height 127 00:10:30,380 --> 00:10:31,880 to, let's say, 48. 128 00:10:32,240 --> 00:10:32,510 Right. 129 00:10:32,810 --> 00:10:42,050 So if your designer is giving you these precise positioning and sizing instructions, then you can change 130 00:10:42,050 --> 00:10:43,800 that inside this tab right here. 131 00:10:44,330 --> 00:10:49,460 But if you're building your own app, then of course, you can place it wherever you like in whatever 132 00:10:49,460 --> 00:10:50,810 position that pleases you. 133 00:10:52,100 --> 00:10:57,170 Now, the next thing we want to do is we want to be able to add a picture into our app. 134 00:10:57,710 --> 00:11:05,200 So to do that, we need to use a component from the object library called an image view as a challenge. 135 00:11:05,240 --> 00:11:11,720 I want you to see if you can remember how to get pre-built components out of the object library and 136 00:11:11,720 --> 00:11:13,610 position it onto the screen. 137 00:11:14,030 --> 00:11:20,330 Once you dragged and dropped it onto the screen, then I want you to give it a specific position. 138 00:11:20,810 --> 00:11:29,000 So the exposition should be 70 to the Y positions, should be 313 and change its size to have a width 139 00:11:29,000 --> 00:11:32,660 of 270 and a height of 270. 140 00:11:33,260 --> 00:11:36,160 Post the video now and try to complete that challenge. 141 00:11:39,940 --> 00:11:42,460 All right, so did you remember how to do that? 142 00:11:43,090 --> 00:11:49,150 Well, first things first, we have to be inside the main storyboard and we have to open up the object 143 00:11:49,150 --> 00:11:51,690 library by clicking on this button right here. 144 00:11:52,150 --> 00:11:54,510 And then we simply search for an item. 145 00:11:54,880 --> 00:12:00,160 So you can either scroll through this list to find the image view or you can simply type in the search 146 00:12:00,160 --> 00:12:04,290 by image view and it will show up the component that we need. 147 00:12:05,020 --> 00:12:13,030 This component will show an image or a series of images as long as we drag and drop it onto our screen. 148 00:12:14,020 --> 00:12:18,820 Once is on our screen, then we're going to change its position and its height and width. 149 00:12:19,120 --> 00:12:28,570 So the exposition we said it was 72, the Y position was 313, and then the width and height were both 150 00:12:28,570 --> 00:12:31,240 going to be 270. 151 00:12:32,050 --> 00:12:39,820 So now you should have a UI image view that position on screen in the exact same location as what you 152 00:12:39,820 --> 00:12:47,740 see in this video, because we've used precise coordinates and width and height to achieve this effect. 153 00:12:48,460 --> 00:12:57,010 Now, if you're wondering what does the 72 and 313 actually refer to and how do you figure out that 154 00:12:57,310 --> 00:12:59,920 this position should be those values? 155 00:13:00,370 --> 00:13:02,610 Well, you don't have to wonder anymore. 156 00:13:02,740 --> 00:13:05,920 We're going to talk about how positioning works in Xcode. 157 00:13:06,760 --> 00:13:12,580 Let's say that we have a UI element that we've moved around on screen and we're happy with its position 158 00:13:13,180 --> 00:13:18,520 and we want to be able to define this position in terms of coordinates. 159 00:13:18,530 --> 00:13:20,140 So an X and a Y? 160 00:13:20,830 --> 00:13:29,110 Well, you can imagine the iPhone screen as a graph where the top left corner is zero or the origin 161 00:13:29,110 --> 00:13:38,980 of the graph, and where the x axis runs along the horizontal edge of the phone and the Y axis corresponds 162 00:13:38,980 --> 00:13:40,640 to the vertical edge. 163 00:13:41,440 --> 00:13:50,470 Now, on an iPhone six, the width of the screen is 375 and the height is six hundred and sixty seven. 164 00:13:51,160 --> 00:13:57,340 If you want to know these values for different sized screens, then I recommend taking a look at Painton 165 00:13:57,340 --> 00:14:05,290 Code's ultimate guide to iPhone resolutions, where you can see the sizes of the iPhone X, the iPhone 166 00:14:05,290 --> 00:14:09,010 X or the five series six series, the plus series. 167 00:14:09,280 --> 00:14:12,980 And you can see their sizes defined as points. 168 00:14:13,660 --> 00:14:14,670 Now what does it say? 169 00:14:14,680 --> 00:14:16,380 Points are not pixels. 170 00:14:16,810 --> 00:14:25,060 Well, as the resolution of the iPhone's improved, they managed to cram more pixels into the same screen 171 00:14:25,060 --> 00:14:25,510 size. 172 00:14:25,870 --> 00:14:35,050 So, for example, when you take a look at the original iPhone 2G, 3G, then 320 points by 480 points 173 00:14:35,050 --> 00:14:38,380 is literally 320 by 480 pixels. 174 00:14:38,980 --> 00:14:47,830 But in the iPhone four, they managed to double the amount of pixels crammed into the same screen size. 175 00:14:48,190 --> 00:14:50,260 So the screens are still the same. 176 00:14:50,590 --> 00:14:55,770 But now we have doubled the resolution to make the images much sharper. 177 00:14:56,170 --> 00:15:01,240 So the points simply refer to the sizes that you see in the app. 178 00:15:01,600 --> 00:15:07,080 And the pixels refers to essentially the number of light bulbs, if you will, in the screen. 179 00:15:07,420 --> 00:15:12,660 So the more light bulbs, the more detail you can get and the sharper the image. 180 00:15:13,150 --> 00:15:19,750 But when we're talking about designing for iOS apps, we're talking about the sizes in terms of points. 181 00:15:20,710 --> 00:15:29,650 So we know that are iPhone six has 375 points along the horizontal and 667 along the vertical. 182 00:15:29,980 --> 00:15:33,490 How can we define the position of this purple UI element? 183 00:15:34,180 --> 00:15:40,420 Well, we define the position by, again, the upper left corner of any element. 184 00:15:40,990 --> 00:15:48,940 So we know that the screen starts its origin at the top left corner and the elements are positioned 185 00:15:49,150 --> 00:15:50,560 by their top left corner. 186 00:15:51,160 --> 00:15:59,170 So in this case, we would say run a line up to the x axis and we get to a point which is kind of halfway 187 00:15:59,170 --> 00:16:00,510 to 375. 188 00:16:00,790 --> 00:16:05,940 So let's say it's about one hundred and sixty five points on the X axis. 189 00:16:05,950 --> 00:16:12,730 And then if we run a line to the Y axis or the vertical, then you can see that from zero down to six 190 00:16:12,730 --> 00:16:14,350 hundred sixty seven. 191 00:16:14,710 --> 00:16:17,080 Let's say this is about 75 points. 192 00:16:17,620 --> 00:16:20,140 Well, now we have our position for this element. 193 00:16:20,320 --> 00:16:25,070 It's X equals one six five and Y equals 75. 194 00:16:25,390 --> 00:16:26,070 Pretty simple. 195 00:16:26,740 --> 00:16:31,630 Now, in the next lesson, we're actually going to use that image of you that we put onto the screen 196 00:16:31,930 --> 00:16:37,000 and we're going to learn how we can incorporate image assets into our Xcode projects so that we can 197 00:16:37,000 --> 00:16:38,860 put a picture inside the image. 198 00:16:38,940 --> 00:16:42,750 You so all of that and more I see on the next lesson.