UICollectionView in einer UITableViewCell - dynamische Höhe?

Für einen unserer Anwendungsbildschirme müssen wir ein UICollectionViewInneres in a platzieren UITableViewCell. Dies UICollectionViewhat eine dynamische Anzahl von Elementen, was zu einer Höhe führt, die ebenfalls dynamisch berechnet werden muss. Ich habe jedoch Probleme beim Versuch, die Höhe des Embedded zu berechnen UICollectionView.

Unsere übergreifende UIViewControllerwurde in Storyboards erstellt und verwendet das automatische Layout. Aber ich weiß nicht, wie ich die Höhe des UITableViewCellbasierend auf der Höhe des dynamisch erhöhen kann UICollectionView.

Kann jemand einige Tipps oder Ratschläge geben, wie dies erreicht werden kann?

Die richtige Antwort ist JA , Sie KANN dies tun.

Ich bin vor einigen Wochen auf dieses Problem gestoßen. Es ist tatsächlich einfacher als Sie vielleicht denken. Legen Sie Ihre Zellen in NIBs (oder Storyboards) und stecken Sie sie fest, damit das automatische Layout die ganze Arbeit erledigt

Bei folgender Struktur:

Tabellenansicht

TableViewCell

CollectionView

CollectionViewCell

CollectionViewCell

CollectionViewCell

[... variable Anzahl von Zellen oder unterschiedliche Zellgrößen]

Die Lösung besteht darin, das automatische Layout anzuweisen, zuerst die Größe der collectionViewCell, dann die Größe der Sammlungsansicht contentSize zu berechnen und als Größe Ihrer Zelle zu verwenden. Dies ist die UIView- Methode, die "die Magie macht":

-(void)systemLayoutSizeFittingSize:(CGSize)targetSize 
     withHorizontalFittingPriority:(UILayoutPriority)horizontalFittingPriority 
           verticalFittingPriority:(UILayoutPriority)verticalFittingPriority

Sie müssen hier die Größe der TableViewCell festlegen, in Ihrem Fall die contentSize der CollectionView.

CollectionViewCell

In der CollectionViewCell müssen Sie die Zelle bei jedem Modellwechsel anweisen, ein Layout zu erstellen (z. B. wenn Sie ein UILabel mit einem Text festlegen, muss die Zelle erneut ein Layout aufweisen).

- (void)bindWithModel:(id)model {
    // Do whatever you may need to bind with your data and 
    // tell the collection view cell's contentView to resize
    [self.contentView setNeedsLayout];
}
// Other stuff here...

TableViewCell

Die TableViewCell macht die Magie. Es verfügt über einen Auslass zu Ihrer Kollektion, ermöglicht das automatische Layout für Collection Zellen mit estimatedItemSize des UICollectionViewFlowLayout .

Der Trick besteht dann darin, die Größe Ihrer tableView-Zelle mit der systemLayoutSizeFittingSize ... -Methode festzulegen . (HINWEIS: iOS8 oder höher)

ANMERKUNG: Ich habe versucht, die Höhenmethode der delegierten Zelle in tableView zu -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPathverwenden. Es ist jedoch zu spät für das automatische Layoutsystem, die CollectionView contentSize zu berechnen, und manchmal finden Sie möglicherweise Zellen mit falscher Größenänderung.

@implementation TableCell

- (void)awakeFromNib {
    [super awakeFromNib];
    UICollectionViewFlowLayout *flow = (UICollectionViewFlowLayout *)self.collectionView.collectionViewLayout;

    // Configure the collectionView
    flow.minimumInteritemSpacing = ...;

    // This enables the magic of auto layout. 
    // Setting estimatedItemSize different to CGSizeZero 
    // on flow Layout enables auto layout for collectionView cells.
    // https://developer.apple.com/videos/play/wwdc2014-226/
    flow.estimatedItemSize = CGSizeMake(1, 1);

    // Disable the scroll on your collection view
    // to avoid running into multiple scroll issues.
    [self.collectionView setScrollEnabled:NO];
}

- (void)bindWithModel:(id)model {
    // Do your stuff here to configure the tableViewCell
    // Tell the cell to redraw its contentView        
    [self.contentView layoutIfNeeded];
}

// THIS IS THE MOST IMPORTANT METHOD
//
// This method tells the auto layout
// You cannot calculate the collectionView content size in any other place, 
// because you run into race condition issues.
// NOTE: Works for iOS 8 or later
- (CGSize)systemLayoutSizeFittingSize:(CGSize)targetSize withHorizontalFittingPriority:(UILayoutPriority)horizontalFittingPriority verticalFittingPriority:(UILayoutPriority)verticalFittingPriority {

    // With autolayout enabled on collection view's cells we need to force a collection view relayout with the shown size (width)
    self.collectionView.frame = CGRectMake(0, 0, targetSize.width, MAXFLOAT);
    [self.collectionView layoutIfNeeded];

    // If the cell's size has to be exactly the content 
    // Size of the collection View, just return the
    // collectionViewLayout's collectionViewContentSize.

    return [self.collectionView.collectionViewLayout collectionViewContentSize];
}

// Other stuff here...

@end

TableViewController

Denken Sie daran, das automatische Layoutsystem für die tableView-Zellen in Ihrem TableViewController zu aktivieren :

- (void)viewDidLoad {
    [super viewDidLoad];

    // Enable automatic row auto layout calculations        
    self.tableView.rowHeight = UITableViewAutomaticDimension;
    // Set the estimatedRowHeight to a non-0 value to enable auto layout.
    self.tableView.estimatedRowHeight = 10;

}

KREDIT: @rbarbera hat geholfen, das zu klären

Ich denke, meine Lösung ist viel einfacher als die von @PabloRomeu vorgeschlagene.

Schritt 1. Erstellen Sie eine Steckdose von UICollectionViewbis UITableViewCell subclass, wo sie UICollectionViewplatziert ist. Lass es sein, der Name wird seincollectionView

Schritt 2. Fügen Sie IB für UICollectionViewHöhenbeschränkungen hinzu und erstellen Sie auch einen Auslass für UITableViewCell subclass. Lass es sein, der Name wird sein collectionViewHeight.

Schritt 3. tableView:cellForRowAtIndexPath:Fügen Sie Code hinzu:

// deque a cell
cell.frame = tableView.bounds;
[cell layoutIfNeeded];
[cell.collectionView reloadData];
cell.collectionViewHeight.constant = cell.collectionView.collectionViewLayout.collectionViewContentSize.height;

Sowohl Tabellenansichten als auch Sammlungsansichten sind UIScrollViewUnterklassen und möchten daher nicht in eine andere Bildlaufansicht eingebettet werden, da sie versuchen, Inhaltsgrößen zu berechnen, Zellen wiederzuverwenden usw.

Ich empfehle Ihnen, für alle Ihre Zwecke nur eine Sammlungsansicht zu verwenden.

Sie können es in Abschnitte unterteilen und das Layout einiger Abschnitte als Tabellenansicht und andere als Sammlungsansicht "behandeln". Schließlich können Sie mit einer Sammlungsansicht nichts erreichen, was Sie mit einer Tabellenansicht erreichen können.

Wenn Sie ein grundlegendes Rasterlayout für Ihre Sammlungsansicht "Teile" haben, können Sie auch reguläre Tabellenzellen verwenden, um diese zu verarbeiten. Wenn Sie jedoch keine iOS 5-Unterstützung benötigen, sollten Sie Sammlungsansichten besser verwenden.

Die Antwort von Pablo Romeu oben ( https://stackoverflow.com/a/33364092/2704206 ) hat mir bei meinem Problem sehr geholfen. Ich musste jedoch einige Dinge anders machen, damit dies für mein Problem funktioniert. Zunächst musste ich nicht layoutIfNeeded()so oft anrufen . Ich musste es nur collectionViewin der systemLayoutSizeFittingFunktion aufrufen .

Zweitens hatte ich automatische Layoutbeschränkungen für meine Sammlungsansicht in der Zelle der Tabellenansicht, um sie aufzufüllen. Also musste ich targetSize.widthbeim Einstellen der collectionView.frameBreite die vorderen und hinteren Ränder von den subtrahieren . Ich musste auch den oberen und unteren Rand zur Rückgabewerthöhe hinzufügen CGSize.

Um diese Einschränkungskonstanten zu erhalten, hatte ich die Möglichkeit, entweder Ausgänge für die Einschränkungen zu erstellen, ihre Konstanten fest zu codieren oder sie anhand eines Bezeichners nachzuschlagen. Ich habe mich für die dritte Option entschieden, um meine benutzerdefinierte Zellenklasse für die Tabellenansicht einfach wiederverwendbar zu machen. Am Ende war dies alles, was ich brauchte, um es zum Laufen zu bringen:

class CollectionTableViewCell: UITableViewCell {

    // MARK: -
    // MARK: Properties
    @IBOutlet weak var collectionView: UICollectionView! {
        didSet {
            collectionViewLayout?.estimatedItemSize = CGSize(width: 1, height: 1)
            selectionStyle = .none
        }
    }

    var collectionViewLayout: UICollectionViewFlowLayout? {
        return collectionView.collectionViewLayout as? UICollectionViewFlowLayout
    }

    // MARK: -
    // MARK: UIView functions
    override func systemLayoutSizeFitting(_ targetSize: CGSize, withHorizontalFittingPriority horizontalFittingPriority: UILayoutPriority, verticalFittingPriority: UILayoutPriority) -> CGSize {
        collectionView.layoutIfNeeded()

        let topConstraintConstant = contentView.constraint(byIdentifier: "topAnchor")?.constant ?? 0
        let bottomConstraintConstant = contentView.constraint(byIdentifier: "bottomAnchor")?.constant ?? 0
        let trailingConstraintConstant = contentView.constraint(byIdentifier: "trailingAnchor")?.constant ?? 0
        let leadingConstraintConstant = contentView.constraint(byIdentifier: "leadingAnchor")?.constant ?? 0

        collectionView.frame = CGRect(x: 0, y: 0, width: targetSize.width - trailingConstraintConstant - leadingConstraintConstant, height: 1)

        let size = collectionView.collectionViewLayout.collectionViewContentSize
        let newSize = CGSize(width: size.width, height: size.height + topConstraintConstant + bottomConstraintConstant)
        return newSize
    }
}

Als Hilfsfunktion zum Abrufen einer Einschränkung nach Bezeichner füge ich die folgende Erweiterung hinzu:

extension UIView {
    func constraint(byIdentifier identifier: String) -> NSLayoutConstraint? {
        return constraints.first(where: { $0.identifier == identifier })
    }
}

HINWEIS: Sie müssen den Bezeichner für diese Einschränkungen in Ihrem Storyboard oder überall dort festlegen, wo sie erstellt werden. Wenn sie keine 0-Konstante haben, spielt es keine Rolle. Wie in Pablos Antwort müssen Sie auch UICollectionViewFlowLayoutals Layout für Ihre Sammlungsansicht verwenden. collectionViewStellen Sie schließlich sicher, dass Sie das IBOutlet mit Ihrem Storyboard verknüpfen .

Mit der obigen benutzerdefinierten Tabellenansichtszelle kann ich sie jetzt in jede andere Tabellenansichtszelle unterordnen, die eine Sammlungsansicht benötigt, UICollectionViewDelegateFlowLayoutund die UICollectionViewDataSourceProtokolle und implementieren lassen . Hoffe das ist hilfreich für jemand anderen!

Ich habe alle Antworten durchgelesen. Dies scheint allen Fällen zu dienen.

override func systemLayoutSizeFitting(_ targetSize: CGSize, withHorizontalFittingPriority horizontalFittingPriority: UILayoutPriority, verticalFittingPriority: UILayoutPriority) -> CGSize {
        collectionView.layoutIfNeeded()
        collectionView.frame = CGRect(x: 0, y: 0, width: targetSize.width , height: 1)
        return collectionView.collectionViewLayout.collectionViewContentSize
}

Eine Alternative zur Lösung von Pablo Romeu besteht darin, UICollectionView selbst anzupassen, anstatt die Arbeit in der Zelle der Tabellenansicht auszuführen.

Das zugrunde liegende Problem besteht darin, dass eine Sammlungsansicht standardmäßig keine intrinsische Größe hat und daher das automatische Layout nicht über die zu verwendenden Dimensionen informieren kann. Sie können dies beheben, indem Sie eine benutzerdefinierte Unterklasse erstellen, die eine nützliche Eigengröße zurückgibt.

Erstellen Sie eine Unterklasse von UICollectionView und überschreiben Sie die folgenden Methoden

override func intrinsicContentSize() -> CGSize {
    self.layoutIfNeeded()

    var size = super.contentSize
    if size.width == 0 || size.height == 0 {
        // return a default size
        size = CGSize(width: 600, height:44)
    }

    return size
 }

override func reloadData() {
    super.reloadData()
    self.layoutIfNeeded()
    self.invalidateIntrinsicContentSize()
}

(Sie sollten auch die zugehörigen Methoden überschreiben: reloadSections, reloadItemsAtIndexPaths auf ähnliche Weise wie reloadData ())

Durch Aufrufen von layoutIfNeeded wird die Sammlungsansicht gezwungen, die Inhaltsgröße neu zu berechnen, die dann als neue intrinsische Größe verwendet werden kann.

Außerdem müssen Sie Änderungen an der Ansichtsgröße (z. B. bei Gerätedrehung) im Tabellenansichts-Controller explizit behandeln

    override func viewWillTransitionToSize(size: CGSize, withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator)
{
    super.viewWillTransitionToSize(size, withTransitionCoordinator: coordinator)
    dispatch_async(dispatch_get_main_queue()) {
        self.tableView.reloadData()
    }
}

Ich hatte kürzlich das gleiche Problem und habe fast jede Lösung in den Antworten ausprobiert. Einige davon haben funktioniert, andere waren nicht mein Hauptanliegen beim @ PabloRomeu- Ansatz. Wenn Sie andere Inhalte in der Zelle haben (außer der Sammlungsansicht), Sie müssen ihre Höhen und die Höhen ihrer Einschränkungen berechnen und das Ergebnis zurückgeben, um das richtige automatische Layout zu erhalten, und ich möchte die Dinge nicht manuell in meinem Code berechnen. Hier ist also die Lösung, die für mich ohne manuelle Berechnungen in meinem Code gut funktioniert hat.

In der cellForRow:atIndexPathTabellenansicht mache ich folgendes:

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    //do dequeue stuff
    //initialize the the collection view data source with the data
    cell.frame = CGRect.zero
    cell.layoutIfNeeded()
    return cell
}

Ich denke, was hier passiert, ist, dass ich die Tabellenansichtszelle zwinge, ihre Höhe anzupassen, nachdem die Höhe der Sammlungsansicht berechnet wurde. (nach Angabe des CollectionView-Datums an die Datenquelle)

Ich würde der Sammlungsansichtsklasse eine statische Methode hinzufügen, die eine Größe basierend auf dem Inhalt zurückgibt, den sie haben wird. Verwenden Sie dann diese Methode in heightForRowAtIndexPath, um die richtige Größe zurückzugeben.

Beachten Sie auch, dass Sie beim Einbetten dieser Art von viewControllern ein seltsames Verhalten feststellen können. Ich habe es einmal gemacht und hatte einige seltsame Gedächtnisprobleme, die ich nie gelöst habe.

Vielleicht ist meine Variante nützlich; Ich habe diese Aufgabe in den letzten zwei Stunden entschieden. Ich gebe nicht vor, dass es 100% korrekt oder optimal ist, aber meine Fähigkeiten sind noch sehr klein und ich würde gerne Kommentare von Experten hören. Danke dir. Ein wichtiger Hinweis: Dies funktioniert für statische Tabellen - es wird von meiner aktuellen Arbeit angegeben. Ich verwende also nur viewWillLayoutSubviews von tableView . Und ein bisschen mehr.

private var iconsCellHeight: CGFloat = 500 

func updateTable(table: UITableView, withDuration duration: NSTimeInterval) {
    UIView.animateWithDuration(duration, animations: { () -> Void in
        table.beginUpdates()
        table.endUpdates()
    })
}

override func viewWillLayoutSubviews() {
    if let iconsCell = tableView.cellForRowAtIndexPath(NSIndexPath(forRow: 0, inSection: 1)) as? CategoryCardIconsCell {
        let collectionViewContentHeight = iconsCell.iconsCollectionView.contentSize.height
        if collectionViewContentHeight + 17 != iconsCellHeight {
            iconsCellHeight = collectionViewContentHeight + 17
            updateTable(tableView, withDuration: 0.2)
        }
    }
}

override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
    switch (indexPath.section, indexPath.row) {
        case ...
        case (1,0):
            return iconsCellHeight
        default:
            return tableView.rowHeight
    }
}

1. Ich weiß, dass sich die collectionView in der ersten Zeile des zweiten Abschnitts befindet.
2. Die Höhe der Reihe sei 17 p. größer als seine Inhaltshöhe;
3. iconsCellHeight ist eine Zufallszahl, wenn das Programm startet (ich weiß, dass es im Hochformat genau 392 sein muss, aber es ist nicht wichtig). Wenn der Inhalt von collectionView + 17 dieser Zahl nicht entspricht, ändern Sie den Wert. Das nächste Mal in dieser Situation gibt die Bedingung FALSE;
4. Immerhin aktualisieren Sie die tableView. In meinem Fall ist es die Kombination von zwei Operationen (zum netten Aktualisieren von erweiterten Zeilen);
5. Und natürlich fügen Sie im heightForRowAtIndexPath eine Zeile zum Code hinzu.

Der einfachste Ansatz, den ich bisher gefunden habe: Credits to @igor Antwort oben,

Fügen Sie dies einfach in Ihre tableviewcell-Klasse ein

override func layoutSubviews() {
    self.collectionViewOutlet.constant = self.postPoll.collectionViewLayout.collectionViewContentSize.height
}

und natürlich ändern Sie das Collectionviewoutlet mit Ihrem Outlet in der Klasse der Zelle

Ich bekomme eine Idee von @Igor post und investiere meine Zeit dafür schnell in mein Projekt

Einfach vorbei in deinem

 func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    //do dequeue stuff
    cell.frame = tableView.bounds
    cell.layoutIfNeeded()
    cell.collectionView.reloadData()
    cell.collectionView.heightAnchor.constraint(equalToConstant: cell.collectionView.collectionViewLayout.collectionViewContentSize.height)
    cell.layoutIfNeeded()
    return cell
}

Ergänzung: Wenn Ihre UICollectionView beim Laden von Zellen abgehackt ist.

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {       
  //do dequeue stuff
  cell.layer.shouldRasterize = true
  cell.layer.rasterizationScale = UIScreen.main.scale
  return cell
}

Pablos Lösung funktionierte für mich nicht sehr gut, ich hatte seltsame visuelle Effekte (die collectionView wurde nicht richtig angepasst).

Was funktionierte, war das Anpassen der Höhenbeschränkung der collectionView (als NSLayoutConstraint) an die collectionView contentSize während layoutSubviews(). Dies ist die Methode, die aufgerufen wird, wenn Autolayout auf die Zelle angewendet wird.

// Constraint on the collectionView height in the storyboard. Priority set to 999.
@IBOutlet weak var collectionViewHeightConstraint: NSLayoutConstraint!


// Method called by autolayout to layout the subviews (including the collectionView).
// This is triggered with 'layoutIfNeeded()', or by the viewController
// (happens between 'viewWillLayoutSubviews()' and 'viewDidLayoutSubviews()'.
override func layoutSubviews() {

    collectionViewHeightConstraint.constant = collectionView.contentSize.height
    super.layoutSubviews()
}

// Call `layoutIfNeeded()` when you update your UI from the model to trigger 'layoutSubviews()'
private func updateUI() {
    layoutIfNeeded()
}

In Ihrem UITableViewDelegate:

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return ceil(itemCount/4.0f)*collectionViewCellHeight;
}

Ersetzen Sie itemCount und CollectionViewCellHeight durch die realen Werte. Wenn Sie ein Array von Arrays haben, könnte itemCount sein:

self.items[indexPath.row].count

Oder Wasauchimmer.

1.Erstellen Sie eine Dummy-Zelle.
2.Verwenden Sie die collectionViewContentSize-Methode in UICollectionViewLayout von UICollectionView unter Verwendung aktueller Daten.

Sie können die Höhe der Sammlung berechnen auf der Grundlage ihrer Eigenschaften wie itemSize, sectionInset, minimumLineSpacing, minimumInteritemSpacing, wenn Ihr collectionViewCellden Rand einer Regel.