2017-06-26 10 views
1

Je suis en train de créer une application qui est similaire à la mise en page dans l'application d'Apple iOS Nouvelles sur 10. Il y a différentes sections comme Top Stories, For you, etc. Je l'ai mis une photo de la For You section ci-dessous:Comment faire une vue de collection similaire à l'application Apple News?


la disposition ci-dessus a un grand article sur le dessus (12 milliards de gallons de l'article de l'eau), puis 2 articles horizontaux (Ron howard et Google cloud) et enfin deux articles verticaux (Philando Castile et Daniel Day-Lewis).

Ma question est de savoir comment on pourrait y parvenir? Ce que je pense est que vous avez plusieurs sections dans un UICollectionView (une section pour For you, Technology, Politics, etc) et chaque section a une cellule principale UICollectionView. Ensuite, à l'intérieur de cette cellule principale, vous avez 3 cellules différentes (une pour le grand article, une pour les articles verticaux et une pour les articles horizontaux). Est-ce un bon moyen d'y parvenir? Comme la création de ce nombre de cellules pour un UICollectionView?

+2

Vous devez créer une disposition de flux personnalisée pour votre vue de collection. Ensuite, vous pouvez essentiellement créer n'importe quel style sans avoir besoin d'imbriquer des cellules de vue de collection. Vous pouvez trouver de nombreux exemples en ligne, il suffit de rechercher UICollectionViewFlowLayout personnalisé – BJHStudios

+0

@BJHStudios Merci beaucoup! C'est exactement ce que je cherchais. Je vais jeter un coup d'oeil à bientôt :) – CapturedTree

Répondre

4

Vous pouvez utiliser UICollectionFlowLayout pour mettre en page tout ce que vous voulez.

Voici un example Je l'ai fait tout à l'heure.

Espérons que cela peut aider. sample

+0

Merci beaucoup c'est parfait. J'étais simplement curieux dans 'ViewController.swift' Je ne vois nulle part où vous définissez la flowlayout personnalisée à la vue de la collection. Plus spécifiquement cette propriété: '@IBOutlet weak var flowLayout: AppleNewsFlowLayout! {...} ' – CapturedTree

+1

' AppleNewsFlowLayout' est défini sur 'collectionView of StoryBoard', vous pouvez vérifier dans' l'inspecteur d'attributs'. – ovo

+1

Vous pouvez voir l'entité 'AppleNewsFlowLayout' (le cube jaune) à' Document Outline' après avoir ajouté une classe de disposition à la vue de la collection. – ovo