UICollectionView all'interno di un UITableViewCell - altezza dinamica?

Una delle schermate delle nostre applicazioni ci richiede di inserire UICollectionViewun file UITableViewCell. Questo UICollectionViewavrà un numero dinamico di elementi, risultando in un'altezza che deve essere calcolata anche dinamicamente. Tuttavia, sto riscontrando problemi nel tentativo di calcolare l'altezza dell'incorporato UICollectionView.

Il nostro overarching è UIViewControllerstato creato in Storyboard e utilizza il layout automatico. Ma non so come aumentare dinamicamente l'altezza del in UITableViewCellbase all'altezza del UICollectionView.

Qualcuno può dare alcuni suggerimenti o consigli su come ottenere questo risultato?

La risposta giusta è SI , si PUO ' fare questo.

Mi sono imbattuto in questo problema alcune settimane fa. In realtà è più facile di quanto tu possa pensare. Metti le tue celle in NIB (o storyboard) e fissale per lasciare che il layout automatico faccia tutto il lavoro

Data la seguente struttura:

TableView

TableViewCell

CollectionView

CollectionViewCell

CollectionViewCell

CollectionViewCell

[... numero variabile di celle o diverse dimensioni di cella]

La soluzione consiste nel dire al layout automatico di calcolare prima le dimensioni di collectionViewCell, quindi la visualizzazione della raccolta contentSize e utilizzarlo come dimensione della cella. Questo è il metodo UIView che "fa la magia":

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

Devi impostare qui la dimensione di TableViewCell, che nel tuo caso è contentSize di CollectionView.

CollectionViewCell

In CollectionViewCell devi dire alla cella di layout ogni volta che cambi modello (es: imposti una UILabel con un testo, quindi la cella deve essere di nuovo layout).

- (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

Il TableViewCell fa la magia. Ha uno sbocco al vostro CollectionView, permette la disposizione automatica per le cellule CollectionView utilizzando estimatedItemSize del UICollectionViewFlowLayout .

Quindi, il trucco è impostare la dimensione della cella tableView con il metodo systemLayoutSizeFittingSize .... (NOTA: iOS8 o successivo)

NOTA: ho provato a utilizzare il metodo di altezza della cella del delegato di tableView. -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPathMa è troppo tardi per il sistema di layout automatico per calcolare CollectionView contentSize e talvolta potresti trovare celle ridimensionate errate.

@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

Ricorda di abilitare il sistema di layout automatico per le celle tableView sul tuo TableViewController :

- (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;

}

CREDITO: @rbarbera ha aiutato a risolvere questo problema

Penso che la mia soluzione sia molto più semplice di quella proposta da @PabloRomeu.

Passaggio 1. Creare una presa da UICollectionViewa UITableViewCell subclass, dove UICollectionViewsi trova. Lascia, il suo nome saràcollectionView

Passaggio 2. Aggiungere IB per il UICollectionViewvincolo di altezza e creare anche uno sbocco UITableViewCell subclass. Lascia, il suo nome sarà collectionViewHeight.

Passaggio 3. In tableView:cellForRowAtIndexPath:aggiungi codice:

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

Sia le viste di tabella che le viste di raccolta sono UIScrollViewsottoclassi e quindi non gradiscono essere incorporate in un'altra vista di scorrimento mentre cercano di calcolare le dimensioni del contenuto, riutilizzare le celle, ecc.

Ti consiglio di utilizzare solo una visualizzazione raccolta per tutti i tuoi scopi.

Puoi dividerlo in sezioni e "trattare" il layout di alcune sezioni come una vista tabella e altre come una vista raccolta. Dopo tutto, non c'è niente che non puoi ottenere con una visualizzazione raccolta che puoi ottenere con una visualizzazione tabella.

Se si dispone di un layout di griglia di base per le "parti" della vista della raccolta, è anche possibile utilizzare celle di tabella regolari per gestirle. Tuttavia, se non hai bisogno del supporto per iOS 5, dovresti usare meglio le viste della raccolta.

La risposta di Pablo Romeu sopra ( https://stackoverflow.com/a/33364092/2704206 ) mi ha aiutato immensamente con il mio problema. Tuttavia, ho dovuto fare alcune cose in modo diverso per far funzionare il mio problema. Prima di tutto, non dovevo chiamare layoutIfNeeded()così spesso. Ho dovuto solo chiamarlo collectionViewnella systemLayoutSizeFittingfunzione.

In secondo luogo, avevo vincoli di layout automatico sulla mia vista della raccolta nella cella della vista tabella per dargli un po 'di riempimento. Quindi ho dovuto sottrarre i margini iniziale e finale da targetSize.widthquando ho impostato la collectionView.framelarghezza di. Ho anche dovuto aggiungere i margini superiore e inferiore CGSizeall'altezza del valore di ritorno .

Per ottenere queste costanti di vincolo, ho avuto la possibilità di creare sbocchi ai vincoli, codificare le loro costanti o cercarle tramite un identificatore. Ho deciso di optare per la terza opzione per rendere la mia classe di celle di visualizzazione tabella personalizzata facilmente riutilizzabile. Alla fine, questo era tutto ciò di cui avevo bisogno per farlo funzionare:

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
    }
}

Come funzione di supporto per recuperare un vincolo per identificatore, aggiungo la seguente estensione:

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

NOTA: sarà necessario impostare l'identificatore su questi vincoli nello storyboard o ovunque vengano creati. A meno che non abbiano una costante 0, non importa. Inoltre, come nella risposta di Pablo, sarà necessario utilizzare UICollectionViewFlowLayoutcome layout per la visualizzazione della raccolta. Infine, assicurati di collegare collectionViewIBOutlet al tuo storyboard.

Con la cella della vista tabella personalizzata sopra, ora posso sottoclassarla in qualsiasi altra cella della vista tabella che necessita di una vista raccolta e far sì che implementi i protocolli UICollectionViewDelegateFlowLayoute UICollectionViewDataSource. Spero che questo sia utile a qualcun altro!

Ho letto tutte le risposte. Questo sembra servire a tutti i casi.

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
}

Un'alternativa alla soluzione di Pablo Romeu è personalizzare UICollectionView stesso, piuttosto che fare il lavoro nella cella della vista tabella.

Il problema di fondo è che per impostazione predefinita una vista di raccolta non ha dimensioni intrinseche e quindi non può informare il layout automatico delle dimensioni da utilizzare. È possibile rimediare creando una sottoclasse personalizzata che restituisce una dimensione intrinseca utile.

Creare una sottoclasse di UICollectionView ed eseguire l'override dei metodi seguenti

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()
}

(Dovresti anche sovrascrivere i metodi correlati: reloadSections, reloadItemsAtIndexPaths in modo simile a reloadData ())

La chiamata layoutIfNeeded impone alla visualizzazione della raccolta di ricalcolare la dimensione del contenuto che può quindi essere utilizzata come nuova dimensione intrinseca.

Inoltre, è necessario gestire in modo esplicito le modifiche alle dimensioni della vista (ad esempio sulla rotazione del dispositivo) nel controller della vista tabella

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

Di recente ho affrontato lo stesso problema e ho quasi provato tutte le soluzioni nelle risposte, alcune hanno funzionato e altre non la mia principale preoccupazione per l' approccio @PabloRomeu è che se hai altri contenuti nella cella (oltre alla visualizzazione della raccolta) dovrai calcolare le loro altezze e le altezze dei loro vincoli e restituire il risultato per ottenere il layout automatico giusto e non mi piace calcolare le cose manualmente nel mio codice. Quindi ecco la soluzione che ha funzionato bene per me senza eseguire calcoli manuali nel mio codice.

nella cellForRow:atIndexPathvisualizzazione tabella faccio quanto segue:

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
}

Penso che quello che succede qui sia che costringo la cella tableview a regolare la sua altezza dopo che è stata calcolata l'altezza della vista della raccolta. (dopo aver fornito la data collectionView all'origine dati)

Metterei un metodo statico sulla classe di visualizzazione della raccolta che restituirà una dimensione in base al contenuto che avrà. Quindi utilizzare quel metodo heightForRowAtIndexPathper restituire la dimensione corretta.

Si noti inoltre che è possibile ottenere un comportamento strano quando si incorporano questi tipi di viewController. L'ho fatto una volta e ho avuto alcuni strani problemi di memoria che non ho mai risolto.

Forse la mia variante sarà utile; Ho deciso questo compito nelle ultime due ore. Non pretendo che sia corretto o ottimale al 100%, ma le mie capacità sono ancora molto piccole e mi piacerebbe sentire i commenti degli esperti. Grazie. Una nota importante: questo funziona per la tabella statica - è specificato dal mio lavoro corrente. Quindi, tutto ciò che uso è viewWillLayoutSubviews di tableView . E un po 'di più.

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. So che collectionView si trova nella prima riga della seconda sezione;
2. Lascia che l'altezza della riga sia 17 p. più grande dell'altezza del suo contenuto;
3. iconsCellHeight è un numero casuale all'avvio del programma (lo so, nella forma verticale deve essere esattamente 392, ma non è importante). Se il contenuto di collectionView + 17 non è uguale a questo numero, modificarne il valore. La prossima volta in questa situazione la condizione dà FALSE;
4. Dopo tutto aggiorna il file tableView. Nel mio caso è la combinazione di due operazioni (per un piacevole aggiornamento dell'estensione delle righe);
5. E, naturalmente, in heightForRowAtIndexPath aggiungi una riga al codice.

L'approccio più semplice che ho trovato finora, grazie alla risposta di @igor sopra,

Nella tua classe tableviewcell basta inserire questo

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

e, naturalmente, cambia la collectionviewoutlet con la tua presa nella classe della cella

Ho un'idea dal post di @Igor e ho investito il mio tempo in questo per il mio progetto con swift

Appena passato questo nel tuo

 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
}

Aggiunta: se vedi la tua UICollectionView instabile durante il caricamento delle celle.

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

La soluzione di Pablo non ha funzionato molto bene per me, avevo strani effetti visivi (la collectionView non si regolava correttamente).

Ciò che ha funzionato è stato regolare il vincolo di altezza di collectionView (come NSLayoutConstraint) per collectionView contentSize durante layoutSubviews(). Questo è il metodo chiamato quando alla cella viene applicato il layout automatico.

// 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()
}

Nel tuo UITableViewDelegate:

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

Sostituisci itemCount e CollectionViewCellHeight con i valori reali. Se disponi di un array di array, itemCount potrebbe essere:

self.items[indexPath.row].count

O qualunque cosa.

1.Crea una cella fittizia.
2.Utilizzare il metodo collectionViewContentSize su UICollectionViewLayout di UICollectionView utilizzando i dati correnti.

È possibile calcolare l'altezza della collezione basata sulle sue proprietà come itemSize, sectionInset, minimumLineSpacing, minimumInteritemSpacing, se il vostro collectionViewCellha il bordo di una regola.