iPad 和 iPhone 上的 UIScrollView 分页布局

Question

我正在制作一个通用演示 xcode 项目，它是一个 UIScrollView 包含两个页面，左右滚动可以来回移动。

我的问题是iPad和iPhone的布局不一样。

我在故事板中创建了 3 个视图控制器，如下所示：

ViewController 有 UIScrollView.

AViewController 在中心包含一个 UILabel("Good morning...")。

BViewController 在中心包含一个 UILabel("Good night...")。

UILabel 的约束是：

这里是ViewController的代码：

class ViewController: UIViewController {

    @IBOutlet weak var scrollView: UIScrollView!
    override func viewDidLoad() {
        super.viewDidLoad()
        let story = UIStoryboard(name: "Main", bundle: nil)
        let vc1 = story.instantiateViewController(withIdentifier: "AViewController")
        let vc2 = story.instantiateViewController(withIdentifier: "BViewController")
        vc1.view.backgroundColor = UIColor.green
        vc2.view.backgroundColor = UIColor.red
        addContentView([vc1, vc2])
        scrollView.contentSize = CGSize(width: UIScreen.main.bounds.width * 2, height: scrollView.frame.height)
    }

    func addContentView(_ viewControllers: [UIViewController]) {
        viewControllers.enumerated().forEach {
            addChildViewController()
            .view.frame = CGRect(x: UIScreen.main.bounds.width * CGFloat([=12=]), y: 0, width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
            scrollView.addSubview(.view)
            didMove(toParentViewController: )
    }
}

}

如果我选择 View as iPhone 8 那么布局在 iPhone 8 中是正确的，如下所示：（然后从绿色到红色）

但是 iPad:

标签没有居中！！.

如果我选择 View as iPad ... ，那么对于 iPhone 它的布局不正确。

这是视图层次结构，很明显布局是正确的，但由于某种原因，绿色视图大于屏幕尺寸并被红色视图覆盖。

感谢您的帮助。

代码在这里：https://github.com/williamhqs/TestLayout

Answer 1

嵌入式视图控制器视图默认有 translatesAutoresizingMaskIntoConstraints = true，这引入了虚假约束：将其设置为 false 不会让您手动设置框架，因此您必须编写完整的布局。它稍微冗长一些，但是自动布局将适用于嵌入式视图控制器并且您也可以获得旋转支持：

@IBOutlet weak var scrollView: UIScrollView!
override func viewDidLoad() {
    super.viewDidLoad()
    let story = UIStoryboard(name: "Main", bundle: nil)
    let vc1 = story.instantiateViewController(withIdentifier: "AViewController")
    let vc2 = story.instantiateViewController(withIdentifier: "BViewController")
    vc1.view.backgroundColor = UIColor.green
    vc2.view.backgroundColor = UIColor.red
    addContentView([vc1, vc2])
}

func addContentView(_ viewControllers: [UIViewController]) {
    var previousController: UIViewController? = nil
    viewControllers.forEach {
        addChildViewController([=10=])
        [=10=].view.translatesAutoresizingMaskIntoConstraints = false
        scrollView.addSubview([=10=].view)

        [=10=].view.widthAnchor.constraint(equalTo: scrollView.widthAnchor).isActive = true
        [=10=].view.heightAnchor.constraint(equalTo: scrollView.heightAnchor).isActive = true
        if let trailing = previousController?.view.trailingAnchor {
            [=10=].view.leadingAnchor.constraint(equalTo: trailing).isActive = true
        } else {
            [=10=].view.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
        }
        [=10=].view.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
        [=10=].view.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true
        didMove(toParentViewController: self)
        previousController = [=10=]
    }
    previousController?.view.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
}

无论 Xcode View as 设置如何，滚动视图在所有设备上都按预期工作：

iPad 和 iPhone 上的 UIScrollView 分页布局

UIScrollView paging layout on iPad and iPhone

uiscrollview

ios

autolayout

uicontainerview

swift