1 00:00:07,140 --> 00:00:10,390 Hey everybody what's going on this is Caleb with Deb's slopes dot com. 2 00:00:10,410 --> 00:00:17,280 And in this video we're going to set up our segment controller to properly will not only show but to 3 00:00:17,280 --> 00:00:19,370 switch between images. 4 00:00:19,410 --> 00:00:22,860 So we're going to be able to tap on a segment and change the image on our screen. 5 00:00:22,920 --> 00:00:26,900 So go ahead and pull open your project and go into your assets. 6 00:00:27,030 --> 00:00:31,800 The assets folder and this is where you need to pull in the assets in the source code that you downloaded. 7 00:00:31,800 --> 00:00:36,170 So if you didn't download that go ahead and head back to the first video of the course and that there 8 00:00:36,180 --> 00:00:41,250 should be a little folder with a download icon you can tap on and you can either save that to your Mac 9 00:00:41,280 --> 00:00:44,960 or download it to your iPhone and airdrop it to your Mac either way. 10 00:00:44,970 --> 00:00:49,030 So go ahead and select these for photos and drag them in like so. 11 00:00:49,230 --> 00:00:52,440 And now we have four photos here that we can use in our project. 12 00:00:52,440 --> 00:01:00,000 We've got some food some nature a cool skate scene and we've got a cat a big cat and we're going to 13 00:01:00,000 --> 00:01:03,430 go ahead and head into our storyboard and set an initial image here. 14 00:01:03,480 --> 00:01:07,440 So let's go ahead and just set the skate park to be the initial image. 15 00:01:07,680 --> 00:01:11,780 And we're also going to need to call aspect fill here so that it doesn't get stretched out. 16 00:01:12,060 --> 00:01:17,130 And we're also going to want to clip it to bounds so that it stays within the confines of the UI image 17 00:01:17,130 --> 00:01:17,970 view. 18 00:01:17,970 --> 00:01:19,530 Now we are getting a problem here. 19 00:01:19,530 --> 00:01:21,050 It's getting stretched out. 20 00:01:21,150 --> 00:01:29,510 And so what I'm going to do is I'm going to go ahead and take our stack view which is here. 21 00:01:29,940 --> 00:01:31,420 Oh you know what. 22 00:01:31,740 --> 00:01:35,490 I think part of the problem here is that everything is just it's on film mode right. 23 00:01:35,690 --> 00:01:35,930 OK. 24 00:01:35,940 --> 00:01:42,000 So since it's on film modem's going to go ahead and give this a fixed height of 3:35 which is the same 25 00:01:42,000 --> 00:01:42,720 as the width. 26 00:01:42,720 --> 00:01:46,020 And that'll pull it down to exactly the right size. 27 00:01:46,020 --> 00:01:46,490 All right. 28 00:01:47,400 --> 00:01:48,360 Very cool stuff. 29 00:01:48,360 --> 00:01:52,610 So what we can do now since we have linked this up to an I.V. outlet. 30 00:01:52,650 --> 00:01:59,070 We can go into our project here and this is the Iby action where we are connected so whenever we tap 31 00:01:59,070 --> 00:02:02,600 on the segment this function will be called. 32 00:02:02,670 --> 00:02:08,160 And so what we can do is we can access a property called selected segment index and that comes from 33 00:02:08,160 --> 00:02:15,990 the segment controller and basically we can write a switch statement saying hey if the case is zero 34 00:02:15,990 --> 00:02:22,290 meaning the first segment do this if this switch comes in and we say that's the number two segment we're 35 00:02:22,290 --> 00:02:23,910 going to do something for the number two segment. 36 00:02:23,910 --> 00:02:31,080 So go ahead and write a switch statement called switch sender because the sender is a segment control 37 00:02:31,650 --> 00:02:34,250 and we can do selected segment index. 38 00:02:34,570 --> 00:02:34,910 OK. 39 00:02:34,980 --> 00:02:36,300 Give it some curly brackets there. 40 00:02:36,300 --> 00:02:39,030 And now we need to go ahead and set some cases. 41 00:02:39,030 --> 00:02:41,190 So go ahead and type case 0. 42 00:02:41,670 --> 00:02:46,800 Meaning if the first item is selected We're going to do something. 43 00:02:47,370 --> 00:02:50,880 And you know what what we're going to do is we're actually going to go ahead and set selected image 44 00:02:50,880 --> 00:02:54,240 view to have an image for the first segment. 45 00:02:54,240 --> 00:03:00,360 So go ahead and type selected image of your image and we're going to set it to be you I image. 46 00:03:00,710 --> 00:03:01,500 OK. 47 00:03:01,620 --> 00:03:05,520 And we're going to use you I image named and we need to pass in a name. 48 00:03:05,520 --> 00:03:12,470 Now what is the name of the first segment skate and what is the name of the skate file skate. 49 00:03:12,560 --> 00:03:12,890 OK. 50 00:03:12,960 --> 00:03:15,980 So we're going to just go ahead and pass in skate. 51 00:03:16,320 --> 00:03:23,690 Now you I image here this is an optional UI image and it's basically being safe it's saying hey if you 52 00:03:23,720 --> 00:03:26,720 I image is not an actual image it's going to be Nelle. 53 00:03:26,730 --> 00:03:33,900 But we know that it's an actual image so we can force on rapid case so this is what happens if the first 54 00:03:34,170 --> 00:03:36,180 item is selected in the segment control. 55 00:03:36,180 --> 00:03:41,270 But what if number one was selected I'm going to go ahead and type case 1. 56 00:03:41,490 --> 00:03:48,270 And now if one is selected We're going to set selected image you dot image equals UI image named. 57 00:03:48,510 --> 00:03:52,360 And what is the second an index food. 58 00:03:52,430 --> 00:03:52,710 Right. 59 00:03:52,710 --> 00:03:54,740 And the image is called food. 60 00:03:54,780 --> 00:04:02,500 So go ahead and type food and force and wrap it then case two selected image view. 61 00:04:02,500 --> 00:04:06,090 That image is going to be equal to you I image named. 62 00:04:06,630 --> 00:04:10,570 And the third item I don't remember what it is it is cat. 63 00:04:10,590 --> 00:04:18,600 So we need to go ahead and type cat and force unwrap it and then for the fourth one case three selected 64 00:04:18,600 --> 00:04:23,390 image viewed that image equals you image named. 65 00:04:23,520 --> 00:04:26,280 And the last one is nature. 66 00:04:26,610 --> 00:04:27,380 OK. 67 00:04:27,380 --> 00:04:28,250 I'm going to force unwrap it. 68 00:04:28,260 --> 00:04:30,770 Now if I build this you'll see it'll give me an error. 69 00:04:30,780 --> 00:04:33,600 It says Hey switch must be exhaustive. 70 00:04:33,630 --> 00:04:37,750 Now a segment control can have up to. 71 00:04:37,800 --> 00:04:45,190 I don't even know if it has a top but you can put more than just four items in a UI segment control. 72 00:04:45,360 --> 00:04:52,770 So basically we need to handle a default case let's say that our segment segment control suddenly maybe 73 00:04:53,280 --> 00:04:56,580 the user could add a new category in our app. 74 00:04:56,580 --> 00:04:59,930 Suddenly it has five and we can't handle what happens in that case. 75 00:04:59,930 --> 00:05:05,700 So we're going to set what's called a default case and that basically handles anything other than these 76 00:05:05,700 --> 00:05:06,450 four cases. 77 00:05:06,450 --> 00:05:14,220 So type default default and just set it to be equal to selected image view that image and set it to 78 00:05:14,220 --> 00:05:18,880 skate because by default we want it to show the skate image at the beginning. 79 00:05:19,020 --> 00:05:20,870 Anything else it should just show the skate image. 80 00:05:20,880 --> 00:05:24,650 So I don't know about you but I want to build and run this and see if it worked. 81 00:05:24,690 --> 00:05:29,550 So go ahead and build and run it to a simulator later on you're going to have to build it to your actual 82 00:05:29,550 --> 00:05:32,660 device because we need access to the microphone. 83 00:05:32,750 --> 00:05:35,000 And so that's coming up. 84 00:05:35,010 --> 00:05:40,650 But for now we can just build the UI and test it on our simulator so as soon as it's done building we'll 85 00:05:40,650 --> 00:05:41,400 check it out. 86 00:05:43,760 --> 00:05:44,140 OK. 87 00:05:44,150 --> 00:05:45,930 So this looks pretty great. 88 00:05:46,040 --> 00:05:54,410 The skate image showed up and if I click on food watch what happens boom food shows up cat nature. 89 00:05:54,420 --> 00:05:55,350 So cool. 90 00:05:55,410 --> 00:05:56,730 Everything is showing up. 91 00:05:56,730 --> 00:06:00,390 We are successfully able to switch between all of our images. 92 00:06:00,390 --> 00:06:01,290 I love it. 93 00:06:01,320 --> 00:06:03,340 That is so so good. 94 00:06:03,360 --> 00:06:06,960 Now this is pretty much it for the interface of our app. 95 00:06:06,960 --> 00:06:10,160 We have our button wired up that it can do stuff when it's pressed. 96 00:06:10,170 --> 00:06:16,590 Our segment now can properly switch between images are toggle switch can be activated and basically 97 00:06:16,590 --> 00:06:21,120 the status can be accessed through our Iby outlet and this label can also be changed. 98 00:06:21,120 --> 00:06:26,910 So we have everything hooked up the way we need to in the next video we're going to actually learn how 99 00:06:26,910 --> 00:06:29,190 to start a screen recording. 100 00:06:29,190 --> 00:06:35,040 We're going to actually you know be able to grant access to the screen and microphone will be able to 101 00:06:35,100 --> 00:06:40,680 turn off the toggle switch while we're recording all kinds of really cool stuff so let's go over to 102 00:06:40,680 --> 00:06:45,440 the next video where we're going to use replay kit to start our very first recording. 103 00:06:45,530 --> 00:06:46,090 I'll see you there.