1 00:00:07,090 --> 00:00:10,710 Hey everybody what's going on this is Caleb with slopes dot com. 2 00:00:10,720 --> 00:00:15,850 And in this video we're going to build out the app UI for the screen recording app we're going to build 3 00:00:15,940 --> 00:00:16,880 with replay kit. 4 00:00:16,900 --> 00:00:21,470 So pull open X code and go ahead and click Create new project just like so. 5 00:00:21,850 --> 00:00:27,120 And we're going to make this a single view application and I'm just going to call this screamy. 6 00:00:27,370 --> 00:00:31,990 Maybe that will be the name of our app screening and make sure everything else is good to go. 7 00:00:31,990 --> 00:00:37,390 Your team should be just personal team your name your organization identifier just leave it as it is 8 00:00:37,420 --> 00:00:43,810 and click next then go ahead and just save it wherever I'm going to save mine on my desktop and pull 9 00:00:43,810 --> 00:00:49,920 this open in full screen so it looks like I've created too many little apps in the last seven days. 10 00:00:50,020 --> 00:00:57,590 So you know what maybe it just has to do with creating a new provisioning profile like so. 11 00:00:57,970 --> 00:00:59,240 Oh my app ID limited. 12 00:00:59,260 --> 00:01:04,420 Ok so I'm going to switch to the dev slopes one that's fine k. 13 00:01:04,500 --> 00:01:05,840 Super cool. 14 00:01:05,840 --> 00:01:06,530 There we go. 15 00:01:06,530 --> 00:01:12,110 And now what we're going to do is go into main storyboard and we're going to Dragon everything that 16 00:01:12,110 --> 00:01:13,710 we need to build this app. 17 00:01:13,730 --> 00:01:17,000 So first of all it's Dragon a UI label. 18 00:01:17,050 --> 00:01:21,490 We're going to build this from top to bottom and let's go ahead and just set that there. 19 00:01:21,500 --> 00:01:22,280 That's fine. 20 00:01:22,280 --> 00:01:27,560 Doesn't really matter the size and with to be honest though I am going to set it to be centered and 21 00:01:27,650 --> 00:01:32,510 in my example I used the system font against my better judgment so I'm going to switch it to Avenir 22 00:01:32,510 --> 00:01:37,650 next Demi bold and let's make it a size 24 that would look pretty good. 23 00:01:38,570 --> 00:01:39,100 Awesome. 24 00:01:39,110 --> 00:01:40,480 So that looks great. 25 00:01:40,490 --> 00:01:45,620 And let's just change this to say ready to record because that's what it's going to say. 26 00:01:45,620 --> 00:01:52,760 Initially when we open the app next I'm going to go ahead and drag on a UI segment in control like so 27 00:01:53,600 --> 00:01:57,930 and I'm going to actually go ahead and drag this from the left all the way to the right. 28 00:01:58,040 --> 00:02:00,430 And we need four segments not just two. 29 00:02:00,650 --> 00:02:06,170 So I'm going to go ahead and up the segment count all the way to four and now we're going to go ahead 30 00:02:06,170 --> 00:02:08,670 and change the labels to say something different. 31 00:02:08,810 --> 00:02:09,350 OK. 32 00:02:09,680 --> 00:02:15,360 So the first segment is going to say skate because it's going to be that cool picture of the skatepark. 33 00:02:15,500 --> 00:02:20,150 The second segment we're going to make say food because I have a picture of food that I'm going to give 34 00:02:20,150 --> 00:02:25,970 you then segment two or three I guess but we're going with zero indexing is going to be cat. 35 00:02:26,040 --> 00:02:31,340 It's a really big cat like a Jack not a Jaguar What is it like a snow leopard. 36 00:02:31,340 --> 00:02:37,200 And the last segment is nature with one are not too sweet. 37 00:02:37,220 --> 00:02:38,950 So that looks great. 38 00:02:38,960 --> 00:02:43,910 I am going to actually change the tent to be green because I think that looks cooler. 39 00:02:43,910 --> 00:02:48,910 And now we need to drag and AUI image view like so. 40 00:02:48,980 --> 00:02:53,280 And let's go ahead and actually make this you know what we can afford to make it a square. 41 00:02:53,330 --> 00:02:55,180 Yeah how about that. 42 00:02:55,180 --> 00:02:57,060 3:43 by 3:43. 43 00:02:57,380 --> 00:03:02,590 And we actually do constraints just yet but to make it a square that looks good. 44 00:03:02,630 --> 00:03:05,170 And next we need to go ahead and create that. 45 00:03:05,230 --> 00:03:06,320 You guys switch. 46 00:03:06,320 --> 00:03:12,980 They're allowing us to turn off or on the microphone access and we need a label basically to say that 47 00:03:12,980 --> 00:03:20,570 that's what the switch does so get another label drag it on there and let's just say microphone access 48 00:03:21,530 --> 00:03:25,840 Caillat center that bad boy and let's go and change the font. 49 00:03:25,840 --> 00:03:29,710 Custom custom Avenir next. 50 00:03:29,780 --> 00:03:31,070 And you know what. 51 00:03:31,070 --> 00:03:34,860 This will actually be OK just as medium. 52 00:03:34,910 --> 00:03:40,190 Make sure we can see everything and center the font as well so it's right in the middle of the screen. 53 00:03:40,190 --> 00:03:45,840 And then finally all we need to do is drag on a button at the bottom that we're going to push. 54 00:03:46,130 --> 00:03:53,630 So search for button and drag on a button and we're just going to make this say record whoops like so 55 00:03:54,370 --> 00:03:59,950 OK and we're going to change the font to match all the other font stuff we've been doing. 56 00:04:00,230 --> 00:04:06,720 Like so and let's make this size 24 as well and we'll make that Demi bold also. 57 00:04:06,800 --> 00:04:12,860 So put that there right in the center and change the font color to green because when we tap it we're 58 00:04:12,860 --> 00:04:16,970 going to change it to red to say stop but green means go. 59 00:04:17,030 --> 00:04:24,310 So now I guess we could change the font of the segment here. 60 00:04:24,350 --> 00:04:27,120 I think we can maybe not though. 61 00:04:27,470 --> 00:04:28,500 No way. 62 00:04:30,680 --> 00:04:33,140 Well we can change the style that's for sure. 63 00:04:33,810 --> 00:04:40,910 Interesting so it doesn't appear that in Interface Builder you can change the font of the segments here. 64 00:04:40,920 --> 00:04:41,690 Super weird. 65 00:04:41,700 --> 00:04:43,530 Anyway that's fine. 66 00:04:43,530 --> 00:04:44,520 It looks OK. 67 00:04:44,520 --> 00:04:50,420 So now what we need to do is we're going to go ahead and put these all together into a stack view. 68 00:04:50,850 --> 00:04:52,780 But I want to go ahead and keep these close. 69 00:04:52,800 --> 00:04:55,460 So I'm going to put these in their own stack for you. 70 00:04:55,470 --> 00:04:55,810 All right. 71 00:04:55,830 --> 00:05:00,000 And maybe spaced them out like five or so just to give it a bit of space. 72 00:05:00,300 --> 00:05:04,470 And then what we're going to do is we're going to select the stack view the image view the button the 73 00:05:04,470 --> 00:05:08,950 segment and the label and pinch those all together into a stacked view. 74 00:05:08,950 --> 00:05:15,870 And now what we can do is we can pin this zero from the safe area zero from the right zero from the 75 00:05:15,870 --> 00:05:17,320 left or vice versa. 76 00:05:17,340 --> 00:05:20,060 Right right and left and zero from the bottom. 77 00:05:20,340 --> 00:05:21,010 OK. 78 00:05:21,300 --> 00:05:24,780 Now you're probably wondering hey what the heck is going on why is this all stretchy. 79 00:05:24,780 --> 00:05:31,020 Well we need to set it to fill first and then we're going to go ahead and give it some spacing of maybe 80 00:05:31,020 --> 00:05:38,070 30 maybe more let's do 40 K 40 is a bit too much it looks like about 30 again. 81 00:05:38,080 --> 00:05:39,610 Yeah 30 looks good. 82 00:05:39,610 --> 00:05:42,040 And this you're probably wondering hey what's going on. 83 00:05:42,160 --> 00:05:48,190 Well we have it pinned the wrong way so change the alignment there horizontally and vertically to be 84 00:05:48,190 --> 00:05:49,180 in the center. 85 00:05:49,480 --> 00:05:56,410 And you know what I don't really like that that's actually stretching to the far side there so let's 86 00:05:56,560 --> 00:06:01,230 put it 20 from the safe area and 20 from the safe area. 87 00:06:01,230 --> 00:06:02,350 Whoops that's the bottom. 88 00:06:03,610 --> 00:06:07,750 That should be zero and the trailing side should be 20. 89 00:06:07,750 --> 00:06:08,250 There we go. 90 00:06:08,350 --> 00:06:09,670 OK that looks much better. 91 00:06:09,670 --> 00:06:13,740 So now our touch points are much bigger for our segment which is good. 92 00:06:14,080 --> 00:06:18,180 And you know if we rearrange things it will look fine when we build it. 93 00:06:18,200 --> 00:06:20,860 But for now that's going to have to do. 94 00:06:21,060 --> 00:06:25,120 So now let's think. 95 00:06:25,600 --> 00:06:26,590 This looks pretty good. 96 00:06:26,590 --> 00:06:29,750 I'm OK with this so everything is ready to go. 97 00:06:29,800 --> 00:06:35,530 Now we just need to wire it up in our interface builder for all the things that need to be interacted 98 00:06:35,530 --> 00:06:35,740 with. 99 00:06:35,740 --> 00:06:37,510 So make some space at the top. 100 00:06:37,510 --> 00:06:42,340 What I did I'm sorry was I open the assistant editor here and what I'm going to do is I'm just going 101 00:06:42,340 --> 00:06:44,680 to go from top to bottom and create Iby outlets. 102 00:06:44,680 --> 00:06:51,900 So right click and drag and this is going to be status label Okay connect it by pressing enter. 103 00:06:51,970 --> 00:06:56,590 This is going to be Image picker. 104 00:06:56,610 --> 00:06:57,810 Connect that. 105 00:06:57,960 --> 00:07:00,480 This is going to be image. 106 00:07:00,810 --> 00:07:02,000 Well how about this. 107 00:07:02,280 --> 00:07:05,460 Maybe selected image view. 108 00:07:06,230 --> 00:07:07,010 OK. 109 00:07:07,380 --> 00:07:11,520 This will be the mike toggle. 110 00:07:11,760 --> 00:07:12,720 All right. 111 00:07:12,720 --> 00:07:14,710 And this is going to be the record button 112 00:07:17,760 --> 00:07:18,860 just like that. 113 00:07:19,210 --> 00:07:24,800 So we can also get rid of did receive memory warning because we're not going to use it. 114 00:07:25,260 --> 00:07:26,310 And you know what. 115 00:07:26,310 --> 00:07:31,230 At the moment we can actually get rid of the load because we're not going to use it for this app. 116 00:07:31,230 --> 00:07:33,950 We're not really modifying anything nothing is happening when the view loads. 117 00:07:33,960 --> 00:07:40,550 It's not super important for this project particularly but yeah guys I think we're good to go. 118 00:07:40,560 --> 00:07:40,950 You know what. 119 00:07:40,950 --> 00:07:48,870 The only other thing is that this segment here needs to have an I.B. action because when we tap on one 120 00:07:48,870 --> 00:07:51,330 of the different segments we need to do something. 121 00:07:51,340 --> 00:07:59,940 So right click and drag from that UI segment control change to action and then we are already on value 122 00:07:59,940 --> 00:08:00,400 change. 123 00:08:00,400 --> 00:08:04,710 That's exactly right because whenever a value changes in the segment we want to call an action so let's 124 00:08:04,710 --> 00:08:14,380 just say image picked K and the sender is actually going to be UI segment control. 125 00:08:14,520 --> 00:08:17,790 We should have set that when we created the IB action I just forgot. 126 00:08:18,210 --> 00:08:24,750 And now the only other thing we need to do is to set it so that when we actually tap on the record button 127 00:08:24,780 --> 00:08:25,680 it's going to do something. 128 00:08:25,680 --> 00:08:32,370 So we're going to create an IB action for the record button as well so we can say record wups record 129 00:08:32,400 --> 00:08:36,970 button was pressed and go ahead and connect that. 130 00:08:37,110 --> 00:08:42,000 And since it's just one button the center is not super important but it is important here because we 131 00:08:42,000 --> 00:08:47,280 want to be able to access which segment was actually touched so that we know which image to load. 132 00:08:47,310 --> 00:08:49,110 We'll talk about that in a future video. 133 00:08:49,350 --> 00:08:51,780 But you know what I think we are good to go. 134 00:08:51,780 --> 00:08:53,590 We're going to head over to the next video now. 135 00:08:53,610 --> 00:08:59,520 The UI is done and though we're basically going to go ahead and start by importing replay kit creating 136 00:08:59,520 --> 00:09:05,100 an instance of our peace screen recorder and we're also going to explore some of the capabilities of 137 00:09:05,100 --> 00:09:07,890 replay kit to see what it's really capable of. 138 00:09:07,920 --> 00:09:10,080 It obviously can be extended past this course. 139 00:09:10,080 --> 00:09:15,000 This is just an intro to replay kit but we're going to learn the core essentials so that you can get 140 00:09:15,000 --> 00:09:20,880 started using it in your apps no matter if it's a game app or a social media app whatever you can implement 141 00:09:20,880 --> 00:09:23,310 screen recording into your very own application. 142 00:09:23,310 --> 00:09:26,460 So let's head over to the next video and let's import replay kit.