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）