SwiftUI 2.0 How to Build a Search Bar with Filtering

all right so i think we are live everybody uh welcome back to the channel i hope you guys are doing well uh this is probably my second or third video during the whole pandemic i've been quite busy i've been working on a lot of contract projects a lot of code that's being written in swift ui and today's video what i want to do is to show you guys how to build out a search feature type of ui inside of switch ui i found this to be kind of hard to build sometimes so hopefully after after watching this video you guys can get a better idea as to how this is done okay that is the intro and now uh let's see i'm gonna bring your attention to the middle of the screen here and i have two uh different types of search setups inside of these two simulators and the left side is really simple so let me go ahead and demo this first right here so at the very top we have a search bar allows you to search like that and i'm just going to type in a or fox and obviously this is pretty self-explanatory that's fox there's a and then there's uh jumped right here so there's a lot of repeated words inside of my list so that's kind of why you see those duplicates okay so it turns out there isn't a native uh swift ui search component uh maybe there is if there is one uh hopefully you guys can point me to uh what exactly that component is um on the right side the iphone 11 pro max simulator here this is using a grid component which is new to swift ui 2.0 or swift ui inside of ios 14 and it's a very similar idea this is just pulling down uh the top 50 grossing applications inside of the app store i think it doesn't really matter so much but you can search like roadblocks as here clash royale youtube is here and everybody seems to love tick-tock especially during the pandemic okay if we have enough time i think i'll walk through how to implement the search for the grid but uh why don't we uh take things one step at a time and i will build out this left search first because obviously it's easier okay hopefully you guys understand what we're gonna be doing today uh i'm going to drag this guy down to the corner and hopefully the audio is coming in fine as well uh i'm going to be using xcode 12 and what i'll do is i'm going to go inside of xcode and create a brand new project uh it looks a little bit different um i'm just going to use this app thing here it's still really similar to xcode 11 and let me just kind of walk you guys through this step here okay let's go to search uh swift ui lbta did i spell that correctly it looks okay uh i'm going to be using the interface of switch ui here the life cycle it used to be ui kit app delegate or actually this option never used to kind of show up in this panel so it used to be this right here but by default in xcode 12 and ios 14 uh you can use swift ui app now because that's the default i'm going to i'm going to be using that instead okay next right here it doesn't really matter so much and let's go ahead and create this bad boy here hopefully everything is being recorded i'm using obs and i'm just looking at my output window here and everything looks so uh it looks good so far okay let me close out of that and i'm just going to hit the resume here uh this is an application i'm going to be using the let's use iphone pro max here and basically what i'm going to walk you guys through on how to do is you see this little top search bar area here uh we're going to be building this search bar manually inside of our content view and also provide some kind of scroll view so that we can scroll up and down like that there okay uh what else do i need to explain again i'm gonna be using xcode 12 which makes your project look a little bit different uh here's the app right here it's using your content view which is this guy i don't want to explain too much as to what's going on but you know welcome to xcode 12. okay everything looks extremely small and that size looks okay uh you can close out of the left panel like that and everything is much better much cleaner so that i can show you exactly the ui we're building up okay uh let's see next let's look at this list here and we have our hello world which is nice you can say one two three one two three and you'll see the changes appear ever so slightly on the right side uh why don't we first build out a scroll view for our list because we're going to be searching through this list here right so it does that and let's see whenever you do that you have this other component here you can grab this simple cut and paste and then here is your text component at the very top because the scroll view aligns everything starting from the top there okay and for uh you know just to make things look a bit a little bit cleaner let me move the scroll view inside of our navigation view here and finally you're going to want to say navigation title and let's say food or obviously make it whatever you want and uh it should be okay all right now next thing i want to construct here is a list inside of my scroll view you can use the list component but it's really hard to modify the look and feel of the list so in today's video i'm going to be using a scroll view which is usually what i use in my consulting project okay that being said i'm going to use a for each to construct some dummy components here and let's use 20 items id of self and uh this is just a syntax you have to get used to let's see text is here and for each one of my numbers i'm going to be using a text component to render it out here um what else do i want to do i want to align everything to the left side so let me use an h stack and a spacer here and i'll just put it right there padding will give everything just some top bottom leading and trailing edge padding which makes your list look like that uh what else do i want to do here maybe i want to use a i think i can just in the xcode 2.0 you can just use the divider and things will be separated by this divider line there i'm actually curious if you can change the foreground color so foreground color to black does that do anything okay and that doesn't look like it's making it any darker sometimes inside of swift you just have to try certain things and sometimes it'll work and sometimes it won't okay it looks like the divider you can change the color to be a lot darker using the background instead of the foreground so that's what i'll do um let me also add a leading to give some spacing on the left there and this looks a little bit dark inside of what i want to say here inside of the new swift you can say maybe system gray of 4 and then you'll get a slightly lighter gray i tend to use this a lot inside of projects just to you know get um get a color that's not so black okay uh let's see moving on here so now that we have our dummy list constructor right what exactly do we want to do now well why don't we start to draw this search bar up at the very top here and like i said we're going to construct this guy manually uh what you know what kind of components are we looking at here well we're looking at some kind of horizontal component that has this background grayish color we have the left side has this magnifying glass uh in the center spans all the way to the end here it should stop at the x but maybe we'll fix that later and then some text and then this x circle thing and then the cancel button on the right side and everything slides in when you start that the actual search input so how do we do this well inside of swift ui there's a lot of different ways to like construct your ui and i'll just be showing you one very quick and you know general way of doing this so like many other things inside of swift you'll be using a container like an h stack or something and why don't i use a text field here and this is going to be the the actual component where i type in so i guess less talking and more doing here uh search terms here and then this binding thing is a variable that's actually going to hold what you're typing into the text field so it's really easy you just want to create a state variable and let's call this the search text and we're going to initialize it as an empty string because when the app starts out you're not really searching for anything so that just means that it's empty hopefully that makes sense to get a binding version of your state variable inside of switch ui you have to add this dollar sign there and once you do that everything should be fine can i get this to 75 percent okay that is looking a little better all right um so far so good i'm on my hackintosh so everything is like running super quickly okay so you see your search term is here you can start typing in uh one thing you'll notice is that when you click on the search term right there's actually an invisible keyboard it's actually this thing here so you hit command k it's actually this keyboard here uh if someone can tell me how to actually show the keyboard instead of the preview that would be quite splendid but you know just be careful that whenever you are typing here and try to drag the list it doesn't work because the keyboard is obstructing the scroll view all right uh hopefully that tip helps i was certainly like very confused as to like what the heck is going on down here but now you know um hopefully you'll not fall into that pitfall okay so now i'm going to hit a space right here it's going to refresh the preview because my machine is fast it gives it to me in a few seconds uh now we are going to move on um let's see background color and like i was saying earlier you can use a system gray or system gray is going to come out inside of the parens and let's just use gray like that uh maybe two what am i using over there probably some like three or four so four looks pretty close to that and now that we're getting a little bit closer i think i can use a padding value here if you move this background down after the padding like this it'll do something a little bit different so now it looks like that i don't want everything let's see i want everything actually on the h stack uh i don't think i matter as much but that'll help me do this a little bit faster okay so i'm going to add another batting and this is just going to be horizontal on the left and right edges which gives me this right here and that on the right side uh finally we use quarter radius so 3 looks like that 12 looks like that uh you know play around this until you're happy with the actual corner radius here and here i think i'm using a value of like six or something in the other app or this finished app okay and this is looking a little bit dark so let's change it to system grade five and now that we have this going uh why don't we actually implement the search first and then we'll talk about this magnifying glass and the x circle and then the cancel on the right side which isn't that hard to be honest so to implement this search here it's pretty simple uh whenever you type in text let's say one you should be able to you know filter everything out so that only this one is showing so essentially i want to say a and have it only the a's or you know fox for the fox um how do we do this inside of this swift ui block of code well what you can do is inside of your for each loop right you are generating 0 to 20 down there or 0 to 19 and you can apply the filter directly so i'm going to no so zero dot dot less than 20 gives you an array of numbers and you can say this right here to filter and i believe you have to wrap this inside the parentheses here and now you can actually filter so what exactly am i going to filter for right so inside of the filter you have to say brace brace and to access one of these numbers here you have to say dollar sign zero to you know access the zero the one the two or three this is what the dollar zero means and the next thing you can do is i'm going to construct a string version of the number and this is how you interpolate the string inside of the number here and i believe that is what i want and contains is it contains okay no i think i want to actually do this here so now the text but get that and that contains and you want to check if it contains the actual search term you're searching for so in other words we just want to use the search text here okay hopefully this is not too confusing you can write this in a like a separate function but i'm doing this in line inside of this line 25 because i i find it to be a little easier to explain but basically you'll see nothing inside of your list right now because we don't have anything as a search text yet so if i just say 1 you'll see a 1 10 and you know everything above 10 because our list contains you know up to 20. if you say 2 you have 2 and 12. and 3 is 3 and 13. so that's how you know the searching algorithm i wouldn't really call this an algorithm because everything's being handled through this function here but you know nonetheless we're doing some type of some type of manual work so uh moving on here um you'll see that down below whenever your list begins right your application starts from nothing right here uh what i'm gonna do is i want to show everything inside a list if i'm not searching for anything so some of you guys can probably guess how that's done but i'm gonna use an or statement here and search text dot is empty like so and what that means is uh at the very beginning there's nothing so everything's going to show up in the list that's what the or is doing and now we can say 0 gives me that 12 is that and you know this is nothing to be worried about if you don't understand it but just follow this and uh you'll be fine okay now uh looks like we are 18 minutes in what else do i want to show you well you see the magnifying glass on the left side here uh how do we do that well um do we want to add it here i guess i'll add it here so we have our h stack which looks like this right uh you can add the magnifying glass directly to the left here and that should be fine or you can do an overlay so this one i don't see that often so maybe i'll show you guys this instead so just use an overlay here i believe it's an hstack and text.test and now you'll get this overlay showing in the middle so uh what do we want to do with the test variable here well what i'm going to do is i'm going to use a spacer it'll push the test to the left side here and then i'm going to use another component which is a test here and it'll give me the test here and this will eventually turn into the x and this will be the uh the magnifying glass there so i'm just going to give this padding and let's say horizontal and then you know it gives you this effect here you can push it deeper with 32 and you know that's what i'll do um so you know not too bad now why don't we pull in the uh let's see the magnifying glass with a image of system name so magnifying i think it's glass without the dot one thing that i guess let me explain to you guys where these things are coming from um okay so we have the glass turning on the left right let me do the same thing for this right here i believe it's like x mark or something let me see so x mark is that i'm going to check my other project i have the x mark circle fill uh circle dot fill and now we have the magnifying glass here and then the x uh this search term you can push the padding and uh wing [Music] that's okay and uh it's 24. okay let me bump this to 100 and now you'll see the uh the icon here the search term here abc and zero that looks okay and then the x is showing there and not so far uh not so bad so far and then gray and you know whatever color you want to to use is fine ah so let me kind of catch my breath here and hopefully this stuff isn't like too tough to understand uh up to this point but yeah you know i find that whenever i'm building a swift ui application sometimes a seemingly simple component it just isn't embedded or implemented natively inside of suit ui i just have to manually build it out quite easily using these simple techniques okay now last thing i want to do is why don't i tell you guys where these uh these images are coming from because uh if you haven't used this before it can be a little confusing um uh let's see how do i to say this inside of apple's developer website there's this like sf beta thing it's like uh sf symbols beta that's what this thing is called and basically this is the program here you have all these icons that you can use uh let me toggle this thing on here you'll see that some of these icons are only available with ios 13 and and scribble.variable here this is only available in ios 14 so just make sure you're fully aware of that if your simulator is using using ios 13 you won't really see the icon let's see if you want to search for icons you can go through here magnifying glass and then you'll find a lot of different variations of that icon and then you know search for the x marker whatever you want there's a crap ton of icons that you can use now instead of ios 14 and ios 13 has a lot too okay and with that being said let's move on to some other interesting functionality of our application uh you see on the very right side here uh you want the x mark like let's say you say a or let's say fox right when you actually type in fox and you click the x right here you actually want to remove the text inside and also you want to like make sure that the list is not filtered anymore and i also want to show this x only when i click inside of the search bar there um so a lot of tricky things that's going on with the x button i'll tackle this one at a time here uh how do i want to show you guys how to do this well uh you see the x is showing right i'm going to use a another state variable that's called is searching and let's just set this guy to false because by default at the very beginning you're not searching so it's going to be false next we are going to go down to the xmark circle and if we are searching is searching uh we're going to use this right here and once you do that command option p to resume every now and then you have to resume you can either use that button on the top or just command option p so you see the x mark is now gone right what i'm going to do next is every time i tap on one of these things here so i want to try doing this on tap gesture that we're going to say is searching toggle or set it to true whatever you want actually i want to set it equal to true because that's a little better i'm going to do that click on this guy you'll see the x mark show up here i'm going to click on this x and then kind of wipe out this text here right i'm going to wipe out that text when i click on the x you can use another ontap gesture to do that but why don't we make it a little bit cleaner with action and a label here uh this is pretty simple put it in here you should see the button like that so you can actually kind of click on it you see it has a down state there so down like that uh i find that maybe you want to use some padding for this game and let's see click on that looks okay um i think i just use vertical just to make it a little bit easier to click okay next thing i'll do is whenever i tap on that x button i want to do this inside of the action i'm going to say searching text equals the empty string again and so let's see if this actually works i'm going to say 1 1 hit the x and you'll see the entire list is now fully rendered out with every object because the way we set up the filter right once the search text is empty everything is going to show up in the entire list so hopefully that's not too bad i'll say two is here i click on x and everything seems to be working fine all right so not so bad uh last thing we want to do and the last thing we want to do or you know one thing i kind of want to show you guys is that when you have a scroll view inside of a swift ui application you can actually just scroll down and you'll see it stops at the actual keyboard which is pretty amazing um a lot of you guys that have done ios development with ui kit you'll know that getting this at work inside of ios ui kit is really tedious and just all kinds of painful so now that you get this behavior for free i feel like using swift ui is more and more uh more of an attractive option okay so that was kind of a tangent last thing i'll walk you guys through how to do is maybe this cancel button on the right side there and you see i don't have a cancel button right uh when you're searching for something like fox you don't have to cancel you want to erase the fox and get rid of the x and the cancel like that um i think most searches uh search uis work like that so that's what i'll try to build out and hopefully i can do this uh what i want to do here first i'm going to show a cancel button and i think maybe i want to do this i want to wrap everything inside of another h stack let me just show you how this works here so here's the h stack inside our major stack is yet another h stack containing everything that you see there i'm going to say button and action that that and let's see that and cancel is now showing up on the right edge uh let's go padding does that let's only do the trailing because the left is a little big uh something that you can do if you want to you know kind of make the ui look a little bit strange or better is you can give this a negative leading edge which pushes this to the right a little bit so or to the left or however you want to think about it by default it looks like that so use this trick if you feel like your ui isn't shifted correctly in the horizontal axis okay that being said whenever i click on the cancel i want to implement the actual dismissal of this x here first and as some of you guys can guess already you can do it using is searching and just say equals to false or maybe just use toggle i think toggle works too so a b c d e f hit the cancel you see you'll see the x button disappears uh we can also say search text equals the empty string i think that's mostly what i want to do so 1-1 hit cancel and everything appears again finally the next last last feature you want to implement is you want to actually dismiss the cancel button and i guess in addition when you start out your app you don't want the cancel button to show up so you guys can probably guess how to do this um let's see the button is here and you can say let's see i think it's if we are searching then show this guy here i think that's what i want to do so click on that you'll see your cancel click on that then cancel itself goes away as well now if you notice i think some of you guys can notice this and when i click on the cancel here you'll see that it slides in the actual text field and also the cancel slides left and right um surprisingly this is really easy to do insiders with ui and i'll show you guys how to do it right now so still let's see it's pretty easy i don't remember this code all the time but i believe it's transition and dot move and the edge is trailing and this down here um i think you want to use animation so any animation will do let's see click on that kind of slides in like so click on that it slides out like that i'm a big fan of the spring animation you can use this complicated one but for today's video we're just going to use the uh spring like that click on that that's that that's that does that and that uh looks you know quite good for just two lines of code if you want to apply the same thing with the actual text box you can take this here and then just move it i guess right there or something and click on that you'll get this slides in and click them like that the frame rate i think there's a little drop in frames but when you run this on your iphone it should be rather smooth up to 60fps i guarantee it uh i think we are almost done with today's lesson i guess the last thing i'll do is i'll try to run this in the iphone pro on the right side uh just to make sure everything is looking a-okay i noticed that if you try to rely on the preview too much sometimes when you actually launch your application uh things don't render exactly the same as you would expect okay so this is looking okay this search bar is a little tall but you can modify one of these padding values to fix that i'll let you guys figure out that step on your own zero let's see can i get a zero all right so that looks like the zero i think my computer froze a little bit because it's trying to process a little bit uh too many things at the same time so that's 11 and then 11 is showing up here i had to cancel and now that looks okay uh there's a trick to get the dismissal when you scroll down and you know try to dismiss the keyboard um maybe i'll show you guys how to do that later one last thing that you know you want to do is when you hit that cancel right there you want to dismiss the keyboard at the same time in other words you want to cancel when the keyboard goes away um so how do we do that well this is one of the trickier parts of the code and i'll let you guys kind of analyze the code on your own uh whenever i am hitting the cancel right here which is this button on the right side i'm going to do in addition to setting his searching and search text up above i'm going to say ui application shared send action of resigning the first responder and if you don't know what this is basically whatever it has the the actual focus or context of the typing keyboard you're just going to re resign that and in doing so will dismiss the keyboard so you know a lot of talk but once you see it in action it should be quite self-explanatory so cancel and gets rid of the keyboard like that okay um this has been a super long tutorial but hopefully you guys were able to pick up on a lot of the techniques in today's lesson um there's one more thing i would like to show you guys how to do and let me just shrink down the ui a little bit here it's a little bit too large for me to show you guys what i want to show so uh whenever whenever you have your swift ui application right you tend to let me just string this down a little bit more so it's looking really small i know that and you'll see that your swift ui components typically end up with a lot of these nested embedded sub views and sub components that are going to expose some actions and more braces upon braces it gets really ugly especially for someone that or not even just another person but when you're looking at your at your own code later on just trying to edit some of this stuff is just incredibly difficult so the technique to make things simpler is to just extract these components and i believe you can do this show codes action and you'll see this window right here hopefully you guys can see it you can embed or extract everything inside of a sub view or just you know cut and paste but that option is available extracts it inside of this extracted view here and let's just call this the uh you know search bar and give it whatever name you want and we should be done but you'll see we don't have the search text inside of this struct down here right now let me just bump this up a little bit more it's really hard to see so the search text is missing because it's inside of the parent contact content view component up there and it's a state variable it's a search text right here you might you know try to use a state variable here like this or something you might want to try to do that but that's not going to work let me just show you the correct answer and uh maybe in another video i'll explain to you how these bindings and state variables work um search text it doesn't have to be called surtex it can be called whatever you want and just use a type of string and let me use the other variable of is searching and this needs to be a boolean here and once you see your search text and is searching is available the syntax highlighting comes back and now the last bug that you need to fix is this right here to set the fix you'll get the search text and it's searching because these two variables are here it gives you this automatic initializer again the last thing you need to do is to pass in the binding of search text and the binding of is searching so once you do that you have your fully extracted sub view as your search bar down here your code again looks a lot cleaner whenever you come back to it you can just you know see your search bar here command click takes you down here and start editing this guide to be whatever you want uh again you want to make sure your code compiles and everything runs nicely and click on that you can say one and two and everything looks okay all right that's gonna wrap up for today's lesson um there's not much else i want to talk about because swift ui is so freaking new especially swift 2.0 or swift ui 2.0 rather one tip that i'll give you guys is that if you want to be fast and quick about your swift ui implementation you want to make sure that you're using the preview on the right side if you're still running the things inside of the simulator you're not really taking advantage of the quick iterations of having your preview show you your implementation like on the spot so this is also known as hot reloading i don't know if it's hot reloading in this case but it's definitely very very quick if you want to load different types of previews you can do that as well so the preview is actually this right here it's rendering out the content view so let's say i want to hit the stop on the top right there and let's say i want to present another content view it'll just show up down here and that's down here and you'll scroll down and let's say i want to use the dark color scheme so the color scheme is dark and now this guy should show up like that uh you'll see you know when you're building up an application uh in 2020 or 2021 you're definitely going to want to have dark mode support for your app and you can imagine if you run it in your simulator and try to toggle the dark mode on and off and that gets a little repetitive so having the ability to just access dark mode light mode all at the same time here you can just do it inside of the panel on the right side uh if your monitor is really small here's another tip here's another dip uh i don't wanna go through this i'm not really sure if this works but you can do this as well and you'll get one right here and you'll get this two-faced looking search window and you know if your monitor is really small like sometimes i'll program with my macbook pro that's 16 inch one and even then the screen is too small to show like two tall renders of the preview so what i'll do is i will kind of trick the simulator on the right side or the preview to show me two different previews and you can get everything in just one view another trick that you might want to use is i think it's like preview uh layout and you can say fixed with height so let's see if this is getting a little bit too wild uh 600 and now you can let me just string this down to like 400 uh no that's the height so 600 looks okay maybe 600 for that um again if your screen is really small and you want to see everything in one shot you can utilize this trick right here to make sure everything is visible in one screen like that and again these are just various tricks to help you develop your ui faster and just make sure things are just smoother okay uh i think that is all i want to say if you guys want to download the code for today's project it's going to be available down in the description below with that link if you guys want to learn more about i guess ui kit and swift you can check out the courses down below as well i feel like i'm going to put out swift ui courses and whenever the beta of swift 2.0 so ui 2.0 is out still i think today it's like beta 6 or beta 7. uh maybe i'll wait for the gm release of xcode and then i'll kind of finalize my my plans on which courses i want to build out uh some ideas that i have currently is to work on like an instagram style social media thing with so 2.0 that's what ui 2.0 and then um maybe i'll talk about core data uh how to use firebase um and maybe icloud cloud kit and there's just a bunch of things i want to kind of teach you guys how to build out in the future and you know most of the lessons will be like today it's very easy it's really fun once you get the hang of you know how how to construct your swift ui views okay uh that's all for today and hopefully i'll put out more videos during this this slow slow pandemic season okay bye guys

Channel: Lets Build That App

Views: 24,301

Keywords: ios, swift, development, tutorial, learn, xcode, programming, code

Id: vgvbrBX2FnE

Length: 41min 16sec (2476 seconds)

Published: Wed Sep 02 2020