La altura de la UICollectionView no se puede boost de forma dinámica utilizando UIScrollView

Estoy desarrollando una aplicación que muestra fotos para los usuarios. Mi layout era como la aplicación de Pinterest. UICollectionView dentro de UIScrollView y deshabilité el desplazamiento de UICollectionView . Pero cuando uso este componente como este UICollectionView no se puede desplazar de acuerdo con su contenido. Solo se muestran visibles y otras no se muestran. El principal dolor en este proyecto es que los contenidos de CollectionViews son dynamics. Podría cambiar con la interaccion del usuario. Y mi pregunta es cómo desplazar completamente UICollectionView con su contenido dynamic usando UIScrollView.

Permítanme compartir capturas de pantalla.

La primera image describe primero abierto. La segunda image describe el problema de desplazamiento. La tercera image describe mi storyboard.

Gracias por las comidas.

Aquí está mi storyBoard

Y mi codigo

 // // ViewController.swift // ScrollCollectionView // // Created by Cbs on 31.05.2017. // Copyright © 2017 Cbs. All rights reserved. // import UIKit class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout { @IBOutlet weak var collectionView: UICollectionView! override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { return 25 } func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CollectionViewCell cell.addShadow(opacitiy: 1, shadowRadius: 3, shadowOffsetWidth: 2, shadowOffsetHeight: 2, shadowColor: UIColor.lightGray, backgroundColor: UIColor.networking) cell.addCornerRadius(cornerRadius: 8) return cell } func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { let cellSpacing = CGFloat(2) //Define the space between each cell let leftRightMargin = CGFloat(40) //If defined in Interface Builder for "Section Insets" let numColumns = CGFloat(2) //The total number of columns you want let totalCellSpace = cellSpacing * (numColumns - 1) let screenWidth = UIScreen.main.bounds.width let width = (screenWidth - leftRightMargin - totalCellSpace) / numColumns let height = CGFloat(210) //whatever height you want return CGSize(width: width, height: height) // width & height are the same to make a square cell } } 

EDITAR:

Creo que no podría explicar claramente mi problema. aquí te proporcionaré algunos videos adicionales para que te cuente claramente sobre el problema. He subido 2 videos.

En este video, mi encabezado no se desplaza con childs de collectionview. Entonces, quiero desplazarme por elementos integers en la pantalla. ( https://youtu.be/0ArQe6mZytc )

En este breve video, puedes ver el comportamiento de la aplicación de Pinterest cuando se desplaza. Me gustaría hacer que mi aplicación como este video ( https://youtu.be/Nm-sjXVEL5s )

Para su requerimiento, no hay necesidad de usar UIScrollView . Puede crear la pantalla usando solo UICollectionView .

Para mostrar un scrollable header , puede usar UICollectionReusableView como el section header de section header de la collection view .

1.UICollection ver código:

 import UIKit class PinterestViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() } } extension PinterestViewController : UICollectionViewDataSource, UICollectionViewDelegate { func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { return 25 } func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) return cell } func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView { if kind == UICollectionElementKindSectionHeader { let headerView = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "headerView", for: indexPath) return headerView } return UICollectionReusableView() } } extension PinterestViewController : UICollectionViewDelegateFlowLayout { func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { let cellSpacing = CGFloat(2) //Define the space between each cell let leftRightMargin = CGFloat(40) //If defined in Interface Builder for "Section Insets" let numColumns = CGFloat(2) //The total number of columns you want let totalCellSpace = cellSpacing * (numColumns - 1) let screenWidth = UIScreen.main.bounds.width let width = (screenWidth - leftRightMargin - totalCellSpace) / numColumns let height = CGFloat(210) //whatever height you want return CGSize(width: width, height: height) // width & height are the same to make a square cell } } 

2. Interfaz:

introduzca la descripción de la imagen aquí

3. Pantalla de salida:

introduzca la descripción de la imagen aquí

Editar:

En el código provisto en: https://www.raywenderlich.com/107439/uicollectionview-custom-layout-tutorial-pinterest

Haga algunos cambios:

 class PinterestLayout: UICollectionViewFlowLayout { //... override func prepare() { // 1 if cache.isEmpty { //... var yOffset = [CGFloat](repeating: 150, count: numberOfColumns) //Height of your header view //... } } override var collectionViewContentSize: CGSize { return CGSize(width: contentWidth, height: contentHeight) } override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? { guard let attributes = super.layoutAttributesForElements(in: rect) else { return nil } var layoutAttributes = [UICollectionViewLayoutAttributes]() for attr in attributes where attr.representedElementKind == UICollectionElementKindSectionHeader { if let supplementaryAttributes = layoutAttributesForSupplementaryView(ofKind: UICollectionElementKindSectionHeader, at: attr.indexPath) { layoutAttributes.append(supplementaryAttributes) } } for attributes in cache { if attributes.frame.intersects(rect) { layoutAttributes.append(attributes) } } return layoutAttributes } override func layoutAttributesForSupplementaryView(ofKind elementKind: String, at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? { if elementKind == UICollectionElementKindSectionHeader { let attributes = UICollectionViewLayoutAttributes(forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, with: indexPath) attributes.frame = CGRect(x: 0, y: 0, width: self.contentWidth, height: 150) //Height of your header view return attributes } return nil } } 

También en la Collection View Interface :

introduzca la descripción de la imagen aquí

introduzca la descripción de la imagen aquí

Tome la vista NSLayoutConstraint para la altura de la colección y cambie esa restricción de altura en el método viewdidLayoutSubviews () como sigue. self.hgtCollectionView.constant = CGFloat(number of rows) * 210) + CGFloat(10)

Esto actualizará la altura de la vista de colección según su contenido.

Desarrollé el mismo tipo de aplicación, estás intentando hacerlo. Seguí el tutorial de Ray Wenderlich para esto.

Aquí está el enlace para mi repository.

https://github.com/mvpVaibhav/Pixabay

Parece que su solución simplemente rompe el propósito principal de CollectionView: para save la memory de la aplicación y reutilizar los resources del dispositivo. Pero aquí está intentando hacer que la altura de CollectionView sea más grande que el tamaño del dispositivo, lo cual es malo. ¿Qué pasaría si tuviera 1000 imágenes? su aplicación simplemente fallará sin problema de memory. Use celdas y encabezados personalizados con la subclass collectionviewflowlayout. Mire este ejemplo de código, por ejemplo. https://github.com/zwaldowski/AdvancedCollectionView

He visto la aplicación de Pinterest pero no encontré ningún encabezado allí. ¿Qué tipo de encabezado personalizado necesitas? ¿Qué comportamiento debería tener? ¿Necesita encabezado fijo para varias secciones o debería desaparecer con celdas?

echa un vistazo a este tutorial https://www.objc.io/issues/3-views/collection-view-layouts/

¿Qué objective de implementación de su aplicación? si iOS 9, luego UICollectionViewFlowLayout, secciónHeadersPinToVisibleBounds, si lo necesita.

No utilice la vista de la image en la vista lateral de la colección, simplemente puede usar la UICollectionReusableView para su encabezado

Agregue esto a su class

 override func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView { //1 switch kind { //2 case UICollectionElementKindSectionHeader: //3 let headerView = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "customHeaderView", for: indexPath) as! customHeaderView headerView.imageView.image = //some random image local or dynamic you can use here.. return headerView default: //4 assert(false, "Unexpected element kind") } } 

Chek esta image de storyboard que te estoy mostrando Tu stroyboard debería verse así

Tu class de encabezado debería verse así

 class customHeaderView: UICollectionReusableView { @IBOutlet weak var imageView: UIImageView! //you can add more functions here you want } 

Para su información UICollectionView ya es una subclass de UIScrollView. No hay necesidad de volver a agregarlo a UIScrollView.

La siguiente es la jerarquía:

UICollectionView-> UIScrollView-> UIView-> UIResponder-> NSObjec t