it-swarm.com.de

Wie stelle ich die Zellengröße der Sammlungsansicht über das automatische Layout ein?

Hallo, ich versuche die Zelle über den auto layout zu skalieren.

Ich möchte die Zelle von 3 durch 3 anzeigen.

Rand der ersten Zelle links = 0

Rand der letzten Zelle rechts = 0

Und der gesamte Zellenraum hat 1pt. Wie eine instagram.

 enter image description here

 enter image description here

Soll ich die Größe der Zelle einstellen? Ich möchte über das Autolayout eine Einschränkung festlegen.

Ich versuche auch, die Größe der Zelle mithilfe des Codes festzulegen.

Hier ist mein Code:

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
    return CGSizeMake(123, 123);
}

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat {
    return 1;
}

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat {
    return 1;
}

Aber ich denke, es ist nicht genau die Größe der Zelle zu berechnen.

Wie stelle ich die Zellengröße in Abhängigkeit von der Bildschirmgröße ein?

Ich muss das 1pt zwischen den Zellen einstellen.

Gibt es sowieso nur das Storyboard einzustellen?

Wenn nicht, wie stelle ich den Code ein?

Vielen Dank.

17
Shawn Baek

Ich glaube nicht, dass Sie die Größe festlegen können, indem Sie nur das Storyboard verwenden, da wiederkehrende Elemente wie Sammlungsansichtszellen, die zur Laufzeit spontan erstellt werden, nicht durch Einschränkungen eingeschränkt werden können.

Sie können die Größe leicht aus den Informationen berechnen, die Sie erhalten. In collectionView(_:layout:sizeForItemAt:) können Sie auf die Grenzen der collectionView zugreifen, um die gewünschte Größe Ihrer Zelle zu berechnen:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    // Compute the dimension of a cell for an NxN layout with space S between
    // cells.  Take the collection view's width, subtract (N-1)*S points for
    // the spaces between the cells, and then divide by N to find the final
    // dimension for the cell's width and height.

    let cellsAcross: CGFloat = 3
    let spaceBetweenCells: CGFloat = 1
    let dim = (collectionView.bounds.width - (cellsAcross - 1) * spaceBetweenCells) / cellsAcross
    return CGSize(width: dim, height: dim)
}

Dies funktioniert dann für iPhones und iPads aller Größen.

23
vacawama

Tolle Antwort von Vacawama, aber ich hatte 2 Probleme. Ich wollte, dass der in Storyboard definierte Abstand automatisch verwendet wird. 

 enter image description here

Und zweitens konnte ich diese Funktion nicht aufrufen, und niemand erwähnte wie? Um die sizeForItemAt von collectionView aufzurufen, müssen Sie UICollectionViewDelegateFlowLayout erweitern, anstatt UICollectionViewDelegate zu erweitern. Ich hoffe, das erspart jemandem etwas Zeit.

extension MyViewController: UICollectionViewDelegateFlowLayout, UICollectionViewDataSource {

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let cellsAcross: CGFloat = 3
        var widthRemainingForCellContent = collectionView.bounds.width
        if let flowLayout = collectionViewLayout as? UICollectionViewFlowLayout {
            let borderSize: CGFloat = flowLayout.sectionInset.left + flowLayout.sectionInset.right
            widthRemainingForCellContent -= borderSize + ((cellsAcross - 1) * flowLayout.minimumInteritemSpacing)
        }
        let cellWidth = widthRemainingForCellContent / cellsAcross
        return CGSize(width: cellWidth, height: cellWidth)
    }

}
13
Travis M.

Ich habe es mit den Delegate-Methoden von CollectionView eingerichtet. Dadurch erhalten Sie ein 2xN-Setup, Sie können jedoch stattdessen einfach 3xN einrichten. Hier ist ein Screenshot und Sie können auf GitHub auf mein Projekt verweisen ...

https://github.com/WadeSellers/GoInstaPro

 CollectionView flow layout screenshot

7
Wade Sellers

Swift 3 Versionscode basierend auf Vacawama Antwort:

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

        let cellsAcross: CGFloat = 3
        let spaceBetweenCells: CGFloat = 1
        let dim = (collectionView.bounds.width - (cellsAcross - 1) * spaceBetweenCells) / cellsAcross

        return CGSize(width: dim, height: dim)
    }
4
mriaz0011

Hier ist eine andere Lösung, aber es funktioniert nur auf iPhone6.

Ich werde versuchen, für iphone5/6plus zu aktualisieren

Besonderer Dank geht an @vacawama! 

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


        // Compute the dimension of a cell for an NxN layout with space S between
        // cells.  Take the collection view's width, subtract (N-1)*S points for
        // the spaces between the cells, and then divide by N to find the final
        // dimension for the cell's width and height.

        let cellsAcross: CGFloat = 3
        let spaceBetweenCells: CGFloat = 1
        let dim = (collectionView.bounds.width - (cellsAcross - 1) * spaceBetweenCells) / cellsAcross
                print(indexPath.row)

        var width = dim

        //last cell's width
        if(  (indexPath.row + 1) % 3 == 0){
            width = 124

        }else {
            width = 124.5
        }
        print(width)
        return CGSizeMake(width, dim)

    }

    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat {
        return 1;
    }

    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat {
        return 1;
    }
0
Shawn Baek