iPad 和 iPhone 上的 UIScrollView 分页布局答案

【问题标题】：UIScrollView paging layout on iPad and iPhoneiPad 和 iPhone 上的 UIScrollView 分页布局
【发布时间】：2018-04-13 09:32:36
【问题描述】：

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

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

我在情节提要中创建了 3 个视图控制器，如下所示：

ViewController 具有UIScrollView。

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

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

UILabels 的约束是：

这里是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($1)
            $1.view.frame = CGRect(x: UIScreen.main.bounds.width * CGFloat($0), y: 0, width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
            scrollView.addSubview($1.view)
            didMove(toParentViewController: $1)
    }
}

}

如果我选择 以 iPhone 8 方式查看，那么布局在 iPhone 8 中可以正常工作，如下所示：（然后从绿色滑动到红色）

但对于 iPad：

标签没有居中！！。

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

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

感谢您的帮助。

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

【问题讨论】：

标签： ios swift uiscrollview autolayout uicontainerview

【解决方案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($0)
        $0.view.translatesAutoresizingMaskIntoConstraints = false
        scrollView.addSubview($0.view)

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

无论 Xcode View as 设置如何，滚动视图都可以在所有设备上正常工作：

【讨论】：