Многократно используемые компоненты класса .xib + какао, как автоматически настроить размер и стиль суперпредставления в раскадровке?

Question

Я реализовал многократно используемый компонент кнопки, используя комбинацию класса .xib и какао, следуя этому руководству

Работает, но есть проблема. Чтобы использовать его в одной из моих основных раскадровок, я должен сначала перетащить его в обычное представление (на которое ссылаются как на суперпредставление в заголовке вопроса), а затем применить мой класс Button, чтобы сделать его кнопкой.

Это работает, но первоначальная высота и ширина вида вместе с белым фоном сохраняются, поэтому я всегда должен переписывать их вручную, когда использую свой компонент, что само по себе приводит к плохому повторному использованию.

В идеале я хотел бы перетащить вид, установить для него класс Button, и все, этот вид должен мгновенно принимать высоту и ширину кнопок и иметь прозрачный фон. Возможно ли что-то подобное?

Чтобы осветить больше контекста по этому вопросу, вот несколько полезных фрагментов моей реализации

1. Многоразовый компонент, выполненный в виде .xib и собственного класса какао

2. Содержание Button.swift

import UIKit

@IBDesignable class Button: UIView {

    @IBOutlet var contentView: UIView!
    @IBOutlet weak var label: UILabel!

  @IBInspectable var buttonLabel: String? {
    get {
      return label.text
    }
    set(buttonLabel) {
      label.text = buttonLabel
    }
  }

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

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

  private func componentInit() {
    let bundle = Bundle(for: Button.self)
    bundle.loadNibNamed("Button", owner: self, options: nil)
    addSubview(contentView)
    contentView.frame = self.bounds
    contentView.autoresizingMask = [.flexibleHeight, .flexibleWidth]
  }

}

3. Пример использования (внутри одной из моих раскадровок основного вида), демонстрирующий, как обычный вид превращается в кнопку, но имеет проблемы с высотой, шириной и цветом фона

PS ^ Если трудно сказать, что происходит в GIF выше, я в основном перетаскиваю UIView в раскадровку и присваиваю ему атрибут класса Button, это превращает это представление в кнопку.

РЕДАКТИРОВАТЬ: Просто чтобы прояснить это, мой вопрос: могу ли я применить ширину, высоту и прозрачный цвет для родительского / суперпредставления моего XIB? Конечная цель здесь состоит в том, чтобы просто перетащить представление на раскадровку, присвоить ему пользовательский класс Button, и это все, он должен иметь правильный размер и иметь прозрачный фон, в отличие от того, как он есть в данный момент (представление не получить размер кнопки и белый фон)

Answer 1

Вы должны правильно прикрепить свои подпредставления в Button , а также в Main.storyboard. Тогда ваш пользовательский вид будет автоматически изменяться. И чистый цвет работает.

import UIKit

@IBDesignable
class Button: UIView {

    @IBOutlet var contentView: UIView!
    @IBOutlet weak var label: UILabel!

    @IBInspectable
    var backColor: UIColor = .clear {
        didSet {
            backgroundColor = backColor
            contentView.backgroundColor = backColor
        }
    }

    override var backgroundColor: UIColor? {
        get {
            return backgroundColor
        } set {

        }
    }

    @IBInspectable
    var buttonLabel: String? {
        get {
            return label.text
        }
        set(buttonLabel) {
            label.text = buttonLabel
        }
    }

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

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

    private func componentInit() {
        let bundle = Bundle(for: Button.self)
        bundle.loadNibNamed("Button", owner: self, options: nil)
        addSubview(contentView)
        contentView.frame = bounds
        backgroundColor = backColor
        contentView.backgroundColor = backColor
        contentView.autoresizingMask = [.flexibleHeight, .flexibleWidth]
        // for static height
        contentView.heightAnchor.constraint(equalToConstant: 70).isActive = true
    }

}

Чтобы гарантировать, что ваш CustomView будет иметь правильный размер, вы можете использовать нижнее ограничение> = 0. После тестирования сбросьте на равно.