iOS自动布局约束和框架无法正常工作

Question

我有一个嵌套在View Controller中的Scroll View，它停放在Container中。 View Controller使用一个名为ScrollingViewController的指定类，如下所示：

class ScrollingViewController: UIViewController {

    @IBOutlet weak var scrollView: UIScrollView! //outlet for the Scroll View

    override func viewDidLoad() {
        super.viewDidLoad()

        // 1) Create the two views used in the swipe container view
        var storyboard = UIStoryboard(name: "App", bundle: nil)
        var subOne: SubProfileOneViewController = storyboard.instantiateViewControllerWithIdentifier("subone") as! SubProfileOneViewController
        var subTwo: SubProfileTwoViewController = storyboard.instantiateViewControllerWithIdentifier("subtwo") as! SubProfileTwoViewController

        // 2) Add in each view to the container view hierarchy
        //    Add them in opposite order since the view hierarchy is a stack
        self.addChildViewController(subTwo);
        self.scrollView!.addSubview(subTwo.view);
        subTwo.didMoveToParentViewController(self);

        self.addChildViewController(subOne);
        self.scrollView!.addSubview(subOne.view);
        subOne.didMoveToParentViewController(self);

        // 3) Set up the frames of the view controllers to align
        //    with each other inside the container view
        var adminFrame :CGRect = subOne.view.frame;
        adminFrame.origin.x = adminFrame.width;
        subTwo.view.frame = adminFrame;

        // 4) Finally set the size of the scroll view that contains the frames
        var scrollWidth: CGFloat  = 2 * self.view.frame.width
        var scrollHeight: CGFloat  = 262
        self.scrollView!.contentSize = CGSizeMake(scrollWidth, scrollHeight);
        // Do any additional setup after loading the view.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

基本上发生的事情是，分别使用该类SubProfileOneViewController和SubProfileTwoViewController两个View控制器被实例化为subOne和subTwo 。 然后将这些作为子项添加到Scroll View中，以创建一个界面，用户可以向右滑动以访问另一个视图（几乎像Snapchat）。 subOne和subTwo应该是并排的，用户应该能够从一个滚动到下一个，反之亦然。

以下是我的故事板上的所有内容：

SubProfileOneViewController和SubProfileTwoViewController每个都有一个视图（分别用绿色和红色表示），每个都有相同的精确约束：Height = 262，superview的尾随空间= 0，superview的前导空间= 0，superview的顶部空间= 0

理想情况下，在运行时，应该有两个视图，一个绿色和一个红色，用户应该能够在每个视图之间滑动。 但是，这是实际发生的事情：

绿色和红色视图不会占据整个屏幕宽度，而是会在左侧压缩成一个小条子，而大多数视图控制器都是白色而不是各自的颜色。 我尝试了很多东西，但我不确定我做错了什么。

（ ScollingViewController中代码的ScollingViewController归到github上的lbrendanl，链接到这里： https ： //github.com/lbrendanl/SwiftSwipeView ）

Answer 1

注意： 我建议使用Autolayout解决方案，该解决方案将自动处理方向更改，屏幕尺寸，所有代码和更强大的解决方案都比我在下面开发的解决方案更好 。

使用当前的方法，使用嵌入式 UIViewControllers ，您必须等待这些控制器完成各自的初始化，这与您的布局直接竞争。 请注意，您需要在方向更改时重新计算位置+大小 。 同样，虽然这有效，但它不是一个合理的设计，因为它需要使用NSLayoutConstraint免费获得的大量代码，逻辑和一般功能。

（ 测试，构建，链接和运行 ）：

override func viewDidAppear(animated: Bool) {
    super.viewDidAppear(animated)

    // 3) Set up the frames of the view controllers to align
    //    with each other inside the container view
    var adminFrame = self.view.frame
    subOne.view.frame = adminFrame
    adminFrame.offset(dx: self.view.frame.width, dy: 0)
    subTwo.view.frame = adminFrame;

    // 4) Finally set the size of the scroll view that contains the frames
    let scrollWidth = 2 * self.view.frame.width
    self.scrollView!.contentSize = CGSizeMake(scrollWidth, self.view.frame.height)
}

这是滚动（ 在行动中 ）。 请注意，我创建了ViewLayoutAssistant.swift类的视图，它允许您非常方便地可视化位置+比例。

您也不需要告诉视图其层次结构已更改。 最后一点代码应该让你去：

@IBOutlet weak var scrollView: UIScrollView!
weak var subOne: SubProfileOneViewController!
weak var subTwo: SubProfileTwoViewController!

    self.addChildViewController(subTwo);
    self.scrollView!.addSubview(subTwo.view);
    self.addChildViewController(subOne);
    self.scrollView!.addSubview(subOne.view);

Answer 2

具有自动布局的ScrollView的工作方式不同，您可以通过设置translatesAutoresizingMaskIntoConstraints = true并显式设置contentSize来仅使用一个子视图。 或者你设置translatesAutoresizingMaskIntoConstraints = false并让它找出它自己的约束。 请访问此链接了解更多详情

如你所愿，两者都应该全屏，然后你需要添加AutoLayoutConstraints，就像这样

1. 将绿色视图固定为超级视图
2. 将greenView宽度设置为与scrollViewWidth相同，即bounds.size.width（不是contetnSizeWidth）
3. 将redView固定为绿色视图右侧
4. 设置与scrollViewWidth相同的redView宽度值，即bounds.size.width（不是contetnSize.width）