How To Create a SearchBar in SwiftUI (NEW 2021)

hello everyone welcome back my name is josh kinney and in this tutorial we'll be discussing how to create a search bar inside of switch ui so let's go ahead and begin if you look over here at this project i have created which is just swift's ui search bar pretty fitting for this video i just have the standard hello world that comes with every project you create what i want you to do is go ahead and underneath this content view make an array i already have it pasted out here so i'll go ahead and put that there for you and this is just an emojis for me and i have 12 of them you can pause this and copy what i have or you can create your own array it does not matter after you do that we want to go ahead and get rid of this text down here and we're going to make an actual list inside this list we're going to do the famous for each and with the for each we're going to go ahead inside of the emojis and grab so you want to do a comma we're going to grab that id and if you're not familiar with this i'll touch on just a minute but i really want to get to the search bar so i'll only spend a little bit of time this self right here is that id so basically what it's saying is in array you have that it starts at zero and just keeps going up so 0 1 2 and so on this is saying hey for that array whatever this is views itself so this would be 0 this would be 1 and so on and that is how they're actually showing up over here in the list so right here do your brackets and then you need to create a word i think emoji makes the most sense here but it can be whatever you want and then put in so basically each of these if you were just going to take one what would you call it since the whole array is emojis emoji makes sense for just one but some people get tied up on this that i've noticed and it doesn't matter what this word is this could be raisins this could be grass it could be anything you want try to make it make sense with your code but don't think that just because i put emoji that's exactly what it has to be be anything you want the end however is important you need to make sure it says n at the end because it's whatever word you say in and now it's going to look inside this emojis all right so now inside here we'll do text just like we had before [Music] and then inside that text a past that new word my name is emoji again whatever word you use there you want to pass and you hit resume and now you're already in two lines of code gonna see the list of these now one thing you will notice is it's white here and white here and if you're in dark mode it'd be black and black you can do a list where you group these together and the way you do that just to do a period and then start typing list you'll see this list style here and inside there type in grouped and you'll get two options you get the inset and then you get the normal group list style we're going to do the normal one initialize that and you'll see right away that these are now grouped and you can see the different color out here so it looks a lot cleaner okay so now let's move over and add a navigation view so we can name or put a title up here and you do that by going back to this list here if you hold down command and then click you can go to embed and then this container just name it navigation view okay from there now you can actually re go down here to this and you'll be able to access that by doing dot navigation title and then there name it whatever you want for my case i'm going to name it emojis and then you get this nice clean looking emojis there okay so now let's go ahead and look up uh and continue working on that search bar all right so now we want to go ahead and create that search view so go ahead up here in your project go to new file make sure it's a swift ui view and then we're going to name this search view [Music] that'll create that here now before we begin here we are going to want that search view to be gray if it's in normal mode but then a little bit darker gray if it's in dark mode so let's do that real quick and i'm only doing this as like a little tidbit you don't have to do this part but it's nice to understand how to create two different colors so you go in your assets here and you go to color set and from there make sure this view over here is showing up but you want to click on this any appearance which is going to be your lighter view i like to do the show color panel and then i like to drag this to wherever i like so we're going to make this like a light gray and you can see as you're dragging it there it's changing colors up here as well that looks good to me and then we're going to do a darker gray almost probably blackish there we go now this color i like to make it for what we're making it for so this would be for the search bar and then that's how you would name that so i'm going to copy that but you can name this whatever you want to name it gray you want to name it whatever you want to do that's on you but i'm going to keep it as search bar so it will reflect what i'm actually using these two colors for so going back over into the search view here we are going to begin so the first thing we want to do is make a z stack and then inside the z-stack we're going to need a rectangle after you set this rectangle here make this foreground color what we just talked about so this rectangle is going to be the search view rectangle so foreground color then you want to do a color and then you want to actually name that and i copied it so i'm just going to do a search bar i hit resume you will see [Music] it's a big the big um gray part here is that search bar so we need to fix that of course so now once we do that let's add in here an h stack um and i mean first off if you want to go into the z z stack we can start the frame um and just make the height 40 and then that should look a little bit better for you um let me re let me just comment it out so you can see yeah that looks pretty good height for us and you can see that now is that gray that we set because it's in the normal that was the changes to the dark view or dark mode then that would change more dark so that's how those colors work so now let's add an hdac here and in this hdac we're going to want a an image and then the actual text field so let's do the image first [Music] and it's going to be of system name and then since we want it's a search bar let's go ahead and just do magnifying glass make sure that this glass is not capitalized that may i type that in with a capital g because i'm used to that camel casing and i was stuck on it for a minute so make sure that this is all lowercase um and you'll automatically start seeing that pop up after that then we're going to add that text field [Music] and we're going to do inside here search with the space and maybe three dots will look good but now we need to pass in a binding prod a binding variable because that's what a text field needs so up here we are going to create that now so this will be binding so at binding [Music] var and we're going to make it a text let's actually do search text that sounds more and then you want to make it of type string [Music] okay now down here let's pass that so after this search here we do a comma and then the text part we can pass it in with a dollar sign that's how you pass in those binding variables and search text and now the only error we should get and i'll make this a little smaller so we can see the code the only error we should get is right here because we need to pass it in here so go ahead and hit fix and then from here just hit dot co or c and you'll see this constant so there you go and i'm just going to make it an empty string because that's it's needing some kind of string so there that is and i'm going to hit try again and from there oh we're not going to see yet because we need to change the color so let's go right here real quick and do a foreground and then this color we're just going to do the normal gray and then right here we're going to do a dot padding and that's just going to be the normal padding so now you're you're starting to see the search dot dot with the search bar so one more nice little thing that would look good is if this was rounded and we know probably from past videos you can do this with a corner radius so go ahead and do a corner radius and let's try 13 there that's looking good and then finally since these edges aren't where i really want them to be you can do this by passing a padding now this padding is going to pass it to all of them you could do a horizontal [Music] padding and it just passes to the edges the horizontal part but it looks almost the same so just leaving normal padding looks good to me so there's that part now we need to take this and actually put it in on the normal content view so the search bar is showing up above the actual list that we have created so let's look at that so now let's jump back over to our content view and let's grab this search view now so first off we want to go right here in this list and if you think about it we have a list we want the search view to be above it so if you're stacking it above it's a vertical or v stack so go ahead and hold down command and then click on this list and you can go right here to this embed in v stack once you embed this in now we're going to change the alignment so alignment type and we're going to do a dot leading from there we're now going to pass in above the list the search view that we just created so search view and then you want to initialize that and we need this binding property now which we don't have here we created one on the search view now we've got to create one here so now we're going to do an actual state variable we're going to name that search text as well and then we're going to set that to equal an empty string so now the state is going to basically be the state of your project so as someone is typing in the search view it's going to be updating right here in this variable instantly automatically it's always populating it's always listening for that so that's what this at state park is doing so now we can do the dollar sign and then pass in that search text and now that's going to be passed in there so now if you hit try again here we should be on our way [Music] i'm gonna do a build real quick build succeeded and let's try again sometimes you got to try it a couple times still with swift ui i don't know why it is getting better but you still got to deal with the glitches but now you're seeing this search view right here now i will say i did go back and change the color it's great because it was a little too dark even in light mode to kind of match this part but yeah i think that's looking really really smooth now let's go to the next step where we're actually i'm setting up the logic so when you're actually typing in here you know it's it's actually searching for your list here um so let's go ahead and all right so now let's handle this search um so the first thing i want to do is create me a binding variable that basically tells us when searching has started so whenever you click in here and start typing we want this emojis to change from the name of the title to actually searching to tell us that it's happening and then whenever we're done typing we're going to have a cancel button or if the user hits return then that'll go away and then lastly we'll go ahead and connect the actual list to it so let's go ahead and start so the first thing we're going to need i'll x out of that is a state or another state variable and we're going to name this searching and we're going to set this to false to start so it's going to be a bullying so inside of your search view you got you need to do the same thing so we're going to do a binding variable bar searching and we're gonna make this a type bull and then now we need to think about let's fix this real quick and then we'll do [Music] we'll make this false now we need to think about [Music] how to actually do this so inside this text field how are we going to be alerted that this has been start or someone started texting so the way you do this is do your brackets there and you need to make a word kind like we did emojis earlier in the content view our emoji earlier in the content view right here mode gn and well we can go and fix this too so now we have a searching that we just added so dollar sign and do searching which is what we just created there but we need to instead of emoji we need to do something inside this so what i'm going to do because it makes the most sense is to name it started [Music] searching because that's what you're starting to do whenever you click inside the search bar you're going to start searching okay um and then in okay so now inside of here we need to do an if statement so if started searching is true what's going to happen well what's going to happen is with animation [Music] amination i did it backwards animation we're going to set that searching bull up top to equal true we're going to switch it okay so now whenever you start hey if this becomes true from false then we need to we need to be alerted so that's how we're being alerted the next thing like i said we have a cancel button but also if the user hits return or enter that's going to show that they're done um actually typing um in that text field so you can also access that with and we'll go to the end of this text field here which is right here and you can this is called on commit and you do have type then you do your brackets there and then you just do the same thing so with animation and then you're going to set searching to false so now we're setting it back to false okay now the last thing we need to do is hit save here go back to your content view and actually call this now so inside this navigation title you do searching and if this is true we want it to say searching [Music] okay if it is false we want it to say moody's so now let's build that make sure it works great now let's hit resume here it is so see us as emojis up there as soon as i start typing so i click boom searching cool this is cool and now i hit enter it goes back because it knows that i'm no longer typing in there hit enter it goes back to emojis click on it again searching enter great um so that that's awesome so now let's go ahead and do the next step so now let's work on adding that cancel button so right here underneath this navigation title we can actually add a modifier called toolbar so you type in toolbar all one word no camel case and then from there we can do the same thing we kind of did on the other search bar and we can do if search if searching is true then we can add a button and what will this button say it'll say cancel from there we can we can say do some logic so we're going to do the search text it's going to be blank and then with animation searching we're going to turn it to false say uh equals false equals false now let's look at this real quick so we'll build be good now let's go here and resume [Music] now you can now you will be able to see the the cancel as soon as we start clicking see but you won't be able to see an issue we actually have here so if you hit run and actually do it on a simulator here you'll see so whenever you hit searching and our keyboard pops up and we use it you know so great um everything works if you hit enter it goes away however if you start searching and you want to cancel out of this it'll cancel out and emojis will go back but that keyboard is still there so we need to actually dismiss this keyboard and there's not a real good way to do it yet in swift ui but you can still use your ui kit to achieve this so at the very very bottom here above your content view preview we want to go ahead and have an extension of u i application and then inside here i'm just going to paste this over um you can pause it and add this function in [Music] and then you can paste it too and not this is not my code i actually got this off searching but this will actually dismiss that keyboard for us so now inside of this over here or after searching is false all we have to do is call ui application and then you can actually access that by doing a dot shared dot dismiss the keyboard perfect so now let's run this and then once you type this you search hit integrate also if you type this and you hit cancel now that keyboard is closing out as well just like it's supposed to do awesome moving on to the next one all right so now let's go ahead and add the logic for this so we want whenever we start searching here we want it to go through and filter out whatever we start searching so say happy we want if you hit h everything with an agent it's going to be showing a you know anything with the h a p and so on so i'll show you how to do that um inside this content view go ahead and find this list and then that four each now we're going to use this exact thing with the id and passing an emoji in and then doing this text but it's going to be later so the easiest way to do this is go ahead and either comment this part out and retype it or just delete it all the way and then follow along so we're going to do the for each again but this time in emoji we're going to do a dot and look for filter whenever you get to this point go ahead and hit enter again and you'll see we are needing a string and a string inside of this code but actually let me go back one you'll see right here where we have the throws we need it to return of type boolean so we're going to keep that in mind as well so right here do parentheses and then inside there we're going to name it the emoji and then that's going to be of type string because that's what it's needing and then right here we're going to return that bool so it conforms there and then inside here we're going to need to do that return return and what are we returning we're in turning the emoji dot has a prefix it has a prefix is very similar to like a string if you do dot um is empty so it's just looking to see if it has a prefix right here we're going to do that we're passing that search text um if nothing is there then we're going to do search text is empty or is set to an empty string okay just like that uh what did i do so right here actually i messed up this needs to be to finish so you want to pass in the search text there and then delete this guy here okay now after these two here you want to hit a comma and then we're going to pass in that id part that we had earlier so that's self [Music] and then emoji and then we're gonna do a text and we're going to throw we're going to pass an emoji now let me see if that builds i messed up somewhere let me look at my code or search text equals boom boom that's fine oh no that's right okay so we're going to return the bull which we're supposed to do and now we're into our return statement which will be return the emoji which is fine we have our prefix set to search text which is what we're wanting to search or so if there's nothing there we're gonna set search text to oh there needs to be two equals so set that this needs to be equal to this okay so um not just ones because we're not setting it to equal an empty string we're saying hey is this equal to an empty string just different okay so that should take care of that i'm going to go ahead and make that a little bit nicer there and now we're going to go ahead and test this out so hit build should be good there now let's go over here give us some space and hit resume and now inside search we should be able to do h like i said now we have two h's a and only happy is showing c we have cool and cold so if you do co you have both of them still but if you do another o cold drops out same way if you do an l you have that so that actually is now filtering through everything but we do have one issue here if we go ahead and hit a run on this and actually get in the simulator earlier we talked about this keyboard that's missing so when you hit return it does dismiss but if you try to search through here you can see that keyboard still stays there and doesn't dismiss so we need to fix that as well so here in this list you want to go down to the bottom and we need to add another modifier and this one is going to be a type gesture now with gesture there's many things you can do like a long press but in this one we're just going to do a drag so whenever you're dragging it it's going to be a drag gesture okay from the drag gesture you want to go ahead and do some logic here and right here we're going to do what's called an on change so whenever it's changed you're going to go ahead and you don't have to name anything here just do an underscore but here in this code we are actually going to do exactly like we did down here we can actually copy this if you want oh good one we'll copy that and then right here we can paste that okay so now i'm going to do command a and then ctrl i to make it all look nice and then we're going to go ahead and do command r to run that and now let's check take a look and see if that is now working so we can search a great and in great see great everything is working but now let's see if i want to scroll through here boom just like that that keyboard now goes away as soon as you start dragging it and that is going to wrap it up here for the search bar working within swift ui guys i hope this was very beneficial for you if it was give me a like if you want to see my upcoming content hit that bell button as that will notify you and lastly if you haven't yet go ahead and hit that subscribe button to subscribe to the channel the more subscribers i get the more my content can get out to others and benefit them as well thank you so much and as always have a wonderful day

Channel: Josh Kinney

Views: 1,018

Keywords:

Id: 7kxjzEBjeNI

Length: 26min 17sec (1577 seconds)

Published: Wed May 19 2021