Dynamische UICollectionView in UIViewController

Question

Ich bin ein Android-Entwickler und meine erste iOS App zu entwickeln, muss ich GridView implementieren, um einige soziale Symbol hinzufügen, so nach einer Suche habe ich UICollectionView gefunden, aber es funktioniert nicht wie erwartet. Wie wird die dynamische Höhe der UICollection-Ansicht festgelegt? Eigentlich möchte ich alle Icons anzeigen, aber es zeigt nur eine Reihe und andere nach dem Scrollen der UICollectionView.

unten ist das Beispiel: Dies ist, was ich

Das ist, was ich will mich immer:

ich unten Code verwenden:

import UIKit 

class CollectionViewDemo: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource { 

@IBOutlet weak var socialHandleCollection: UICollectionView! 


@IBOutlet weak var socialImageView: UIImageView! 

var socialHandleArray:[String] = ["Facebook", "Twitter", "Youtube","Vimeo", "Instagram", "Custom URL", "Linkedin", "pinterest"] 


override func viewDidLoad() { 

    self.socialHandleCollection.delegate = self 
    self.socialHandleCollection.dataSource = self 

    // socialHandleCollection.frame.size.height = 130 
} 

func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { 
    return socialHandleArray.count 
} 

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell { 

    let cell: colvwCell = collectionView.dequeueReusableCellWithReuseIdentifier("cell", forIndexPath: indexPath) as! colvwCell 

    cell.imgCell.image = UIImage(named: "demo_img.png") 

    return cell 
} 

func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) { 
     print(self.socialHandleArray[indexPath.row]) 
} 
} 

Jede Hilfe wäre willkommen.

Answer 1

Sie verwenden autolayout Unter der Annahme,

zunächst eine bestimmte Anzahl von Spalten erklären, die Sie wünschen

let numberOfColumns = 5 

Okay, so das Wichtigste zuerst. Sie müssen Ihre Klasse an die UICollectionViewDelegateFlowLayout anpassen. Jetzt implementieren die Funktion -

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

     return CGSize(width: collectionView.bounds.size.width/numberOfColumns, height: collectionView.bounds.size.width/numberOfColumns); 
} 

5 Hier kann die Anzahl der Spalten geändert werden Sie in jeder Zeile wollen und denselben Wert wie Höhe vorbei wird dafür sorgen, dass die Form immer quadratisch ist. Und deshalb können Sie den Eckenradius anwenden, um ihn kreisförmig zu machen.

Jetzt geht es weiter. Von Ihrem Interface Builder, Strg + klicken und ziehen Sie die UICollectionView Höhe Beschränkung auf Ihre UIViewController (ähnlich, wie Sie für eine UIView tun würde, aber tun es für die Einschränkung)

Nun, wenn Sie die Anzahl der Elemente kennen, die Sie brauchen, um Anzeige in Ihrem UICollectionView, können Sie so etwas wie:

//replace 5 with the number of columns you want 
//array contains the items you wish to display 
func figureOutHeight(){ 

    if(array.count == 0){ 
     //as no items to display in collection view 
     return 
    } 

    //ceil function is just to round off the value to the next one, for example 6/5 will return 1 but we need 2 in this case. Ensure all arguments inside ceil function are float 
    let rowsCount = ceil(Float(array.count)/Float(numberOfColumns)) 

    //now you have number of rows soo just update your height constraint by multiplying row count with height of each item inside UICollectionView 
    collectionViewHeightConstraint.constant = rowsCount * collectionView.bounds.size.height/numberOfColumns; 

    view.layoutIfNeeded() 
} 

auch wenn Sie nicht die Scroll-Richtung vertikal ändern haben.