UICollectionView Cella personalizzata per riempire la larghezza In Swift

Question

Ho cercato di capire come posso far riempire la cella della larghezza, come puoi vedere nell'immagine la larghezza tra le celle è troppo grande. Sto usando una cella personalizzata con un solo imageView.

ho cercato di personalizzarlo dallo storyboard, ma immagino che non esiste alcuna opzione per questo o dovrebbe essere fatto a livello di codice.

mia 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 
    } 

Answer 1

Hai bisogno di fare questo programatically.

Implementare UICollectionViewDelegateFlowLayout nel vostro controller della vista e fornire la dimensione in 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)) 
} 

Si vuole anche chiamare collectionView.collectionViewLayout.invalidateLayout() all'interno del controller della vista viewWillLayoutSubviews() in modo che quando le dimensioni della vista principale cambiano (a rotazione, per esempio) , la vista di raccolta viene ridisegnata.

Answer 2

Programatically impostare il itemSize-[UIScreen mainScreen].bounds.size.width/3

Answer 3

Usa seguente codice per impostare la larghezza della UICollectionViewCell.

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

Answer 4

All'interno della vostra vista sostituzione del controller viewDidLayoutSubviews metodo

@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() 
    } 
} 

(collectionView proprietà è la vostra CollectionView)

Answer 5

Nel mio caso, supponendo che ogni cella abbia una larghezza di 155 e un'altezza di 220. Se voglio mostrare 2 celle per fila in modalità verticale e 3 per orizzontale.

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

Answer 6

La soluzione migliore è quella di cambiare il itemSize del vostro UICollectionViewFlowLayout in viewDidLayoutSubviews. È qui che puoi ottenere la dimensione più precisa di UICollectionView. Non devi chiamare invalido sul tuo layout, ciò sarà fatto per te già.

Answer 7

Swift 3

Se si utilizza veloce 3, utilizzare questo metodo:

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

    } 

notare i cambiamenti:

1. aggiungere _ prima collectionView nel nome del metodo
2. NSIndexPath modifiche IndexPath

Answer 8

anche a Swift 3,

assicurarsi che il proprio controller di vista è conforme con il seguente:

UICollectionViewDelegate,
UICollectionViewDataSource,
UICollectionViewDelegateFlowLayout

Answer 9

I ho lo stesso requisito, nel mio caso muggito solu viene lavorato. Ho impostato UIImageView superiore, sinistro, inferiore e vincoli giusti per all'interno 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 

}