How to use Mask in SwiftUI to create a 5-star rating button | Continued Learning #8

what's up everyone welcome back i'm nick this is swiffle thinking in this quick video we're gonna look at the mask modifier now this is a little less common but it's a lot of fun it's really useful so i wanted to introduce you guys to it quickly what we're going to do is build a quick little rating component where we can rate something from 1 to 5 stars you've seen this in so many applications but we're going to look at how to use it with a mask modifier so that we can animate the mask on top of the actual view if you're totally unfamiliar with masking it's actually pretty simple basically we have one view that is on the bottom then another view that's on the top and then we can mask the top view so that it conforms to the same shape as the bottom view so in this video we're going to have a bottom view with some stars and the top view which is going to be a rectangle we're going to mask that rectangle to take the shape of the stars it sounds a little complicated but it's actually pretty easy to implement we're going to walk through i'm going to make it as easy as possible for you guys and the end product here is definitely a usable component that you could definitely use in your production apps i'm excited i hope you're excited let's take a look welcome back everyone i'm in xcode of course let's right click the navigator create a new file it's going to be a swift ui view let's call this one mask boot camp go ahead and click create and once you're inside click resume on the canvas let's get coding this is gonna be a fairly simple easy video um this is not something that you use a lot but i wanted to just briefly cover it because not a lot of people know about it and it's pretty powerful in swift ui so let's start out our view here very simply let's create a z-stack and in the z-stack let's add a h-stack inside the h-stack let's add a image with a system name let's give it a star dot fill we see we can see our star on the screen let's make it a little bigger let's give it a font of a large title let's give it a foreground color of dot gray and then i want to put five stars on the screen so let's actually do a four each and we're going to use the range we're going to do from a one dot dot less than six so from one to five click enter this will be the index we're going to pass in the image with the font in the foreground color here so now we should see five stars on our screen and we're going to build out a little rating indicator that you've seen on so many apps so when there's a rating i want it to be highlighted up to that rating so if it was maybe three stars i want the first three stars to be yellow and then the last two would be gray instead of them all being gray so let's do an at state var let's just call it rating of type int and right now let's just set it equal to three and first let's do this the beginner way without the mask and we'll say we'll change the foreground color based on the rating so we'll say so let's start with if rating is equal to the index so remember this index is the same number as the star number so index 1 two three four five so if the rating is equal to the index so if the rating is three and the index is three question mark we'll do color dot yellow otherwise color dot gray if i look at the canvas i'm going to zoom out here a little bit just to make this bigger and if you look at the canvas we can now see that the middle star is yellow because the rating is 3 and that index is 3. but we wanted to actually be all of these stars up to and including number three so we could just change this rating to uh greater than or equal to the index so now we have the three stars if i change this to two stars this should update two stars we can make it four stars and click resume so all we need to do is change the rating and then we'll change the number of the stars so we'll do we'll add an ontap gesture when we tap on a star let's just set the rating equal to the index so if i click resume and i start clicking around here we can now change the rating and this works perfectly if i zoom in here and i really look at this though you'll see that when i click from 1 star to 5 stars it jumps to 5 stars and it jumps to 3 stars it jumps to 1 star it doesn't like animate to 5 stars so this looks fine and a lot of apps are probably fine with this ui but we're practicing here to be expert developers and we can make this look even better by using a mask instead so i'm going to start by making this entire h stack a variable so at the underneath the body we'll do private var we'll call this stars view of type some view open brackets i'm just going to cut this h stack here paste it into the stars view and i'll add a stars view which is that same view back up here let's click resume should still work looks the same let's take the logic out of here and just leave this back to color gray so all the stars are always gray so what we're going to do on the stars view is add a dot overlay and now i did a whole video on overlays so you should understand how they work it's basically a view that is going on top of this view and we can see right now it just has placeholder but for the overlay content let's make it a rectangle and the rectangle is black right now and it's covering all of the stars and what we can do is take this rectangle and mask it to the stars view so the rectangle takes the shape of the star's view so on this rectangle i can call dot mask and then we need a masking view here and i'm going to pass in stars view and now our black rectangle so if i comment this out we have a black rectangle if i add the mask that rectangle masks into a black box that basically looks like the stars if i change this with a foreground color of yellow we can now get our yellow stars back and now we just need to update the width of the rectangle so that it is it is as wide as basically the rating needs to be so if it was 1 star we want the width of the rectangle to be one fifth of the full size so if i take out this mask and we just look at it again right now it's a hundred percent of the size and we know there are five stars so if we had if we had a rating of four we would want this rectangle to be four out of five four fifths of its current size and because we don't know its current size we need to use a geometry reader here so i'm going to delete this mask real quick and let's first add a geometry reader open the brackets geometry in and i just did a video on geometry reader a couple videos back if you missed it definitely go watch that we did a lot of really cool stuff in there this is another example why the geometry reader is so powerful inside the geometry reader we're going to add a z-stack and the reason we're adding a z-stack is because i want to use the alignment and make it dot leading because i want to always push the rectangle to the left side of these stars and that's where i want to start from so dot leading open the brackets and then let's put the rectangle on the foreground color inside okay so we're back we still have a real rectangle and now let's just adjust the width of the rectangle using the geometry so here we'll say dot frame and we'll add with and let's start equal to maybe 200 just so you can see that now we can change the width of this rectangle if i put it to 100 try again it now gets a little smaller all right and so we're just going to change the width based on the rating and we want the width to be the current rating so four divided by uh five because we know there are five slots here and then times the full width so if it was so four-fifths of the full width so what we can do is rating divided by five times geometry dot size dot width we're going to get a quick error here because this rating is is of type int and we actually need to be a cg float so let's just add cg float and then put the rating inside there so now we can see that the the rectangle is filling up the correct amount because we have one star remaining but change this rating to two and update the simulator or sorry the preview on the canvas we should now see the rectangle is covering two of the stars and now that we have our rectangle working this overlay view let's create a pro let's create another variable to hold that so we'll create a private var overlay view of type some view open brackets let's put the geometry reader the z stack the rectangle inside that overlay view then we can put this back here so overlay view if we click resume it should look the exact same and then finally all we need to do is mask this overlay view to the stars view so we'll call that so we'll add dot mask stars view all right and i'm going to make this look a little cleaner because we have a bunch of different lines here so this just needs to be one line i'm gonna make this all one line so our code is so nice and clean and short i absolutely love it uh and now all we need to do is update for that animation so let's set the rating back down to zero and let's resume the canvas and if i start clicking on some of these stars you gotta click play on the on the live canvas and if i click number one it now highlights yellow and we're using the mask and if i go to three it should update and if i go to five it should update but now we have one quick problem if i go back down to number three it doesn't let me click it and that's because when we're clicking on it now we're actually clicking on the overlay layer because that's on top of the stars view layer so the problem is so the problem is that the tap gesture is on the stars view and since we have an overlay we can't actually we're not actually tapping on the stars view we're tapping on the overlay there is no tap gesture so we could add another tap gesture here but there's actually a better solution and that is to basically just remove the ability for users to click on the overlay layer so on this geometry reader i'm going to add dot allows hit testing and if i read that let me go back allows hit testing configures whether this view participates in hit test operations basically means allowing users to click on it so if i set it to false now users cannot click on the overlay layer but they will still be able to click on the stars view because it will go this will basically be transparent and they'll only be clicking on the stars view and lastly and here's the magic i want to update this tap gesture so that when we update the rating we do it with animation so let's do with animation dot ease in out open brackets and put the rating here and now we have our complete code and i want to really i want to refresh this and i'm going to zoom in here hopefully you guys can see how cool this is this is a very professional looking rating animation now when i click it it animates from the left to the right and fills in the stars so our mask layer is basically changing the width and this looks really really professional so play around with this i hope you guys see how cool this mask feature is we basically just added five stars on the first layer then we added a rectangle on the top and we mask the rectangle to the bottom layer to the star layer and then we're just animating that rectangle on top so that it goes from smaller to larger i think it's just awesome you can do some really cool things with this for example these stars when you add a foreground color you can only add one very basic color like the gray color but since we're using a rectangle for the overlay we can actually customize that rectangle and if you followed my video on rectangles you can add all kinds of cool gradients in there so where we have this foreground color of yellow instead of making it a foreground color we can do dot fill and i'm going to add maybe a linear gradient open the parentheses and let's just keep the basic gradients that's there so red to blue starting on the left ending on the right and i did a whole video on gradients so you could do that on your own time but if i resume this now we have this really cool uh red to blue so you can play around this and get some really cool effects with just a little bit of lines of code now that you know how to use the mask component all right everyone thank you guys for watching as always i'm nick this is swiffle thinking and i'll see you in the next video

Channel: Swiftful Thinking

Views: 1,748

Keywords: SwiftUI Mask, SwiftUI .mask, SwiftUI .mask(), How to use mask SwiftUI, how to use mask in SwiftUI, SwiftUI create a rating, SwiftUI rating component, SwiftUI star rating, star rating SwiftUI, SwiftUI reshape, SwiftUI change shape, How to add a mask in SwiftUI, what is mask in SwiftUI, SwiftUI what is mask modifier, SwiftUI mask not working, SwiftUI animations, SwiftUI mask with animation, SwiftUI rating, SwiftUI ratings, SwiftUI how to add mask

Id: pxx1ueCbnls

Length: 14min 41sec (881 seconds)

Published: Tue Apr 06 2021