Text input

- [Instructor] We've so far looked at constrained interaction, but there's interaction that the user will be entering less constrained information like text. There are two views you should know about to handle text. Each for a specific purpose. Text fields and text editors. Okay, so we're going to add in two state variables for this. So first one we're going to do is at state private var name string equals double quotes. And we'll do the same thing again. State private var comments and that'll be a string. Again, we'll just use a blank string to start. Okay. And so we have two strings here and then on the top of the V stack, I'm going to put my first one, which is going to be my text field. Okay? And text fields are for shorter single line responses that have a prompt. For example, we'll add a name field so that we know whose pizza is which on a large order. So fields have two parameters, a prompt or placemaker string and a binding variable to hold the input. So for our name, we're going to do this, I'm going to start with text field. And you can put the place marker, which is going to be name, it's also the prompt. And then after that you put the binding variable and the pizza crust has been taken care of. So I'm going to get rid of that. So we can go back to what we were doing and go back up here again. And we can see that we have a name field up here. And so I can type in a name and I can type in any name I want. So there we go. You'll notice that what I just typed autocorrect was on. You can change autocorrect and a bunch of other things with modifiers if you need to. So you can put those on. You can change what kind of keyboard you're using and if the keyboard actually shows or not. So you got all those there and you can play around those modifiers as much as you want. Now text fields also have a default in iOS of no border around them, while Mac OS has a few more borders. You can use the rounded border style like this. So let's do this. And I'm going to go down here and I'm going to put in text field style. And you can see there's a style for it here. And you can use rounded border text field style. And now you can see there's a rounded border here. Now this is harder to see than I imagined. So let's go down here. Let's go get this V stack compressed. And I'm going to put after it so we can see the edges here 'cause it's a little too close to the edges there. All right, I go back out and now you can barely see it. This is using a secondary or tertiary color. So it's kind of hard to see, but you can see it there. And then you can type in something like, you know, I can type in Steve or something or one of my favorite. And so we can get those types of names in there. All right, so notice I double clicked and I can get a select and I can actually pull these names out so I can actually cut and copy and all that stuff is working inside of this app just by putting the field in in the first place. Now towards the bottom of my V stack, I'm going to put a different type of thing. Okay, and I'll put that just above the spacer here. And that's a text editor. Okay? A text editor has only one parameter. It's a very simple thing to do. It just has its binding. So you can put in here comments. Now guess what? It's here. You can't see it though. It's very hard to see with this. So text editors, white on white with no borders. So you're going to have to end up adding modifiers and views like this for it to stand out. And I'm going to start by going in here and putting it in a V stack and then add a caption on top and possibly using some kind of fonts if I want to. This one looks fine. It's got a sort of a caption font to it anyway. And then I'm going to add a border to this using a funky little trick of a clip shape and then a very small shadow. So we can put that on the V stack, like this is clip shape, we'll use a rounded rectangle and I'll use a corner radius of three. And then onto that, I'll put a shadow. And this is a bit of a hack, but if you use a radius of one or two, you can see what happens is you can get a little bit of a border here about how this is all going to come together. Okay? Now you notice here that the button is over here. Notice we made a little bit of a mistake here 'cause the toggle is actually having everything here as part of its view. So you can actually stick a lot of things into a toggle view if you wanted to. But we're going to fix that now. And I'm going to stick this over here and remove one of these down here. And that should clean that up. And let's see how this looks. And this padding should be up here. Okay, that looks a little better. So we've got our name now, we've got our comments here and you can put whatever you want in the comments as well. So we could do something like, hello, my name is I order pizza, prepare to dine, and I can do a spell check right here. So I just as spell check, I can do select all, copy, double click over here and paste. And I have all of my editing features already here in this comments just by putting it in. So that is one way of looking at this is that it does a lot of stuff for you. And if I want to change these comments, which are now in a big font, I can change those around and I can make that backed out into secondary or something like that. Okay, so we've got a pretty good thing here. These two have their uses, text fields for shorter texts and text editors for longer text. When using them, use your modifiers to give the best look possible.