使用自动布局为UIView应用渐变背景

时间:2016-09-19 12:17:40

标签: ios objective-c uiview swift3 cagradientlayer

我扩展了UIView以添加addGradientWithColor()方法来获取渐变背景:

 extension UIView {
   func addGradientWithColor() {
     let gradient = CAGradientLayer()
     gradient.frame = self.bounds
     gradient.colors = [gradientEndColor.CGColor,  gradientStartColor.CGColor]
     gradient.startPoint = CGPointMake(1,0)
     gradient.endPoint = CGPointMake(0.2,1)
    self.layer.insertSublayer(gradient, atIndex: 0)
  } } 

我的问题是当我运行横向模式时,UIView未被拉伸

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    self.view.addGradientWithColor() }

我试图调用viewDidLayoutSubviews()但它无法正常工作

以下是截图:

删除viewDidLayoutSubviews()后

enter image description here

4 个答案:

答案 0 :(得分:6)

您可以继承UIView并覆盖添加渐变的drawRect方法。

已更新为 Swift 4


class GradientView: UIView {

    private let gradient : CAGradientLayer = CAGradientLayer()
    private let gradientStartColor: UIColor
    private let gradientEndColor: UIColor

    init(gradientStartColor: UIColor, gradientEndColor: UIColor) {
        self.gradientStartColor = gradientStartColor
        self.gradientEndColor = gradientEndColor
        super.init(frame: .zero)
    }

    required init?(coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented") }

    override func layoutSublayers(of layer: CALayer) {
        super.layoutSublayers(of: layer)
        gradient.frame = self.bounds
    }

    override public func draw(_ rect: CGRect) {
        gradient.frame = self.bounds
        gradient.colors = [gradientEndColor.cgColor, gradientStartColor.cgColor]
        gradient.startPoint = CGPoint(x: 1, y: 0)
        gradient.endPoint = CGPoint(x: 0.2, y: 1)
        if gradient.superlayer == nil {
            layer.insertSublayer(gradient, at: 0)
        }
    }
}

创建UIView后,您只需要将约束添加到该视图中。

答案 1 :(得分:5)

您可以保存对图层的引用,并在视图layoutSublayersOfLayer方法中调整它的框架。这可以在UIView子类中外包:

class GradientView: UIView {

private let gradient : CAGradientLayer = CAGradientLayer()

/**
 displays a gradient on the view
 */
func addGradient() {

    self.gradient.frame     = self.bounds
    self.gradient.colors    = [gradientEndColor.CGColor, gradientStartColor.CGColor]
    gradient.startPoint     = CGPointMake(1,0)
    gradient.endPoint       = CGPointMake(0.2,1)        
    self.layer.insertSublayer(self.gradient, atIndex: 0)
}

/**
 resizes the gradient with the view size
 */
override func layoutSublayers(of layer: CALayer) {
    super.layoutSublayers(of: layer)
    self.gradient.frame = self.bounds
}
}

答案 2 :(得分:3)

图层不会自动自动调整它们。要解决此问题,您应该更改图层框架。这是实现方式的一种方式:

#include <iostream>

using namespace std;

int main() {

    char decision;
    cin >> decision;

    if (decision == left) {
        cout << "went left" << endl;
    }

    return 0;
}

答案 3 :(得分:0)

受到解决方案的启发,我创建了以下课程。

用法示例:

// Simple usage. From clear to black.
let gradientView1 = GradientView(colors: [.clear, .black])

// Tweak locations. Here the gradient from red to green will take 30% of the view.
let gradientView2 = GradientView(colors: [.red, .green, .blue], locations: [0, 0.3, 1])

// Create your own gradient.
let gradient = CAGradientLayer()
gradient.colors = [UIColor.red.cgColor, UIColor.blue.cgColor]
let gradientView3 = GradientView(gradient: gradient)

班级:

import UIKit

/**
 * View with a gradient layer.
 */
class GradientView: UIView {

    let gradient : CAGradientLayer

    init(gradient: CAGradientLayer) {
        self.gradient = gradient
        super.init(frame: .zero)
        self.gradient.frame = self.bounds
        self.layer.insertSublayer(self.gradient, at: 0)
    }

    convenience init(colors: [UIColor], locations:[Float] = [0.0, 1.0]) {
        let gradient = CAGradientLayer()
        gradient.colors = colors.map { $0.cgColor }
        gradient.locations = locations.map { NSNumber(value: $0) }
        self.init(gradient: gradient)
    }

    override func layoutSublayers(of layer: CALayer) {
        super.layoutSublayers(of: layer)
        self.gradient.frame = self.bounds
    }

    required init?(coder: NSCoder) { fatalError("no init(coder:)") }
}