渐变不填充 IBDesignable UIView

Posted 2023-02-23

【中文标题】渐变不填充 IBDesignable UIView

【英文标题】：Gradient not filling IBDesignable UIView

【发布时间】：2017-06-03 12:45:48

【问题描述】：

我正在尝试在@IBDesignable UIView 上添加渐变。在模拟器中一切都很好，但是当我在物理设备上运行它时，渐变不会填满屏幕。我在 UIView 扩展中有我的渐变代码：

extension UIView 
    func gradientFrom(_ colors: [UIColor]) 
        let cgColors = colors.map(return $0.cgColor)
        let gradient = CAGradientLayer()
        gradient.frame = self.bounds
        gradient.locations =  [0.0, 1.0]
        gradient.colors = cgColors
        self.layer.insertSublayer(gradient, at: 0)
    

接下来，我的 UIView 中以渐变为中心的代码：

@IBDesignable class MyCustomView: UIView 

    var view = UIView()

    // MARK: - IBOutlets
    @IBOutlet weak var label: UILabel!
    @IBOutlet weak var textView: UITextView!

    fileprivate var gradientColors: [UIColor] = []

    @IBInspectable var gradientColor0: UIColor = UIColor.flatWhite 
        didSet 
            gradientColors.remove(at: 0)
            gradientColors.insert(gradientColor0, at: 0)
        
    

    @IBInspectable var gradientColor1: UIColor = UIColor.flatWhiteDark 
        didSet 
            gradientColors.remove(at: 1)
            gradientColors.insert(gradientColor1, at: 1)
        
    

    override init(frame: CGRect) 
        super.init(frame: frame)
        xibSetup()
        setup()
    

    required init?(coder aDecoder: NSCoder) 
        super.init(coder: aDecoder)
        xibSetup()
        setup()
    

    override func prepareForInterfaceBuilder() 
        super.prepareForInterfaceBuilder()
        setup()
    

    func setup() 
        textView.scrollRangeToVisible(NSMakeRange(0, 0))
        [gradientColor0, gradientColor1].forEach(gradientColors.append($0))
        view.gradientFrom(gradientColors)
        label.textColor = labelFontColor
        label.backgroundColor = UIColor.clear
        textView.backgroundColor = UIColor.clear
        textView.textColor = textViewFontColor
    

    // MARK: - Nib handlers

    fileprivate func xibSetup() 
        view = loadViewFromNib()
        view.frame = bounds
        view.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        addSubview(view)
    

    fileprivate func loadViewFromNib() -> UIView 
        let bundle = Bundle(for: type(of: self))
        let nib = UINib(nibName: "AttributionView", bundle: bundle)
        let view = nib.instantiate(withOwner: self, options: nil).first as! UIView
        return view
    

    public func applyBackgroundGradient()         
        view.gradientFrom(gradientColors)
    

    func resizeView() 
        textView.sizeToFit()
        textView.scrollRangeToVisible(NSMakeRange(0, 0))
    

在 MyViewController 上，我添加了一个 UIView，将其子类设置为 MyCustomView。填充界面生成器，但是当我在物理设备上运行它时，MyCustomView 中的渐变不会填满整个屏幕。

我尝试从MyViewController 的viewDidLoad、viewDidLayoutSubviews、viewDidAppear 运行applyBackgroundGradient，这些似乎都没有完成工作。

非常感谢任何关于如何解决此问题的建议。感谢您的阅读。

【问题讨论】：

您是否在 MyCustomView 上设置了约束以使其填满屏幕？

是的。我在模拟器中得到了想要的结果。我在物理设备上遇到了这个问题。

您在模拟器上获得了所有设备尺寸的预期结果？

你什么时候打电话给applyBackgroundGradient？它应该在viewDidLayoutSubviews 中工作，你调用它一次吗？

【参考方案1】：

尝试替换

gradient.frame = self.bounds

与

gradient.frame.size = self.frame.size
gradient.frame.origin = CGPoint(x: 0.0, y: 0.0)

你绝对应该这样称呼它

var didLayoutSubviews = false

override func viewDidLayoutSubviews() 
    super.viewDidLayoutSubviews()
    if !self.didLayoutSubviews 
         self.didLayoutSubviews = true
         //apply gradient
         //you can also try to execute drawing inside `DispatchQueue.main.async `
    

OP 的附录：

我的部分问题源于我的didSet 调用渐变的颜色。我没有在 didSet 中设置数组，而是将用于填充 gradientColors 数组的代码移至 applyBackgroundGradient 方法。

@IBInspectable var gradientColor0: UIColor = UIColor.flatWhite 
    didSet 
        applyBackgroundGradient()
    


@IBInspectable var gradientColor1: UIColor = UIColor.flatWhiteDark 
    didSet 
        applyBackgroundGradient()
    

...MyCustomView 上的渐变代码如下所示：

public func applyBackgroundGradient() 
    gradientColors = [gradientColor0, gradientColor1] 
    self.view.gradientFrom(gradientColors)

【讨论】：

谢谢！我的部分问题是框架。另一部分是我应用渐变的方式。我在渐变颜色的 didSets 中做了太多的工作。相反，我将数组填充代码下移至applyBackgroundGradient()。我将添加到您的答案的底部。

@Adrian, gradientColors = [gradientColor0, gradientColor1] 应该足够了。

在 viewDidLayoutSubviews 中添加渐变是我的解决方法！谢谢！