использовать автоматическую компоновку для равномерного размещения объектов друг от друга

Мой код ниже пытается быть основанным на фотографии ниже. PicLocate должен занимать 60% высоты изображения. Pic[0] и Pic1 должны занимать 10% высоты и иметь равные ширина. Все объекты должны располагаться на расстоянии 10 - 15 промежутков между видами. В основном это должно выглядеть так же, как на фото

введите здесь описание изображения

    import UIKit
class ViewController: UIViewController {
var picLocate = UIImageView()
var jessicaAlba:Float = 50
var topConstraint: NSLayoutConstraint!
var heightConstraint: NSLayoutConstraint!
var leadingConstraint: NSLayoutConstraint!
var trailingConstraint: NSLayoutConstraint!

let pic = (0..<3).map { _ in UIButton() }


override func viewDidLoad() {
    super.viewDidLoad()

    [picLocate,pic[0],pic[1]].forEach {
        $0.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview($0)
        $0.backgroundColor = .systemOrange
    }


    pic[0].topAnchor.constraint(equalTo: picLocate.bottomAnchor, constant: 10).isActive = true
    pic[0].leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 10).isActive = true
    pic[0].trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -300).isActive = true
    pic[0].bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -300).isActive = true

    pic[1].topAnchor.constraint(equalTo: picLocate.bottomAnchor, constant: 10).isActive = true
    pic[1].leadingAnchor.constraint(equalTo: pic[0].trailingAnchor, constant: 10).isActive = true
    pic[1].trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -10).isActive = true
    pic[1].bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -300).isActive = true



    pic[0].setTitle("Add Box", for: .normal)
    pic[1].setTitle("Save Photo", for: .normal)




    topConstraint = picLocate.topAnchor.constraint(equalTo: view.topAnchor, constant: CGFloat(jessicaAlba))
    topConstraint.isActive = true
    heightConstraint = picLocate.heightAnchor.constraint(equalTo: view.heightAnchor , multiplier: 0.6, constant: CGFloat(-jessicaAlba))
    heightConstraint.isActive = true

    leadingConstraint = picLocate.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: CGFloat(jessicaAlba))
    leadingConstraint.isActive = true
    trailingConstraint = picLocate.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: CGFloat(-jessicaAlba))
    trailingConstraint.isActive = true


}

}

swift nslayoutconstraint autolayout equals
person Community    schedule 11.12.2019    source источник
comment
попробуйте использовать множитель для ваших ограничений по высоте   -  person Alexandr Kolesnik    schedule 11.12.2019
comment
@AlexandrKolesnik, можешь показать мне какой-нибудь код? Спасибо.   -  person    schedule 11.12.2019

Ответы (1)


arrow_upward
1
arrow_downward

Может быть очень полезно комментировать ваши ограничения по мере их написания. Довольно часто это заставляет вас понять, что вы хотите сделать...

Чтобы получить желаемый макет, вы хотите:

  • установите picLocate высоту на 60% от высоты представления (с вашим текущим кодом вы также вычитаете 50 пунктов из этих 60%)
  • установить интерлиньяж левой картинки (кнопки) на интерлиньяж picLocate
  • установить конец правой картинки (кнопки) на конец picLocate
  • установить начало правой картинки в конце левой картинки + 10-pts для интервала
  • затем установите ширину правой картинки равной ширине левой картинки

Результат:

введите здесь описание изображения

а в альбомной ориентации он автоматически настраивается на желаемые проценты:

введите здесь описание изображения

Это ваш код с описанными мной изменениями. Смотрим и комментируем:

class ViewController: UIViewController {

    var picLocate = UIImageView()

    var jessicaAlba:CGFloat = 50

    var topConstraint: NSLayoutConstraint!
    var heightConstraint: NSLayoutConstraint!
    var leadingConstraint: NSLayoutConstraint!
    var trailingConstraint: NSLayoutConstraint!

    let pic = (0..<3).map { _ in UIButton() }

    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = .white

        [picLocate,pic[0],pic[1]].forEach {
            $0.translatesAutoresizingMaskIntoConstraints = false
            view.addSubview($0)
            $0.backgroundColor = .systemOrange
        }

        // 50-pts (jessicaAlba) from top of view
        topConstraint = picLocate.topAnchor.constraint(equalTo: view.topAnchor, constant: jessicaAlba)

        // 60% of view height minus 50-pts == ((0.6 * view height) - 50)
        heightConstraint = picLocate.heightAnchor.constraint(equalTo: view.heightAnchor , multiplier: 0.6, constant: -jessicaAlba)

        // if you actually want 60% of view height, set constant to 0.0
        //heightConstraint = picLocate.heightAnchor.constraint(equalTo: view.heightAnchor , multiplier: 0.6, constant: 0.0)

        // 50-pts leading and trailing
        leadingConstraint = picLocate.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: jessicaAlba)
        trailingConstraint = picLocate.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -jessicaAlba)

        NSLayoutConstraint.activate([

            topConstraint,
            heightConstraint,
            leadingConstraint,
            trailingConstraint,

            // "left pic" top is 10-pts below "picLocate" bottom
            pic[0].topAnchor.constraint(equalTo: picLocate.bottomAnchor, constant: 10.0),

            // "left pic" leading equal to "picLocate" leading
            pic[0].leadingAnchor.constraint(equalTo: picLocate.leadingAnchor, constant: 0.0),

            // "left pic" height equal to 10% of view height
            pic[0].heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.10),

            // "right pic" top equal to "left pic" top
            pic[1].topAnchor.constraint(equalTo: pic[0].topAnchor),

            // "right pic" height equal to "left pic" height
            pic[1].heightAnchor.constraint(equalTo: pic[0].heightAnchor),

            // "right pic" trailing equal to "picLocate" trailing
            pic[1].trailingAnchor.constraint(equalTo: picLocate.trailingAnchor, constant: 0.0),

            // "right pic" leading equal to "left pic" trailing plust 10-pts
            pic[1].leadingAnchor.constraint(equalTo: pic[0].trailingAnchor, constant: 10.0),

            // "right pic" width equal to "left pic" width
            pic[1].widthAnchor.constraint(equalTo: pic[0].widthAnchor),

        ])

        pic[0].setTitle("Add Box", for: .normal)
        pic[1].setTitle("Save Photo", for: .normal)

    }
}
person DonMag    schedule 11.12.2019