Skill Level Beginner
- [Instructor] In the good old days, Apple used a lot of rounded corner buttons. Today, most developers use several images to get the effect of round buttons. The CALayer of UIButton does have a feature for you to easily get rounded corners, and even circular buttons. Download and open the starter file. It doesn't do much but look pretty. Head over to the storyboard, like I have here, and you'll see that there's a series of rectangular buttons, in the stack view, and one square button. There's also an image here, and if you got like I have here, with a question mark, all you need to do is go over to assets, hit the image, and then go back to the storyboard, and it'll clear itself up.
Now, I've also made outlets for the square button and for the stack view that's here. But, I did not do that for each of these individual buttons. And you'll see why in a sec. Go ahead, and head over to the view controller class, and we don't need attributes anymore, so we'll close that up. We're gonna do all our work today towards the middle here, in the viewDidLayoutSubviews. You'll see why shortly.
There's one method to make a rounded corner, and that's called corner radius. And again, it's on the CALayer, so it's on layer property of the button. And so, whatcha do, is you set the radius and points to describe the rounded area. So, I can do square button, I'll use the square button first, .layer.corner radius, and you just set it to some number, I'm gonna set it to 15, for an example. And that's all you need to do, I'll set my simulator iPhone 8+, which is all ready to go, I'll go ahead and run this, and the square button in the storyboard is now a rounded corner button.
Kay, go ahead and stop the app. Now, rounded corners will work even better as a relative size to the smallest dimension. Usually, that's the height. So, for example, I can change this line that we have here to look at the height of my button, or the height of the frame. So, I'm gonna go ahead and make this square button, .frame.height, and then I'll set a multiplier to it, and I'll go 0.20 or about 20% of the height.
I can go ahead and run this, and you get your rounded buttons. Now the neat thing about this is that it will stay relative to the size of the button, if the button sizes changes, for example if you move from portrait to landscape. That's why we put it in viewDidLayoutSubviews, because when you're dealing with auto layout in particular, I won't know my height until I'm here, in viewDidLayoutSubviews. Now, another thing you can do is consistently handle buttons in a stack view.
So, we've got our stack view buttons here and now, I'm gonna get them rounded out. And the way I'll do that is like this, I'm gonna shut off my app, and I'm going to go through and all the arranged views in this subview. And so I can iterate through those, for view in stackView, and there's the arrangedSubview, views, which gives me all of the views in the stackView in order.
And then, inside of that, I'm gonna convert this view, to a button. If let button equals view conditional cast to UIButton. And what this'll do, is if it's a button, I'll get a button. If it's not a button, that casting goes nil, and this will not work. And, it'll just pop past the if statement, and it'll be false.
So, inside of here, I now have this constant button, and I can now change the corner radius on it. So, I can do button .layer.cornerradius=button.frame.height. And again, I'll make it 20%. Kay, go ahead and run that. And you get, rounded corners on the stackview buttons.
Now, I'm a big fan of perfectly rounded ends, and you can get that by changing to 50% of the width. So, stop the app again, and just change this 20, so instead of .20 I get .50. Run that again, and your arranged subviews, all have rounded corners. What's even cooler is if you do that to something with an equal width and equal height and short a square button, you get a circle.
So, I'm gonna go back up here, change that to 0.5, run again, and my square button becomes a circle. Now, there's one more trick I wanna show you. Stop the app, and head to the main storyboard. Head over to the order button, and pick up attributes. Go to properties, and go to the background image. Change that to Pizza Marg. Go ahead and run that.
You'll se what happens is you get a square button again, even though we told it to be a round button. Corner radius only applies to the background colors, and borders, by default. In order to mask the background, you need one more line of code. So, go ahead and stop this, and I'm gonna go back over to view controller, and under my square button, I'm gonna put squareButton.layer and there's a property maskstoBounds, and I'mma set that true.
It's by default false. Okay, and now I can go ahead and run, and you get a round button. So, you can have some really cool effects with this. There's one more thing I wanna point out about maskstoBounds though. It will kill any dropshadows you use. For example, you'll see that I have a method here, imageShadow, and buttonShadow. I'm gonna go back up here and put that in here.
So, I'm gonna put buttonShadow, and we're gonna make that the square button, and I'll put them on these two so you can see that it actually works, buttonShadow, button. Stop that and run it again. And you'll see you've got a shadow on these buttons over here, but the order button doesn't have a shadow, maskstoBounds gets rid of everything outside of the circle here and that's gonna be your shadow, among other things.
In order to use both, you'll need a much better understanding of masks, which I'll get to in a later tip. So, the good news about all this is instead of messing with a lot of assests, if you need rounded buttons, you can definitely explore CALayers corner radius as a very fast, and efficient option.