美文网首页
Swift(十一)CALayer

Swift(十一)CALayer

作者: YvanLiu | 来源:发表于2017-08-17 15:44 被阅读643次

更新:2018.05.24

整理了一下demo:SwiftDemo


UIView是iOS系统中,界面元素的基础,所有的界面元素都继承自它,它的本身是由CoreAnimation来实现的。

  • UIView真正的绘图部分,是由一个叫CALayer(Core Animation Layer)的类来管理的。
  • UIView本身更像是一个CALayer的管理器,访问它跟绘图和跟坐标有关的属性,实际上内部都是在访问它所包含的CALayer的相关属性。

1.CALayer边框

通过设置CALayer的borderWidthborderColor属性,来设置视图的边框。

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = UIColor.gray
        
      
        let v = UIView(frame: CGRect(x: 100, y: 100, width: 200, height: 200))
        v.backgroundColor = UIColor.black
        
        v.layer.borderColor = UIColor.red.cgColor
        v.layer.borderWidth = 2
        view.addSubview(v)
    }

a. 上面代码中,定义了一个视图v,北京颜色为黑色,位置在(100,100)
宽高200。
b. 然后设置视图的边框颜色为红色,边框宽度为2。这里borderColor的值使用的是CGColorRef数据类型。不是UIColor。

2.CALayer阴影

通过CALayer的几个阴影属性来设置阴影效果。

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = UIColor.gray
        
      
        let v = UIView(frame: CGRect(x: 100, y: 100, width: 200, height: 200))
        v.backgroundColor = UIColor.black
        view.addSubview(v)
        
        v.layer.shadowColor = UIColor.red.cgColor
        v.layer.shadowOffset = CGSize(width: 10, height: 10)
        v.layer.shadowOpacity = 0.45
        v.layer.shadowRadius = 5.0
    }

a. 上面代码中,还是上一个例子的代码。

  • shadowColor: 阴影颜色。依然是CGColorRef数据类型。
  • shadowOffset: 阴影偏移度,代码中是(10,10),即向下向右偏移10,默认值是(0,-3.0)。
  • shadowOpacity:设置阴影的透明度,默认值是0.0,取值范围0~1。
  • shadowRadius: 设置阴影的模糊半径,用来实现阴影的模糊效果,默认值是3.0。

3.CALayer圆角

通过设置 CALayer的cornerRadius属性来设置圆角效果

class ThirdViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = UIColor.gray
        
      
        let v = UIView(frame: CGRect(x: 100, y: 100, width: 200, height: 200))
        v.backgroundColor = UIColor.black
        view.addSubview(v)
        
        v.layer.masksToBounds = true
        v.layer.cornerRadius = 100
    }

a. 还是之前的那个例子,添加了layermaskToBoundscornerRadius属性。
b. 因为圆角效果只对视图的背景颜色和层的边框起作用,而不会对视图中内容起作用,所以系统提供了maskToBounds属性,如果将属性设置为true,将会沿着圆角边缘对视图中的内容进行裁切。
c. cornerRadius代表的是圆角的半径,假如将cornerRadius的值设置成正方形矩形边长的一半,就会得到一个直径是边长的圆。

4. CALayer渐变

CALayer 和 UIView相似的是,CALayer也可以嵌套多个子CALayer层。从而实现多样的效果。

如何实现渐变的效果呢?
layer中,添加一个CAGradientLayer渐变层,CAGradientLayer是用来生成两种或多种颜色平滑的渐变效果的。

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = UIColor.gray
        
      
        let v = UIView(frame: CGRect(x: 100, y: 100, width: 200, height: 200))
        v.backgroundColor = UIColor.black
        view.addSubview(v)
       
        let gradientLayer = CAGradientLayer()
        gradientLayer.frame = v.bounds
        
        let fromColor = UIColor.green.cgColor
        let minColor = UIColor.red.cgColor
        let toColor = UIColor.blue.cgColor
        
        gradientLayer.colors = [fromColor,minColor,toColor]
        gradientLayer.startPoint = CGPoint(x: 0, y: 0)
        gradientLayer.endPoint = CGPoint(x: 1, y: 1)
        gradientLayer.locations = [0,0.3,1]
        v.layer.addSublayer(gradientLayer)
    }

a. OK,还是之前的那个例子,直接看下面的定义CAGradientLayer部分。
b.首先我们创建了一个CAGradientLayer实例gradientLayer,然后创建了开始颜色、过度颜色和结束颜色。然后设置grandientLayer的属性。

  • colors: 放颜色值的数组,个数是不限制的,这里只做了三个,你也可以多放几个试试。
    -startPoint: 顾名思义,开始位置,渐变的起点,值是0~1的CGPoint
  • endPoint:结束位置,同上
  • locations:颜色渐变的行走轨迹,0.3表示中间颜色的渐变线位置。

相关文章

网友评论

      本文标题:Swift(十一)CALayer

      本文链接:https://www.haomeiwen.com/subject/whmgrxtx.html