Mise en page de la grille avec CollectionView dans Swift

résultat:

1) Tout d'abord, je pense que vous devez changer la façon dont vous regardez cette disposition. Il n'y a pas de séparation. Juste des cellules UICollectionView avec espacement entre les cellules, diminution de l'opacité et un peu de flou.

ce paramètre vous donnera quelque chose de proche de l'image que vous avez posté, vous pouvez l'éditer pour vos besoins plus tard:

sur storyboard allez à votre Inspecteur de la taille d'UICollectionView.

Espacement Minimum- > Pour Les Cellules = 2, Pour Les Lignes = 2.

Insets De Section - > Gauche = 7, Droite = 7.

2) j'utilise ceci sur mon application pour diviser l'espace de façon égale pour 3 cellules. Changé de vos paramètres. Il suffit de copier/coller et vous êtes bon pour aller.

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
        let screenSize: CGRect = UIScreen.mainScreen().bounds
        let screenWidth = screenSize.width
        return CGSize(width: (screenWidth/3)-6, height: (screenWidth/3)-6);
        }
    }

et comme la dernière étape mettre deux images sur le dessus de CollectionView, à la gauche et à droite de la vue et faire des largeurs égales à 7 et des hauteurs égales à UICollectionView. Ces images doivent avoir la même opacité/fond avec des cellules. Cela le fera ressembler à l'image que vous voulez.

J'espère que ma réponse vous convient. Bonne chance.

la première chose que je voudrais dire est, votre tout ci-dessus résultat peut être atteint à partir de UICollectionViewFlowLayout , qui est la disposition par défaut pour UICollectionView.

UICollectionViewDelegateFlowLayout a toutes les méthodes qui peuvent répondre à vos exigences.

1. le flowLayout a minimumLineSpacingForSectionAtIndex et minimumInteritemSpacingForSectionAtIndex pour donner l'espacement entre les cellules(à la fois horizontalement et verticalement).

2. ce n'est pas une bonne façon de donner le cadre de la cellule dans cellForItemAtIndexPath (comme vous soumettre le lien de réponse). Pour cette flowLayout fournit un délégué pour la cellule de dimensionnement sizeForItemAtIndexPath .

3. A propos de la troisième question, oui vous pouvez utiliser UIVisualEffectView pour le bluring but mais compatible pour seulement après iOS 8 et a un problème avec iPad2 je suppose. Mais pour votre problème, je brouillerais chaque cellule plutôt que collectionView lui-même (depuis la cellule l'espacement n'est pas flou).

je ne trouve rien sur les "séparateurs" (la ligne qui divise toutes les cases). J'aime qu'il ne touche pas les bordures de l'écran horizontalement. Est-ce fait par programme?

Oui, on dirait que c'est rendu à un couche . Vous devriez lire le guide de programmation 2D de Quartz pour obtenir une poignée sur le dessin et le travail avec les couches.

Pour diviser l'Espace également dans tous les dispositifs (3 boîtes/boutons horizontalement) j'ai trouvé cette réponse de réponse. Est-ce la bonne solution?

ce serait une option, mais ne vous donnerait pas les séparateurs qui vous ressemblent à partir de votre capture d'écran.

je voudrais que le backgroundColor de ma vue cell soit défini à clearColor, et puis définir la propriété backgroundView d'UICollectionView à une vue contenant votre séparateurs et l'effet de flou. Assurez-vous que la propriété backgroundColor de UICollectionView est définie à clearColor.

à propos de la troisième question, oui vous pouvez utiliser UIVisualEffectView à des fins de bluring mais compatible uniquement après iOS 8 et a un problème avec iPad2 je suppose. Mais pour votre problème, je brouillerais chaque cellule plutôt que collectionView lui-même (puisque l'espacement des cellules n'est pas flou).

Si vous utilisez le la propriété backgroundView de L'UICollectionView pour gérer vos séparateurs et flouter alors vos cellules n'auraient besoin que d'avoir leur backgroundColor réglé à clearColor.

vous devriez noter qu'il y a plus d'une façon de faire cela, chaque façon aura ses propres inconvénients choisir ce qui fonctionne le mieux pour vous.

j'ai créé cette méthode pour la mise en page personnalisée. Vous pouvez utiliser en modifiant selon votre demande.

func setCollectionLayout() {
    let layout:UICollectionViewFlowLayout = UICollectionViewFlowLayout()
    layout.sectionInset = UIEdgeInsets(top:0,left:0,bottom:0,right:0)
    layout.itemSize = CGSize(width: UIScreen.main.bounds.size.width/2 - 1, height: 136)
    layout.minimumInteritemSpacing = 1
    layout.minimumLineSpacing = 1
    collectionView.collectionViewLayout = layout
}