1 00:00:04,350 --> 00:00:13,800 This was a duck pond we're going to continue on and forward in our quest to support the iPad using size 2 00:00:13,800 --> 00:00:16,770 classes and first things first. 3 00:00:16,800 --> 00:00:20,970 Let's do a little get cleanup get work here so get status. 4 00:00:20,970 --> 00:00:28,840 I'm going to say Get add dash a good commit and we're going to say built iPhone interface. 5 00:00:28,880 --> 00:00:29,220 All right. 6 00:00:29,250 --> 00:00:30,640 And the branches are one I believe. 7 00:00:30,640 --> 00:00:36,050 So you get push origin less than 0 1. 8 00:00:36,370 --> 00:00:36,850 OK. 9 00:00:37,050 --> 00:00:39,390 We're ready to go almost yet. 10 00:00:39,410 --> 00:00:42,970 Check out Dasch be less than zero 2. 11 00:00:42,990 --> 00:00:43,230 All right. 12 00:00:43,230 --> 00:00:44,540 Perfect. 13 00:00:45,330 --> 00:00:50,460 So here's our interface does not look right on iPad but does look right on iPhone. 14 00:00:50,460 --> 00:00:52,730 So the key and trick here. 15 00:00:52,970 --> 00:00:58,440 All right is going to be supporting the iPad without breaking the iPhone. 16 00:00:58,470 --> 00:01:02,380 And we're going to size classes to do that but it's going to be fun and be magical. 17 00:01:02,400 --> 00:01:05,040 So let's just go ahead and make some magic. 18 00:01:05,040 --> 00:01:08,750 So first things first. 19 00:01:08,760 --> 00:01:09,480 All right. 20 00:01:09,480 --> 00:01:13,360 On the iPad that does SILVIS logo is a little bit down. 21 00:01:13,650 --> 00:01:14,300 OK. 22 00:01:14,610 --> 00:01:19,940 We talked about that and so I'm going to move it a little bit and this guy here. 23 00:01:20,340 --> 00:01:21,210 I'm OK with it. 24 00:01:21,210 --> 00:01:25,540 It's not perfect but I'm going to leave it as is so let's change this guy right here. 25 00:01:25,710 --> 00:01:26,010 OK. 26 00:01:26,010 --> 00:01:30,600 So zoom in and this Dev's slopes label. 27 00:01:30,600 --> 00:01:34,580 So if we go to our attributes here they are constraints. 28 00:01:34,590 --> 00:01:41,940 I mean will notice that it's the center of it's to the center of this logo here. 29 00:01:41,970 --> 00:01:43,680 But what we really want is an iPad. 30 00:01:43,680 --> 00:01:48,060 We want to the center of this logo and down a little bit maybe probably make the font on a little bit 31 00:01:48,060 --> 00:01:49,450 bigger on iPad 2. 32 00:01:49,710 --> 00:01:54,010 I think the designer neglected that and I think we should fix that thing designers. 33 00:01:54,030 --> 00:01:54,620 OK. 34 00:01:54,780 --> 00:02:00,400 So what we want to do and this align center Why would I want to do double click this. 35 00:02:00,600 --> 00:02:03,930 And here's something very important and it's super obscure. 36 00:02:03,990 --> 00:02:08,850 If you're just gliding through here but you're going to see something called installed and what that 37 00:02:08,850 --> 00:02:12,650 means is is this constraint installed across all devices. 38 00:02:12,660 --> 00:02:18,540 And currently it is so whatever we have set here is applying to all device sizes but we no longer want 39 00:02:18,570 --> 00:02:19,100 that. 40 00:02:19,240 --> 00:02:26,520 OK so if you want to make another constraint or a size class that supports iPad or a bigger screen size 41 00:02:26,520 --> 00:02:31,430 or smaller screen size right next to install there's a plus button in which you want to do is click. 42 00:02:31,590 --> 00:02:36,420 Plus OK and what we want to do is regular with regular height. 43 00:02:36,450 --> 00:02:37,370 That is an iPad. 44 00:02:37,380 --> 00:02:38,040 OK. 45 00:02:38,040 --> 00:02:43,880 Compact with regular height is an iPhone regular with regular height is an iPad. 46 00:02:44,130 --> 00:02:48,740 So I'm going to click add variation and is it installed on regular with regular. 47 00:02:48,760 --> 00:02:49,680 Yes it is. 48 00:02:50,160 --> 00:02:55,350 But we no longer want it to be installed on the pad. 49 00:02:55,810 --> 00:03:00,730 So what we're going to do is turn it off and notice how it's read now. 50 00:03:00,860 --> 00:03:08,120 OK but if we go to the iPhone it's not red it's just says it needs to be OK but on the iPad it's red. 51 00:03:08,250 --> 00:03:11,420 That's because it's now missing constraints because we turned it off on the iPad. 52 00:03:11,460 --> 00:03:17,240 And we did so here in the Over here in the constraints. 53 00:03:17,250 --> 00:03:17,910 OK. 54 00:03:17,970 --> 00:03:19,530 And if you notice it's gone now. 55 00:03:19,650 --> 00:03:23,760 If we click all though it's right there but it's hidden is it saying Hey there's constraints here but 56 00:03:23,810 --> 00:03:26,070 they're not being applied to the size class of this iPad. 57 00:03:26,070 --> 00:03:26,790 OK. 58 00:03:26,910 --> 00:03:32,370 So this size class is what's currently affecting the view that you're working with which is really important 59 00:03:32,380 --> 00:03:35,470 be careful not to click between these and think you're doing something that you're not. 60 00:03:35,550 --> 00:03:42,330 So we're in this size class and now we need to go ahead and do the same thing that we did before except 61 00:03:42,330 --> 00:03:44,460 with a different a different attribute. 62 00:03:44,850 --> 00:03:46,040 OK with a different value. 63 00:03:46,080 --> 00:03:51,510 So what I'm going to do is I'm going to control drag just to be different from dev slopes to this logo 64 00:03:52,110 --> 00:03:55,560 and I want to say center vertically. 65 00:03:55,860 --> 00:03:58,920 So now yeah it looks just like it looked before right. 66 00:03:58,930 --> 00:04:02,030 However however on this one. 67 00:04:02,240 --> 00:04:02,810 OK. 68 00:04:04,160 --> 00:04:08,630 What we're going to do I mean to take this off installed what we're going to do is we're going to add 69 00:04:08,630 --> 00:04:15,780 regular regular and on this one what we're going to do is we're now going to set a constant maybe plus 70 00:04:15,780 --> 00:04:18,830 10 plus 15. 71 00:04:19,310 --> 00:04:22,140 So it's got aligned to the center plus 15. 72 00:04:22,240 --> 00:04:22,900 OK. 73 00:04:23,420 --> 00:04:24,490 Yeah I like that. 74 00:04:24,770 --> 00:04:28,190 So it's not installed on regular iPhone it's only installed an iPad. 75 00:04:28,250 --> 00:04:31,900 So it's what it's about plus 15 almost to the bottom you're not centered anymore. 76 00:04:32,030 --> 00:04:33,350 But if we go back to the iPhone. 77 00:04:33,380 --> 00:04:36,920 Notice how it's it's where it where we left it right here in the center. 78 00:04:37,210 --> 00:04:38,110 And let's look at this again. 79 00:04:38,120 --> 00:04:39,070 I'm on the iPhone. 80 00:04:39,080 --> 00:04:40,600 I've clicked the iPhone device. 81 00:04:40,940 --> 00:04:48,050 And if we double click in the align center Why notice how it is not installed on the regular with regular 82 00:04:48,050 --> 00:04:48,530 height. 83 00:04:48,670 --> 00:04:52,880 OK it's installed and everything except for that when it says installed. 84 00:04:52,880 --> 00:04:54,100 That means everything. 85 00:04:54,290 --> 00:04:59,840 But if you turn off one of them like so it is no longer installed on that screen device. 86 00:04:59,840 --> 00:05:00,750 OK. 87 00:05:01,030 --> 00:05:02,130 So makes sense. 88 00:05:02,150 --> 00:05:10,080 And so if we go to iPad OK you'll click the label and you'll notice that this is not installed in anything 89 00:05:10,080 --> 00:05:13,230 else except for regular with regular height which is i-Pad. 90 00:05:13,250 --> 00:05:19,560 And what it is it's the center of equal centers vertically plus 15. 91 00:05:19,560 --> 00:05:24,660 OK so we've just done our first sized class where it works on one screen size but not on another. 92 00:05:24,840 --> 00:05:28,050 OK and you're going to want to watch this video again if this confuses you. 93 00:05:28,050 --> 00:05:29,580 I have no other way to explain it. 94 00:05:29,580 --> 00:05:33,780 We've done the steps slowly and curiously as possible. 95 00:05:33,960 --> 00:05:35,630 So that's working there. 96 00:05:35,640 --> 00:05:40,880 So the next thing we need to do is we need to get these icons lined up with this. 97 00:05:40,890 --> 00:05:43,950 And if you notice in the image here they're lined up with the word Debb slopes. 98 00:05:44,010 --> 00:05:46,970 So notice how we did that center plus 15. 99 00:05:47,060 --> 00:05:50,620 We're probably going to do the exact same thing for this stack view here. 100 00:05:50,790 --> 00:05:55,620 So I'm going to select the stack you hear on the iPad and let's look at what we got here. 101 00:05:55,620 --> 00:06:00,300 So in this case it says a line center X to Super view well we no longer want this centered in the screen 102 00:06:00,420 --> 00:06:01,960 so we need a change. 103 00:06:01,980 --> 00:06:07,460 So double click this align center X because we created it applied it to all the size classes that will 104 00:06:07,470 --> 00:06:09,760 click it and notice how it's installed everywhere. 105 00:06:09,780 --> 00:06:14,930 So now what we want to do is this go ahead and add the regular regular and turn it off. 106 00:06:15,000 --> 00:06:16,790 It is no longer installed an iPad. 107 00:06:16,890 --> 00:06:21,610 OK it's installed everywhere else except for iPad you with me so far. 108 00:06:21,640 --> 00:06:26,680 OK so it's no longer and sold an iPad but of course it is still centered in the Virgin vertically here 109 00:06:26,920 --> 00:06:27,910 on the iPhone. 110 00:06:27,910 --> 00:06:28,580 OK. 111 00:06:28,750 --> 00:06:34,390 So now what we want to do is with this stack you select did we want to just move it to the center of 112 00:06:34,390 --> 00:06:36,520 this plus 15. 113 00:06:36,520 --> 00:06:37,850 So what I'll do. 114 00:06:38,910 --> 00:06:44,320 See and there's a bottom space and a top space you learn any changes to this top space the devs those 115 00:06:44,340 --> 00:06:46,200 Loga we no longer need that as well either. 116 00:06:46,200 --> 00:06:51,010 So double click that and let's add regular regular and turn it off. 117 00:06:51,130 --> 00:06:54,740 There we go so it's no longer pinned here and you're going to start seeing a bunch of red lines here. 118 00:06:54,750 --> 00:06:55,140 Why. 119 00:06:55,140 --> 00:06:56,940 Because we broke the whole system. 120 00:06:56,940 --> 00:07:02,940 The system is down because we had to remember how we've talked about in the past with Atalia when you 121 00:07:02,940 --> 00:07:06,350 build layoffs you have to build everything from the top down you can't miss one thing. 122 00:07:06,450 --> 00:07:09,680 When you work with constraints everything entirely entire has to be built out. 123 00:07:09,930 --> 00:07:14,760 And so we just broke that because it is no longer pinned to the top of this so it's like oh no where 124 00:07:14,760 --> 00:07:15,560 do we go next. 125 00:07:15,560 --> 00:07:22,200 And everyone's confused and crying and never fear we will save the day by simply grabbing the stack. 126 00:07:22,210 --> 00:07:23,550 You all right. 127 00:07:23,610 --> 00:07:27,250 And I'm just going to control drag. 128 00:07:27,580 --> 00:07:30,730 I'm a little worried that it's slipped in my button and not the stack. 129 00:07:30,730 --> 00:07:35,920 You know let's just go ahead and grab it from here control direct from the left side and then to the 130 00:07:35,920 --> 00:07:36,380 logo. 131 00:07:36,400 --> 00:07:42,280 And what we want to do is we want to center vertically like so right and now all the constraints are 132 00:07:42,280 --> 00:07:42,790 back together. 133 00:07:42,790 --> 00:07:45,480 The red lines are gone but of course we don't want to center vertically. 134 00:07:45,480 --> 00:07:50,950 We want to center vertically plus 15 right so line center Y. 135 00:07:51,140 --> 00:07:54,530 All we need to do is first off make sure it's not installed on all the devices. 136 00:07:54,620 --> 00:07:57,630 So add a variation and then turn off the other devices. 137 00:07:57,650 --> 00:07:57,890 OK. 138 00:07:57,890 --> 00:08:00,030 So it's only installed on i-Pad. 139 00:08:00,050 --> 00:08:00,700 All right. 140 00:08:00,830 --> 00:08:01,910 This is really important stuff. 141 00:08:01,910 --> 00:08:04,910 You can't just leave both on or one on you forget. 142 00:08:05,000 --> 00:08:07,240 They both need to be done this way. 143 00:08:07,250 --> 00:08:10,810 Take off all the devices and just put the regular with regular height. 144 00:08:10,910 --> 00:08:13,550 And we want the plus 15 just like the dustups work. 145 00:08:13,790 --> 00:08:18,780 So it's centered and there's really only one more thing that we need to do and that's in this stack 146 00:08:18,790 --> 00:08:22,330 view the right hand side as far as this goes here. 147 00:08:22,330 --> 00:08:28,690 So with the stack you selected Let's go ahead and click the pin menu and what I want is it to be and 148 00:08:29,290 --> 00:08:31,380 just ate from the right hand side. 149 00:08:32,720 --> 00:08:34,610 And boom. 150 00:08:34,610 --> 00:08:36,330 That was not that bad actually. 151 00:08:36,350 --> 00:08:41,050 And so save this here if we would look at the iPhone it should still be intact which it is. 152 00:08:41,060 --> 00:08:42,910 That's great. 153 00:08:42,950 --> 00:08:44,570 The spacing is a little bit bigger than I want. 154 00:08:44,570 --> 00:08:46,570 Now though that's interesting. 155 00:08:46,800 --> 00:08:52,100 It played around with some things I'm not happy with it so this is really cool. 156 00:08:52,100 --> 00:08:57,530 If we want to fix this we can actually add size classes to specific attributes so see how the spacing 157 00:08:57,530 --> 00:08:58,230 is 29. 158 00:08:58,250 --> 00:08:59,490 It's a little bit too much. 159 00:08:59,780 --> 00:09:01,290 What if we click the plus sign. 160 00:09:01,530 --> 00:09:03,910 OK so compact regular So on an iPhone. 161 00:09:03,950 --> 00:09:05,510 Let's make it 29. 162 00:09:05,700 --> 00:09:06,350 OK. 163 00:09:06,470 --> 00:09:07,970 But on an iPad. 164 00:09:08,060 --> 00:09:09,020 OK I'm going to click it again. 165 00:09:09,020 --> 00:09:13,820 Regular regular and I bet it will be whatever we want it to be. 166 00:09:13,820 --> 00:09:17,080 Or actually let's leave out the regular regular and on the iPhone. 167 00:09:17,150 --> 00:09:19,410 Let's just make this less. 168 00:09:19,500 --> 00:09:21,200 How about 15. 169 00:09:21,470 --> 00:09:23,160 Well that's not enough. 170 00:09:23,170 --> 00:09:26,500 How about 10 still not very much. 171 00:09:26,500 --> 00:09:29,690 Is it feel equally it's. 172 00:09:29,820 --> 00:09:35,100 It's because it doesn't want to shrink them because it has to feel equally full. 173 00:09:35,100 --> 00:09:38,110 No we want them to feel equally here. 174 00:09:39,000 --> 00:09:40,970 Let's see what we have for images here. 175 00:09:41,810 --> 00:09:46,330 These are buttons it's maintaining the button size and see how the outline here is feeling. 176 00:09:46,350 --> 00:09:52,520 Equally here Mm hmm what I'm going to do is I'm going to have to say I'm going to make an executive 177 00:09:52,520 --> 00:09:57,170 decision as a programmer and say hey designer I know you wanted these buttons a lot closer but I'm using 178 00:09:57,170 --> 00:09:57,590 a stack. 179 00:09:57,650 --> 00:09:58,820 And it gives us a lot of convenience. 180 00:09:58,820 --> 00:10:02,520 Are you OK with the way it looks and then he'll say yeah you know this isn't too bad. 181 00:10:02,690 --> 00:10:04,600 If he says no it really needs to be fixed. 182 00:10:04,610 --> 00:10:08,450 Then I would probably need to take these out of stack views and hand do the constraints like we've done 183 00:10:08,450 --> 00:10:09,530 in the past. 184 00:10:09,920 --> 00:10:11,270 But I'm making an executive decision. 185 00:10:11,270 --> 00:10:11,540 Why. 186 00:10:11,540 --> 00:10:13,030 Because the designers are not here. 187 00:10:13,040 --> 00:10:15,070 And what the designer doesn't know isn't going to hurt them. 188 00:10:15,070 --> 00:10:17,370 So it looks good enough to me. 189 00:10:17,510 --> 00:10:21,620 We did adjust the spacing a little bit for an iPhone but it didn't get it quite to where the image needs 190 00:10:21,620 --> 00:10:21,890 to be. 191 00:10:21,900 --> 00:10:22,590 But that's OK. 192 00:10:22,820 --> 00:10:24,200 That's the decision sometimes. 193 00:10:24,220 --> 00:10:26,610 In conversations we have to make as programmers. 194 00:10:26,750 --> 00:10:31,270 So the other thing here is these images right now there's a one to one aspect ratio. 195 00:10:31,670 --> 00:10:34,920 OK so if I click this image here and this one too. 196 00:10:35,060 --> 00:10:36,990 They both have one to one aspect ratio. 197 00:10:37,220 --> 00:10:40,340 So what I want to do is I just want to turn this off on iPad. 198 00:10:40,880 --> 00:10:45,910 So click the image click the ruler up air and then see this one to one ratio. 199 00:10:45,910 --> 00:10:51,800 What I want to do is click the plus button add variation and I do not want to install on regular regular 200 00:10:52,300 --> 00:10:52,740 phone. 201 00:10:52,790 --> 00:10:54,980 It's just gone no longer affecting iPad. 202 00:10:55,250 --> 00:10:56,030 That was pretty easy right. 203 00:10:56,030 --> 00:11:01,430 All we did was we turned off the square the one to one ratio on iPad and will do the same thing with 204 00:11:01,430 --> 00:11:02,780 this image here. 205 00:11:02,780 --> 00:11:04,710 So it says one to one. 206 00:11:04,850 --> 00:11:12,170 Let's just go ahead and say add this here regular regular and turn it off. 207 00:11:12,240 --> 00:11:13,170 Boom. 208 00:11:13,170 --> 00:11:15,000 Now could these be a little bit smaller. 209 00:11:15,120 --> 00:11:18,630 Yeah they could but this was this was really easy work here. 210 00:11:18,680 --> 00:11:20,060 Like I almost don't want to change. 211 00:11:20,070 --> 00:11:22,120 We've got a lot of space extra space here. 212 00:11:22,350 --> 00:11:28,800 So I kind of just want to leave it although I do want to move this top stack view down slightly from 213 00:11:28,800 --> 00:11:29,240 the button. 214 00:11:29,250 --> 00:11:33,850 I want to utilize the screen space better and I also want to add more space maybe even more space between 215 00:11:33,970 --> 00:11:35,250 these icons here as well too. 216 00:11:35,250 --> 00:11:39,290 So if we look over here the top space is 24. 217 00:11:39,540 --> 00:11:49,510 OK let's click that let's add a regular regular for iPad and let's turn off the other one here. 218 00:11:49,780 --> 00:11:56,700 Actually let's let's think about this here for a second. 219 00:11:56,840 --> 00:12:00,730 Let's turn off the let's turn off the iPad on this constraint. 220 00:12:00,760 --> 00:12:02,160 We're going to create a whole new constraint. 221 00:12:02,280 --> 00:12:08,320 Now guys let's turn off that one and then let's click this stack you again right here. 222 00:12:08,890 --> 00:12:15,550 So now the top space is gone which is exactly what we want so let's go ahead and make a new top space 223 00:12:15,660 --> 00:12:19,200 and instead of twelve point five let's say 25. 224 00:12:19,420 --> 00:12:20,370 All right. 225 00:12:20,410 --> 00:12:21,740 25 from the top. 226 00:12:21,940 --> 00:12:28,330 And what I'll do on this one is we'll make this installed on regular regular but then turn off the other 227 00:12:28,330 --> 00:12:28,930 devices. 228 00:12:28,930 --> 00:12:33,490 So this was only an iPad and 25 is not enough let's say 50. 229 00:12:33,610 --> 00:12:34,920 That looks much better. 230 00:12:35,110 --> 00:12:39,130 And if we go to iPhone it's still maintaining the old one because we left that constraint there. 231 00:12:39,490 --> 00:12:40,420 Looks perfect still. 232 00:12:40,420 --> 00:12:43,240 So this is coming together very nice. 233 00:12:43,270 --> 00:12:44,500 And so 50 there. 234 00:12:44,590 --> 00:12:48,380 And then let's just do a little more spacing between the stack these themselves. 235 00:12:48,400 --> 00:12:50,400 So score to this bottom stack view here. 236 00:12:50,590 --> 00:12:52,810 And this top space says 15. 237 00:12:52,810 --> 00:12:55,850 Let's just go ahead and turn that off on regular regular. 238 00:12:56,140 --> 00:12:58,540 And then we'll add a brand new constraint to it. 239 00:12:59,050 --> 00:13:02,650 Like so top space and let's say 25. 240 00:13:03,730 --> 00:13:05,330 And I like that. 241 00:13:05,500 --> 00:13:12,630 And then let's go ahead and turn this off on the everything and just leave it on private and that's 242 00:13:12,630 --> 00:13:13,160 looking good. 243 00:13:13,170 --> 00:13:14,900 Let's make sure nothing broken iPhone. 244 00:13:14,940 --> 00:13:16,840 And it did not. 245 00:13:16,890 --> 00:13:18,320 And so yeah this is great. 246 00:13:18,690 --> 00:13:23,310 We've actually building a custom custom designs just here an interface builder that looks differently 247 00:13:23,340 --> 00:13:25,110 and is better suited for the user. 248 00:13:25,110 --> 00:13:28,210 One other thing was I said I wanted to increase the font size here which I do. 249 00:13:28,350 --> 00:13:31,550 So I see this dev slopes label here. 250 00:13:31,590 --> 00:13:34,590 Let's go to the attributes inspector and you'll see right here next to the font. 251 00:13:34,590 --> 00:13:36,100 There's also that plus button. 252 00:13:36,330 --> 00:13:39,420 So let's click it and do one for iPad and on the iPad. 253 00:13:39,450 --> 00:13:42,750 Let's just make it bigger iPad only is going to be bigger. 254 00:13:43,050 --> 00:13:44,270 And that's nice. 255 00:13:44,270 --> 00:13:47,490 Like fills up the space better and we go to the iPhone and still the same size. 256 00:13:47,520 --> 00:13:48,820 That's looking great. 257 00:13:48,900 --> 00:13:52,980 And the last thing we want to do is hide something completely if it's on the iPhone. 258 00:13:53,080 --> 00:14:00,140 And that's not too big of a deal either so let's add a button says size it up the way that we want it 259 00:14:00,910 --> 00:14:09,740 a little bit here and the text is going to say customize dashboard like so and the text color will make 260 00:14:09,740 --> 00:14:10,510 it white. 261 00:14:12,260 --> 00:14:18,310 You know and give me what I want or my color slider greyscale. 262 00:14:18,330 --> 00:14:19,990 Thank you. 263 00:14:20,210 --> 00:14:21,620 White. 264 00:14:21,780 --> 00:14:26,980 And then what we'll do is we'll set a background color or background color. 265 00:14:26,980 --> 00:14:27,850 Here you are. 266 00:14:27,850 --> 00:14:31,060 Let's set it to a nice red pick any red you want whatever. 267 00:14:31,060 --> 00:14:34,600 Make it a little bigger here and I'm not going around the corners on this either. 268 00:14:34,780 --> 00:14:35,050 OK. 269 00:14:35,050 --> 00:14:36,840 I'm going to change the font size here. 270 00:14:37,030 --> 00:14:41,680 So I want to change this to a custom font and we'll just keep it consistent with Avenir. 271 00:14:42,140 --> 00:14:47,790 And instead of book let's just do medium and it's increase the font size so we can actually see it there. 272 00:14:48,220 --> 00:14:51,610 And there's our nice butt and then all we need to do is really just pin this. 273 00:14:51,700 --> 00:14:54,180 So I'm going to go ahead and select the button. 274 00:14:54,410 --> 00:14:58,210 Let's give it a fixed width and fixed height because it's on i-Pad only so we can really trust that 275 00:14:58,240 --> 00:15:03,120 it'll look good on all the devices all the I-pads and 66 would just leave it there. 276 00:15:03,160 --> 00:15:04,510 That's fine. 277 00:15:04,510 --> 00:15:06,410 And that looks good there. 278 00:15:06,430 --> 00:15:11,020 And then I just want to center it in the container so click the align book and do it horizontally in 279 00:15:11,020 --> 00:15:12,160 the container. 280 00:15:12,190 --> 00:15:14,160 OK and there's one more thing that we need to do. 281 00:15:14,440 --> 00:15:17,420 So click your button and all the way at the bottom. 282 00:15:17,440 --> 00:15:18,620 They have this installed. 283 00:15:18,670 --> 00:15:23,230 And what that means is this component altogether is installed across all devices and currently it is 284 00:15:23,230 --> 00:15:23,850 on the iPhone. 285 00:15:23,860 --> 00:15:24,720 It's there. 286 00:15:24,790 --> 00:15:27,390 I don't know if we'll see it because it's now old. 287 00:15:27,490 --> 00:15:31,070 It's life down there but on the iPad what we're going to do. 288 00:15:31,150 --> 00:15:35,620 So select that button square all the way down and instead of installed on all devices we're going to 289 00:15:35,620 --> 00:15:38,820 say iPad only and then we're going to turn off other devices. 290 00:15:38,810 --> 00:15:43,650 So now if I go back to the iPhone it's no longer selected it's not even visible and noticeable here 291 00:15:43,660 --> 00:15:45,950 this customized dashboard button is greyed out. 292 00:15:46,240 --> 00:15:50,380 But if I select the iPad the customized dashboard button is back. 293 00:15:50,380 --> 00:15:57,490 And so what we've just done is we've actually hit a button altogether UI element just by installing 294 00:15:57,520 --> 00:16:00,280 on on regular regular. 295 00:16:00,280 --> 00:16:02,100 So which is really cool. 296 00:16:02,140 --> 00:16:07,010 You can also you can also install things on landscape devices as well too. 297 00:16:07,060 --> 00:16:13,270 So a landscape iPhone device we're not going to go into this too in detail because it's the exact same 298 00:16:13,270 --> 00:16:15,730 as what we just did but see this iPhone here. 299 00:16:15,740 --> 00:16:17,220 Let's pick this iPhone 7. 300 00:16:17,240 --> 00:16:20,560 I can go into the landscape and notice how it's all funky right. 301 00:16:20,590 --> 00:16:22,000 Oh this is all broken. 302 00:16:22,030 --> 00:16:27,820 And so if you had another layout for landscape what you could actually do is on these things here for 303 00:16:27,820 --> 00:16:30,520 instance let's say the stack you and I'm just giving you an example. 304 00:16:30,520 --> 00:16:35,910 You're not going through this but on the stack you know it's how it's installed across the board. 305 00:16:36,070 --> 00:16:36,350 OK. 306 00:16:36,370 --> 00:16:45,640 Well we could do is we could add a new one and this one is going to be height is compact and with is 307 00:16:45,670 --> 00:16:46,460 regular. 308 00:16:46,510 --> 00:16:47,570 OK. 309 00:16:47,840 --> 00:16:51,690 So regular compact that's that's an iPhone in landscape. 310 00:16:51,820 --> 00:16:55,560 And then we would add that here and then we could go ahead and change it around. 311 00:16:55,570 --> 00:17:00,550 However we wanted for landscapes so well you could do is for both tablets and for phone you can have 312 00:17:00,550 --> 00:17:03,930 things in landscape and portrait for iPad and for iPhone. 313 00:17:03,970 --> 00:17:09,850 And you can have you know four or even five different variants of constraints and move things around. 314 00:17:10,000 --> 00:17:11,800 So pretty cool stuff. 315 00:17:12,070 --> 00:17:17,380 I don't recommend most apps supporting landscape for iPhone unless you have a video of some kind then 316 00:17:17,380 --> 00:17:18,530 you can rotate it. 317 00:17:18,610 --> 00:17:20,380 But on iPad it's a lot more common. 318 00:17:20,380 --> 00:17:24,120 So again you would just do the exact same things we did here. 319 00:17:24,220 --> 00:17:28,450 You would just add more constraints for you know a compact high and regular with. 320 00:17:28,480 --> 00:17:29,050 All right. 321 00:17:29,050 --> 00:17:34,990 And then on iPad just to keep just one thing keep in mind is even in landscape it's still regular regular. 322 00:17:34,990 --> 00:17:35,530 OK. 323 00:17:35,590 --> 00:17:39,940 So if you have to have things look differently on iPad in landscape no matter what you're going to have 324 00:17:39,940 --> 00:17:41,010 to write some code. 325 00:17:41,020 --> 00:17:49,660 Ok so if we go into our iPad here and let's just put it in landscape so if you want to look fantastic 326 00:17:49,690 --> 00:17:51,830 in landscape you're going to have to write code. 327 00:17:51,850 --> 00:17:54,880 There are a few more things you could do that's very advanced. 328 00:17:54,880 --> 00:17:55,970 We're not going to cover it here. 329 00:17:55,990 --> 00:18:00,640 I don't think that this is something that you want to put in your brain right now because it's very 330 00:18:00,640 --> 00:18:05,420 hard but what you can do is you can work with content hugging and compression. 331 00:18:05,580 --> 00:18:06,270 OK. 332 00:18:06,430 --> 00:18:09,380 So basically things that you have in your views. 333 00:18:09,400 --> 00:18:10,020 OK. 334 00:18:10,210 --> 00:18:13,700 You can in your and your layouts here. 335 00:18:13,840 --> 00:18:14,130 OK. 336 00:18:14,140 --> 00:18:18,490 Click the ruler you you're going to see something here called content hugging and conta and compression 337 00:18:18,490 --> 00:18:22,840 resistance and that's how much compression items have and so you can start adjusting these values so 338 00:18:22,840 --> 00:18:24,940 things shrink more on different devices. 339 00:18:24,940 --> 00:18:26,620 And it does it for you automatically. 340 00:18:26,620 --> 00:18:31,590 Again it's a lot of work and sometimes it's even faster to programmatically move things. 341 00:18:31,990 --> 00:18:39,280 If you're going into a into like landscape or something but my point is i-Pad is still regular regular 342 00:18:39,370 --> 00:18:43,210 in landscape mode and so it's still applying the same constraints there and you may have to write some 343 00:18:43,210 --> 00:18:45,240 custom code but that's out of the scope of this. 344 00:18:45,420 --> 00:18:49,470 That's far in the advance world and there's a heap of tutorials out there on that. 345 00:18:49,480 --> 00:18:52,450 Of course the documentation by Apple is great as well too. 346 00:18:52,870 --> 00:18:56,670 But you've got a lot on your plate already to digest here. 347 00:18:56,740 --> 00:19:00,490 One more thing is that you can preview adaptations like split views. 348 00:19:00,580 --> 00:19:02,950 So that's a new feature I think was Iowa. 349 00:19:03,160 --> 00:19:03,750 I was 10. 350 00:19:03,760 --> 00:19:07,640 At some point they introduced split views were that you could have two apps open. 351 00:19:07,860 --> 00:19:08,400 OK. 352 00:19:08,620 --> 00:19:12,100 And then it's what it's showing you here is what it would look like if it was on the left split view 353 00:19:12,580 --> 00:19:17,460 or what it would show you if it's on the right split view you know really small little sliver here. 354 00:19:17,620 --> 00:19:20,680 And notice how it's picking the iPhone portrait in this case. 355 00:19:20,890 --> 00:19:25,290 And so anyway you can play around with those and make sure it looks good on apps that have split views 356 00:19:25,290 --> 00:19:25,910 as well too. 357 00:19:25,930 --> 00:19:28,470 So a lot's taken. 358 00:19:28,630 --> 00:19:29,140 OK. 359 00:19:29,180 --> 00:19:32,820 Now this is the bare bones framework but very important stuff. 360 00:19:32,860 --> 00:19:38,230 And what you're going to find is when working with Interface Builder it takes lots of trial and practice. 361 00:19:38,230 --> 00:19:41,050 It is a science but sometimes it's a little artistic too. 362 00:19:41,140 --> 00:19:47,200 So just take time be patient and play around things have fun with it and that's it. 363 00:19:47,200 --> 00:19:50,580 Mark Price a Dove soaps dot.com that's Atilio sized classes. 364 00:19:50,580 --> 00:19:51,120 So you assume.