iPad和iPhone上的UIScrollView分页布局

William Hu 发表于 Dev

胡伟

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

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

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

ViewController有UIScrollView。

AViewControllerUILabel在center（“ Good morning...”）中包含一个。

BViewControllerUILabel在center（“ 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

莫特

嵌入式视图控制器视图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
}