1 00:00:00,930 --> 00:00:01,140 All right. 2 00:00:01,140 --> 00:00:01,860 Moment of Truth. 3 00:00:01,860 --> 00:00:03,810 So we are actually going to use every stack. 4 00:00:03,810 --> 00:00:08,220 We are going to use a Z stack because want to stack things on top of each other. 5 00:00:08,220 --> 00:00:09,860 And I'm going to pass here. 6 00:00:09,960 --> 00:00:14,850 The alignment to be top right. 7 00:00:15,060 --> 00:00:15,990 Very good. 8 00:00:15,990 --> 00:00:17,020 So this point here. 9 00:00:17,040 --> 00:00:21,350 Because it seemed index anything that I put on top is going to be at the bottom. 10 00:00:21,360 --> 00:00:24,020 Meaning the first thing I add here is number two bottom. 11 00:00:24,060 --> 00:00:26,040 And next thing is gonna be the top of that. 12 00:00:26,040 --> 00:00:28,710 So check this out because I have my view done. 13 00:00:28,710 --> 00:00:33,570 I can come down here and see a map view I want this to be of course the first thing that is shown meaning 14 00:00:33,600 --> 00:00:36,870 it's going to be to the back past in map view. 15 00:00:36,870 --> 00:00:39,320 Of course it's going to require us to pass data data. 16 00:00:39,340 --> 00:00:40,900 We are going to pass it just data. 17 00:00:40,980 --> 00:00:43,920 This one here was going to be passed through as a property. 18 00:00:43,920 --> 00:00:45,010 Just like that. 19 00:00:45,390 --> 00:00:49,430 Let's save this and see what's going to happen when I run this. 20 00:00:49,590 --> 00:00:54,450 Now if we go to our details if all goes well we should be able to see a map and just like that we have 21 00:00:54,450 --> 00:00:54,950 a map. 22 00:00:55,050 --> 00:01:02,000 And it says exactly where this is if you click on this it gives us this magnitude to that seven. 23 00:01:02,040 --> 00:01:08,000 And that's the title which are all of these things that we have added in sort of our annotation. 24 00:01:08,010 --> 00:01:08,420 Wow. 25 00:01:08,430 --> 00:01:09,260 How cool is that. 26 00:01:09,270 --> 00:01:09,450 Right. 27 00:01:09,450 --> 00:01:12,780 Because we say the title has to be place name which is this one. 28 00:01:12,930 --> 00:01:18,610 And the subtitle is going to be the magnitude and followed by the actual magnitude. 29 00:01:18,960 --> 00:01:22,710 Just like that we have a fairly working application so click on this one. 30 00:01:22,710 --> 00:01:27,480 The address is changing and look at this all of this is actually the clicking and everything. 31 00:01:27,480 --> 00:01:34,260 It's given to us because we are using every presentable UI view or example here and creating a map view 32 00:01:35,300 --> 00:01:37,380 look at that all these behaviors. 33 00:01:37,590 --> 00:01:38,670 Very cool. 34 00:01:38,700 --> 00:01:39,690 This is wonderful. 35 00:01:39,690 --> 00:01:41,330 Of course there are things that we need to do here. 36 00:01:41,340 --> 00:01:47,910 But you can see that our map is working and that is actually motive for celebration but not yet we still 37 00:01:47,910 --> 00:01:49,010 have stuff to do. 38 00:01:49,020 --> 00:01:52,300 So one important thing we can do here let's me come in this one out. 39 00:01:52,320 --> 00:02:01,590 Let's add the edges ignore safe all here so that we hopefully can see the whole map covering the whole 40 00:02:01,770 --> 00:02:05,370 screen very good. 41 00:02:05,370 --> 00:02:06,890 That's very nice. 42 00:02:06,900 --> 00:02:07,470 All right. 43 00:02:07,500 --> 00:02:12,660 And we are now going to work on piling up other information on top of our map. 44 00:02:12,790 --> 00:02:17,340 So this is easy now because we have all the information anyway so it's just a matter of customizing 45 00:02:17,340 --> 00:02:18,080 things. 46 00:02:18,120 --> 00:02:21,960 So first of all let me add a v stack inside here. 47 00:02:21,990 --> 00:02:23,370 It's a v stack. 48 00:02:23,430 --> 00:02:31,850 And when I line this to center the spacing about 6 and content I was just not even going to use that. 49 00:02:31,860 --> 00:02:40,710 All right so when I add a text and this text here would have data that properties that mag like this 50 00:02:41,330 --> 00:02:45,030 of course I'm going to have an issue because magnitude we know now it is a string. 51 00:02:45,030 --> 00:02:47,890 So we need to wrap it on a string like this. 52 00:02:47,970 --> 00:02:51,210 And when I make this font to a large title. 53 00:02:51,210 --> 00:02:52,620 So pretty big. 54 00:02:52,620 --> 00:02:56,120 And then let me add another text right there. 55 00:02:56,160 --> 00:02:58,850 It's one of their data properties again. 56 00:02:58,930 --> 00:03:00,450 Going to go to get place. 57 00:03:00,750 --> 00:03:06,330 Let's save this and run just to see what is going to happen. 58 00:03:06,330 --> 00:03:06,780 Very good. 59 00:03:06,780 --> 00:03:12,000 So you can see because we used zip stack they are piling up there on top. 60 00:03:12,600 --> 00:03:13,700 Very cool. 61 00:03:13,770 --> 00:03:14,160 Look at that. 62 00:03:14,160 --> 00:03:16,220 This is in Texas. 63 00:03:16,290 --> 00:03:17,310 That's two point six. 64 00:03:17,310 --> 00:03:21,160 So not too bad about this one here four point eight. 65 00:03:21,180 --> 00:03:22,280 That is in Chile. 66 00:03:22,290 --> 00:03:24,450 They always get those big ones. 67 00:03:24,470 --> 00:03:24,990 All right. 68 00:03:24,990 --> 00:03:25,410 There we go. 69 00:03:25,410 --> 00:03:27,520 So that is working perfectly. 70 00:03:27,660 --> 00:03:34,020 And what I can also do instead of this V stack here I can add a nice background by using a clip shape. 71 00:03:34,020 --> 00:03:37,380 And in this case here for our shape I'm going to add a rectangle. 72 00:03:37,380 --> 00:03:40,750 Notice there's more than just circle for shapes. 73 00:03:40,920 --> 00:03:44,250 And let me add the frame width. 74 00:03:44,250 --> 00:03:45,590 I'm just going to make it Neil. 75 00:03:45,600 --> 00:03:51,120 So whenever you want to make sure that the width of something will take place within the actual device 76 00:03:51,150 --> 00:03:56,200 just pass it at height as well say height is gonna be in the like this. 77 00:03:56,200 --> 00:04:00,120 She is going to take enough space that it needs padding. 78 00:04:00,150 --> 00:04:11,730 I want all to be about 20 and give a background color green the shadow number about nine corner radius 79 00:04:12,360 --> 00:04:13,830 also about nine. 80 00:04:13,860 --> 00:04:16,950 And I want to give opacity because this is going to be on top. 81 00:04:16,950 --> 00:04:19,130 So I don't want it to disrupt the view. 82 00:04:19,160 --> 00:04:25,330 About one point eight games go ahead and run okay. 83 00:04:25,380 --> 00:04:26,250 Click. 84 00:04:26,250 --> 00:04:27,090 Look at that. 85 00:04:27,090 --> 00:04:33,610 See that looks really nice on this one there also looks very nice. 86 00:04:33,630 --> 00:04:43,050 You can play with it moves nicely and we still have this working shows magnitude there but it's unnecessary 87 00:04:43,050 --> 00:04:44,840 really because everything is showing at the top here. 88 00:04:44,850 --> 00:04:49,710 But in any case we are adding all these properties because at this point you can always decide whether 89 00:04:49,710 --> 00:04:52,230 you want to remove or adding more. 90 00:04:52,230 --> 00:04:52,850 All right. 91 00:04:52,860 --> 00:04:53,820 There we go folks. 92 00:04:53,820 --> 00:04:58,320 And we have our quakes app working perfectly here folks. 93 00:04:58,380 --> 00:04:59,250 Very very exciting. 94 00:04:59,250 --> 00:05:04,230 This one is Carlsberg ridge somewhere in the Indian Ocean. 95 00:05:04,320 --> 00:05:05,580 Wow. 96 00:05:05,620 --> 00:05:06,160 There we go. 97 00:05:07,090 --> 00:05:11,170 And just like that we have a full fledge quakes application here. 98 00:05:11,170 --> 00:05:16,870 Now you've learned a lot at this point is to be able to do as I like to say a lot of damage not the 99 00:05:16,870 --> 00:05:20,530 actual damage but a lot of things that you can actually do now with if you I. 100 00:05:21,100 --> 00:05:25,870 I hope you're seeing the things you can do with sort of do you I mean this is just scratching the surface 101 00:05:25,990 --> 00:05:30,220 but you can go ahead and do all sorts of things all sorts of applications at this point because you 102 00:05:30,220 --> 00:05:35,230 know how to customize these views you know how to pass data from API. 103 00:05:35,320 --> 00:05:40,960 I mean you know enough to make out say even 80 percent of applications out there at this point because 104 00:05:40,960 --> 00:05:43,860 most applications are just managing data really. 105 00:05:43,870 --> 00:05:45,650 And so you know how to do that now. 106 00:05:45,670 --> 00:05:51,190 So I invite you to go and find other adjacent API as you can find online you can just do a quick google 107 00:05:51,190 --> 00:05:57,070 search you can find a lot of them and start playing around and start creating apps using this awesome 108 00:05:57,160 --> 00:05:58,240 framework Swifty right. 109 00:05:58,600 --> 00:06:00,280 Congratulations if you got to this point. 110 00:06:00,820 --> 00:06:01,950 Thank you for your time. 111 00:06:01,990 --> 00:06:03,180 And I will see you next.