Xcode / IB-自動布局，多個容器視圖和滾動視圖

Question

我正在嘗試通過一些容器視圖在Xcode下與IB建立接口。

我將盡力解釋這個問題：

我有一個包含兩個控制器的主場景。 第一個位於場景頂部，包含一個“最新帖子視圖”，該視圖可從Wordpress網站檢索最后一篇帖子，並顯示封面圖像，帖子的日期和標題。

第二個包含一個集合視圖，該視圖可導致其他視圖。

從功能上和獨立性來看，一切似乎正常。 問題是我無法弄清楚如何使用自動布局功能使此“堆棧”工作並適合縱向和橫向模式以及其他設備。

這是我的故事板

家庭控制器的約束

最后發布視圖的約束

集合視圖的約束

..最后，我得到了什么

經過數小時的搜索和嘗試，我發現Home Controller中包含的Scroll View必須只有一個直接子級。 但是我不知道如何施加不同的約束。 另外，我總是收到消息：“滾動視圖”的可滾動內容大小不明確。

我遇到的另一個問題是，當我處於橫向模式時，無法滾動“整個視圖”。 充其量，我只能滾動“收藏夾視圖”（當我可以顯示它時），而不是整個屏幕。

（如果我說我正在使用Swift 2，也許會有所幫助）

有人有建議嗎？ 將不勝感激！

非常感謝！

編輯1

我嘗試應用新溝的解決方案，我認為我的目標已經很接近了，但是我顯然錯過了一些東西。

這是我的HomeViewController

class HomeViewController: UIViewController {

    @IBOutlet weak var scrollView: UIScrollView!
    @IBOutlet weak var containerViewHeightConstrait: NSLayoutConstraint!
    @IBOutlet weak var lastPostContainerView: UIView!
    @IBOutlet weak var scrollContainerView: UIView!
    @IBOutlet weak var mainCollectionContainerView: UIView!

   /*************************/
   /***** VIEW DID LOAD *****/
   /*************************/

   override func viewDidLoad() {

       super.viewDidLoad()

       self.automaticallyAdjustsScrollViewInsets = false

       self.lastPostContainerView.setNeedsDisplay()
       self.mainCollectionContainerView.setNeedsDisplay()

       self.containerViewHeightConstrait.constant = UIScreen.mainScreen().bounds.height - 64

    //END viewDidLoad
    }

    ...

    /********************************/
    /***** SET CONTAINER HEIGHT *****/
    /********************************/

    func needSetContainerHeight( height: CGFloat ) {

        self.containerViewHeightConstrait.constant = height + lastPostContainerView.bounds.height + 200
        self.scrollView.contentSize.height = height + lastPostContainerView.bounds.height + 200

        print( "View Height Constrait \( self.containerViewHeightConstrait.constant )" )
        print( "Scroll View Height \( self.scrollView.contentSize.height )" )

    //END needSetContainerHeight
    }

    ...

...和我的MainCollectionController

class MainCollectionViewController: UICollectionViewController {

    /*************************/
    /***** VIEW DID LOAD *****/
    /*************************/

    override func viewDidLoad() {

        super.viewDidLoad()

        collectionView!.autoresizingMask = [ .FlexibleWidth ]

    //END viewDidLoad
    }

    /****************************************/
    /****************************************/

    /***************************/
    /***** VIEW DID APPEAR *****/
    /***************************/

    override func viewDidAppear( animated: Bool ) {

        super.viewDidAppear( animated )
        ( self.parentViewController as! HomeViewController ).needSetContainerHeight( self.collectionView!.contentSize.height )

    //END viewDidAppear
    }

    ...

如果我很好地理解了所提出的內容，則約束如下所示：

（主視圖）

滾動視圖

子視圖容器

最后發布的容器

收集容器

所有約束清單

...以及我得到的

肖像

景觀

我進行了一些具有不同額外約束的測試，結果發現我必須告訴Scroll View填充其整個父級，才能在屏幕上顯示某些內容（否則，我會得到紅色背景）。

另一件事是，如果我為“最后一個帖子容器”和“收藏容器”之間的空間添加了一個約束，則事物處於“良好”的位置，但是我無法再單擊該收藏的單元格。 但是，如果我不添加此約束，則情況會更加混亂（例如，集合視圖與發布視圖重疊），但是我可以單擊單元格。

不幸的是，屏幕似乎被裁剪了，旋轉屏幕時有些差異。 但是我認為我必須在設備旋轉時重新計算高度（是嗎？）。 屏幕頂部的邊距仍在此處，但並非總是如此：這取決於我以哪種模式啟動該應用以及執行了多少旋轉。

我忘了提及的另一件事是，上一篇文章是異步檢索的。 因此，在顯示主屏幕后，將顯示具有可變大小的封面圖像。 我在AppDelegate中移動了它-didFinishLaunchingWithOptions，並將帖子存儲在通知中心中，但是不幸的是，仍然有些延遲。

有什么建議么？ :)

解

就像Xingou所說的那樣，使用集合視圖的標題部分（Accessories / Section Header）要容易得多。

Answer 1

您需要解決以下問題：

1. 就您而言，viewdidload，添加以下代碼：

   self.automaticallyAdjustsScrollViewInsets = false這會使導航欄和您圖片之間的紅色區域消失。

2. 修復了“滾動視圖”的可滾動內容大小不明確的問題：這是因為滾動視圖不知道它將顯示的內容大小。您需要重置視圖的約束（兩個容器視圖的超級視圖），我將其稱為scrollcontainerview ：

scrollcontainerview.leading = scrollview.lead

scrollcontainerview.trailing = scrollview.trailing

scrollcontainerview.top = scrollview.top

scrollcontainerview.bottom = scrollview.bottom

scrollcontainerview.width = self.view.width

scrollcontainerview.height = 603 //我們將通過代碼更改此值

現在，“可滾動內容大小對於“滾動視圖”不明確”錯誤應該消失了。

3. 更改代碼中的scrollcontainerview.height：在您的主場景中，將scrollcontainerview.height約束拖動到視圖控制器中，並進行更改以適合屏幕：

   @IBOutlet弱var contianerViewHeightConstrait：NSLayoutConstraint！

     override func viewDidLoad() { super.viewDidLoad() self.automaticallyAdjustsScrollViewInsets = false //because we set the height at const 603,but height is different on different device,so we need chang it to the correct value contianerViewHeightConstrait.constant = UIScreen.mainScreen().bounds.height - 64 } 

現在您可以在屏幕上看到兩個容器視圖。

4. 需要滾動整個內容，而不僅是集合視圖：要解決此問題，您需要將正確的高度分配給scrollview.contentsize.height。 在您的集合視圖控制器中：

  override func viewDidAppear(animated: Bool) { super.viewDidAppear(animated) (self.parentViewController as! HomeScenceViewController).needSetContainerHeight(self.collectionView.contentSize.height) } 

然后在HomeScenceViewController中添加一個方法

  // set the containerview and scrollview height func needSetContainerHeight(height:CGFloat){ //the 200 is your first container view's height contianerViewHeightConstrait.constant = height + 200 scrollview.contentSize.height = height + 200 } 

現在您應該可以滾動整個內容