1 00:00:00,330 --> 00:00:00,650 Very good. 2 00:00:00,660 --> 00:00:06,780 So I hope you were able to create a striker called Cell row which will be responsible for displaying 3 00:00:06,810 --> 00:00:10,770 each row here so you could customize it and add a few things and so forth. 4 00:00:10,770 --> 00:00:14,730 No worries if you were an able to do that because you know we are going to do this. 5 00:00:15,450 --> 00:00:18,450 However I do recommend you to actually follow through. 6 00:00:18,450 --> 00:00:24,870 Whenever I give you an exercise or challenge because that's how we learn All right let's create a views 7 00:00:24,930 --> 00:00:29,150 here and you folder views and inside I'm going to create a new file. 8 00:00:29,250 --> 00:00:37,960 It's gonna be a swift UI file and I'm going to call this cell row like that. 9 00:00:38,040 --> 00:00:38,370 Very good. 10 00:00:38,370 --> 00:00:39,600 So there it is. 11 00:00:39,630 --> 00:00:44,390 I don't need this preview there because it's no use to us at this point. 12 00:00:44,520 --> 00:00:44,760 All right. 13 00:00:44,760 --> 00:00:48,750 So we have our cell row and he says hello world. 14 00:00:48,760 --> 00:00:51,540 Very good so our cell row here we have the body what I'm going to do. 15 00:00:51,570 --> 00:01:00,150 Let's create an H stack such and this H stack and pass passing alignment gonna make its center and spacing 16 00:01:00,150 --> 00:01:06,140 is going to be about 9 and content I won't pass anything for now. 17 00:01:06,190 --> 00:01:06,530 All right. 18 00:01:06,540 --> 00:01:12,420 And then I put a v stack inside so what I'm doing here is I'm stacking all of the views so that I can 19 00:01:12,420 --> 00:01:16,390 be able to add other information for each row. 20 00:01:17,340 --> 00:01:24,090 So I'm gonna have an alignment to leading and spacing and I'll just get rid of all of this. 21 00:01:24,180 --> 00:01:25,890 And next I'm gonna add another v stack. 22 00:01:25,890 --> 00:01:27,480 Yes I know how it looks. 23 00:01:27,480 --> 00:01:28,660 The V stack indeed. 24 00:01:28,770 --> 00:01:31,910 And then I'm gonna put a text such as in this case here. 25 00:01:31,920 --> 00:01:34,080 I want to first add the magnitude. 26 00:01:34,560 --> 00:01:39,650 So in our text here this is where I'm gonna pass place or whatever we want to pass. 27 00:01:39,660 --> 00:01:42,570 So let's go back to our content view here. 28 00:01:42,570 --> 00:01:47,970 So essentially I want to be able to do something like this but notice one thing here in order for us 29 00:01:47,970 --> 00:01:51,420 to access the data and properties in place or anything else we want. 30 00:01:51,420 --> 00:01:56,210 It's possible to do this here because we have access to our data object. 31 00:01:56,370 --> 00:01:58,620 That means then we will have to do the same. 32 00:01:58,620 --> 00:02:02,380 For this to work inside of our cell. 33 00:02:02,380 --> 00:02:03,080 OK. 34 00:02:03,240 --> 00:02:07,710 So here I'm gonna say something like data is gonna be features like that. 35 00:02:07,710 --> 00:02:12,090 So then I can say something like data properties. 36 00:02:12,120 --> 00:02:15,690 Notice that I'm able to go and find all of other objects inside. 37 00:02:15,690 --> 00:02:23,280 So if I want to go and get data go to properties object I can go and get whatever field I want I can 38 00:02:23,280 --> 00:02:26,280 go to geometry which I can get coordinates. 39 00:02:26,280 --> 00:02:26,710 Right. 40 00:02:26,760 --> 00:02:28,050 And so forth. 41 00:02:28,050 --> 00:02:28,830 That is the beauty here. 42 00:02:28,830 --> 00:02:35,240 So I want to go to properties that right now say properties and I want to go and get string place. 43 00:02:35,280 --> 00:02:39,430 They will go see the beauty again and I want to go and fetch the place right. 44 00:02:39,620 --> 00:02:45,410 So I'm saying I want to go and get this place their properties that place. 45 00:02:45,410 --> 00:02:47,010 OK very good. 46 00:02:47,040 --> 00:02:51,690 So now I can call this cell in our back to our content view. 47 00:02:51,690 --> 00:02:59,580 I can just go ahead and comment that out and call our cell row like this and I need to pass some data 48 00:02:59,600 --> 00:03:02,760 today and I'm going to pass is going to be data of course. 49 00:03:02,870 --> 00:03:03,130 Right. 50 00:03:03,150 --> 00:03:05,630 Which is actually being passed in here. 51 00:03:05,700 --> 00:03:14,760 So if I save this and ran we should hopefully see something still working and while everything works 52 00:03:14,760 --> 00:03:21,480 fine just like it did before but at least we know as I always say that we are compromising or refactoring 53 00:03:21,480 --> 00:03:21,900 our code. 54 00:03:21,900 --> 00:03:22,770 So this is real good. 55 00:03:23,250 --> 00:03:27,820 Now let's go back to our cell row here and do some more work. 56 00:03:27,870 --> 00:03:34,380 So what we really want to do here is instead of adding place I want to add the magnitude meaning I want 57 00:03:34,380 --> 00:03:36,990 to go and get let's see where is the Mac. 58 00:03:36,990 --> 00:03:45,180 There is the magnitude field well to do that I'm going to just replace this instead of place just say 59 00:03:45,240 --> 00:03:48,050 mag like that but we're going to have a problem of types. 60 00:03:48,090 --> 00:03:55,200 Remember mag is of type double in fact if we go back to our data type we go and see that magnitude is 61 00:03:55,250 --> 00:03:56,160 a double. 62 00:03:56,160 --> 00:03:56,580 Right. 63 00:03:56,580 --> 00:03:59,910 So the problem arises here is that well text requires a string. 64 00:03:59,910 --> 00:04:06,300 So we are going to put that inside of a string to say Okay just take this to convert this double into 65 00:04:06,300 --> 00:04:08,640 a string which is needed for our text. 66 00:04:09,270 --> 00:04:15,580 And then you go ahead and make these bold and give a foreground color of gray. 67 00:04:15,600 --> 00:04:21,610 That way we are able to actually see it and then font I'm going to make this headline. 68 00:04:22,200 --> 00:04:23,590 OK very good. 69 00:04:23,610 --> 00:04:29,630 And what it can do because I mean sort of these stack here I can even make this better by adding a frame. 70 00:04:29,970 --> 00:04:37,360 And as you know by now with a frame I can add a width of about 100 in the height of also about 100. 71 00:04:37,990 --> 00:04:38,220 Right. 72 00:04:39,240 --> 00:04:46,110 And then I can continue I'm going to say I want to add a background pass a color and say green let's 73 00:04:46,110 --> 00:04:51,100 save this and run and see what's going to happen now Oh look at this. 74 00:04:51,110 --> 00:04:59,170 Now we have all the magnitudes showing for each earthquake that has happened in the last hour or so. 75 00:04:59,180 --> 00:04:59,390 Right. 76 00:04:59,390 --> 00:05:03,380 So maybe this color will we go back to white. 77 00:05:03,590 --> 00:05:09,110 That makes sense because we have a nice background that very good. 78 00:05:09,920 --> 00:05:10,730 Very very good. 79 00:05:11,300 --> 00:05:16,070 So continue here because I want to make this a little bit better because this is to blend right background 80 00:05:16,070 --> 00:05:16,850 is square. 81 00:05:16,880 --> 00:05:20,900 How about overlaying maybe put a circle clipped and so forth. 82 00:05:20,930 --> 00:05:25,630 So what I'm going to do again this is reason why we had all of these nested stacks. 83 00:05:25,640 --> 00:05:31,790 We're gonna go outside to these mediums these stack there which you can see and hear and going to see 84 00:05:31,820 --> 00:05:33,540 clips shape. 85 00:05:33,710 --> 00:05:37,550 And when I pass I wanted this to be a circle like this. 86 00:05:37,670 --> 00:05:40,770 And I'm going to pass an overlay over that circle. 87 00:05:40,850 --> 00:05:48,200 I'm going to pass another circle and I'm gonna say I want to add a stroke which we need to pass a color 88 00:05:48,290 --> 00:05:51,090 to be gray and the line width. 89 00:05:51,140 --> 00:05:52,770 It's going to be about 1. 90 00:05:52,770 --> 00:05:55,120 So not too thick. 91 00:05:55,140 --> 00:05:55,320 OK. 92 00:05:55,400 --> 00:06:00,690 And then I'm going to say hey you got a shadow of radius about 10. 93 00:06:00,920 --> 00:06:07,760 Let's give it a run and just like that you can see that it looks much much much better. 94 00:06:07,760 --> 00:06:11,640 Of course you can always change the colors and maybe the fonts and so forth. 95 00:06:12,140 --> 00:06:12,760 OK. 96 00:06:13,140 --> 00:06:13,800 So continue. 97 00:06:13,800 --> 00:06:18,660 Let's go ahead and create another these stack right after our shadow here. 98 00:06:18,690 --> 00:06:23,190 Notice we're going to be still inside our main H stack. 99 00:06:23,190 --> 00:06:28,970 OK so here I've put another v stack because I'm gonna be stacking a few things here. 100 00:06:28,990 --> 00:06:33,010 There pass a text in this tax here is gonna go to data. 101 00:06:33,090 --> 00:06:36,160 I'm gonna go to properties again and I want to get the place. 102 00:06:36,180 --> 00:06:40,620 This is where I'm going to add the place we've seen before foreground here. 103 00:06:40,620 --> 00:06:44,280 I'm going to make Gray and make these bold 104 00:06:47,320 --> 00:06:49,500 and wilder looking really good. 105 00:06:50,200 --> 00:06:51,000 Okay. 106 00:06:51,040 --> 00:06:52,980 Puerto Rico pretty that too. 107 00:06:52,990 --> 00:06:55,140 That's pretty high there. 108 00:06:55,540 --> 00:06:56,140 Very nice. 109 00:06:56,140 --> 00:06:57,790 So still making real good progress. 110 00:06:57,790 --> 00:07:05,980 Now this keeps popping down here and we can get rid of that if we want to by going back to our networking 111 00:07:05,980 --> 00:07:06,610 manager. 112 00:07:06,640 --> 00:07:08,520 Because this is where we are printing it out. 113 00:07:08,530 --> 00:07:09,400 Now we don't need that. 114 00:07:09,470 --> 00:07:14,440 I just go comment that out that way we don't get bothered by always seeing the console like a bottom 115 00:07:14,440 --> 00:07:15,360 there. 116 00:07:15,490 --> 00:07:15,910 Very good. 117 00:07:15,910 --> 00:07:20,650 So in the next video what are we going to do is we're going to go ahead and get this time and we are 118 00:07:20,650 --> 00:07:25,570 going to convert this time into something that is actually readable for humans so that we can actually 119 00:07:25,570 --> 00:07:29,440 see the date when this happened this earthquake.