Learn how to add drop shadows to views.
- [Instructor] User interfaces often use drop shadows to make them look less flat, but it isn't obvious how to add one to a view on your app. In this tip, I'll show you how to make drop shadows using the CA layer found in UI Views and a few tricks with them. I've set up a quick starter file with two buttons on the main storyboard. You can download this from the exercises. I set up several actions for these buttons we'll use in our demos as you'll see here in the view controller. Now all UI Views have a special property layer of type CA layer.
The layer property is great for many quick special effects, some of them built-in. Drop shadows are one of those built-in effects. You'll find I've put together a little basic drop shadow method in the code here so scroll over there and all it does is it takes a button and adds the drop shadow effects to it. There are four basic properties I'm going to add. So the way you do this is you're going to actually put the button in first, call its CA layer, which is going to be called layer, and then you put the property you want.
There are a whole bunch of them and here's the list of them. I'm going to start with the opacity. We'll set that to 0.7. Now this property defaults to zero. The shadow is always there but hidden. To show a shadow, change the opacity. We can also change the radius of a shadow. This affects how blurry the shadow appears. Add this to basicDropShadow. We're going to do button.layer.shadowRadius and I'm going to make that 5.0.
There you go. And then I'm going to add another property, the shadowOffset. Add this to basicDropShadow. Again, button.layer and then we're going to do shadowOffset. Now this takes a CGSize. So I'll pull up CGSize and I want to point out what you're going to do here. In the width, to go right, you'll have a positive number.
To go left, you'll have a negative number. In the height, if you want to go up, you'll have a negative number. If you want to go down, you'll want a positive number. So I'm going to go here and for the width, I'm going to put 5.0. And for the height, I'm going to put 2.0. So I'm going to go to the right and down. And that gets me that. I'm now going to go over here to viewDidLoad and I'll put this basicDropShadow into work. So I'm going to go basicDropShadow and button.
I'm going to use button1 for this one. I already set up an outlet. BasicDropShadow, I'll use button2 and now I'm ready to run. I'm going to set this for an iPhone XR and I get my buttons and you can see the drop shadow underneath them. You can push the button and nothing special happens. Let's do something so that we get a little bit of an effect when we push down the button.
It makes it look a little more realistic. So I'll go ahead and stop the app and I've got two places I'm going to do that. When you hit the TouchedDownInside event, which I set up some IBActions for here, you can go ahead and change things around. The first one I'm going to change here is the idea of changing where the drop shadow is. And the button is going to be called sender here so I'm going to put sender.layer and we'll change the shadowOffset to be zero zero so it's directly underneath the button.
And I'm also going to shrink the shadowRadius here so it's not as prevalent and that'll make it look like when I'm pressing the button, the button is actually moving down. Another effect you can get which I'll do with the button2TouchedDownInside is to do something where you make the button glow when you touch it. So I'm going to put here sender.layer and use a new one we haven't touched yet which is shadowColor and you can change the color of your shadows as well.
And I'm going to make it yellow. Now you have to be a little tricky with getting colors. The way I like to do colors here, because this is really a CG color, is I do UIColor then put my UI color which in this case is yellow and then put after it cgColor and that gets you a cgColor from a UIColor. It's a fast way to get a lot of colors done quickly. And then finally I'm going to add a sender.layer and set the shadowRadius to be much bigger so it blurs more out and I'll set it to 50.
Now I want to reset that shadowColor and make sure I keep it black so I'm going to go back down here to basicDropShadow. I'm going to put button.layer.shadowColor and we'll put that as UIColor.black.cgColor. All right, now I can go ahead and run this. And I got my two buttons again.
If I push this one down, you'll notice what happens is it looks like it's moving down because it's losing its shadow. On button two here, I push it down and it starts glowing from the back, again looking like it loses it. There's a lot you can do with drop shadows though. With these few simple properties, you can add a whole new layer of cool to your apps.