web-dev-qa-db-fra.com

Mise en grille avec UICollectionView dans Swift

Je voudrais atteindre ce résultat:  enter image description here

En cherchant autour de moi, j'ai découvert que la façon de le faire est probablement d'utiliser UICollectionView, donc pas de problème, étant donné qu'il existe de nombreux tutoriels et questions sur le dépassement de capacité. J'ai 3 questions: 

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

  2. Pour diviser l’espace de manière égale dans tous les appareils (3 cases/boutons horizontalement), j’ai trouvé cette réponse réponse . Est-ce la bonne approche?

  3. Pour l'effet Blur, j'ai trouvé cette réponse: Comment implémenter UIVisualEffectView dans UITableView avec des séquences adaptatives

Pour un TableView ce serait:

if (!UIAccessibilityIsReduceTransparencyEnabled()) {
tableView.backgroundColor = UIColor.clearColor()
let blurEffect = UIBlurEffect(style: .Light)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
tableView.backgroundView = blurEffectView
}

Puis-je faire quelque chose comme ça?

     @IBOutlet var collectionView: UICollectionView!
    if (!UIAccessibilityIsReduceTransparencyEnabled()) {
    collectionView.backgroundColor = UIColor.clearColor()
    let blurEffect = UIBlurEffect(style: .Light)
    let blurEffectView = UIVisualEffectView(effect: blurEffect)
    collectionView.backgroundView = blurEffectView
    }
iosswiftgridviewuicollectionviewuicollectionviewcell
26
mat

Créez la UICollectionViewController comme ceci dans un fichier que les sous-classes de UICollectionViewController:

convenience override init() {
    var layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
    layout.itemSize = CGSizeMake(<width>, <height>)
    // Setting the space between cells
    layout.minimumInteritemSpacing = <Space between columns>
    layout.minimumLineSpacing = <Space between rows>
    return (self.init(collectionViewLayout: layout))
}

Dans la viewDidLoad, vous définissez la couleur d’arrière-plan comme suit:

self.collectionView.backgroundColor = UIColor.orangeColor()

À mon avis, vous pouvez définir une image d’arrière-plan comme celle-ci:

self.collectionView?.backgroundColor = UIColor(patternImage: UIImage(named: "image.png")!)

L'effet de flou que vous avez trouvé semble bon. J'ai du mal à comprendre comment cela fonctionnerait. Probablement le définir en utilisant la propriété backgroundView .

Je mettrai à jour si je trouve la réponse.

Mettre à jour:

Voici une idée de quelque chose qui pourrait fonctionner pour brouiller les cellules.

Créez une classe cacao-touch qui sous-classe à partir de UICollectionViewCell, puis ajoutez-y ce code:

convenience override init(frame: CGRect) {
    self.init(frame: frame)
    var blurEffect: UIVisualEffect
    blurEffect = UIBlurEffect(style: .Light)
    var visualEffectView: UIVisualEffectView
    visualEffectView = UIVisualEffectView(effect: blurEffect)
    visualEffectView.frame = self.maskView!.bounds
    self.addSubview(visualEffectView)
}

override func layoutSubviews() {
    super.layoutSubviews()
    self.maskView!.frame = self.contentView.bounds
}

Puis, dans le fichier CollectionViewController, dans la viewDidLoad, modifiez cette ligne de code:

self.collectionView!.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: reuseIdentifier)

Remplacez UICollectionViewCell.self par <Name of CollectionViewCell file>.self

10
Caleb Kleveter

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éparateur. Juste les cellules UICollectionView avec un espacement entre les cellules, une opacité réduite et un peu de flou. 

Ces paramètres vous donneront quelque chose de proche de l'image que vous avez postée, vous pouvez la modifier pour vos besoins plus tard:

Dans le storyboard, accédez à l'inspecteur de taille de votre UICollectionView.
Espacement min .-> Pour les cellules = 2, Pour les lignes = 2.
Section Insets-> Left = 7, Right = 7.

2) J'utilise ceci sur mon application pour diviser l'espace de manière égale pour 3 cellules. Changé pour vos paramètres. Il suffit de copier/coller et vous êtes prêt à partir.

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 dernière étape, placez deux images au-dessus de CollectionView, à gauche et à droite de la vue, et créez des largeurs égales à 7 et des hauteurs égales à UICollectionView. Ces images doivent avoir la même opacité/arrière-plan avec les cellules. Cela fera ressembler l'image que vous voulez.
J'espère que ma réponse fonctionne pour vous. Bonne chance.

7
enoktate

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

Oui, il semble que le rendu soit rendu sur un calque . Vous devriez lire le Guide de programmation de Quartz 2D pour avoir une idée du dessin et du travail avec les calques.

Pour diviser l’espace de manière égale dans tous les périphériques (3 cases/boutons horizontalement), j’ai trouvé cette réponse. Est-ce la bonne approche?

Ce serait une option, mais ne vous donnerait pas les séparateurs que vous aimez de votre capture d'écran.

J'aurais pour que backgroundColor de ma vue de cellule soit défini sur clearColor, puis je définirais le propriété backgroundView de UICollectionView sur une vue contenant vos séparateurs et l'effet de flou. Assurez-vous que la propriété backgroundColor de UICollectionView est définie sur clearColor. 

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

Si vous utilisez la propriété backgroundView de UICollectionView pour gérer vos séparateurs et le flou, vos cellules n'auront besoin que de définir leur propriété backgroundColor sur clearColor.

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

2
Pete Hornsby

La première chose que je voudrais dire, c’est que votre résultat ci-dessus peut être obtenu à partir de UICollectionViewFlowLayout , qui est la présentation par défaut d’UICollectionView.

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

  1. FlowLayout a minimumLineSpacingForSectionAtIndex et minimumInteritemSpacingForSectionAtIndexpour donner l'espacement entre les cellules (horizontalement et verticalement).

  2. Ce n'est pas un bon moyen de donner un cadre de cellule dans cellForItemAtIndexPath (comme vous soumettez le lien de réponse). Pour cela, flowLayout fournit un délégué pour le dimensionnement de la cellule sizeForItemAtIndexPath.

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

2
Kusal Shrestha

J'ai créé cette méthode pour une disposition personnalisée. Vous pouvez utiliser en modifiant en fonction de 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
}
0
Manish Mahajan