iOS开发:给View设置渐变背景

版权所有,禁止匿名转载;禁止商业使用。

iOS里要设置渐变的背景不是很方便,Interface Builder只能设单色背景,渐变需要代码实现。


原理是往指定的View的layer里插入一层CAGradientLayer。


先定义一个GradientColors类方便构造指定颜色的CAGradientLayer。


import UIKit
class GradientColors {
  let colorTop:CGColorRef
  let colorCenter:CGColorRef
  let colorBottom:CGColorRef
  let gl: CAGradientLayer
  init(colorTop:CGColorRef, colorCenter:CGColorRef, colorBottom:CGColorRef) {
    self.colorTop = colorTop
    self.colorCenter = colorCenter
    self.colorBottom = colorBottom
    gl = CAGradientLayer()
    gl.colors = [ colorTop,colorCenter,colorBottom]
  }
}

构造方法是上中下,三种颜色。因为UIColor构造方法创建指定的颜色不是很方便,需要计算rgba四个通道0~1的值,并不是常用的16进制颜色值,所以,我写了一个类来帮助转换。


import UIKit
class ColorUtils {
  //把argb值转成UIColor
  class func colorFromArgb(argb:Int) -> UIColor {
    let blue:Float = Float(argb & 0xff) / 255.0
    let green = Float(argb >> 8 & 0xff) / 255.0
    let red = Float(argb >> 16 & 0xff) / 255.0
    let alpha = Float(argb >> 24 & 0xff) / 255.0
    return UIColor(red: CGFloat(red), green: CGFloat(green), blue: CGFloat(blue), alpha: CGFloat(alpha))
  }
}

下面是controller中应用渐变:


@IBOutlet weak var topBgView: UIView!
  let gradienColors = GradientColors(colorTop: ColorUtils.colorFromArgb(0xff2cb1e1).CGColor, colorCenter: ColorUtils.colorFromArgb(0xff1da9da).CGColor, colorBottom: ColorUtils.colorFromArgb(0xff0fa1d3).CGColor)
  override func viewDidLoad() {
    super.viewDidLoad()
    topBgView.backgroundColor = UIColor.clearColor()
    var backgroundLayer = gradienColors.gl
    backgroundLayer.frame = topBgView.frame
    topBgView.layer.insertSublayer(backgroundLayer, atIndex: 0)
  }


0 0