web-dev-qa-db-fra.com

UICollectionView Custom Cell pour remplir la largeur Dans Swift

J'ai essayé de comprendre comment puis-je faire en sorte que la cellule remplisse la largeur, comme vous pouvez le voir sur l'image, la largeur entre les cellules est trop grande. J'utilise une cellule personnalisée avec une seule imageView.

enter image description here

J'ai essayé de le personnaliser à partir du scénario, mais je suppose qu'il n'y a pas d'option pour cela ou que cela devrait être fait par programme. enter image description here

mon UICollectionViewController: 

 @IBOutlet var collectionView2: UICollectionView!

    let recipeImages = ["angry_birds_cake", "creme_brelee", "Egg_benedict", "full_breakfast", "green_tea", "ham_and_cheese_panini", "ham_and_Egg_sandwich", "hamburger", "instant_noodle_with_Egg.jpg", "japanese_noodle_with_pork", "mushroom_risotto", "noodle_with_bbq_pork", "starbucks_coffee", "thai_shrimp_cake", "vegetable_curry", "white_chocolate_donut"]

    override func viewDidLoad() {
        super.viewDidLoad()

        // Uncomment the following line to preserve selection between presentations
        // self.clearsSelectionOnViewWillAppear = false

        // Do any additional setup after loading the view.

    }


    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

override func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
        //#warning Incomplete method implementation -- Return the number of sections
        return 1
    }


    override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        //#warning Incomplete method implementation -- Return the number of items in the section
         return recipeImages.count
    }

    override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as! RecipeCollectionViewCell

        // Configure the cell
        cell.recipeImageView.image = UIImage(named: recipeImages[indexPath.row])

        return cell
    }
iosswiftuicollectionviewuicollectionviewlayout
33
AaoIi

Vous devez le faire par programmation.

Implémentez UICollectionViewDelegateFlowLayout dans votre contrôleur de vue et indiquez la taille en collectionView:layout:sizeForItemAtIndexPath:

func collectionView(_ collectionView: UICollectionView,
                        layout collectionViewLayout: UICollectionViewLayout,
                        sizeForItemAt indexPath: IndexPath) -> CGSize {
        let kWhateverHeightYouWant = 100
        return CGSizeMake(collectionView.bounds.size.width, CGFloat(kWhateverHeightYouWant))
}

Vous voudrez également appeler collectionView.collectionViewLayout.invalidateLayout() dans la fonction viewWillLayoutSubviews() de votre contrôleur de vue afin que, lorsque les dimensions de la vue principale changent (par exemple, en rotation), la vue de collection soit redéfinie.

Swift 4 Mise à jour

func collectionView(_ collectionView: UICollectionView,
                            layout collectionViewLayout: UICollectionViewLayout,
                            sizeForItemAt indexPath: IndexPath) -> CGSize {
            let kWhateverHeightYouWant = 100
            return CGSize(width: collectionView.bounds.size.width, height: CGFloat(kWhateverHeightYouWant))
}
82
Matthew Quiros

Utilisez le code suivant pour définir la largeur de UICollectionViewCell.

func collectionView(_ collectionView: UICollectionView,
                    layout collectionViewLayout: UICollectionViewLayout,
                    sizeForItemAt indexPath: IndexPath) -> CGSize {        
    return CGSize(width: screenWidth/3, height: screenWidth/3);
}
10
Nimit Parekh

Dans votre méthode de remplacement de contrôleur de vue viewDidLayoutSubviews

@IBOutlet weak var collectionView: UICollectionView!

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()

    if let layout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
        let itemWidth = view.bounds.width / 3.0
        let itemHeight = layout.itemSize.height
        layout.itemSize = CGSize(width: itemWidth, height: itemHeight)
        layout.invalidateLayout()
    }
}

(La propriété collectionView correspond à votre collectionView)

10
mustafa

Aussi dans Swift 3,

Assurez-vous que votre contrôleur de vue respecte les critères suivants:

UICollectionViewDelegate,
UICollectionViewDataSource,
UICollectionViewDelegateFlowLayout

7
brycejl

Swift 3

Si vous utilisez Swift 3, utilisez cette méthode:

    func collectionView(_ collectionView: UICollectionView,
                        layout collectionViewLayout: UICollectionViewLayout,
                        sizeForItemAt indexPath: IndexPath) -> CGSize {

    }

Notez les modifications:

  1. ajoutez _ avant collectionView dans le nom de la méthode
  2. NSIndexPath change en IndexPath
4
JPetric

J'ai la même exigence, dans mon cas la solution ci-dessous est travaillée. Je fixe UIImageView les contraintes supérieure, gauche, inférieure et droite sur 0 à l'intérieur UICollectionviewCell 

@IBOutlet weak var imagesCollectionView: UICollectionView!

override func viewDidLoad() {
    super.viewDidLoad()
    // flowlayout
    let screenWidth = UIScreen.main.bounds.width
    let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
    layout.sectionInset = UIEdgeInsets(top: 5, left: 5, bottom: 10, right: 0)
    layout.itemSize = CGSize(width: screenWidth/3 - 5, height: screenWidth/3 - 5)
    layout.minimumInteritemSpacing = 5
    layout.minimumLineSpacing = 5
    imagesCollectionView.collectionViewLayout = layout

}
1
Raju Abe

Pour mon cas, je voulais montrer deux colonnes et 3 lignes dans UICollectionView

J'ai ajouté le délégué UICollectionViewDelegateFlowLayout à ma classe

alors je substitue sizeForItemAt indexPath

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let cellHeight = (collectionView.bounds.size.height - 30) / 3 // 3 count of rows to show
    let cellWidth = (collectionView.bounds.size.width - 20) / 2 // 2 count of colomn to show
    return CGSize(width: CGFloat(cellWidth), height: CGFloat(cellHeight))
}

Le 30 est l'interligne, le 20 est l'insent entre les cellules

0
F.sh

Dans mon cas, je suppose que chaque cellule a une largeur de 155 et une hauteur de 220. Si je veux afficher 2 cellules par ligne en mode portrait et 3 pour le paysage 

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
    var itemsCount : CGFloat = 2.0
    if UIApplication.sharedApplication().statusBarOrientation != UIInterfaceOrientation.Portrait {
        itemsCount = 3.0
    }
    return CGSize(width: self.view.frame.width/itemsCount - 20, height: 220/155 * (self.view.frame.width/itemsCount - 20));
}
0
Eduardo Irias

Définissez par programme la itemSize sur [UIScreen mainScreen].bounds.size.width/3

0
rounak

La meilleure solution consiste à modifier la itemSize de votre UICollectionViewFlowLayout dans viewDidLayoutSubviews. C'est là que vous pouvez obtenir la taille la plus précise de la variable UICollectionView. Vous n'avez pas besoin d'appeler invalider sur votre mise en page, cela sera déjà fait pour vous.

0
ZaBlanc