Первый шаг - убедиться, что вы правильно настроили свой @IBDesignable
вид.
Вот простой пример с UITextField
и «помощником» UILabel
.
Вид текста установлен без прокрутки, что позволяет ему автоматически изменять размер по высоте на основе текста. Он будет увеличиваться / уменьшаться по мере ввода и добавления / удаления текста.
Текстовое представление и метка добавляются к вертикали UIStackView
, чтобы сделать ее действительно очень удобной для разметки:
@IBDesignable
class MyCustomView: UIView {
let theTextView: UITextView = {
let v = UITextView()
v.translatesAutoresizingMaskIntoConstraints = false
v.isScrollEnabled = false
return v
}()
let helperLabel: UILabel = {
let v = UILabel()
v.translatesAutoresizingMaskIntoConstraints = false
v.textAlignment = .center
v.textColor = .white
v.backgroundColor = .blue
v.text = "Helper Text"
return v
}()
let theStackView: UIStackView = {
let v = UIStackView()
v.translatesAutoresizingMaskIntoConstraints = false
v.axis = .vertical
v.alignment = .fill
v.distribution = .fill
v.spacing = 8
return v
}()
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
commonInit()
}
func commonInit() -> Void {
// add the stack view as a subview
addSubview(theStackView)
// constrain the stack view top / bottom / leading / trailing
// with 8-pts "padding" on each side
NSLayoutConstraint.activate([
theStackView.topAnchor.constraint(equalTo: topAnchor, constant: 8.0),
theStackView.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -8.0),
theStackView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 8.0),
theStackView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -8.0),
])
// add the text view and label to the stack view
theStackView.addArrangedSubview(theTextView)
theStackView.addArrangedSubview(helperLabel)
}
}
Теперь, в новом контроллере представления в раскадровке, добавьте нормальный UIView
и присвойте ему цвет фона (чтобы мы могли его видеть). Добавьте ограничения Leading и Trailing 40
и добавьте ограничение Center Vertical. Это должно выглядеть примерно так:
и раскадровка скажет вам, что нужно ограничение:
Выбрав вид, перейдите к Identity Inspector
и измените класс на MyCustomClass
. Если у вас включено ** Автоматически обновлять представления`, оно должно измениться на:
Теперь он центрирован по вертикали и использует собственную высоту (определяется внутренними высотами текстового представления и метки, встроенной в представление стека). Больше не нужно Требуются ограничения для: Y позиции или высоты Сообщение об ошибке, без необходимости устанавливать какие-либо дополнительные ограничения.
Когда вы запустите приложение (и введете текст в текстовое представление), вы получите следующее: