1 00:00:00,240 --> 00:00:07,920 It's time to add a little custom this to our app, so let's open up the main DOT storyboard and this 2 00:00:07,920 --> 00:00:10,110 contains the main screen of our app. 3 00:00:10,650 --> 00:00:15,780 Now, we would like to add a simple button that allows us to turn the screen torch from blue to red 4 00:00:15,780 --> 00:00:16,950 to blue to back again. 5 00:00:17,850 --> 00:00:18,790 So how do we do that? 6 00:00:19,200 --> 00:00:22,770 Well, if you look at the top right corner, there's a little plus icon. 7 00:00:22,770 --> 00:00:26,730 And if you tap that, we get a list of objects that we can add. 8 00:00:27,000 --> 00:00:31,510 And if you scroll up and down, you can see the various built-In UI elements. 9 00:00:31,770 --> 00:00:36,540 Now, you're never going to need anything beyond this, at least for the first five, 10 years of your 10 00:00:36,540 --> 00:00:37,440 development life. 11 00:00:37,800 --> 00:00:38,730 Famous last words. 12 00:00:38,730 --> 00:00:41,910 But, you know, I very rarely had to have anything custom. 13 00:00:43,050 --> 00:00:44,720 I would say piece of advice here. 14 00:00:44,730 --> 00:00:46,550 Don't go down the custom route for anything. 15 00:00:46,560 --> 00:00:50,660 Try to keep it stock standard so your apps have a good shelf life. 16 00:00:51,390 --> 00:00:52,830 Anyway, back to the task. 17 00:00:53,130 --> 00:00:55,250 We have this button item here. 18 00:00:55,560 --> 00:01:01,800 So if you just click and drag it, you can drop it onto your display and it gives you little handy alignment 19 00:01:01,800 --> 00:01:02,280 lines. 20 00:01:02,400 --> 00:01:09,450 So if you release the button, it is now aligned to those items, but it isn't yet fixed if you load 21 00:01:09,450 --> 00:01:10,770 the app in this condition. 22 00:01:10,920 --> 00:01:12,030 So I'm going to hit play. 23 00:01:12,040 --> 00:01:13,790 I'm going to put this on the iPod Touch. 24 00:01:14,100 --> 00:01:16,530 Let's see what happens to that build button. 25 00:01:16,980 --> 00:01:20,340 I'm willing to bet that one of two things is going to happen. 26 00:01:20,580 --> 00:01:25,590 That button is going to be exactly in the middle or the button is going to be in some weird position 27 00:01:25,590 --> 00:01:27,180 or not even visible. 28 00:01:27,720 --> 00:01:30,060 And as soon as it loads, I'm going to tell you why. 29 00:01:31,440 --> 00:01:33,420 So here it comes, spending beachball. 30 00:01:33,450 --> 00:01:41,550 There we go, right, because we have used a larger pixel density device, as in an iPhone. 31 00:01:41,760 --> 00:01:43,210 What is this, the iPhone 11? 32 00:01:44,040 --> 00:01:48,360 We've put it in the center of that because we haven't given it any alignment. 33 00:01:49,620 --> 00:01:54,530 What happens is that it just puts that button in an absolute position. 34 00:01:54,750 --> 00:02:01,260 So if you imagine an iPhone 11 compared to this iPod Touch, it would be much, much bigger, wider, 35 00:02:01,290 --> 00:02:04,480 slightly wider and much taller pixel wise. 36 00:02:05,310 --> 00:02:11,520 So, of course, the solution is to add some kind of reference to the button so it knows where to sit 37 00:02:11,520 --> 00:02:17,650 in the display reference to the top bottom and the sides and also probably the size of button. 38 00:02:18,750 --> 00:02:25,020 So if you look at the bottom right of the interface, editors are not the far right, but the bottom 39 00:02:25,020 --> 00:02:25,310 right. 40 00:02:25,320 --> 00:02:32,040 There are four little buttons that are highlighted and if you hover over them, it gives you add new 41 00:02:32,040 --> 00:02:33,990 constraints and a line. 42 00:02:34,230 --> 00:02:41,430 If we click a line, we can click horizontally, vertically and then click add to constraints. 43 00:02:41,610 --> 00:02:43,410 And again, I'm sorry about the font size. 44 00:02:43,410 --> 00:02:45,870 I have tried endlessly to change this. 45 00:02:46,200 --> 00:02:51,930 If you search for change font size and Xcode, not the idy, then you'll see how many people are annoyed 46 00:02:51,930 --> 00:02:53,220 at this anyway. 47 00:02:54,120 --> 00:02:58,830 Now we've added these blue lines which aren't visible when you load the app, but if you click them, 48 00:02:58,860 --> 00:03:00,960 they tell you what they are over in the top. 49 00:03:00,960 --> 00:03:01,320 Right? 50 00:03:02,040 --> 00:03:03,630 We're going from the center of the button. 51 00:03:04,610 --> 00:03:11,360 Equal to the center of the super view, which is the background canvas of the view, and of course, 52 00:03:11,360 --> 00:03:13,080 it's the same with the horizontal line. 53 00:03:13,320 --> 00:03:18,470 Now, of course, you don't see these lines when the uploads, but the button will be dead center. 54 00:03:18,980 --> 00:03:23,600 The other thing we're going to do is click the button and click the icon next to that one that says 55 00:03:23,600 --> 00:03:24,860 add new constraints. 56 00:03:25,190 --> 00:03:28,790 And if you tap that, you can space it to the nearest neighbor. 57 00:03:30,180 --> 00:03:36,390 I'm going to unclick that or you can click width and height, so your button is a fixed width and height. 58 00:03:36,640 --> 00:03:38,730 And if you look carefully, let's zoom in. 59 00:03:40,360 --> 00:03:43,300 We have these little blue bars that tell you what height the button is. 60 00:03:44,400 --> 00:03:49,970 And what with the battle is over in the top, right, you have the properties, so this is forty six. 61 00:03:50,400 --> 00:03:51,310 Forty six what? 62 00:03:51,720 --> 00:03:55,620 Well, it's not pixels because devices have different pixel densities. 63 00:03:56,930 --> 00:04:03,530 Most apps, Android included, use device independent pixels, so it says, you know, this is supposed 64 00:04:03,530 --> 00:04:08,690 to be four pixels and if the device says, but I have eight in that space, the device will allocate 65 00:04:08,690 --> 00:04:09,890 eight to the button. 66 00:04:10,950 --> 00:04:16,290 OK, so that's the button sorted and now if we play that, it doesn't matter what device we run it on. 67 00:04:20,580 --> 00:04:24,270 It should be dead center now in the simulator. 68 00:04:24,300 --> 00:04:29,690 You have some menu options up top, and what we would like to do is rotate the device. 69 00:04:29,690 --> 00:04:36,810 So if you go to device, you can rotate left and look how it resists device rotate right and back we 70 00:04:36,810 --> 00:04:37,060 go. 71 00:04:37,530 --> 00:04:39,210 So that works perfectly. 72 00:04:39,210 --> 00:04:46,050 In the simulator, you've learned how to constrain a button relative to the canvas it sits in and how 73 00:04:46,050 --> 00:04:48,780 to constrain the width and height of the button.