自動佈局與動態子視圖

Question

我試圖讓我的iOS主屏幕10的應用程序就像照片從上面。綠色視圖實際上是滾動視圖，我設置約束來覆蓋整個視圖。 scrollView上的所有內容我都想滾動。黃色部分是原型單元格的集合視圖。此視圖上的項目數量是6.單元由照片和標題組成。表格視圖是新聞列表（照片+標題）。當在表格視圖中啓動應用程序時，我加載了10條最新消息和其他消息，我使用「加載更多」機制獲得了消息。即使在橫向方向上，我也需要適當的應用程序。我有問題來定義此佈局，因爲集合視圖和tableView具有動態高度和它們之間的空間必須是固定的。通常在幾乎所有的教程中，人們只是修復了scrollView和GridView，在這種情況下，縱向應用看起來不錯，但我需要更多的靈活性。是否有可能通過自動佈局和約束，如果實現這一目標是什麼是正確的方向

UPDATE：

內容視圖

Collection視圖

Wha我想實現的目的是將收藏視圖設置爲縱向2列3行，橫向3列2行。目前我有一個滾動的collectionView，但我希望隨着時間擴展，因爲collectionView的內容應該包含6個突出顯示的新聞。

在viewDidLoad中我試圖設置在正確的位置表視圖（集合視圖後）：

override func viewDidLoad() { 
    super.viewDidLoad() 
    // Do any additional setup after loading the view, typically from a nib. 

    collection.dataSource = self 
    collection.delegate = self 

    tableView.delegate = self 
    tableView.dataSource = self 


    self.view.addConstraint(
     NSLayoutConstraint(
      item: tableView, 
      attribute: .top, 
      relatedBy: .equal, 
      toItem: collection, 
      attribute: .bottom, 
      multiplier: 1.0, 
      constant: 20 
    )) 



    tableView.frame = CGRect(x: 0,y: collection.collectionViewLayout.collectionViewContentSize.height,width: tableView.frame.width,height: tableView.frame.width); // set new position exactly 

    downloadArticles(offset: "0") {} 
} 

的是我想達到的一個例子是：

目前，我有此：

Answer 1

我想我得到它的工作是這樣的：

import UIKit 

class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate, UITableViewDataSource, UICollectionViewDelegateFlowLayout, UITableViewDelegate { 
    @IBOutlet var collectionView: UICollectionView! 
    @IBOutlet var tableView: UITableView! 

    @IBOutlet var collectionViewHeightConstraint: NSLayoutConstraint! 
    @IBOutlet var tableViewHeightConstraint: NSLayoutConstraint! 

    override func viewDidLoad() { 
     super.viewDidLoad() 
     // Do any additional setup after loading the view, typically from a nib. 

     self.collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "gridCell") 

     self.tableView.register(UITableViewCell.self, forCellReuseIdentifier: "listCell") 
    } 

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

     // shrink wrap the collectionView and tableView to fit their content height snuggly 
     self.collectionViewHeightConstraint.constant = self.collectionView.contentSize.height 
     self.tableViewHeightConstraint.constant = self.tableView.contentSize.height 
    } 

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

    // MARK: - CollectionView Methods - 
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { 
     return 6; 
    } 

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { 
     let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "gridCell", for: indexPath) 

     return cell 
    } 

    func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath) { 
     cell.backgroundColor = UIColor.lightGray 
    } 

    func calculateGridCellSize() -> CGSize { 
     // ----------------------------------------------------- 
     // Calculate the size of the grid cells 
     // ----------------------------------------------------- 
     let screenWidth = self.view.frame.size.width 
     let screenHeight = self.view.frame.size.height 

     var width:CGFloat = 0 
     var height:CGFloat = 0 

     if(UIDeviceOrientationIsPortrait(UIDevice.current.orientation)) { 
      width = screenWidth/2.0 - 0.5 
      height = width 
     } 
     else { 
      width = screenWidth/3.0 - 1.0 
      height = screenHeight/2.0 - 0.5 
     } 

     let size:CGSize = CGSize(width: width, height: height) 

     return size 
    } 

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { 
     return self.calculateGridCellSize() 
    } 

    override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) { 

     coordinator.animate(alongsideTransition: { (context) in 
      print("New screen size = \(size.width) x \(size.height)") 
      self.collectionView.collectionViewLayout.invalidateLayout() 
      self.collectionViewHeightConstraint.constant = self.collectionView.contentSize.height 
      self.tableViewHeightConstraint.constant = self.tableView.contentSize.height 
      self.view.layoutIfNeeded() 
     }) { (context) in 
      self.collectionViewHeightConstraint.constant = self.collectionView.contentSize.height 
      self.tableViewHeightConstraint.constant = self.tableView.contentSize.height 
      self.view.layoutIfNeeded() 
     } 
    } 

    // MARK: - TableView Methods - 
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { 
     return 10; 
    } 

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { 
     let cell = tableView.dequeueReusableCell(withIdentifier: "listCell", for: indexPath) 

     return cell 
    } 

    func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) { 
     cell.textLabel?.text = "list cell \(indexPath.row)" 
    } 
} 

對於接口布局，我這樣做：

1. 添加scrollView主視圖
2. 引腳scrollview四面主視圖
3. 添加contentView至scrollView
4. 銷contentView全部四面至scrollView
5. 請contentView寬度等於scrollView寬度
6. 添加collectionView到contentView
7. 添加tableView到contentView和垂直下方collectionView
8. 引腳左側，頂部的collectionView權利contentView
9. 引腳左，下，右的tableView至contentView和tableView的頂部至底部的collectionView
10. 讓collectionView高度667和創建IBOutlet中NSLayoutConstraint爲collectionView高度（所以我們可以稍後更新）
11. 讓tableView高度667和創建IBOutlet中NSLayoutConstraint爲tableView高度（也稍後更新）
12. 讓collectionView分項間距1行間距1
13. 禁用scrollingEnabled爲collectionView
14. 禁用scrollingEnabled爲tableView
15. 連接collectionView數據源和委託給控制器
16. 連接tableView數據源和委託給控制器

這裏的佈局的截圖，如果它的任何幫助。

我通常使用純代碼建立自己的用戶界面，你將能夠複製和粘貼，點擊運行按鈕，但由於您使用的故事板使用，我把它用故事板，希望你可以按照顯示我的佈局設置說明。

這裏的結果：

這是你想要的嗎？