Acabei de começar a aprender sobre UICollectionViews. Estou me perguntando se alguém sabe como especificar o número de colunas em um collectionview. O padrão é 3 (iPhone / retrato). Eu olhei a documentação e não consigo encontrar uma resposta concisa.
100
UICollectionView
basicamente como grade porque sei que só quero 4 colunas. Eu faço isso tornando minhas células de um certo tamanho e o espaçamento entre elas de um certo tamanho para que a visualização da coleção mostre apenas 4 colunas, não importa a orientação. É semelhante ao que você precisa?Respostas:
CollectionViews são muito poderosos e têm um preço. Muitas e muitas opções. Como omz disse:
Eu sugiro implementar o
<UICollectionViewDelegateFlowLayout>
Protocolo, dando a você acesso aos seguintes métodos nos quais você pode ter maior controle sobre o layout do seuUICollectionView
, sem a necessidade de subclassificá-lo:collectionView:layout:insetForSectionAtIndex:
collectionView:layout:minimumInteritemSpacingForSectionAtIndex:
collectionView:layout:minimumLineSpacingForSectionAtIndex:
collectionView:layout:referenceSizeForFooterInSection:
collectionView:layout:referenceSizeForHeaderInSection:
collectionView:layout:sizeForItemAtIndexPath:
Além disso, implementar o método a seguir forçará seu UICollectionView a atualizar seu layout em uma mudança de orientação: (digamos que você queira redimensionar as células para paisagem e aumentá-las)
Além disso, aqui estão 2 tutoriais realmente bons sobre
UICollectionViews
:http://www.raywenderlich.com/22324/beginning-uicollectionview-in-ios-6-part-12
http://skeuo.com/uicollectionview-custom-layout-tutorial
fonte
collectionView:layout:sizeForItemAtIndexPath:
ser manuseado para todos os dispositivos separadamente?new GridLayoutManager(mContext, 4))
(4 colunas), muito fácil, ou apenas usarLinearLayoutManager
(é claro que tem apenas 1 coluna)Com o Swift 5 e iOS 12.3, você pode usar uma das 4 implementações a seguir para definir o número de itens por linha em seu,
UICollectionView
enquanto gerencia inserções e alterações de tamanho (incluindo rotação).# 1. Subclassificando
UICollectionViewFlowLayout
e usandoUICollectionViewFlowLayout
aitemSize
propriedade deColumnFlowLayout.swift:
CollectionViewController.swift:
# 2. Usando
UICollectionViewFlowLayout
oitemSize
método de# 3. Usando
UICollectionViewDelegateFlowLayout
ocollectionView(_:layout:sizeForItemAt:)
método de# 4. Subclassificando
UICollectionViewFlowLayout
e usandoUICollectionViewFlowLayout
aestimatedItemSize
propriedade deCollectionViewController.swift:
FlowLayout.swift:
Cell.swift:
fonte
Implementei
UICollectionViewDelegateFlowLayout
no meuUICollectionViewController
e substituí o método responsável por determinar o tamanho da célula. Em seguida, peguei a largura da tela e dividi-a com o requisito da coluna. Por exemplo, eu queria ter 3 colunas em cada tamanho de tela. Então, aqui está a aparência do meu código -fonte
Expandindo a resposta de Noob:
Isso permite qualquer espaçamento entre as células. Ele assume uma
Int
variável de membro chamadanumberOfItemsPerRow
e também que todas as células são quadradas e têm o mesmo tamanho. Conforme observado na resposta de jhilgert00, também devemos reagir às mudanças de orientação, mas agora usandoviewWillTransitionToSize
comowillRotateToInterfaceOrientation
é depreciado.fonte
Aqui está o código de trabalho para Swift 3, para ter um layout de duas colunas:
Sinta-se à vontade para alterar "nbCol" para o número de colunas desejado.
fonte
Se você for preguiçoso, use delegado.
PS: Deve ser chamado após a rotação também
fonte
Atualizado para Swift 3:
Em vez do layout de fluxo, prefiro usar o layout personalizado para o número da coluna e o número da linha específicos. Porque:
Célula normal e célula de cabeçalho: (Adicione UILabel como um IBOutlet ao seu xib):
Layout personalizado:
CollectionView:
Use CollectionView do ViewController:
Finalmente, você pode ter um CollectionView sofisticado!
fonte
Por
UICollectionView
ser tão flexível, existem várias maneiras de alterar o número de colunas, dependendo do tipo de layout usado.O
UICollectionViewFlowLayout
(que é provavelmente com o que você está trabalhando) não especifica um número de colunas diretamente (porque depende do tamanho / orientação da visualização). A maneira mais fácil de alterar seria definir aitemSize
propriedade e / ouminimumInteritemSpacing
/minimumLineSpacing
.fonte
Swift 3.0. Funciona para direções de rolagem horizontal e vertical e espaçamento variável
Especifique o número de colunas
Configure
flowLayout
para renderizar especificadonumberOfColumns
fonte
Atualizado para Swift 5+ iOS 13
O tamanho estimado da visualização da coleção deve ser nenhum
Declarar margem para célula
Na viewDidLoad configure
minimumInteritemSpacing
,minimumLineSpacing
,sectionInset
Método UICollectionViewDataSource
sizeForItemAt
fonte
É tudo sobre o layout que você deseja desenhar. Você pode criar uma classe personalizada herdada de UICollectionViewFlowLayout. Atualmente não existe nenhum método direto para definir colunas. Se você deseja obter este tipo de funcionalidade, você precisa fazê-lo manualmente. Você precisa lidar com isso em sua classe de layout de fluxo customizado.
Agora surgirá a questão de como você fará isso? Se você não quiser perturbar o quadro da célula, você pode ajustar
Outra maneira é fornecer suas próprias posições de células. Substituindo os dois métodos abaixo, que serão chamados durante a formação do layout.
UICollectionViewLayoutAttributes é uma classe que lidará com a posição da célula, quadro, Zindex etc.
fonte
Esta resposta é para swift 3.0 ->
primeiro conformar-se com o protocolo:
em seguida, adicione estes métodos:
fonte
Eu só queria acrescentar a resposta nº 2 de Imanou Petit. Para garantir que as margens sejam exatas, independentemente da largura da tela, uso um solucionador iterativo com uma margem desejada e o número de colunas como entradas. Eu também adicionei um sinalizador direcional em que suas margens finais serão comparadas ao seu destino.
O solucionador iterativo é mostrado abaixo e retorna cellWidth e margin.
Eu chamo assim:
Em seguida, aplico os valores de cellWidth e margin ao layout de fluxo como:
{func collectionView (_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {return CGSize (width: cellWidth, height: cellWidth)}
}
Espero que isto ajude. Provavelmente existe uma maneira mais fácil de garantir que as margens sejam exatas, mas esse é um método. Além disso, este código não foi testado para dispositivos que permitem visualizações de coleção rotativas.
Obrigado,
fonte
a solução perfeita é usar UICollectionViewDelegateFlowLayout, mas você pode facilmente calcular a largura da célula e dividir no número desejado de colunas que você deseja
o complicado é fazer a largura sem fração
fonte
Fiz um layout de coleção.
Para tornar o separador visível, defina a cor de fundo da visualização da coleção como cinza. Uma linha por seção.
Uso:
Layout:
fonte
Experimente, está funcionando perfeitamente para mim,
Siga as etapas abaixo:
1. Defina os valores no arquivo .h.
OU
2. Adicionar código na coleção Exibir métodos de fonte de dados de layout como abaixo,
Espero que isso ajude alguém.
fonte
Primeiro adicione UICollectionViewDelegateFlowLayout como protocolo.
Então:
fonte