Implement a custom and reusable search bar | SwiftUI Crypto App #10

[Music] back everyone we are cruising through this app we have our images downloading we have our coin data downloading and in this awesome video we're going to set up a search bar now we're going to save some of the logic for actually filtering when we type in the search bar for the next video but in this one we're going to focus a lot just on the actual visual the ui aspect of our search bar because we're going to create a custom search bar that's going to look really cool and fit the theme of our app we're also going to make it so it is reusable so we can use it on more than just one screen all right welcome back everyone i am back in our xcode project of course in the last video we set up our file manager so that we could save images to the device so that we don't download the same image twice and here i have a final version of our app so we've set up pretty much this whole list here but we have not yet set up this bar here this search bar so that's what we're going to do in this video and and it is pretty simple but we're just going to set it up quickly add some formatting and then connect it into our view model all right so let's jump in to the home view let's click resume and it's actually going to go it's going to go above this list so between the header and the column titles here but we're going to use this search bar on a couple different screens in our app we're going to use it on this screen as well as another screen where we can type in to add coins to our portfolio so because we're going to reuse it i don't want to put it inside the home view we're going to make it its own view and we're going to add it into our components folder here on the right so on this components folder i'm going to right click it create a new file it's going to be a swift ui view and i'm going to call this search bar view click create click resume once you're inside here so let's start out here with a simple h stack all right let's add on the left side let's add an image with a system name we're going to use a system icon and it's called magnifying glass again if you are unfamiliar with the system icons there's an app called the sf symbols app which you if you just google fs symbols app it comes directly from apple it comes right from the apple homepage and you can download the app for free it basically has all of the potential icons that come default in xcode and we're just going to use the one called magnifying glass which is this plain little magnifying glass here but when you're building your apps this comes in handy because there are so many different icons that we can use and it's super helpful to use these built-in icons because they're also resizable and we can change their colors so if you're just starting out and you don't have a professional designer on your team i highly highly recommend using the built-in symbols that come with xcode right so we're going to use the magnifying glass here and let's make it gray so let's give it a foreground color let's use color dot theme dot a secondary text on the right of the magnifying glass let's add a text field this is where we're going to actually type in the text and let's use the string protocol and binding and the title here is actually placeholder so let's make it say search by name or symbol dot dot and then we need to bind this text and we're going to bind it into our view model in one second but for right now at the top here let's create an at state var we'll call it search text of type string and we'll set it equal to a blank string to start we will bind it into our text field so we'll say money sign search text and we should see the text field now pop up all right let's add a little bit of formatting so on this whole h stack i'm going to give it a font of headline and then around the edges let's add some padding and then after that padding let's add a background so we'll say dot background and the background is going to be a rounded rectangle we'll give it a corner radius of maybe 25 and let's change the color so that it is dot fill with color dot theme dot the background color and then i want to add a little bit of shadow so we can see where the background actually ends so let's add a dot shadow let's use the color radius completion here i'm going to put these on separate lines and we'll leave this as 10 x is zero y is zero and the color right now it's black which we can see it looks really strong um it's almost too strong to look like natural in our app so let's use instead color dot theme dot accent color and that's also pretty strong so let's call it dot opacity with maybe 0.15 so it's like a very light shadow which we can see here i'll zoom in a little bit for you guys there is a little bit of shadow outside the edges of this that's where we can and that's why we can see where it ends and then finally after we had this background let's call some padding just to push it in from the edges and this is looking pretty good all right so if i click the play on the simulator here and i go to start typing i want to make sure that this typing text here is actually our accent color as well so on the text field let's give it a foreground color of color dot theme dot accent and we can't really tell the difference because our accent color is black when we're in light mode but this is now the accent color so if i actually switch let's switch it to uh dark mode so let's actually switch our app here to dark mode because we'll see it a little bit better we'll do color scheme dark when we start out the text in the text field is gray but as we type it's actually going to be our accent color which is pink when we're in dark mode and when we do start typing we get this pink text i want this magnifying glass to also light up to be that color that pink color so on the magnifying glass we're going to change this color here we're going to we're first going to check if search bar text dot is empty so if there is no text in the search bar then we're going to use secondary text otherwise we're going to use color dot theme dot accent alright so now if i start typing the magnifying glass will turn pink as i type and then if it goes back to blank it will go back to gray alright the next thing i want to do is when we start typing i want to have a little x pop up on the right side of this search bar so that we can like click the x button to clear out this text if we want to that's just like a pretty common ui feature that i think users expect these days like a clear button so on this text field let's add an overlay and in the overlay we're going to add an image with a system name and this time i'm going to jump into our sf symbols app i'm going to type in xmark and we're going to use the xmark.circle.fill so i can right click it and copy the name and jump back into xcode xmark.circle.fill all right let's give it a foreground color of color.theme.accent because this is only going to show up when we are typing and when we are typing it's that pink color so we want this to be pink as well let's align it to the right side of the text field so on the overlay we can actually add an alignment of trailing now it's over here on the right let's give this image a little bit of padding so that the tappable area is a little bit bigger the frame and because the padding now pushed into the left let's offset it back to the right a tiny bit so we'll call that offset and i'll make the x of 10. we don't need the y here all right so if i click add a background color onto this which we're not going to use well i'll just do color.red i just want to show you guys that i added this extra padding because we're going to add a tap gesture onto this image and if we don't have this padding and it's offset if i comment it out the tappable area is really really small and it might get frustrating for users to try to tap this little tiny x and maybe if it was happening like over here it might not work so by adding this extra little padding the tappable area is now much bigger and it's going to be a better user experience and let's get rid of the background color quickly and we're going to add one more we'll call that opacity and if and we're going to check again if the search text is empty we'll say search text dot is empty if it's empty opacity will be 0.0 because then we don't need the x to show but if it's not empty we'll do 1.0 all right so in right now it's not showing if i type any letters it's going to be showing if i go back it's now gone so that's working perfectly and finally let's add a tap gesture onto it so on the image so we're going to do it on the image not on the text field on the image down here we'll add a tap gesture and the first thing we're going to do when we tap the image is set the search text back to a blank string so we'll say search text equals blank string let's test that out let's type some text in here let's tap it and we're back to our starting state perfect and let's just make sure that it looks good in both light and dark mode so going down to so going down to the preview here i'm going to add a group open the brackets let's copy and paste this twice let's make the first one in light mode let's also give it actually preview layout dot size that fits because we don't need like the entire screen for this and we'll stop the live preview here cool so we can see that it looks good in light mode and it looks good in dark mode as well and finally uh we actually want to change out this search text so instead of creating this at surjex here we want to connect it to something else in our app and when we add the search bar view we are actually going to be in the same environment so we could pull out the environment view model and access it directly with the at environment object and call our view model and then pull it directly from the environment and that would be great but that would kind of limit the reusability for this search bar view because then the search bar review would only be allowed to be used in environments when we have that environment object available so to make it a little bit more reusable right so instead of creating that environment object we're just going to change out this variable here and make this binding so we're going to bind to the environment object but we're going to do it outside of this view and all we need to do now is just get rid of the initial blank string here and this will now be connected into the rest of our app so the code still stays the same here except now we can add the search bar view in any view or environment in our app that just has a string that we can bind to that's much more reusable in our app so scrolling down let's just fix the previews quickly let's click fix on both of these and we don't actually need this to work so we're just going to call constant here and we'll make it a blank string for both of these all right so now every time we add a search bar view we just need to bind to a search text which should be a string and let's jump into our home view click resume here and above the column titles we are going to add a search bar view open the parentheses and we need a binding string for this search text so we're going to put the so we're going to actually put that binding in our view model here now so the home view is reliant on having an environment object and that's okay because this home view is specific to having this environment but our search for our view we didn't want to have it to rely on the environment object so instead we made it binding to a string and then here we're going to connect it back into our view model i hope you guys understand the difference there it's very subtle but the search bar view is much more dynamic now and universal to be used throughout our app so in our home view model i'm going to right click jump to the definition let's create an at published var let's call it search text of type string and let's set it equal to a blank string for a second i'm going to click the back button i'm going to go to the search bar view and let's now bind it so let's and let's first press command shift k to clean and rebuild our code again that's the product clean build folder and now let's bind it to that new variable so in this search text here we're going to use the money sign for binding we'll call the viewmodel for vm dot search text that we just added click resume on the canvas and if we did it right we should now see that search bar pop up awesome so i hope you guys now see this search bar as well and if i click into it we can type and when i type the text is the accent color the x mark shows up if i click the x it then goes away i'm going to run this quickly on a actual simulator so let's click play to run it onto a simulator a couple small changes that we want to make because when we run on a simulator as you'll see in a second we actually need to deal with the keyboard as well so if i click onto this to start typing the keyboard should pop up and if the keyboard does not pop up you should be able to press command and k to force it to pop up in the simulator we can also click on the i o up here go to keyboard and then toggle that software keyboard so the first thing i notice here is that we get this auto correct here that comes by default i guess apple wants us to use this when we're typing these cryptocurrency names chances are they're not part of the standard english dictionary so let's disable this auto correct here and we do that very simply by going into our search bar view and on the text field i'm just going to do it let's do it after the foreground color let's call dot disable auto correction true i'll run it one more time let's start typing and when i click on this you can see that that auto correction bar is now gone which is what we wanted this looks a little better because it gives us a little more screen to actually view the list as we're typing and then if we're typing let's just type in something here if i click the return button it will dismiss the keyboard which works but if i click this x button it will not dismiss the keyboard and i actually want that x button to also dismiss the keyboard so to do that we need to create an extension for our application and this code is a little funky but it is just common you can find it on stack overflow we're gonna create an extension so in our extensions file let's right click create a new file this will be a swift file and we're gonna extend ui application let's click create in here we'll create an extension for ui application and we actually don't have access to it so we need to import swift ui we'll extend ui application i'm going to create a func called end editing open close parenthesis open the brackets and in here we're going to send action and we're going to use the hashtag or the pound sign selector and in here we can add an objective c function and we're going to call ui responder dot resign first responder this will basically dismiss the keyboard and any other editing on our device um two will be nil from is nil and four is no now this little bit of code even i just like google and find online this send action is not something that we are doing pretty much in our app all you really need to know is that when we call in editing it's going to resign the first responder which is basically in our case the same thing as dismissing the keyboard so now all we need to do is call uiapplication.end editing let's jump back into our uh search bar view on the tap gesture before we set the search text equal to a blank string let's also call and let's press command shift k to clean and rebuild and then in here let's call uiapplication.shared this is a singleton instance of the ui application and then let's call dot end editing which is our new function let's click play one more time on the simulator and this time if we are typing let's type something and if we click this x button hopefully it dismisses our keyboard which it did it's the exact function that we wanted to happen all right guys we now got our search bar set up but of course when we are typing it's not actually doing anything in on the list here so in the next video we're going to add some filtering so so that when we do type we can actually filter for the coins that we are searching for all right guys thank you for watching as always i'm nick this is swiffle thinking and i'll see you in the next video [Music] [Applause]

Channel: Swiftful Thinking

Views: 1,858

Keywords: SwiftUI search, SwiftUI search bar, SwiftUI adding a search bar, SwiftUI add search, how to add search SwiftUI, how to add search bar swiftUI, add search bar SwiftUI, SwiftUI textfield, SwiftUI textfield for search, Textfield for searching swiftui, searching in swiftUI, searchbar in SwiftUI, custom search bar SwiftUI, SwiftUI custom search bar

Id: p-arH7VO4jk

Length: 18min 20sec (1100 seconds)

Published: Thu Jun 03 2021