Добавление ограничений программно к пользовательским компонентам

Question

Я разрабатываю пользовательские компоненты в Swift, наследуя компоненты по умолчанию. Ниже приведен фрагмент моего кода:

class DirectionButton: UIButton {
    var backgroundImage: UIImageView!
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        styleComponent()
    }

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

    func styleComponent() {
        backgroundImage = UIImageView(image: UIImage(named: "seta-proximo"))
        backgroundImage.contentMode = .ScaleAspectFit
        self.setNeedsLayout()
        self.layoutIfNeeded()
        self.addSubview(backgroundImage)
        let imageConstraints = NSLayoutConstraint(item: self, attribute: .TrailingMargin, relatedBy: .Equal, toItem: self, attribute: .Trailing, multiplier: 1, constant: 10)
        backgroundImage.addConstraint(imageConstraints)
    }
}

backgroundImage переменная должна находиться в 10 точках от правой части кнопки, поэтому мне нужны ограничения.

После запуска я получил следующее исключение: иерархия представления не подготовлена ​​к ограничению.

Как правильно добавить ограничения?

Answer 1

Читая документацию, я последовал совету по использованию якорей макета, как предложил @AjayBeniwal. Мне нужен был следующий код (после добавления подпредставления к кнопке):

backgroundImage.trailingAnchor.constraintEqualToAnchor(self.layoutMarginsGuide.trailingAnchor, constant: -10).active = true
backgroundImage.bottomAnchor.constraintEqualToAnchor(self.layoutMarginsGuide.bottomAnchor).active = true
backgroundImage.centerYAnchor.constraintEqualToAnchor(self.layoutMarginsGuide.centerYAnchor).active = true

Таким образом, изображение вертикально расположено по центру к кнопке на расстоянии 20 точек от правого края.

Answer 2

// Даем выход для ограничения ImageView

func setConstrain()
{
self.imageConstrain.constant = -10
self.topConstraints.constant = 10
self.bottomConstraints.constant = -10
self.leadingConstraints.constant = 10
self.layoutIfNeeded()
}

Answer 3

отредактированный

1. Сначала сделайте это:

backgroundImage.translatesAutoresizingMaskIntoConstraints = false

1. Добавить ограничение для себя, а не backgroundImage
2. Вы добавляете ограничение от себя к себе (неправильное) добавление от backroundImage к себе
3. Ограничения являются неполными. Вы добавляете только одно конечное ограничение.

Общее решение таково:

func styleComponent() {
       // Change clear.png with your own image name.

        backgroundImage = UIImageView(image: UIImage(named: "clear.png"))
        backgroundImage.contentMode = .ScaleAspectFit
        self.addSubview(backgroundImage)
        backgroundImage.translatesAutoresizingMaskIntoConstraints = false

        let imageConstraints = NSLayoutConstraint(item: backgroundImage, attribute: .Trailing, relatedBy: .Equal, toItem: self, attribute: .Trailing, multiplier: 1, constant: -10)
        self.addConstraint(imageConstraints)

        let topConstraints = NSLayoutConstraint(item: backgroundImage, attribute: .Top, relatedBy: .Equal, toItem: self, attribute: .Top, multiplier: 1, constant: 10)
        self.addConstraint(topConstraints)

        let bottomConstraints = NSLayoutConstraint(item: backgroundImage, attribute: .Bottom, relatedBy: .Equal, toItem: self, attribute: .Bottom, multiplier: 1, constant: -10)
        self.addConstraint(bottomConstraints)

        let leadingConstraints = NSLayoutConstraint(item: backgroundImage, attribute: .Left, relatedBy: .Equal, toItem: self, attribute: .Left, multiplier: 1, constant: 10)
        self.addConstraint(leadingConstraints)
}

Результирующий вывод это. Вы можете изменить значения констант, чтобы они делали это по собственному желанию.

В этом случае зеленый - это кнопка, а красный - фоновое изображение.

Попробуйте это и дайте мне знать, если вы все еще получаете какие-либо предупреждения или осложнения.