前端之家

  1. 首页
  2. 问答

方向转换后从UIView渐变

• 问答

我对UIView进行了扩展以应用渐变：

    extension UIView {

    func applyGradient(colors: [CGColor]) {

        self.backgroundColor = nil
        let gradientLayer = CAGradientLayer()
        gradientLayer.frame = self.bounds // Here new gradientLayer should get actual UIView bounds
        gradientLayer.cornerRadius = self.layer.cornerRadius
        gradientLayer.colors = colors
        gradientLayer.startPoint = CGPoint(x: 0.0,y: 0.0)
        gradientLayer.endPoint = CGPoint(x: 1.0,y: 1.0)
        gradientLayer.masksToBounds = true

        self.layer.insertSublayer(gradientLayer,at: 0)
    }
}

在我的UIView子类中，我正在创建所有视图并设置约束：

private let btnSignIn: UIButton = {
    let btnSignIn = UIButton()

    btnSignIn.setTitle("Sing In",for: .normal)
    btnSignIn.titleLabel?.font = UIFont(name: "Avenir Medium",size: 35)

    btnSignIn.layer.cornerRadius = 30
    btnSignIn.clipsToBounds = true
    btnSignIn.translatesAutoresizingMaskintoConstraints = false

    return btnSignIn
}()

override init(frame: CGRect) {
    super.init(frame: frame)
    addSubViews()
}

required init?(coder: NSCoder) {
    super.init(coder: coder)
    addSubViews()
}

func addSubViews() {
    self.addSubview(imageView)
    self.addSubview(btnSignIn)
    self.addSubview(signUpstackView)
    self.addSubview(textFieldsStackView)
    setConstraints()
}

我已经重写了layoutSubviews函数，该函数在每次更改视图范围（包括定向转换）时调用，在这里我称为applyGradient。

override func layoutSubviews() {
    super.layoutSubviews()
    btnSignIn.applyGradient(colors: [Colors.ViewTopGradient,Colors.ViewBottomGradient])
}

问题在于定向过渡渐变由于某种原因而应用错误...

请查看屏幕截图

方向转换后从UIView渐变

我在这里想念什么？

coffee3582 回答：方向转换后从UIView渐变

如果您查看按钮，将会看到两个渐变。这是因为layoutSubviews至少被调用两次，第一次是在第一次显示视图时，然后是在方向改变后。因此，您至少添加了两个渐变层。

您想要更改此设置，以便仅insertSublayer一次（例如，在实例化视图时），并且由于layoutSubviews可以多次调用，因此它应仅限于调整现有图层，不添加任何内容。

您也可以只使用layerClass类属性将按钮的主图层设置为渐变，然后完全不必手动调整图层框架：

@IBDesignable
public class RoundedGradientButton: UIButton {

    static public override var layerClass: AnyClass { CAGradientLayer.self }
    private var gradientLayer: CAGradientLayer      { layer as! CAGradientLayer }

    @IBInspectable var startColor: UIColor = .blue  { didSet { updateColors() } }
    @IBInspectable var endColor: UIColor = .red     { didSet { updateColors() } }

    override public init(frame: CGRect = .zero) {
        super.init(frame: frame)
        configure()
    }

    required public init?(coder: NSCoder) {
        super.init(coder: coder)
        configure()
    }

    override public func layoutSubviews() {
        super.layoutSubviews()
        layer.cornerRadius = min(bounds.height,bounds.width) / 2
    }
}

private extension RoundedGradientButton {
    func configure() {
        gradientLayer.startPoint = CGPoint(x: 0,y: 0)
        gradientLayer.endPoint = CGPoint(x: 1,y: 1)
        updateColors()

        titleLabel?.font = UIFont(name: "Avenir Medium",size: 35)
    }

    func updateColors() {
        gradientLayer.colors = [startColor.cgColor,endColor.cgColor]
    }
}

该技术消除了手动调整图层frame的需要，并且还可以产生更好的动画中期效果。

autolayoutiosios-autolayoutswift
本文链接：https://www.f2er.com/2676191.html

大家都在问