autolayout с динамикой подвиды

Question

Я пытаюсь сделать домашний экран на моем ИОС 10 приложения, как на фото сверху. Зеленый вид - это прокрутка, и я устанавливаю ограничения для охвата всего представления. Все в scrollView я хочу сделать прокручиваемым. Желтая часть представляет собой коллекцию с прототипом ячейки. Количество элементов в этом представлении - 6. Ячейка состоит из фотографии и названия. Просмотр таблицы - список новостей (фото + название). Когда приложение запускается в виде таблицы, я загружаю 10 последних новостей и остальные новости, которые я получаю с механизмом «загрузить больше». Мне нужна правильная работа приложения даже в альбомной ориентации. У меня есть проблема, чтобы определить этот макет, потому что представление коллекции и tableView имеют динамическую высоту, а пространство между ними должно быть исправлено. Обычно почти во всех учебниках люди просто фиксировали scrollView и GridView, и в этом случае приложение выглядит хорошо на портретной ориентации, но мне нужна более гибкая. Можно ли добиться этого путем автоматической компоновки и ограничений, и если да, каковы правильные направления

UPDATE:

Content вид

вид Коллекция

Wha t Я хочу добиться, чтобы сделать просмотр коллекции в виде двух столбцов и трех строк в портретной ориентации и 3 столбца и 2 ряда по пейзажу. В настоящее время у меня есть collectionView со свитком, но я хочу, чтобы его время расширялось, потому что содержимое коллекцииView должно состоять из 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. Pin scrollview все четыре стороны основной вид
3. Add contentView до scrollView
4. Контакт contentView все четыре стороны до scrollView
5. сделать contentView ширина равна scrollView ширина
6. Добавить collectionView в contentView
7. Добавить tableView в contentView и по вертикали ниже collectionView
8. Pin слева, сверху, право collectionView к contentView
9. Pin слева, снизу, справа от tableView до contentView и сверху tableView до нижней части collectionView
10. Сделать collectionView высоту 667 и создать IBOutlet NSLayoutConstraint для collectionView высоты (так что мы можем обновить его позже)
11. Make tableView высоты 667 и создать IBOutlet NSLayoutConstraint для tableView высоты (также для обновления позже)
12. Сделать интервал collectionView мин пункт 1 и расстояние между линией 1
13. Отключить scrollingEnabled для collectionView
14. Отключить scrollingEnabled для tableView
15. соединение collectionView DataSource и делегат к контроллеру
16. Connect tableView источник данных и делегат к контроллеру

Вот скриншот макета, если это какой-либо помощи.

Обычно я строю свой пользовательский интерфейс, используя чистый код и вы сможете скопировать и вставить, нажмите кнопку запуска, но так как вы используете с помощью раскадровки, я показал, что с помощью раскадровки, надеюсь, вы можете следовать мои инструкции по настройке макета.

Вот результат:

Это то, что вы хотели?