Ios 以编程方式居中多（4）个视图

我的视图控制器中有4个视图，如下所示：

self.underConstruction.frame = CGRect(x: 0, y: 125, width: 250, height: 250)

self.scheduleJobs.frame = CGRect(x: 250, y: 125, width: 250, height: 250)

self.withoutSchedule.frame = CGRect(x: 500, y: 125, width: 250, height: 250)

self.withoutPM.frame = CGRect(x: 750, y: 125, width: 250, height: 250)


self.view.addSubview(self.underConstruction)

self.view.addSubview(self.scheduleJobs)

self.view.addSubview(self.withoutSchedule)

self.view.addSubview(self.withoutPM)

override func viewWillTransition(to size: CGSize, 
    with coordinator: UIViewControllerTransitionCoordinator) {
    super.viewWillTransition(to: size, with: coordinator)
        coordinator.animate(alongsideTransition: { (con) in
            if size.width > size.height {
                self.stackView.axis = .horizontal
            } else {
                self.stackView.axis = .vertical
        }
    })
}

---

我希望这4个视图在视图控制器上居中，并且所有视图彼此相邻，当设备转到纵向时，视图居中且彼此下方。实现这一点的最佳方法是什么？

使用带有横向水平轴和纵向垂直轴的

UIStackView

---

倾听方向的变化，并相应地设置堆栈视图的

.axis

属性。

我使用三个视图实现了paulvs的解决方案（四个视图对于iPad来说太大了）。这是结果。肖像：

在景观方面：

额外的黑色视图是为了向您证明应用程序确实旋转了。除了工作正常外，视图还可以在旋转和重新排列时执行令人愉快的动画

正如paulvs所建议的，这三个视图位于堆栈视图中。它们都有宽度和高度约束。堆栈视图具有centerX和centerY约束以及填充分布和填充对齐。唯一的代码如下所示：

self.underConstruction.frame = CGRect(x: 0, y: 125, width: 250, height: 250)

self.scheduleJobs.frame = CGRect(x: 250, y: 125, width: 250, height: 250)

self.withoutSchedule.frame = CGRect(x: 500, y: 125, width: 250, height: 250)

self.withoutPM.frame = CGRect(x: 750, y: 125, width: 250, height: 250)


self.view.addSubview(self.underConstruction)

self.view.addSubview(self.scheduleJobs)

self.view.addSubview(self.withoutSchedule)

self.view.addSubview(self.withoutPM)

override func viewWillTransition(to size: CGSize, 
    with coordinator: UIViewControllerTransitionCoordinator) {
    super.viewWillTransition(to: size, with: coordinator)
        coordinator.animate(alongsideTransition: { (con) in
            if size.width > size.height {
                self.stackView.axis = .horizontal
            } else {
                self.stackView.axis = .vertical
        }
    })
}

你可以试试

class ViewController: UIViewController {

    let st  = UIStackView() 
    let v1  = UIView()
    let v2  = UIView()
    let v3  = UIView()
    let v4  = UIView()

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.

        st.translatesAutoresizingMaskIntoConstraints = false

        v1.backgroundColor = .red
        v2.backgroundColor = .gray
        v3.backgroundColor = .green
        v4.backgroundColor = .blue

        v1.translatesAutoresizingMaskIntoConstraints = false

        v2.translatesAutoresizingMaskIntoConstraints = false

        v3.translatesAutoresizingMaskIntoConstraints = false

        v4.translatesAutoresizingMaskIntoConstraints = false

        st.axis = .vertical

        st.distribution = .fillEqually

        st.alignment = .center

        view.addSubview(st)

        st.addArrangedSubview(v1)

        st.addArrangedSubview(v2)

        st.addArrangedSubview(v3)

        st.addArrangedSubview(v4)

        NSLayoutConstraint.activate([

            st.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),

            st.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),

            st.topAnchor.constraint(equalTo: self.view.topAnchor,constant:20),

            st.bottomAnchor.constraint(equalTo: self.view.bottomAnchor),

            v1.widthAnchor.constraint(equalTo: v1.heightAnchor),

            v2.widthAnchor.constraint(equalTo: v2.heightAnchor),

            v3.widthAnchor.constraint(equalTo: v3.heightAnchor),

            v4.widthAnchor.constraint(equalTo: v4.heightAnchor),

        ])

    }

    override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
        super.viewWillTransition(to: size, with: coordinator)
        if UIDevice.current.orientation.isLandscape {
           st.axis = .horizontal
        } else {
           st.axis = .vertical
        }

    }
}

编辑：

class ViewController: UIViewController {

    let st  = UIStackView()
    let st1 = UIStackView()
    let st2 = UIStackView()

    let v1  = UIView()
    let v2  = UIView()
    let v3  = UIView()
    let v4  = UIView()

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.

        st.translatesAutoresizingMaskIntoConstraints = false

        v1.backgroundColor = .red
        v2.backgroundColor = .gray
        v3.backgroundColor = .green
        v4.backgroundColor = .blue



        v1.translatesAutoresizingMaskIntoConstraints = false

        v2.translatesAutoresizingMaskIntoConstraints = false

        v3.translatesAutoresizingMaskIntoConstraints = false

        v4.translatesAutoresizingMaskIntoConstraints = false


        st.axis = .vertical

        st1.axis = .horizontal

        st2.axis = .horizontal

        st.distribution = .fillEqually

        st.alignment = .center

        view.addSubview(st)

        st.addArrangedSubview(st1)

        st.addArrangedSubview(st2)

        st1.addArrangedSubview(v1)

        st1.addArrangedSubview(v2)

        st2.addArrangedSubview(v3)

        st2.addArrangedSubview(v4)

        st1.distribution = .fillEqually

        st2.distribution = .fillEqually

        NSLayoutConstraint.activate([

            st.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),

            st.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),

            st.topAnchor.constraint(equalTo: self.view.topAnchor,constant:20),

            st.bottomAnchor.constraint(equalTo: self.view.bottomAnchor),

            v1.widthAnchor.constraint(equalTo: v1.heightAnchor),

            v2.widthAnchor.constraint(equalTo: v2.heightAnchor),

            v3.widthAnchor.constraint(equalTo: v3.heightAnchor),

            v4.widthAnchor.constraint(equalTo: v4.heightAnchor),


        ])

    }

    override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
        super.viewWillTransition(to: size, with: coordinator)
        if UIDevice.current.orientation.isLandscape {
           st.axis = .horizontal
           st1.axis = .vertical
           st2.axis = .vertical
        } else {
           st.axis = .vertical
            st1.axis = .horizontal 
            st2.axis = .horizontal
        }

    }
}

---

横向水平堆叠和纵向垂直堆叠？这是一个很好的例子？这非常好…为了获得额外的积分，而不是一个低于另一个，我如何在纵向中每行获得两个？非常感谢，这非常好…但是当我在纵向中时，我的视图非常大。我该如何解决这个问题？