5、UIView及CALayer

UIView

创建View的步骤

1. 创建视图对象
2. 设置frame及相关属性
3. 将创建的View添加到父视图

常用View属性

 let view1 = UIView(frame: CGRect(x: 15, y: 85, width: 50, height: 50))//创建视图对象，并设置frame
 view1.isUserInteractionEnabled = false//是否打开用户交互
 view1.tag = 10//设置tag值
 view1.backgroundColor = UIColor.red//设置背景颜色
 view1.alpha = 0.5//设置透明度
 view1.isHidden = true//设置是否隐藏
 view1.removeFromSuperview()//从其父视图移除

更多View的属性方法（简单列举几个）

1. UIView继承自UIResponder

   
   
   响应者相关方法

2. UIView的坐标尺寸相关

• transform、transform3D View形变 transform用法
• hitTest point 方法 事件传递与响应链机制
• convert方法 坐标转换
• sizeToFit 系统会根据内容的自动布局

3. UIView子视图相关

• superview、subviews 父视图、子视图
• addSubview、insertSubview、exchangeSubview 添加/插入子视图、交换子视图层级
• removeFromSuperview、bringSubviewToFront、sendSubviewToBack移出、移动视图层级
• layoutSubviews、layoutIfNeeded、setNeedsLayout 布局相关

4. UIView添加手势

• addGestureRecognizer、removeGestureRecognizer 添加/移除手势

5. UIView 动画(类方法) UIView简单的动画实现

• animate
• transition
• animateKeyframes
• addKeyframe

6.UIView绘制

• draw
• clipsToBounds
• alpha isHidden 透明度 是否隐藏
• contentMode 填充模式
• tintColor、tintAdjustmentMode tintcolor相关

CALayer

Swift中UIView与CALayer层的关系和OC是一样的，关系与区别请看UI视图相关中UIView以及CALayer的关系和区别
这里只简述CALayer层常用的属性

1. 边框相关

• borderWidth
• borderColor

2. 阴影相关

• shadowColor
• shadowOffset
• shadowOpacity
• shadowRadius

3. 圆角相关

• masksToBounds
• cornerRadius

因为上面的基本上平时用的都比较多，代码就不给示例了

4. 渐变相关

• 渐变需要用到CAGradientLayer
• 将创建的CAGradientLayer实例添加到view的layer层

  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)

同样我们也可以利用CAGradientLayer自定义渐变色：

extension UIColor{
    
    class func gradientColorWithSize(_ size:CGSize, _ direction: GradientColorDirection, _ colors:[UIColor]) -> UIColor {
        let gradientLayer = CAGradientLayer()
        gradientLayer.frame = CGRect(x: 0, y: 0, width: size.width, height: size.height)
        var startPoint = CGPoint.zero
        if direction == GradientColorDirection.GradientColorDirectionUpwardDiagonalLine {
            startPoint = CGPoint(x: 0.0, y: 1.0)//向上斜对角的起点与其他不同
        }
        gradientLayer.startPoint = startPoint
        
        var endPoint = CGPoint.zero
        switch direction {
        case .GradientColorDirectionVertical:
            endPoint = CGPoint(x: 0.0, y: 1.0)
        case .GradientColorDirectionHorizontal:
            endPoint = CGPoint(x: 1.0, y: 0.0)
        case .GradientColorDirectionDownDiagonalLine:
            endPoint = CGPoint(x: 1.0, y: 1.0)
        case .GradientColorDirectionUpwardDiagonalLine:
            endPoint = CGPoint(x: 1.0, y: 0.0)
        }
        gradientLayer.endPoint = endPoint
        gradientLayer.colors = colors.map{ $0.cgColor }
        
        UIGraphicsBeginImageContext(size)
        gradientLayer.render(in: UIGraphicsGetCurrentContext()!)
        let image = UIGraphicsGetImageFromCurrentImageContext()!
        UIGraphicsEndImageContext();
        
        return UIColor.init(patternImage: image)
    }
}

调用代码：

let gradientView = UIView(frame: CGRect(x: 100, y: 320, width: 100, height: 100))
        gradientView.backgroundColor = UIColor.gradientColorWithSize(CGSize(width: 100, height: 100), GradientColorDirection.GradientColorDirectionUpwardDiagonalLine, [UIColor.red,UIColor.green,UIColor.blue])
view.addSubview(gradientView)

展示效果：

代码效果展示