iOS CoreAnimation (六) layer属性：阴影，边框，圆角，masksToBounds

                   嗯，圆和椭圆还不错，但如果是带圆角的矩形呢？我们现在能做到那样了么?        ------Steve Jobs

这篇文章 相对来说 是日常开发最常用的，因此简述

 

  //demo 1

 

    overridefunc viewDidLoad() {

        super.viewDidLoad()   

       

        let blueView =UIView(frame:CGRect(x:50, y: 200, width:350, height:300))

        blueView.backgroundColor =UIColor.lightGray

        

        let yellowView =UIView(frame:CGRect(x:-50, y:-50, width:200, height:200))

        yellowView.backgroundColor =UIColor.yellow

      

        blueView.addSubview(yellowView)

        view.addSubview(blueView)

 

//请先跑一遍，再加上!（重在对比）：   blueView.layer.masksToBounds = true

//图层对应视图的方法效果一摸一样：    blueView.clipsToBounds =true

 

//再跑一遍，再加上 ：

 

· yellowView.layer.cornerRadius =15

        blueView.layer.cornerRadius =15

//解释 cornerRadius ： 角落的半径。就是说，圆角的半径是多少个单位

 

//再跑一遍，更改5个字母：把 

let yellowView = UIView

改成 

 

let yellowView = UILabel

其他都不变。

label右下角的圆角没了！咋回事？

深入解释 cornerRadius ：By default, the corner radius does not apply to the image in the layer’s contents property; it applies only to the background color and border of the layer. However, setting the masksToBounds property to true causes the content to be clipped to the rounded corners.

 

看见了吧，意思是，圆角对于layer的contents属性（我估计，实际上 只要不是UIView，且是UIView的子类，就：）不起作用。如果想让内容也圆角，就设置 那啥的属性为true

//好，再跑一遍，加上：

yellowView.layer.masksToBounds =true

//OK了

}    

另外，如果想创建有些圆角有些直角的图层或视图时，需要一些不同的方法。比如使用一个图层蒙板(稍后会讲到)或者是CAShapeLayer(第六章『专用图层』会涉及)。

 

//再跑一遍，加上：

 · blueView.layer.borderColor = UIColor.red.cgColor

        blueView.layer.borderWidth =10

 

     //看看发生了什么。  图层边的绘制。这条边线(也被称作stroke)沿着图层的 bounds 绘制，同时也包含图层的角。  边框是绘制在图层边界里面的，而且在所有子内容之前，也在子图层之前 !

 

       为了验证在子图层之前，再跑一遍，我们加一句话来验证：

`     blueView. clipsToBounds = false

 

demo2： 关于图层阴影的应用

首先说明，视图的阴影操作 是通过图层间接改变了阴影（之前系列的改变也一样）。因此，以后的方法只写CALayer中定义的方法、属性。

 

 1、shadowOpacity 属性

范围：在 0.0 (默认，不可见的阴影) 和1.0 (完全不透明的阴影) 之间的浮点数。只要设置为一个值（不是默认值），就会显示一个有轻微模糊的黑（默认）或灰色阴影稍微在图层之上（这里标记一下，是稍微之上，一会解释）。若要改动阴影的表现，你可以使用CALayer的另外三个属性:shadowColor， shadowOffset和 shadowRadius。

第一个是阴影颜色不解释

第二个是阴影偏移量：

·shadowOffset  是一个 CGSize 的值，宽度控制这阴影横向偏移的位移，高度控制着纵向便宜的位移。 默认值是 （0,-3），意即阴影相对于Y轴有3个点的向上位移。大家注意到macOS里的阴影都是在下面很厚，在上面没有，在两边很薄，在iOS里，因为之前说过的 两个系统排版的坐标翻转问题，使iOS默认的是上方阴影。。。所以在加阴影时要手动把偏移给矫正过来

 

第三个是阴影模糊度：

 

 

值是0的时候，阴影就和视图一样有一个非常确定的边界线。当值越来越大的时候，边界线看上去就会越来越模糊和自然。苹果自家的应用设计更偏向于自然的阴影，所以一个非零值再合适不过了,默认 3.0。（3个点。点，像素的关系看以前的文章） 

 

另外，我们知道 加边框是沿着图层的bounds绘制，但是阴影是沿 contents 的外形（如果有的话）绘制的！为了计算出阴影的形状，Core Animation会将寄宿图(包括子视图，如果有的话)的轮廓考虑在内，然后通过这些来完美搭配图层形状从而创建一个阴影。 

 

因此，当阴影和裁剪扯上关系的时候就有一个头疼的限制:阴影通常就是在Layer的边界之外，如果你开启了 masksToBounds 属性，所有从图层中突出来的内容都会被剪掉。怎么解决呢？

用两个视图。一个画阴影的空图层，一个用裁剪的内图层。

 

 

class ViewController: UIViewController,CALayerDelegate {

    override func viewDidLoad() {

        super.viewDidLoad()

      

        let frame = CGRect(x: 80, y: 100, width: 180, height: 150)

        

        let shadowView = UIView(frame:frame)

        let blueView = UIView(frame:frame)

        

        blueView.backgroundColor = UIColor.blue

        shadowView.backgroundColor = UIColor.white

        //backgroundColor默认是nil，如果也没有其他设置的话，则由定义，没有阴影，所以必须设个非clear的 BGColor

      

        let yellowView = UILabel(frame: CGRect(x: -20, y: -20, width: 100, height: 100))

        yellowView.backgroundColor = UIColor.yellow

 

        blueView.layer.cornerRadius = 15

        blueView.layer.masksToBounds = true

        blueView.layer.borderColor = UIColor.red.cgColor

        blueView.layer.borderWidth = 3

 

        shadowView.layer.cornerRadius = 15

        shadowView.layer.shadowOpacity = 0.5

        shadowView.layer.shadowOffset = CGSize(width: 0, height: 5)

    

        blueView.addSubview(yellowView)

       

        view.addSubview(shadowView)

        view.addSubview(blueView)

    }

}

跑起来看看，目标实现了