Liste der Bilder wie Instagram

Question

Ich möchte eine scrollbare Liste von Bildern wie Instagram mit 4 Spalten machen. Ich habe eine Sammlungsansicht mit Bildansichten http://prntscr.com/d15rnx erstellt. Aber ich habe dieses Ergebnis - http://prntscr.com/d15tsq Code -

// MARK: - UICollectionViewDataSource protocol 

// tell the collection view how many cells to make 
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { 
    return self.items.count 
} 

// make a cell for each cell index path 
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { 
    // get a reference to our storyboard cell 
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath as IndexPath) as! MyCollectionViewCell 

    // Use the outlet in our custom class to get a reference to the UILabel in the cell 
    cell.imageView.image = UIImage(named: "main/p\(self.items[indexPath.item].code)/main/main.jpg") 
    print("main_card_images/p\(self.items[indexPath.item].code)/main/main") 
    return cell 
} 

// MARK: - UICollectionViewDelegate protocol 

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) { 
    // handle tap events 
    print("You selected cell #\(indexPath.item)!") 
    print(self.items[indexPath.item]) 
} 

override func prepare(for segue: UIStoryboardSegue, sender: Any?) { 
    let yourNextViewController = (segue.destination as! ViewControllerCard) 
    let indexPath = collectionView.indexPath(for: sender as! UICollectionViewCell) 
    yourNextViewController.mainCardImage = self.items[(indexPath?.item)!] 
} 

Answer 1

Achten Sie darauf, zwischen den Zellenabstand auf 0 gesetzt haben und dann alles, was Sie tun müssen, ist implementieren:

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize { 

     return(collectionView.bounds.size.width/4,collectionView.bounds.size.height/4) 
} 

Dadurch werden alle Zellen die Größe an Seien Sie gleich 1/4 der UICollectionView Breite und erstellen Sie so 4 Zellen in jeder Zeile (1/4 der Höhe Wert ist nur weil ich Symmetrie in diesen Arten von UI mag). Wenn es scheint, dass es eine geringere Anzahl von Zellen als diese gibt, dann, weil der Abstand zwischen den Elementen nicht auf 0 gesetzt wurde. Wenn Sie Abstände zwischen den Elementen wünschen, subtrahieren Sie diesen Wert von dem in der obigen Funktion

zurückgegebenen Wert

Alternativ

Sie können Ihr eigenes Flow Layout implementieren, aber die obige Lösung ist viel einfacher.

Answer 2

Ich habe es am einfachsten gefunden, meine Sammlungsansicht über die Einstellung in Interface Builder zu konfigurieren. Für eine Collection-Ansicht mit Flow-Layout sind hier die Einstellungen, die ich für die Inserts verwende. Ich habe die Artikelgröße Breite: 125,8 und Höhe: 125,8 gefunden, um mir die beste Größe für die Anzeige auf den meisten Geräten im Hoch- oder Querformat zu geben.

Hier ist, was meine Sammlung Ansicht aussieht.

Sie können natürlich diese programmatisch mit UICollectionViewDelegateFlowLayout gesetzt oder als Rikh schlägt vor, durch Subklassen CollectionViewFlowLayout