Swift 3 - 自定义按钮(图像和文本)只有在没有 socket 的情况下才能正确绘制？

Question

编辑:虽然我接受了一个帮助我在运行时正确绘制按钮的答案，但我仍然有其他问题。我怀疑，其根源是 为什么给我的自定义按钮一个 socket 会干扰它的绘制方式的问题。我仍然需要知道这是为什么。 (请参阅下面我的回答)

我有自己的按钮类，它扩展了 UIButton(见下文)并具有多个 IBInspectable 属性，例如边框宽度/颜色、圆角半径，甚至渐变背景的开始/结束颜色。我还使用这些属性以编程方式设置图像和标题的插图，这样我就可以考虑各种屏幕尺寸。

以前我有一个问题，如果我在 Storyboard 中更改“查看为”设备，比方说从 iPhone SE 到 iPhone 7，然后刷新 View 并在物理 iPhone SE 上运行，它将使用以下插图进行部署iPhone 7 而不是使用物理设备自己的屏幕尺寸计算插图。但是，我几乎通过覆盖自定义按钮类中的 draw 解决了这个问题。

我现在的问题是重写的 draw 方法只被调用(或者似乎只有在)按钮没有到 ViewController 类的导出它被放置在。

例如:

^{*img 是一个占位符；插图适合真实的 imgs。}

右下角的按钮有正确绘制的渐变和角，而其他 3 个按钮则没有。 我已确认向此按钮添加一个 socket 会使它的行为与其他按钮一样，并且从其他 3 个中的任何一个移除 socket 会导致它被正确绘制。

供引用，网点只是

@IBOutlet weak var button1: UIButton!
@IBOutlet weak var button2: UIButton!
@IBOutlet weak var button3: UIButton!

紧接在 class MyViewController: UIViewController { 声明下。

此外，我没有忘记在界面构建器中为每个按钮设置自定义类。

这是按钮类:

import UIKit

@IBDesignable
class ActionButton: UIButton {

    override init(frame: CGRect){
        super.init(frame: frame)
        setupView()
    }
    required init(coder aDecoder: NSCoder){
        super.init(coder: aDecoder)!
        setupView()
    }

    @IBInspectable var cornerRadius: CGFloat = 0{
        didSet{
            setupView()
        }
    }
    @IBInspectable var startColor: UIColor = UIColor.white{
        didSet{
            setupView()
        }
    }
    @IBInspectable var endColor: UIColor = UIColor.black{
        didSet{
            setupView()
        }
    }
    @IBInspectable var borderWidth: CGFloat = 0{
        didSet{
            self.layer.borderWidth = borderWidth
        }
    }
    @IBInspectable var borderColor: UIColor = UIColor.clear{
        didSet{
            self.layer.borderColor = borderColor.cgColor
        }
    }

    private func setupView(){
        let colors:Array = [startColor.cgColor, endColor.cgColor]
        gradientLayer.colors = colors
        gradientLayer.cornerRadius = cornerRadius
        gradientLayer.endPoint = CGPoint(x: 0.5, y: 1.0)
        self.setNeedsDisplay()
    }

    var gradientLayer: CAGradientLayer{
        return layer as! CAGradientLayer
    }

    override func draw(_ rect: CGRect) {

        //Draw image

        setupView()

        let btnW = self.frame.size.width
        let btnH = self.frame.size.height

        //Compute and set image insets
        let topBtnInset = btnH * (-5/81)
        let bottomBtnInset = -4 * topBtnInset
        let leftBtnInset = btnW / 4 //btnW * (35/141)
        let rightBtnInset = leftBtnInset

        self.imageEdgeInsets = UIEdgeInsets(top: topBtnInset, left: leftBtnInset, bottom: bottomBtnInset, right: rightBtnInset)

        //Compute and set title insets
        let topTitleInset = btnH * (47/81)
        let bottomTitleInset = CGFloat(0)
        let leftTitleInset = CGFloat(-256) //Image width
        let rightTitleInset = CGFloat(0)

        self.titleEdgeInsets = UIEdgeInsets(top: topTitleInset, left: leftTitleInset, bottom: bottomTitleInset, right: rightTitleInset)

        //Draw text

        //Default font size
        self.titleLabel?.font = UIFont.boldSystemFont(ofSize: 15)

        if(btnH > 81){
            self.titleLabel?.font = UIFont.boldSystemFont(ofSize: 17)
        }else if(btnH > 97){
            self.titleLabel?.font = UIFont.boldSystemFont(ofSize: 20)
        }

    }

    override class var layerClass: AnyClass{
        return CAGradientLayer.self
    }

}

^{请忽略我处理插图、字体大小等的奇怪方式。}

有谁知道为什么为按钮指定 outlet 会导致它无法正确绘制图层？

Answer 1

几个想法:

1. draw(_:) 方法用于描边路径、绘制图像等。它用于在给定时刻渲染 View 。你不应该更新图层、UIKit subview 等。

   在您的代码段中，您的 draw(_:) 正在调用 setupView，然后调用 setNeedsDisplay(理论上可以触发 draw(_:) 被再次调用)。我建议只为那些需要手动绘制的东西保留 draw(_:)。 (就像现在一样，您可能可以完全消除此方法，因为这里没有任何东西正在绘制任何东西。)

2. 对于 subview (它们的框架等)的任何手动配置，都应移至 layoutSubviews，只要操作系统确定 subview 可能需要它们的 就会调用它code>frame 值已调整。

3. 如果您对可设计 View 有任何疑问，值得确认您在单独的目标中拥有这些 View 。它最大限度地减少了在 IB 中渲染时需要重新编译的内容。它还可以防止主要目标中的问题影响在 IB 中呈现这些可设计对象的能力。 (当 Apple 引入可设计 View 时，它们非常具体，应该将它们放在一个单独的目标中。)

   我在 Xcode 中的可设计 View 也遇到过间歇性问题，但这些问题通常可以通过退出 Xcode、清空派生数据文件夹并重新启动来解决。

我必须承认，我不知道为什么向可设计 View 添加 socket 会影响 View 的呈现方式。不过，我知道当我执行上述操作时，我无法重现您的问题。

无论如何，我像这样调整了你的ActionButton，它似乎对我有用:

@import UIKit

@IBDesignable
public class ActionButton: UIButton {

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

    public required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)!
        setupView()
    }

    @IBInspectable public var cornerRadius: CGFloat = 0     { didSet { setupView() } }

    @IBInspectable public var startColor: UIColor = .white  { didSet { setupView() } }

    @IBInspectable public var endColor: UIColor = .black    { didSet { setupView() } }

    @IBInspectable public var borderWidth: CGFloat = 0      { didSet { layer.borderWidth = borderWidth } }

    @IBInspectable public var borderColor: UIColor = .clear { didSet { layer.borderColor = borderColor.cgColor } }

    private func setupView() {
        let colors = [startColor.cgColor, endColor.cgColor]
        gradientLayer.colors = colors
        gradientLayer.cornerRadius = cornerRadius
        gradientLayer.endPoint = CGPoint(x: 0.5, y: 1.0)
    }

    private var gradientLayer: CAGradientLayer {
        return layer as! CAGradientLayer
    }

    public override func layoutSubviews() {
        super.layoutSubviews()

        let btnW = frame.width
        let btnH = frame.height

        //Compute and set image insets
        let topBtnInset = btnH * (-5/81)
        let bottomBtnInset = -4 * topBtnInset
        let leftBtnInset = btnW / 4 //btnW * (35/141)
        let rightBtnInset = leftBtnInset

        imageEdgeInsets = UIEdgeInsets(top: topBtnInset, left: leftBtnInset, bottom: bottomBtnInset, right: rightBtnInset)

        //Compute and set title insets
        let topTitleInset = btnH * (47/81)
        let bottomTitleInset = CGFloat(0)
        let leftTitleInset = CGFloat(-256) //THIS MUST BE EQUAL TO -IMAGE WIDTH
        let rightTitleInset = CGFloat(0)

        titleEdgeInsets = UIEdgeInsets(top: topTitleInset, left: leftTitleInset, bottom: bottomTitleInset, right: rightTitleInset)

        //Adjust text font
        if btnH > 81 {
            titleLabel?.font = .boldSystemFont(ofSize: 17)
        } else if btnH > 97 {
            titleLabel?.font = .boldSystemFont(ofSize: 20)
        } else {
            //Default font size
            titleLabel?.font = .boldSystemFont(ofSize: 15)
        }
    }

    public override class var layerClass: AnyClass {
        return CAGradientLayer.self
    }

}