UICollectionView dentro de un UITableViewCell - ¿altura dinámica?

Una de nuestras pantallas de aplicación requiere que coloquemos un UICollectionViewarchivo UITableViewCell. Esto UICollectionViewtendrá un número dinámico de elementos, lo que dará como resultado una altura que también debe calcularse dinámicamente. Sin embargo, tengo problemas al intentar calcular la altura del archivo UICollectionView.

Nuestro UIViewControlleresquema general se creó en Storyboards y hace uso del diseño automático. Pero, no sé cómo aumentar dinámicamente la altura de la en UITableViewCellfunción de la altura de UICollectionView.

¿Alguien puede dar algunos consejos o consejos sobre cómo lograr esto?

La respuesta correcta es SÍ , PUEDE hacer esto.

Me encontré con este problema hace algunas semanas. En realidad, es más fácil de lo que piensas. Coloque sus celdas en NIB (o guiones gráficos) y fíjelas para permitir que el diseño automático haga todo el trabajo

Dada la siguiente estructura:

TableView

TableViewCell

CollectionView

ColecciónViewCell

ColecciónViewCell

ColecciónViewCell

[... número variable de celdas o diferentes tamaños de celda]

La solución es decirle al diseño automático que calcule primero los tamaños de collectionViewCell, luego la vista de colección contentSize, y utilícela como el tamaño de su celda. Este es el método UIView que "hace la magia":

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

Debe establecer aquí el tamaño de TableViewCell, que en su caso es contentSize de CollectionView.

ColecciónViewCell

En CollectionViewCell , debe indicarle a la celda que se diseñe cada vez que cambie el modelo (por ejemplo: establece un UILabel con un texto, luego la celda tiene que ser diseñada nuevamente).

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

El TableViewCell hace la magia. Tiene una salida a su collectionView, habilita el diseño automático para las celdas de collectionView utilizando estimadoItemSize de UICollectionViewFlowLayout .

Entonces, el truco consiste en establecer el tamaño de la celda tableView en el método systemLayoutSizeFittingSize ... (NOTA: iOS8 o posterior)

NOTA: Traté de usar el método de altura de la celda delegada de tableView. -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPathPero es demasiado tarde para que el sistema de diseño automático calcule el tamaño del contenido de CollectionView y, a veces, puede encontrar celdas redimensionadas incorrectas.

@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

Recuerde habilitar el sistema de diseño automático para las celdas tableView en su 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;

}

CRÉDITO: @rbarbera ayudó a solucionar esto

Creo que mi solución es mucho más simple que la propuesta por @PabloRomeu.

Paso 1. Cree una salida desde UICollectionViewhasta UITableViewCell subclass, donde UICollectionViewse coloca. Deja, su nombre serácollectionView

Paso 2. Agregue IB para la UICollectionViewrestricción de altura y cree una salida UITableViewCell subclasstambién. Vamos, su nombre será collectionViewHeight.

Paso 3. En tableView:cellForRowAtIndexPath:agregar código:

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

Tanto las vistas de tabla como las de colección son UIScrollViewsubclases y, por lo tanto, no les gusta estar incrustadas dentro de otra vista de desplazamiento, ya que intentan calcular el tamaño del contenido, reutilizar celdas, etc.

Te recomiendo que uses solo una vista de colección para todos tus propósitos.

Puede dividirlo en secciones y "tratar" el diseño de algunas secciones como una vista de tabla y otras como una vista de colección. Después de todo, no hay nada que no pueda lograr con una vista de colección que pueda con una vista de tabla.

Si tiene un diseño de cuadrícula básico para las "partes" de la vista de colección, también puede usar celdas normales de la tabla para manejarlas. Aún así, si no necesita la compatibilidad con iOS 5, debería usar mejor las vistas de colección.

La respuesta de Pablo Romeu anterior ( https://stackoverflow.com/a/33364092/2704206 ) me ayudó enormemente con mi problema. Sin embargo, tuve que hacer algunas cosas de manera diferente para que esto funcionara para mi problema. En primer lugar, no tuve que llamar layoutIfNeeded()tan a menudo. Solo tuve que llamarlo collectionViewen la systemLayoutSizeFittingfunción.

En segundo lugar, tenía restricciones de diseño automático en mi vista de colección en la celda de vista de tabla para darle algo de relleno. Así que tuve que restar los márgenes inicial y final del targetSize.widthal establecer el collectionView.frameancho de. También tuve que agregar los márgenes superior e inferior a la CGSizealtura del valor de retorno .

Para obtener estas constantes de restricción, tuve la opción de crear salidas para las restricciones, codificar sus constantes o buscarlas por un identificador. Decidí optar por la tercera opción para hacer que mi clase de celda de vista de tabla personalizada sea fácilmente reutilizable. Al final, esto fue todo lo que necesitaba para que funcionara:

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

Como función auxiliar para recuperar una restricción por identificador, agrego la siguiente extensión:

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

NOTA: Deberá establecer el identificador en estas restricciones en su guión gráfico o donde sea que se creen. A menos que tengan una constante 0, no importa. Además, como en la respuesta de Pablo, deberá usarlo UICollectionViewFlowLayoutcomo diseño para la vista de su colección. Finalmente, asegúrese de vincular collectionViewIBOutlet a su guión gráfico.

Con la celda de vista de tabla personalizada anterior, ahora puedo subclasificarla en cualquier otra celda de vista de tabla que necesite una vista de colección y hacer que implemente los protocolos UICollectionViewDelegateFlowLayouty UICollectionViewDataSource. ¡Espero que esto sea útil para alguien más!

Leí todas las respuestas. Esto parece servir para todos los casos.

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
}

Una alternativa a la solución de Pablo Romeu es personalizar UICollectionView en sí, en lugar de hacer el trabajo en la celda de vista de tabla.

El problema subyacente es que, de forma predeterminada, una vista de colección no tiene un tamaño intrínseco y, por lo tanto, no puede informar el diseño automático de las dimensiones a utilizar. Puede remediarlo creando una subclase personalizada que devuelva un tamaño intrínseco útil.

Cree una subclase de UICollectionView y anule los siguientes métodos

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

(También debe anular los métodos relacionados: reloadSections, reloadItemsAtIndexPaths de manera similar a reloadData ())

Llamar a layoutIfNeeded obliga a la vista de colección a recalcular el tamaño del contenido que luego se puede usar como el nuevo tamaño intrínseco.

Además, debe manejar explícitamente los cambios en el tamaño de la vista (por ejemplo, en la rotación del dispositivo) en el controlador de vista de tabla

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

Recientemente me enfrenté al mismo problema y casi probé todas las soluciones en las respuestas, algunas de ellas funcionaron y otras no, mi principal preocupación sobre el enfoque de @PabloRomeu es que si tiene otros contenidos en la celda (además de la vista de colección) tendrá que calcular sus alturas y las alturas de sus restricciones y devolver el resultado para obtener el diseño automático correcto y no me gusta calcular las cosas manualmente en mi código. Así que aquí está la solución que funcionó bien para mí sin hacer ningún cálculo manual en mi código.

en la cellForRow:atIndexPathvista de tabla hago lo siguiente:

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
}

Creo que lo que sucede aquí es que obligo a la celda de la vista de tabla a ajustar su altura después de que se haya calculado la altura de la vista de la colección. (después de proporcionar la fecha de collectionView a la fuente de datos)

Pondría un método estático en la clase de vista de colección que devolverá un tamaño basado en el contenido que tendrá. Luego use ese método en el heightForRowAtIndexPathpara devolver el tamaño adecuado.

También tenga en cuenta que puede tener un comportamiento extraño cuando inserta este tipo de viewControllers. Lo hice una vez y tuve algunos problemas de memoria extraños que nunca resolví.

Quizás mi variante sea útil; He estado decidiendo esta tarea durante las últimas dos horas. No pretendo que sea 100% correcto u óptimo, pero mi habilidad es muy pequeña todavía y me gustaría escuchar comentarios de expertos. Gracias. Una nota importante: esto funciona para tablas estáticas, está especificado por mi trabajo actual. Entonces, todo lo que uso es viewWillLayoutSubviews de tableView . Y un poquito más.

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. Sé que collectionView se encuentra en la primera fila de la segunda sección;
2. Deje que la altura de la fila sea 17 p. más grande que la altura de su contenido;
3. iconsCellHeight es un número aleatorio cuando se inicia el programa (lo sé, en el formato vertical tiene que ser exactamente 392, pero no es importante). Si el contenido de collectionView + 17 no es igual a este número, cambie su valor. La próxima vez en esta situación la condición da FALSO;
4. Después de todo, actualice el archivo tableView. En mi caso, es la combinación de dos operaciones (para una buena actualización de las filas extendidas);
5. Y, por supuesto, en heightForRowAtIndexPath agregue una fila al código.

El enfoque más fácil que se me ocurrió, hasta ahora, Créditos para la respuesta de @igor anterior,

En su clase tableviewcell simplemente inserte esto

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

y, por supuesto, cambie la vista de la colección con su salida en la clase de la celda

Tengo una idea de la publicación de @Igor e invierto mi tiempo en esto para mi proyecto con swift

Solo pasa esto en tu

 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
}

Además: si ve su UICollectionView entrecortado al cargar celdas.

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

La solución de Pablo no me funcionó muy bien, tuve efectos visuales extraños (la vista de colección no se ajustaba correctamente).

Lo que funcionó fue ajustar la restricción de altura de collectionView (como NSLayoutConstraint) a collectionView contentSize durante layoutSubviews(). Este es el método llamado cuando se aplica el diseño automático a la celda.

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

En su UITableViewDelegate:

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

Sustituya itemCount y CollectionViewCellHeight con los valores reales. Si tiene una matriz de matrices, itemCount podría ser:

self.items[indexPath.row].count

O lo que sea.

1.Crear celda ficticia.
Utilice el método collectionViewContentSize en UICollectionViewLayout de UICollectionView utilizando datos actuales.

Se puede calcular la altura de la colección basada en sus propiedades como itemSize, sectionInset, minimumLineSpacing, minimumInteritemSpacing, si su collectionViewCellcuenta con el borde de una regla.