1 00:00:02,120 --> 00:00:08,450 So well come again in this lesson we're going to talk about the major views on as the name implies is 2 00:00:08,450 --> 00:00:13,540 going to help us show images on photographs on our applications. 3 00:00:13,640 --> 00:00:21,050 And that's going to make our applications come to life and be a lot more fun to play than to make applications. 4 00:00:21,050 --> 00:00:25,420 So the school to start is actually going to be a rather simple application. 5 00:00:25,490 --> 00:00:31,800 And when I go to school I'm going to start a new iOS application single view application as usual and 6 00:00:31,800 --> 00:00:43,940 I'm going to call it teenage viewers and once it loads up I'm going to go to my main storyboard and 7 00:00:44,020 --> 00:00:51,380 in my storyboard for they need to hear is obviously a image of you or a you like image. 8 00:00:51,650 --> 00:00:53,950 So I'm going to add an image of you in here. 9 00:00:54,080 --> 00:00:58,220 I'm going to place it's summer like in here like that. 10 00:00:58,460 --> 00:01:03,800 And then the next thing I'm going to do is I'm going to go ahead to my assistant window and as usual 11 00:01:03,800 --> 00:01:09,250 I'm going to have to make an outlet for this which this time is going to be and you white image view. 12 00:01:09,320 --> 00:01:15,270 So I'm going to go in here control dreich and say my image. 13 00:01:15,490 --> 00:01:16,010 All right. 14 00:01:16,030 --> 00:01:20,830 Nothing new up until here we've done this multiple times by now. 15 00:01:21,130 --> 00:01:24,100 Let's jump back to determine though in this arena. 16 00:01:24,140 --> 00:01:29,690 I'm going to go to that and everything I don't need one to go with that and clean everything I don't 17 00:01:29,690 --> 00:01:30,320 need here. 18 00:01:30,320 --> 00:01:33,290 I don't mean the interface like we discussed earlier. 19 00:01:33,320 --> 00:01:35,440 I don't need the view a lot. 20 00:01:35,540 --> 00:01:43,370 So the only thing I have to do here is I have to attach an image into my image of you and that needs 21 00:01:43,370 --> 00:01:44,890 a little bit of a discussion. 22 00:01:44,900 --> 00:01:51,180 If this is your very first time doing it you can add pretty much any format of images. 23 00:01:51,240 --> 00:01:55,230 I have actually provided you with some images with this lesson. 24 00:01:55,320 --> 00:01:58,100 I'm going to add all three of them into my project. 25 00:01:58,100 --> 00:02:00,430 I'm going to drag them over my project. 26 00:02:00,500 --> 00:02:06,640 You can drop them anywhere that you like and you want to make sure that copy items is on. 27 00:02:06,640 --> 00:02:09,390 So we make a copy of them and we put it in the fall. 28 00:02:09,390 --> 00:02:11,120 There are four application. 29 00:02:11,120 --> 00:02:17,300 Otherwise if that is not on it simply means that there are references to that location on your hard 30 00:02:17,300 --> 00:02:17,830 drive. 31 00:02:17,960 --> 00:02:24,290 If you copy them it means a copy of them will be inside your project which is a much safer bet in in 32 00:02:24,290 --> 00:02:26,060 this particular situation. 33 00:02:26,360 --> 00:02:33,380 So when I add my e-mail just to my project and not here is treating is that we have to we have to understand 34 00:02:33,440 --> 00:02:44,630 one of them is there is something called an image which is a screen name for your actual photograph. 35 00:02:44,630 --> 00:02:50,440 So in this case for instance one of them is called Chat dot GBG. 36 00:02:50,660 --> 00:02:54,120 So when I write I see cats and dogs. 37 00:02:54,150 --> 00:03:04,640 JP then we have something called a UI image a white image is essentially Mbaye or essentially a class 38 00:03:04,670 --> 00:03:07,840 for representing the major. 39 00:03:07,850 --> 00:03:08,570 That's all. 40 00:03:08,570 --> 00:03:09,760 So you. 41 00:03:09,860 --> 00:03:13,180 Image is a class that shows us images. 42 00:03:13,230 --> 00:03:19,140 And it essentially can contain something like cat GBG inside it. 43 00:03:19,160 --> 00:03:24,650 And finally we have the image view which is the one we already made. 44 00:03:24,800 --> 00:03:30,190 So we have the image of you in here and we have it now that H. 45 00:03:30,240 --> 00:03:34,920 R. that H you are made you view can contain you images. 46 00:03:35,000 --> 00:03:39,480 So I know it's becoming a little bit complicated so let's see how it works in practice. 47 00:03:39,480 --> 00:03:41,510 A very very simple example of it. 48 00:03:41,720 --> 00:03:48,290 I'm going to save my image of you like last time that we were working on something like a text view 49 00:03:48,300 --> 00:03:50,630 we had to get the text of it. 50 00:03:50,800 --> 00:03:53,240 This time we have to get that image of it. 51 00:03:53,450 --> 00:03:58,870 And that idea that the image of it it says you have to feed me a new image. 52 00:03:59,000 --> 00:04:01,190 So let's go ahead and make a white image. 53 00:04:01,180 --> 00:04:10,170 I'm going to say you like image Chatz image that's going to be a new image image name. 54 00:04:10,270 --> 00:04:13,750 And what's the name of our file is called Chat dot. 55 00:04:13,780 --> 00:04:15,410 JP G. 56 00:04:15,410 --> 00:04:16,450 Simple as that. 57 00:04:16,490 --> 00:04:23,460 So now I have a UI image called image and that can be the image for my white image. 58 00:04:23,660 --> 00:04:27,650 So I'm going to say that match is the one that I want to use. 59 00:04:27,830 --> 00:04:32,790 So if all goes well the moment the application loads this thing should be shown. 60 00:04:32,870 --> 00:04:34,540 Let's see how that works. 61 00:04:36,410 --> 00:04:42,580 And now I'm going to load my simulator and is hopefully going to show us what we expect to see 62 00:04:46,140 --> 00:04:48,050 I would actually pause the video. 63 00:04:48,240 --> 00:04:54,630 So for some reason I took a little while for my simulator to load and I had to pause the video anyway. 64 00:04:54,800 --> 00:05:01,860 We are now seeing I can't image inside our iPhone simulator which is exactly what we were hoping to 65 00:05:01,860 --> 00:05:02,590 see. 66 00:05:02,670 --> 00:05:06,460 And this was loading an image programmatically. 67 00:05:06,540 --> 00:05:12,150 Of course if you only have one image like if you have a custom button that you want to have or if you 68 00:05:12,150 --> 00:05:16,860 have any kind of object that is going to be just there and the image is not going to change. 69 00:05:16,910 --> 00:05:22,040 You could do it non-program articulate which means I could actually comment these guys out. 70 00:05:22,080 --> 00:05:24,710 I could go to my storyboard and my storyboard. 71 00:05:24,720 --> 00:05:29,940 I'm going to select main page view and inside the attributes of it I'm going to go ahead and say the 72 00:05:30,030 --> 00:05:35,520 image of it and it's going to load images that we currently have in our project. 73 00:05:35,520 --> 00:05:39,320 I'm going to say give me the bird's image and that's going to be that. 74 00:05:39,360 --> 00:05:45,450 Unless of course we decide to programmatically override that and add another image to it. 75 00:05:45,630 --> 00:05:52,230 Something you might have noticed is that my message seems that it's been shrunk in one direction as 76 00:05:52,230 --> 00:05:54,010 being is stretched and the other one. 77 00:05:54,210 --> 00:06:00,210 And that's because of something called a content mode the content more essentially says Hall do you 78 00:06:00,210 --> 00:06:05,690 want to represent your e-mail you've written this you I e-mailed your people and country it says is 79 00:06:05,690 --> 00:06:07,000 scale to fit. 80 00:06:07,130 --> 00:06:12,080 It means scale it up until it fills in every direction horizontally and vertically. 81 00:06:12,080 --> 00:06:14,190 That is not necessarily what I want. 82 00:06:14,190 --> 00:06:23,430 What I want is let's say an aspect fit so going to try to fit that image and is going to maintain that 83 00:06:23,550 --> 00:06:30,390 aspect ratio of my image or I could say aspect film which is essentially going to try to fill that film 84 00:06:30,390 --> 00:06:32,060 this image of you. 85 00:06:32,160 --> 00:06:40,710 But then for some reason the X best bits of my image are actually pouring outside the window to remedy 86 00:06:40,710 --> 00:06:41,020 that. 87 00:06:41,040 --> 00:06:46,920 I could actually turn on this thing which just says clips to bound to obey does is going to clip my 88 00:06:46,920 --> 00:06:48,480 image to its boundaries. 89 00:06:48,600 --> 00:06:49,830 So nothing goes. 90 00:06:49,830 --> 00:06:59,460 Outside of not our content more are a bit of a larger topic than I can cover for you in this very short 91 00:06:59,460 --> 00:07:04,320 list and I encourage you to spend a little time on there and get a sense of what all these different 92 00:07:04,320 --> 00:07:10,330 content modes and which one of them you know could could be used for whatever purpose that you have. 93 00:07:10,380 --> 00:07:19,440 Usually you end up using one of these two aspect fit or aspect fell video clips to clip two bands but 94 00:07:19,470 --> 00:07:24,310 you really need to spend a little time to get a better sense of what you're trying to do. 95 00:07:24,480 --> 00:07:31,020 Now in saying that I want to add one more thing to this application and that is I want to do this content 96 00:07:31,050 --> 00:07:34,830 more programmatically just in case you need it sometime. 97 00:07:34,870 --> 00:07:44,160 And when I go at my dad and my dad I'm going to say my image my image you view the content more content 98 00:07:44,190 --> 00:07:44,640 more. 99 00:07:44,870 --> 00:07:48,960 And it says you have to feed me a new I view content more. 100 00:07:49,230 --> 00:07:50,500 I'm going to say OK. 101 00:07:50,580 --> 00:07:52,050 So you have to be a you. 102 00:07:52,050 --> 00:07:54,720 I view content more. 103 00:07:54,960 --> 00:08:00,480 And then the names are kind of expand our you know bottom century they're all top left. 104 00:08:00,510 --> 00:08:07,450 I think the one we use was a scale to fill or a scale to the scale aspect. 105 00:08:07,470 --> 00:08:09,860 That was the one we wanted to use. 106 00:08:09,870 --> 00:08:15,480 So if you had to use something programmatically you can simply call their property and the property 107 00:08:15,480 --> 00:08:21,740 would automatically tell you what kind of you know object is expecting from you. 108 00:08:21,750 --> 00:08:26,540 So with that in mind that is how we show a new image of you. 109 00:08:26,670 --> 00:08:31,960 We use an image file such as this wildcat that JP G. 110 00:08:32,120 --> 00:08:40,750 If you place it inside a UI image and that image we feed it into our image view we will of course do 111 00:08:40,740 --> 00:08:42,450 this whole thing in one go. 112 00:08:42,480 --> 00:08:49,540 We could say that whole thing Carpi instead of there and I would need that line at all so my imagery 113 00:08:49,580 --> 00:08:54,040 or that image becomes white image humane named chart. 114 00:08:54,170 --> 00:09:02,230 JP This is of course one of the easier ways of loading an image or a photograph file. 115 00:09:02,580 --> 00:09:09,360 A more common way is usually when you read some data or from a network and you have to convert that 116 00:09:10,020 --> 00:09:11,180 into an image. 117 00:09:11,280 --> 00:09:18,480 And we will see that in the future how to build a image from that up at this level because we don't 118 00:09:18,480 --> 00:09:25,050 know how to use networking or we can rely on are the images that we actually have within our project 119 00:09:25,050 --> 00:09:25,570 Blondell. 120 00:09:25,560 --> 00:09:29,600 So whatever you want to do it can add images in here for them. 121 00:09:29,650 --> 00:09:34,670 And here's a really quick note that you can actually select your images if you need it. 122 00:09:34,680 --> 00:09:41,640 You can actually say right click on say new group from selection so you can actually place them inside 123 00:09:41,700 --> 00:09:47,140 a folder if you want to categorize on your or your project better. 124 00:09:47,620 --> 00:09:50,550 And that's of all that data in mind. 125 00:09:50,730 --> 00:09:51,600 This is then this. 126 00:09:51,610 --> 00:09:53,590 Listen let's move on to our next one.