Amigos, tenho uma IUCollectionView
que esta apresentando dos dados em 3 colunas, como eu poderia fazer para mostrar apenas 2 com uma imagem centralizada?
-
Tem como você postar um exemplo do resultado esperado? Não entendi essa parte de imagem centralizada. – Alexandre Lara 18/02/17 às 18:29
Para que O UICollectionView
apresente as células como espera, você tem duas opções:
- Aumentar o tamanho da sua célula; ou
- Aumentar os espaços entre suas células e as bordas.
1) Aumentar o tamanho da sua célula
Nesse caso, você pode simplesmente alterar o tamanho da célula no UIStoryboard
(maneira mais fácil/rápida); ou declarar explicitamente o CGSize
que você espera que a célula tenha implementando o método collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize
(do UICollectionViewDelegateFlowLayout
)
2) Aumentar os espaços entre suas células e as bordas
Nesse caso, você pode implementar os métodos do protocolo UICollectionViewDelegateFlowLayout
referentes a isso, como:
collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets
collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat
collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat
Hands-on
Suponhamos que você queira que a célula tenha a dimensão de 100px de largura por 100px de altura com padding de 20px entre as bordas e o meio. A implementação ficará (mais ou menos) assim (não testado):
Swift 2
let cellDimension : CGFloat = 100
let spaceBetweenCells : CGFloat = 20
let numberOfColumns : CGFloat = 2
....
// Layout
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
return CGSize(width: cellDimension, height: cellDimension)
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets {
let width = self.view.frame.width
let expectUsedSize : CGFloat = (cellDimension * numberOfColumns) + spaceBetweenCells
let margins = (width - expectUsedSize) / numberOfColumns
return UIEdgeInsetsMake(spaceBetweenCells, margins, spaceBetweenCells, margins)
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat {
return spaceBetweenCells
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat {
return spaceBetweenCells
}
Swift 3
// Layout
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: cellDimension, height: cellDimension)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
let width = self.view.frame.width
let expectUsedSize : CGFloat = (cellDimension * numberOfColumns) + spaceBetweenCells
let margins = (width - expectUsedSize) / numberOfColumns
return UIEdgeInsetsMake(spaceBetweenCells, margins, spaceBetweenCells, margins)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
return spaceBetweenCells
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return spaceBetweenCells
}
Nota
No código acima usei o mesmo espaço entre as células (spaceBetweenCells
) para o UIEdgeInsets
da célula (bottom e top). Você pode (obviamente) alterar esse valor como quiser.
Abs!
Obs.: A implementação acima tem o objetivo de ilustrar o algoritmo que calcula o tamanho certo da célula para diferentes larguras de aparelhos (iPhone 4s/5/5c/5s/6/6s/7/7s ou iPads);