使用自动布局将 3 个图像视图实际放置在相同的高度答案

【问题标题】：use auto layout to position 3 image view pragmatically the same height使用自动布局将 3 个图像视图实际放置在相同的高度
【发布时间】：2019-12-04 00:50:49
【问题描述】：

我下面的代码声明了 3 个图像视图。我希望它们都具有相同的高度并填满 uiview。它应该看起来像下面这张照片

我需要以某种方式让图像视图相互交互，但我不知道如何。这应该在所有代码中完成。没有使用故事板。

    import UIKit

class ViewController: UIViewController {

var pic = UIImageView()
var pic2 = UIImageView()
var pic3 = UIImageView()


override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.
    [pic,btn].forEach({
        $0.translatesAutoresizingMaskIntoConstraints = false
        self.view.addSubview($0)
        $0.backgroundColor = .systemRed
    })
    pic3.backgroundColor = .systemOrange
       pic2.backgroundColor = .systemPink


    pic.topAnchor.constraint(equalTo: view.topAnchor, constant: 10).isActive = true
    pic.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -200).isActive = true
    pic.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 15).isActive = true
    pic.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -15).isActive = true

    pic2.topAnchor.constraint(equalTo: view.topAnchor, constant: 10).isActive = true
    pic2.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -100).isActive = true
    pic2.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 15).isActive = true
    pic2.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -15).isActive = true

    pic3.topAnchor.constraint(equalTo: view.topAnchor, constant: 10).isActive = true
    pic3.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -100).isActive = true
    pic3.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 15).isActive = true
    pic3.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -15).isActive = true
}
}

【问题讨论】：

把它们放在UIStackView中。

标签： swift view autolayout constraints

【解决方案1】：

使用自动布局约束：对齐边缘，然后使用视图的（或 SafeAreaLayoutGuide 的）高度锚点和三分之一的乘数。为了允许舍入，只将高度锚分配给三个视图中的两个，并使用顶部/底部锚来设置剩余视图的高度。

   let view1 = UIView()
   view1.translatesAutoresizingMaskIntoConstraints = false
   view1.backgroundColor = .blue
   let view2 = UIView()
   view2.translatesAutoresizingMaskIntoConstraints = false
   view2.backgroundColor = .yellow
   let view3 = UIView()
   view3.translatesAutoresizingMaskIntoConstraints = false
   view3.backgroundColor = .purple
   view.addSubview(view1)
   view.addSubview(view2)
   view.addSubview(view3)

   //set constraints
   NSLayoutConstraint.activate([
      // anchor edges
      view1.leadingAnchor.constraint(equalTo: view.leadingAnchor),
      view1.trailingAnchor.constraint(equalTo: view.trailingAnchor),
      view2.leadingAnchor.constraint(equalTo: view.leadingAnchor),
      view2.trailingAnchor.constraint(equalTo: view.trailingAnchor),
      view3.leadingAnchor.constraint(equalTo: view.leadingAnchor),
      view3.trailingAnchor.constraint(equalTo: view.trailingAnchor),
      // set anchors governing height
      view1.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
      view2.topAnchor.constraint(equalTo: view1.bottomAnchor),
      view2.bottomAnchor.constraint(equalTo: view3.topAnchor),
      view3.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
      view1.heightAnchor.constraint(equalTo: view.layoutMarginsGuide.heightAnchor, multiplier: 1/3),
      view2.heightAnchor.constraint(equalTo: view.layoutMarginsGuide.heightAnchor, multiplier: 1/3)
   ])

【讨论】：

【解决方案2】：

这是使用UIStackView 的可能解决方案：

（免责声明：在浏览器中输入，未在 Xcode 中测试）

此外，您可能仍需要自动布局以使 stackView 覆盖屏幕。

var view1 = UIView()
var view2 = UIView()
var view3 = UIView()

override func viewDidLoad() {
    super.viewDidLoad()

    view1.backgroundColor = .blue
    view1.backgroundColor = .green
    view1.backgroundColor = .red

    let stackView = UIStackView(arrangedSubviews: [view1, view2, view3])  

    stackView.axis = .vertical
    stackView.distribution = .fillEqually

    self.view.addSubview(stackView)

}

【讨论】：