it-swarm.com.de

Wie man Kopf- und Fußzeilen in uicollectionview schnell macht

Wie kann man in Swift sowohl Kopf- als auch Fußzeilen in der Sammlungsansicht erstellen?

Ich versuche, eine Kopf- und eine Fußzeile miteinander zu kombinieren, aber es stürzt ständig ab. Ich konnte kein Swift-Tutorial finden, um es zu verstehen.

Ich kann nicht die ergänzende Ansicht für beide zurückgeben, sondern nur eine.

Ich setze beide auf das Storyboard (Klasse + Bezeichner) 

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


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




override func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView {
    var header: headerCell!
    var footer: footerCell!



    if kind == UICollectionElementKindSectionHeader {
        header =
            collectionView.dequeueReusableSupplementaryViewOfKind(kind,
                withReuseIdentifier: "header", forIndexPath: indexPath)
            as? headerCell

}
    return header

}

Error: UICollectionElementKindCell mit Bezeichner Eins - muss eine Spitze oder eine Klasse für den Bezeichner registrieren oder eine Prototypzelle in einem Storyboard verbinden. '

override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> profileCC {
    let cell = collectionView.dequeueReusableCellWithReuseIdentifier("one", forIndexPath: indexPath) as! profileCC

    // Configure the cell

    return cell
}



override func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView {

    switch kind {

    case UICollectionElementKindSectionHeader:

        let headerView = collectionView.dequeueReusableSupplementaryViewOfKind(kind, withReuseIdentifier: "header", forIndexPath: indexPath) as! headerCell

        headerView.backgroundColor = UIColor.blueColor();
        return headerView

    case UICollectionElementKindSectionFooter:
        let footerView = collectionView.dequeueReusableSupplementaryViewOfKind(kind, withReuseIdentifier: "footer", forIndexPath: indexPath) as! footerCell

        footerView.backgroundColor = UIColor.greenColor();
        return footerView

    default:

        assert(false, "Unexpected element kind")
    }
}

Ich hoffe jemand hilft.

29
marrioa

Sie können eine UICollectionViewController für die Behandlung der UICollectionView erstellen und im Interface Builder die Abschnitte Footer und Header aktivieren. Anschließend können Sie die folgende Methode für die Vorschau in UICollectionView verwenden.

override func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView {

    switch kind {

    case UICollectionView.elementKindSectionHeader:

        let headerView = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "Header", for: indexPath)

        headerView.backgroundColor = UIColor.blue
        return headerView

    case UICollectionView.elementKindSectionFooter:
        let footerView = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "Footer", for: indexPath)

        footerView.backgroundColor = UIColor.green
        return footerView

    default:

        assert(false, "Unexpected element kind")
    }

Im obigen Code füge ich die identifier für die Fußzeile und die Kopfzeile als Header und Footer ein. Sie können das beliebig machen. Wenn Sie eine benutzerdefinierte Kopf- oder Fußzeile erstellen möchten, müssen Sie für jede eine Unterklasse von UICollectionReusableView erstellen und diese nach Ihren Wünschen anpassen.

Sie können Ihre benutzerdefinierten Fuß- und Header-Klassen auf folgende Weise im Interface Builder oder im Code registrieren:

registerClass(myFooterViewClass, forSupplementaryViewOfKind: UICollectionElementKindSectionFooter, withReuseIdentifier: "myFooterView")
57
Victor Sigler

Für Swift 3+ aktualisiert

Schritt 1:  

Registrieren Sie in Ihrer View-Controller-Klasse die Klasse, die als Kopfzeile, Fußzeile oder beides verwendet werden soll:

let collectionViewHeaderFooterReuseIdentifier = "MyHeaderFooterClass"

Schritt 2:

Wenn Sie ein Xib verwenden, verwenden Sie:

collectionView.register(UINib(nibName: collectionViewHeaderFooterReuseIdentifier bundle: nil), forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier:collectionViewHeaderFooterReuseIdentifier)

collectionView.register(UINib(nibName: collectionViewHeaderFooterReuseIdentifier bundle: nil), forSupplementaryViewOfKind: UICollectionElementKindSectionFooter, withReuseIdentifier:collectionViewHeaderFooterReuseIdentifier)

Wenn Sie kein Xib verwenden:

collectionView.register(MyHeaderFooterClass.self, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: collectionViewHeaderFooterReuseIdentifier)

collectionView.register(MyHeaderFooterClass.self, forSupplementaryViewOfKind: UICollectionElementKindSectionFooter, withReuseIdentifier: collectionViewHeaderFooterReuseIdentifier)

Schritt 3:

Erstellen Sie eine benutzerdefinierte Kopf-/Fußzeile, die Implementierung sieht folgendermaßen aus:

import UIKit

class MyHeaderFooterClass: UICollectionReusableView {

 override init(frame: CGRect) {
    super.init(frame: frame)
    self.backgroundColor = UIColor.purple

    // Customize here

 }

 required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)

 }
}

Schritt 4: Wenn Sie kein Xib verwenden, ignorieren Sie.

  • Erstellen Sie ein neues leeres Xib: "Datei -> Neue Datei -> Leere".

  • Nennen Sie den den exakt gleichen Namen als Klasse. In diesem Beispiel: "MyHeaderFooterClass"

  • Fügen Sie dem Xib eine wiederverwendbare Sammlungsansicht hinzu.
  • Klicken Sie auf dieses Objekt, wählen Sie den Identitätsinspektor aus und ändern Sie die Klasse dieses Objekts in "MyHeaderFooterClass".

Schritt 5: - Unterstützt diese neue Zelle in Ihrer Sammlungsansicht über die Delegatmethode:

 func collectionView(_ collectionView: UICollectionView,
                    viewForSupplementaryElementOfKind kind: String,
                    at indexPath: IndexPath) -> UICollectionReusableView {

    switch kind {

    case UICollectionElementKindSectionHeader:
        let headerView = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: collectionViewHeaderFooterReuseIdentifier, for: indexPath)

        headerView.backgroundColor = UIColor.blue
        return headerView

    case UICollectionElementKindSectionFooter:
        let footerView = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: collectionViewHeaderFooterReuseIdentifier, for: indexPath)

        footerView.backgroundColor = UIColor.green
        return footerView

    default:
        assert(false, "Unexpected element kind")
    }
}
11
mobilecat

Um die verbleibenden Antworten zu ergänzen, vergessen Sie nicht, Platz für Ihre Kopf-/Fußzeilenansichten zuzuweisen. Andernfalls wird collectionView:viewForSupplementaryElementOfKind:atIndexPath nicht genannt.

Führen Sie dazu collectionView:layout:referenceSizeForHeaderInSection in Ihrer Datenquellenquelle collectionView aus.

4
Bruno Cunha

Lösung

class CustomFlowLayout: UICollectionViewFlowLayout {

    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        let attributesForElementsInRect = super.layoutAttributesForElements(in: rect)
        var newAttributesForElementsInRect = [UICollectionViewLayoutAttributes]()

        for attributes in attributesForElementsInRect! {

            if !(attributes.representedElementKind == UICollectionElementKindSectionHeader
                || attributes.representedElementKind == UICollectionElementKindSectionFooter) {

                // cells will be customise here, but Header and Footer will have layout without changes.
            }

            newAttributesForElementsInRect.append(attributes)
        }

        return newAttributesForElementsInRect
    }
}


class YourViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let headerNib = UINib.init(nibName: "HeaderCell", bundle: nil)
        collectionView.register(headerNib, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "HeaderCell")

        let footerNib = UINib.init(nibName: "FooterCell", bundle: nil)
        collectionView.register(footerNib, forSupplementaryViewOfKind: UICollectionElementKindSectionFooter, withReuseIdentifier: "FooterCell")
    }


    func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {

        switch kind {
        case UICollectionElementKindSectionHeader:
            let headerView = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "HeaderCell", for: indexPath) as! HeaderCell
            return headerView
        case UICollectionElementKindSectionFooter:
            let footerView = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "FooterCell", for: indexPath) as! FooterCell
            return footerView
        default:
            return UICollectionReusableView()
        }
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
        return CGSize(width: collectionView.frame.width, height: 45)
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForFooterInSection section: Int) -> CGSize {
        return CGSize(width: collectionView.frame.width, height: 25)
    }
}
1
Zanael

Beachten Sie, dass Ihr viewController UICollectionViewDelegateFlowLayout implementieren muss, sonst werden diese Methoden nicht aufgerufen

func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {

}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {

}
1

Nach der Verwendung von @mobilecat-Code sollten Sie diese Funktion verwenden, um die Kopf- und Fußzeile anzuzeigen

 func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
        return CGSize(width: collectionView.frame.width, height: 180.0)
    }
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForFooterInSection section: Int) -> CGSize {
        return CGSize(width: 60.0, height: 30.0)
    }
0
Ahmed Abdallah