1 00:00:05,870 --> 00:00:12,700 Now we gain a lot by using the binding string in this case the binding wrapper that we added there. 2 00:00:13,010 --> 00:00:17,220 This one here with dollar sign and then the name of the variable. 3 00:00:18,140 --> 00:00:19,760 If I come down here somewhere. 4 00:00:19,850 --> 00:00:22,040 Let's see we already set a v stack. 5 00:00:22,040 --> 00:00:28,640 We have our H stack I'm going to go still inside outside of the main v stack here outside of our navigation 6 00:00:28,640 --> 00:00:29,400 bar title. 7 00:00:29,570 --> 00:00:36,230 When I put a text Justice symbol text and what I'm going to do here is I'm going to pass the variable 8 00:00:36,290 --> 00:00:42,760 the self no do variable itself not the binding one the just variable because at this point here we bind 9 00:00:42,820 --> 00:00:45,580 it so we can actually call it just like this. 10 00:00:45,610 --> 00:00:49,870 No do straight without the dollar sign and you will see what's going to happen. 11 00:00:49,920 --> 00:00:54,880 I'm going to go ahead and say no do I such don't I save this. 12 00:00:54,880 --> 00:00:59,590 Let's go and run everything should be still the same. 13 00:00:59,590 --> 00:01:00,700 However check this out. 14 00:01:00,720 --> 00:01:04,510 If I type here in our text field and I say hello. 15 00:01:04,510 --> 00:01:08,440 Look at that the moment I start typing whatever I need to type. 16 00:01:08,440 --> 00:01:11,440 Notice that it's also showing instead of a text. 17 00:01:11,440 --> 00:01:15,960 This is only happening because we bind our no do variable. 18 00:01:15,960 --> 00:01:19,360 It's a state we are actually binding it with the text of you. 19 00:01:19,390 --> 00:01:25,420 Meaning anywhere else as we change in our text field is going to show those changes are going to be 20 00:01:25,420 --> 00:01:28,630 shown right away anywhere else okay. 21 00:01:28,650 --> 00:01:33,960 So that is the one of the powers that we have here with a binding property. 22 00:01:33,960 --> 00:01:39,270 So what we're gonna do next is we're gonna make our user interface a little bit better so we want it 23 00:01:39,270 --> 00:01:41,310 to look like this at this point. 24 00:01:41,310 --> 00:01:48,120 Here are text field it's not very helpful because it's white on white because in by default and text 25 00:01:48,120 --> 00:01:52,770 field has a white background and we have a white background for the whole application that's why you 26 00:01:52,770 --> 00:01:53,820 don't see anything. 27 00:01:53,910 --> 00:01:57,920 So we're gonna change a few things so at least it looks something like this. 28 00:01:57,930 --> 00:01:59,700 Let's go ahead and accomplish that. 29 00:01:59,700 --> 00:01:59,940 All right. 30 00:01:59,970 --> 00:02:01,170 So back to our code here. 31 00:02:01,170 --> 00:02:02,680 Let me go ahead and close that. 32 00:02:02,680 --> 00:02:04,280 So have more space there. 33 00:02:04,350 --> 00:02:05,670 Here ends right there. 34 00:02:05,670 --> 00:02:13,450 I'm gonna just change the background here once a dot back ground like this. 35 00:02:14,650 --> 00:02:19,090 And we are going to change a color is gonna be equal to green. 36 00:02:19,510 --> 00:02:21,070 Let's save this and run. 37 00:02:21,070 --> 00:02:25,060 See if something's gonna change. 38 00:02:25,070 --> 00:02:25,640 There we go. 39 00:02:25,640 --> 00:02:26,710 That's very nice. 40 00:02:26,720 --> 00:02:35,390 So in order for us to make our text field to look like this to have a nice round corners and perhaps 41 00:02:35,450 --> 00:02:46,300 add the shadow radius there what we're gonna do is we can add a clipped or clip shape as such and inside 42 00:02:46,300 --> 00:02:49,790 are going to pass conveniently the rounded rectangle. 43 00:02:49,790 --> 00:02:55,600 So they should not a table can use can also pass if you parameters one of which is the corner radius. 44 00:02:55,970 --> 00:02:57,980 Let's go ahead and say we'll just wanted to be five. 45 00:02:58,280 --> 00:03:05,890 I'm gonna go ahead and say dot shadow like that and I'm going to pass the radius of the shadow to be 46 00:03:05,890 --> 00:03:07,500 about five. 47 00:03:07,580 --> 00:03:15,070 Okay let's save this and run and see what's going to change just like that it's kind of small you can 48 00:03:15,070 --> 00:03:22,530 quite see it but he can see that we have these very nice radius that is showing they're very small. 49 00:03:22,540 --> 00:03:28,600 But we will make it a little bit bigger inside of our text field so this is where we end our text field. 50 00:03:28,600 --> 00:03:29,860 Put an answer there. 51 00:03:29,860 --> 00:03:32,160 I'm going to go ahead and say dot padding. 52 00:03:32,170 --> 00:03:39,060 I'm going to give a padding for all of about twelve save this and run. 53 00:03:39,060 --> 00:03:42,750 So it will make it a little bit more bigger and well. 54 00:03:42,780 --> 00:03:44,700 Now you can see it's much better. 55 00:03:44,700 --> 00:03:48,840 Of course all the way to the left over they were going to change all of that in a second. 56 00:03:48,930 --> 00:03:56,830 But now you can see it's easier to see that this is indeed a text field and it looks really nice. 57 00:03:57,000 --> 00:03:57,920 But what do you want to do. 58 00:03:57,920 --> 00:04:04,430 Also is we want to make sure that we have this nice image to the left there. 59 00:04:04,440 --> 00:04:04,620 OK. 60 00:04:04,660 --> 00:04:05,770 Just cosmetics. 61 00:04:05,770 --> 00:04:06,460 How do we do that. 62 00:04:06,460 --> 00:04:09,990 Well that means we have to put our image inside here. 63 00:04:10,000 --> 00:04:17,680 This is our horizontal which is convenient because our image is to the left of our text field. 64 00:04:17,710 --> 00:04:19,060 Let's go ahead and do that. 65 00:04:19,240 --> 00:04:28,810 And right below our H stack here I'm going to say image as such and I am going to say system name because 66 00:04:28,810 --> 00:04:35,500 I'm going to actually use what Swifty y or what X code provides because X code has a lot of different 67 00:04:35,500 --> 00:04:38,560 system images that we can use for our development. 68 00:04:38,560 --> 00:04:48,340 In this case I want the plus dot circle like this and I want this to have a padding of a leading. 69 00:04:48,340 --> 00:04:50,650 So I wanted to be to the left. 70 00:04:50,650 --> 00:04:56,200 So run this we should hopefully see and there we go. 71 00:04:56,200 --> 00:04:59,300 You can see it looks really nice there is that plus. 72 00:04:59,320 --> 00:05:01,830 And then we have our added text. 73 00:05:02,370 --> 00:05:04,260 All right. 74 00:05:04,330 --> 00:05:08,880 And the next thing we could do here is instead of our H stack let's pass a few parameters here at once 75 00:05:08,880 --> 00:05:14,870 spacing to be something perhaps like about five. 76 00:05:15,220 --> 00:05:18,940 So there's spacing around these items inside here. 77 00:05:18,940 --> 00:05:19,390 There we go. 78 00:05:19,390 --> 00:05:20,230 That's much better. 79 00:05:20,500 --> 00:05:23,800 You can see now it kind of bleeds out to the right there. 80 00:05:23,830 --> 00:05:27,380 So I want to perhaps move it a little bit to the left there. 81 00:05:27,460 --> 00:05:30,180 One thing I can do is let's go come down here. 82 00:05:30,180 --> 00:05:32,700 Remember we are now outside of our group. 83 00:05:32,740 --> 00:05:35,500 So we are adjusting our group here. 84 00:05:35,500 --> 00:05:42,910 That means here I can come and say something like dot padding and I can actually say I to trailing padding 85 00:05:42,940 --> 00:05:55,310 meaning from the left to right to be something like eight save and run you can see right away we were 86 00:05:55,310 --> 00:06:00,710 able to move giving a padding there so which moved to the left. 87 00:06:00,770 --> 00:06:01,260 All right. 88 00:06:01,310 --> 00:06:01,640 There we go. 89 00:06:01,700 --> 00:06:03,980 So now it's looking much much better. 90 00:06:04,070 --> 00:06:06,380 And of course this will go all the way up here. 91 00:06:06,410 --> 00:06:09,400 Once we have our list to the bottom there. 92 00:06:09,400 --> 00:06:13,760 But at this point here you should be a little bit proud here because things are actually looking way 93 00:06:13,760 --> 00:06:15,530 way better than they were before. 94 00:06:15,530 --> 00:06:21,620 So let's go ahead and add our list because remember here what we're trying to do is to add a list below 95 00:06:21,680 --> 00:06:22,760 our what will you do. 96 00:06:22,760 --> 00:06:24,920 Tax failed to do that is very simple. 97 00:06:24,920 --> 00:06:28,060 Remember we still all inside of our body. 98 00:06:28,130 --> 00:06:34,670 But most importantly we instead of our navigation view here we have the main v stack there which ends 99 00:06:34,760 --> 00:06:35,630 right here. 100 00:06:35,630 --> 00:06:40,670 But then we have these inside horizontal stack that ends right there. 101 00:06:40,670 --> 00:06:42,860 So this is where we want to add our list. 102 00:06:42,860 --> 00:06:53,240 For now I'm going to say list go like this list and just put text like that and say hello there. 103 00:06:53,350 --> 00:06:55,140 That's all I know. 104 00:06:55,750 --> 00:07:00,460 And look what's going to happen all of sudden everything's going be pushed up and now we have a list 105 00:07:00,640 --> 00:07:05,490 which granted it's empty and not very inspiring but we got to change all of that in a second. 106 00:07:05,740 --> 00:07:07,300 So life is good here. 107 00:07:07,300 --> 00:07:14,830 The idea is when we add something here we hit enter we going to go a populate our list. 108 00:07:14,830 --> 00:07:15,820 Now how do we do that. 109 00:07:15,820 --> 00:07:19,030 Well first of all we need to create the actual data model. 110 00:07:19,060 --> 00:07:21,260 But in this case here we're gonna make things a little bit simpler. 111 00:07:21,370 --> 00:07:28,050 And I'm gonna create just an array at the top here that will contain all of the no do items. 112 00:07:28,420 --> 00:07:30,000 So I'm going to say at St.. 113 00:07:30,040 --> 00:07:33,460 Because they all need to be added into the view and rebuild. 114 00:07:33,850 --> 00:07:39,520 So I'm going to say var and no. 115 00:07:39,550 --> 00:07:48,660 Do list such and it's gonna be an array of strings and I'm gonna initialize it to empty. 116 00:07:48,670 --> 00:07:51,460 So these notes list is gonna be an array of strings. 117 00:07:51,610 --> 00:07:56,050 And at this point it's just empty in the next video we're gonna be doing is we're gonna start adding 118 00:07:56,350 --> 00:08:02,800 items into our list and start seeing them in our actual list or table view in our app.