Question

我的视图控制器中有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)

我希望这4个视图在视图控制器上居中，并且所有这些视图彼此相邻，并且当设备变为纵向时，这些视图居中并在彼此下方。最好的方法是什么？

Answer 1

使用UIStackView，横轴为横向，纵轴为纵向。

收听方向更改并相应地设置堆栈视图的.axis属性。

Answer 2

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

横向：

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

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

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
        }
    })
}

Answer 3

您可以尝试

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
        }

    }
}

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

3 个答案: