Skill Level Beginner
- [Instructor] UI doesn't have to look like a rectangle, you might want a different shape for your buttons, you can do that with layer masks. Let's learn how to set these up. Download the example files, if you go to the main storyboard you'll find an app with two square buttons, if you head over to the assets, you'll see that I have a thumb up and a thumb down icon, both regular and invert. Now the color here doesn't matter, as we'll talk about in a minute, head to the ViewController.swift code.
I've already added the images from the assets folder here as constance. I've also created a function for you configureMask, which you can find down here, and we can get rid of this now. And that's where we'll add masks to buttons. A mask is an area, you know or in our case a CA layer, whose opacity determines visibility in an underlying layer. Areas that are solid appear where areas with an alpha of zero disappear. Masked layers are layers in CA layer and are CA layers themselves.
So you're going to need a new CA layer, so let's just do let masklayer=CALayer, next we're going to set it's frame, this frame will be relative to the view it's in, which is the button. So I'll start with an origin of zero, zero here, so it'll start the upper left corner of the button. So do masklayer.frame.origin=CGPoint, and I'll pick the float one here and this could be zero, zero.
I'll make the frame the same size as the button and I'm going to come back to this in a minute, but let's just do this, masklayer.frame.size = button.frame.size. Once you have a frame set the contents of the mask layer to an image, this is a CG image, so I'll be using the image's CG image property to get one.
Now I have a parameter here called image and I'll use that, so I'll do masklayer.contents =image, and again this is a CG Image, so I can use the property here again, and that gives me a CG Image, that's now in those contents. And finally, I'll add this to the mask layer in the button and that'll be button.layer.mask, and that'll be mask layer.
There you go, now I'm going to use this method to configure both buttons. For the, on the layout I defined, the size of the button is not known until the sub-views are laid out. I need that for the mask to be correct, so that button.frame.size is correct to make masklayer.frame.size correct. So I'm going to do this in vewDidLayoutSubviews, and I'm going to configure the mask to start this out. So I'll do configure mask, and then button will be the upButton, and I'll use the upImage here, and then I do a configure mask, and same thing for the down button.
Down button, down image. I'm going to change this mask when we tap a button. There's two ways to go about doing this, I can directly change the button's mask contents. So go up to up buttons action here, and if I wanted to do it directly to that button, I can do this as sender.layer.mask.contents and then make that equal to inverseUpImage, and again make sure you put that CGImage on there, 'cause this is a CGImage.
So that's the up button and now I'll do the down button, and I have to actually explicitly mention the down button here. So downButton.layer.mask that needs a question mark there, contents =downImage.cgImage, like so.
And I can do it also with the configure mask method, because the mask is, in configure mask, completely replaced so that'll work as well. And is probably a better way of doing this. So I'm just going to do configure mask here, for the button here I'll put upButton and the image will be upImage. And then I can do a configure mask and the button can be downButton or sender and we can use the inverse down image.
Okay, and with that we're ready to run. You can use any simulator and I'm going to use an iPad 11" for this. And you can go ahead and run that. And you get two up and down, instead of our squares you get the thumbs. And I can click one of these thumbs and you get the inverse image, I click the other one, you get the inverse image. Now I'm going to stop the app again and I'm going to show you one more thing we're going to do here.
I'm going to go back to the main storyboard for a second, pull up my properties, I'm going to click on this and I'm going to change the property here, of the background to something different, I'm going to make this tile floor and I'm going to make this wood table. So now I've got two actual images here, I'm going to run it again. And you can see you get those photos mask, so you can do all kinds of fun things with this.
And you can hit like this, it contorts the, doing the fun. That's the very basics of CA layer masks, with those few lines of code you can make masks to make any shape, from icons like these to circles and squares. Since masks are a CA layer you can even make more complex masks, by masking the masks layer. Play around with masks a bit, you'll find them a very useful tool to make any view something other than a rectangle.