Swift-技巧（五）设置圆角的代码

摘要

实现控件圆角的代码时，会不假思索的写 cornerRadius 和 masksToBounds，因为搜索得到的设置圆角的代码就是这样。今天突发奇想，为什么要写 masksToBounds？

打个比方，设置一个按钮的圆角是 5，我会立马写这两行代码：

btn.layer.cornerRadius = 5
btn.layer.masksToBounds = true

呈现的效果上，是没有任何问题的。但是为什么要设置 masksToBounds 为 true 呢？能不写吗？

带着问题，来看一下 masksToBounds 是做什么用的。

`masksToBounds`

看官方解释说 masksToBounds 指示一个可以设置的标识，指定在当前 layer 层的 bounds 区域中的所有子 layer 层是否是被裁剪的。我的理解就是，若设置为 true 那么在这个 layer 层中的子 layer 层超出 bounds 部分就会被裁剪掉。

问题来了，**它是怎么实现裁剪的？**继续看苹果官网的解释，巴拉巴拉…看我的理解是这样的：

先上大白话总结，就是如果这个属性设置为 true，那么它就会生成一个 mask 蒙板，在 bounds 区域内的值为 1，超出的部分就是 0。之后呢，就是把mask 蒙板给盖在 layer 上，混合渲染，是 1 的部分就显示原来的，是 0 的部分就空白，这就实现了裁剪效果，因为 mask 包含了设置的圆角，所以在处理的时候，也会把圆角给考虑进去。

接下来看一下 cornerRadius 是做什么用的。

`cornerRadius`

官方解释说设置 layer 的 background 四个角处理为圆角的半径。

接下来它也说明 cornerRadius 限制，就是仅仅作用到 background(背景) 和边框，layer 中的 contents 不受影响，比如放在它上面的 image。

如果想让 cornerRadius 的效果也作用到 contents 上时，就需要设置 masksToBounds 为 true。

总结

在显示图片的时候，我也确实要设置 masksToBounds 为 true。但是现在看下来，如果要用 masksToBounds 就要明确想要有圆角的 content是属于 layer 的 contents吗？这个 content 超出了设置圆角后的 bounds吗？

如果两个问题的答案都是 true。那必须就要设置 masksToBounds 为 true。

那么那些算是属于 layer 的 contents ？等我验证之后给你详细说

题外话

时间仓促，说的东西可能不全面，在你查看的过程中遇到什么问题，评论区给我留言，我会尽快回复