objective c - IOS UICollectionview cambia dinámicamente la altura de la celda

objective-c ios7

Question

Estoy trabajando en un proyecto basado en la vista de colección en el que Numberofitem se modificará y aumentará de acuerdo con el clic del usuario en Índice particular. todo funciona perfectamente en mi proyecto, pero no puedo establecer el tamaño de la celda según el número de celdas en la vista de colección. Además, la vista de recopilación no se desplazará por todas las celdas, se corregirá con el cambio de tamaño. Aquí he adjuntado todas las imágenes.

1) Vista de guion gráfico

2) Resultado con Four Cell''s

3) cuando el número de células aumenta

Actualmente hice la configuración de mi celular de esta manera con el siguiente código. pero quiero establecer eso, si hay cuatro celdas en la vista de colección, entonces el tamaño de cada celda aumenta y se ajusta de acuerdo con la vista de colección y el tamaño del dispositivo (iphone 5s, iphone 6, iphone 6plus)

Aquí está mi intento,

-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{
    return 5.0;
}
-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{
    return 5.0;
}
- (CGSize)collectionView:(UICollectionView *)collectionView
              layout:(UICollectionViewLayout *)collectionViewLayout
  sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
        ////@property NSInteger count;////
 if (_count == 0)  {
    //  width = ((width - (span*5))/4);
    //        return CGSizeMake(self.view.frame.size.width/4,  self.view.frame.size.height/4);
    return CGSizeMake(self.view.frame.size.width/2.5, self.view.frame.size.height/5);
}
if (_count == 1 || _count == 2)
{
    return CGSizeMake(self.view.frame.size.width/2.5, self.view.frame.size.height/5);
    // return CGSizeMake(100.0, 100.0);
}
if (  _count == 3 || _count == 4 || _count == 5)
{
    // return CGSizeMake(100.0, 100.0);
    return CGSizeMake(self.view.frame.size.width/3.5, self.view.frame.size.height/6.5);
}
if (  _count == 6 || _count == 7 || _count == 8 || _count == 9)
{
    //return CGSizeMake(90.0, 90.0);
    return CGSizeMake(self.view.frame.size.width/4, self.view.frame.size.height/8);
}
if (  _count == 10 || _count == 11 || _count == 12 || _count == 13 || _count == 14)
{
    //  return CGSizeMake(80.0, 80.0);
    return CGSizeMake(self.view.frame.size.width/4, self.view.frame.size.height/8);
}
if (  _count == 15 || _count == 16 || _count == 17 || _count == 18 || _count == 19 || _count ==20)
{
    //return CGSizeMake(70.0, 70.0);
    return CGSizeMake(self.view.frame.size.width/4.75, self.view.frame.size.height/9.5);
}
if (_count ==21 || _count == 22 || _count == 23 || _count == 24 || _count == 25 || _count == 26 || _count == 27) {
    // return CGSizeMake(60.0, 60.0);
    return CGSizeMake(self.view.frame.size.width/6, self.view.frame.size.height/12);
}
if (_count ==28 || _count == 29  ) {
    //  return CGSizeMake(50.0, 50.0);
    return CGSizeMake(self.view.frame.size.width/6.25, self.view.frame.size.height/12.5);
}
else
    return CGSizeMake(0, 0);
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return itemincollectionview.count;
}

Nota: - También probé todo esto Método.

  - (void)viewDidLayoutSubviews
  {
    self.automaticallyAdjustsScrollViewInsets = NO;
    [self.collectionView layoutIfNeeded];
    NSArray *visibleItems = [self.collectionView indexPathsForVisibleItems];
    NSIndexPath *currentItem = [visibleItems objectAtIndex:0];
    NSIndexPath *nextItem = [NSIndexPath indexPathForItem:_setRandomIndex inSection:currentItem.section];

    [self.collectionView scrollToItemAtIndexPath:nextItem atScrollPosition:UICollectionViewScrollPositionNone animated:YES];
 }

 - (void)viewWillLayoutSubviews
 {
    [super viewWillLayoutSubviews];
    [self.collectionView.collectionViewLayout invalidateLayout];
 }

 -(void)viewWillAppear:(BOOL)animated
 {
     [super viewWillAppear:YES];
     [self.view layoutIfNeeded];
 }

Answer 1

Por lo que yo entiendo, quiere replicar el diseño de esta prueba.

Debes entender mejor cómo funciona UICollectionView como aquí

Deberá cambiar el número de elementos en su UICollectionView en este método delegado:

- (NSInteger)numberOfItemsInSection:(NSInteger)section;

Aquí, quiere devolver 4 al comienzo de la prueba, luego 4 * 2, 4 * 2 * 2, y así sucesivamente. Esto le dará la cantidad correcta de artículo.

Entonces el diseño. deberías tener múltiples valores para él, ya que no quieres el mismo espacio entre tus elementos como el principio y el final. Me gustaría reducir el espacio a medida que crece la cantidad de elementos.

Debe tener cuidado con el espaciado, ya que puede hacer que una celda sea forzada en la siguiente línea

Ya hiciste un gran trabajo al dividir el marco para obtener el alto y ancho máximo de una celda, pero tu

- (CGSize)collectionView:(UICollectionView *)collectionView
              layout:(UICollectionViewLayout *)collectionViewLayout
  sizeForItemAtIndexPath:(NSIndexPath *)indexPath

El método es realmente desordenado.

Como no tendrá un número ilimitado de elementos en su UICollectionView , puede usar una switch statement , y en cada cambio devolverá el CGSize calculado de la celda.

Por ejemplo, puede usarlo así:

    switch (numberOfHorizontalItems) {
      case 2:
            return CGSizeMake(self.collectionView.frame.size.width/2.5,self.collectionView.frame.size.width/2.5);
                break;

    case 4:
                return CGSizeMake(self.collectionView.frame.size.width/4.5,self.collectionView.frame.size.width/4.5);
                break;
    case 8:
                CGSizeMake(self.collectionView.frame.size.width/8.5,self.collectionView.frame.size.width/8.5);
                break;
(And so on)

      default:
                break;
        }

Debe tener en cuenta que el CGSize calculado aquí debe incorporar el espaciado / fusión entre los items

Tampoco necesita viewWillLayoutSubviews y viewDidLayoutSubviews , solo necesita llamar a [self.collectionView reloadData] cuando el usuario tocó una celda (o en el método que maneja la lógica después de que un usuario tocó una celda)

Finalmente, si no desea que el UICollectionView sea ​​desplazable, simplemente establezca la propiedad self.collectionView.scrollEnabled = NO;

Answer 2

Use este GitHub CHTCollectionViewWaterfallLayout es una subclase de UICollectionViewLayout, y trata de imitar el uso de UICollectionViewFlowLayout tanto como sea posible.

Este diseño está inspirado en Pinterest. También es compatible con PSTCollectionView.

Answer 3

Así que estoy agregando la respuesta rápidamente, pero esta solución solo funciona suponiendo que tienes un valor de ancho mínimo.

/**
Calculates the CollectionView Cell Size when the parent view is loaded. It happens only once per VC Lifecycle.
- returns: `width` - The cell width calculated from the current screen size. <p/> `height` - The cell height, which is fixed for now.
*/
private class func getCellSize() -> (size: CGSize) {

    var cellWidth: CGFloat, cellHeight: CGFloat

    //Notes: CellSpacing you want to have
    let CellSpacing: CGFloat = 5    

    // Notes: Minimum Cell Width that renders for all the screens        
    let MinCellWidth:CGFloat = 130      

    let screenWidth: CGFloat = UIScreen.mainScreen().bounds.size.width
    let numberOfCellsPerRow: Int = Int((screenWidth + CellSpacing) / (MinCellWidth + CellSpacing))
    let totalSpaceTaken: Int = (Int(MinCellWidth + CellSpacing) * numberOfCellsPerRow)
    let remainingWidth = Int(screenWidth + CellSpacing) - totalSpaceTaken

    cellWidth = MinCellWidth + CGFloat((remainingWidth/numberOfCellsPerRow))

    //Now calculate the height based on the Width:Height Ratio. 
    // Assuming it is 1:1.5

    cellHeight = cellWidth * 1.5

    return CGSizeMake(cellWidth, FixedCellHeight)
}

Esto se puede convertir a Objective-C muy fácilmente. Todo lo que estamos haciendo aquí es obtener el ancho de la pantalla y verificar cuántas celdas podemos caber y ajustarlas con el espaciado celular correcto.

Nota: solo necesita llamar al método getCellSize () una vez y puede usar el mismo CGSize en el siguiente método.

//In your viewDidLoad 
CGSize cellSize = [self getCellSize];

//In this function you pass the property you initialised above
- (CGSize)collectionView:(UICollectionView *)collectionView
              layout:(UICollectionViewLayout *)collectionViewLayout
  sizeForItemAtIndexPath:(NSIndexPath *)indexPath 
 {
    return self.cellSize;
 }

Nota: Esto solo funciona si su collectionView.width = viewController.width , es decir, su ancho de collectionView está abrazado al controlador de vista, o el tamaño de collectionView es igual al tamaño de la pantalla como se formuló en la pregunta.

Answer 4

Siga este enlace de blog que ilustra de manera muy sencilla con código de ejemplo : - http://www.fantageek.com/1468/ios-dynamic-table-view-cells-with-varying-row-height-and-autolayout/

El enlace superior es para la vista de tabla, pero de la misma manera puede trabajar en la vista de colección y lograr el resultado deseado.

Nota: Se trata de contenido que se abraza frente a la prioridad de resistencia a la compresión del contenido.

Answer 5

Todo en su proyecto está bien solo necesita agregar un nuevo método delegado de la siguiente manera:

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
    return UIEdgeInsetsMake(15, 20, 20, 20);
}

Varíe las inserciones de este método según el número de cuentas que tenga. la configuración del recuadro será común para:

self.view.frame.size.width/2.5

y diferente para:

self.view.frame.size.width/3.5

por lo tanto, el problema de espacio adicional se resolverá