Swift UIButton cornerRadius + shadow

Most of the time,We all want the button design style more in line with iOS,This will make the application interface does not look so jump,Even if the design does not look good,Nor was incompatible with the system。

"I'm not a designer,I don't know how to design beautiful style-but as close as possible to the system is not a wrong choice。 ” —— by Router

So it is for UIButton,Rounded corners + shadow should be the norm。

Put a picture

Obviously,This is the cheapest way - in fact the most expensive。It requires you to do a series of rounded picture for each button,While this eliminates the need for real-time rendering code hardship,But you need to do a lot of preliminary work,For example, by default, a background,By highlighting is a background and so on ......,There are different resolutions! (If you do the universal application,This number is then doubled again)。

Another drawback is that you use the automatic layout - buttons and the like are not scaled when,Day had fallen down。

So,this is not my choice。

With code

Obviously,We still need to do it in code,Then use cpu time rendering。

Common version

Common rounded version is this:

This is okay,But you need to know,If you add a button to the background color,That layer can not do anything。

- Layer does not take effect to subview。

At this moment,We would add the phrase to make the entry into force of the fillet:

We just need to cut more corners like。- Then trouble comes,You will find that adding shadows is NOT working,such as:

- Because we put out more things cut off!

There is a saying in iOS 7 After not required layer.masksToBounds = true Can fillet,However, in certain circumstances, or some different,Sometimes it does need,sometimes not ,By the time my own iOS 9 Still need to show a rounded phrase - but set the operating parameter directly in the storyboard where you do not need。

And,If you are a page button many words (30 or more),Since then layer.masksToBounds = true LeadOff-screen renderingIt will greatly slow down the speed of the system,reflected in the system on the animation drop-frame。

Layer's backgroundColor

In fact, layer itself also has a background color,We can use it for button background color,So this, then you can achieve the rounded corners and shadows!

Such,Shadow will not be cut off。

At last,We also need to layer rasterization,So as to let the cpu cache when rendering has rendered good content for reuse。Thus,Can greatly enhance the efficiency of the system animation,No frame dropping the。

--of course,If you own relatively small number of button,That need not bother。


Original article written by Gerber drop-off:R0uter's Blog » Swift UIButton cornerRadius + shadow

Reproduced Please keep the source and description link:

By R0uter's Blog

The non-declaration,I have written articles are original,Reproduced, please indicate the link on this page and my name。

Leave a Reply

Your email address will not be published. Required fields are marked *