autolayout avec la dynamique subviews

Question

Je suis en train de faire l'écran d'accueil sur mes ios 10 application comme sur la photo d'en haut. La vue verte est en fait une vue de défilement et j'ai fixé des contraintes pour qu'elle couvre toute la vue. Tout sur scrollView je veux faire défiler. La partie jaune est une vue de collection avec une cellule prototype. Le nombre d'articles sur cette vue est 6. La cellule se compose de la photo et du titre. La vue de table est la liste des nouvelles (photo + titre). Lorsque démarrer l'application en vue de table, je charge 10 dernières nouvelles et le reste des nouvelles que je reçois avec "charger plus" mécanisme. J'ai besoin d'un bon travail d'application même sur l'orientation du paysage. J'ai un problème pour définir cette disposition parce que la vue de collection et la tableView ont la taille dynamique et l'espace entre eux doit être fixé. Habituellement, sur presque tous les tutoriels, les utilisateurs ont simplement corrigé scrollView et GridView et dans ce cas, l'application semble bien sur l'orientation portrait, mais j'ai besoin d'une plus grande flexibilité. Est-il possible d'atteindre cet objectif par la mise en page automatique et les contraintes et si oui quelles sont les directions correctes

MISE À JOUR:

afficher le contenu

vue Collection

Wha Je veux atteindre est de faire la vue de la collection en tant que deux colonnes et 3 lignes en orientation portrait et 3 colonnes et 2 lignes sur le paysage. Actuellement, j'ai collectionView avec un parchemin mais je veux être élargi à l'heure car le contenu de collectionView devrait se composer de 6 nouvelles en surbrillance.

Sur viewDidLoad J'ai essayé de définir l'affichage de tableau de la position correcte (après vue de collection):

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") {} 
} 

Un exemple de ce que je veux réaliser est:

Actuellement je ceci:

Answer 1

Je pense que je l'ai eu à travailler comme ceci:

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)" 
    } 
} 

Pour la mise en page de l'interface, je l'ai fait:

1. Ajouter scrollView à la vue principale
2. Pin scrollview tous la vue principale quatre côtés
3. Ajouter contentView à scrollView
4. Pin contentView tous les quatre côtés à scrollView
5. Faire contentView largeur égale à scrollView largeur
6. Ajouter collectionView à contentView
7. Ajouter tableView-contentView et verticalement au-dessous collectionView
8. Pin à gauche, en haut, à droite de collectionView à contentView
9. Pin gauche, bas, droite de tableView à contentView et en haut de tableView en bas de collectionView
10. Faire collectionView hauteur 667 et créer IBOutlet NSLayoutConstraint pour collectionView hauteur (afin que nous puissions le mettre à jour plus tard)
11. Faire tableView hauteur 667 et créer IBOutlet NSLayoutConstraint pour tableView hauteur (également mettre à jour plus tard)
12. élément Make collectionView min espacement 1 et interligne 1
13. Disable scrollingEnabled pour collectionView
14. Disable scrollingEnabled pour tableView
15. Connect collectionView et délégué à la source de données contrôleur
16. Connect tableView et délégué à la source de données contrôleur

Voici une capture d'écran de la mise en page si elle est une aide.

En général, je bâtirai mon interface utilisateur en utilisant le code pur et vous seriez en mesure de copier et coller, appuyez sur le bouton d'exécution, mais puisque vous utilisez à l'aide Storyboard, je l'ai montré à l'aide Storyboard, vous pouvez nous l'espérons suivre mes instructions d'installation de mise en page.

est ici le résultat:

Est-ce ce que vous vouliez?