Este projeto foi testado com o Xcode 10 e o Swift 4.2.
Crie um novo projeto
Pode ser apenas um aplicativo de exibição única.
Adicione o código
Crie um novo arquivo Cocoa Touch Class (Arquivo> Novo> Arquivo ...> iOS> Cocoa Touch Class). Dê um nome MyCollectionViewCell
. Esta classe manterá as saídas das visualizações adicionadas ao seu celular no storyboard.
import UIKit
class MyCollectionViewCell: UICollectionViewCell {
@IBOutlet weak var myLabel: UILabel!
}
Mais tarde conectaremos esta tomada.
Abra o ViewController.swift e verifique se você tem o seguinte conteúdo:
import UIKit
class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate {
let reuseIdentifier = "cell" // also enter this string as the cell identifier in the storyboard
var items = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48"]
// MARK: - UICollectionViewDataSource protocol
// tell the collection view how many cells to make
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return self.items.count
}
// make a cell for each cell index path
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
// get a reference to our storyboard cell
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath as IndexPath) as! MyCollectionViewCell
// Use the outlet in our custom class to get a reference to the UILabel in the cell
cell.myLabel.text = self.items[indexPath.item]
cell.backgroundColor = UIColor.cyan // make cell more visible in our example project
return cell
}
// MARK: - UICollectionViewDelegate protocol
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
// handle tap events
print("You selected cell #\(indexPath.item)!")
}
}
Notas
UICollectionViewDataSource
e UICollectionViewDelegate
são os protocolos que a exibição da coleção segue. Você também pode adicionar o UICollectionViewFlowLayout
protocolo para alterar o tamanho das visualizações programaticamente, mas não é necessário.
- Estamos apenas colocando cordas simples em nossa grade, mas você certamente poderá fazer imagens posteriormente.
Configurar o storyboard
Arraste uma View de coleção para o View Controller no seu storyboard. Você pode adicionar restrições para preencher a visualização principal, se desejar.
Verifique se seus padrões no Inspetor de atributos também estão
A pequena caixa no canto superior esquerdo da exibição de coleção é uma célula de exibição de coleção. Vamos usá-lo como nossa célula protótipo. Arraste um rótulo para a célula e centralize-o. Você pode redimensionar as bordas da célula e adicionar restrições para centralizar o Label, se desejar.
Escreva "célula" (sem aspas) na caixa Identificador do Inspetor de atributos para a célula de exibição de coleção. Observe que esse é o mesmo valor que let reuseIdentifier = "cell"
em ViewController.swift.
E no Identity Inspector da célula, defina o nome da classe como MyCollectionViewCell
, nossa classe personalizada que criamos.
Ligar as tomadas
- Conecte o Label na célula de coleção
myLabel
na MyCollectionViewCell
classe. (Você pode pressionar a tecla Control e arrastar .)
- Conecte o modo de exibição de coleção
delegate
e dataSource
o controlador de exibição. (Clique com o botão direito do mouse em Modo de exibição de coleção no Resumo do documento. Em seguida, clique e arraste a seta mais até o Controlador de exibição.)
Acabado
Aqui está o que parece depois de adicionar restrições para centralizar o Rótulo na célula e fixar a Exibição de Coleção nas paredes do pai.
Fazendo melhorias
O exemplo acima funciona, mas é bastante feio. Aqui estão algumas coisas com as quais você pode jogar:
Cor de fundo
No Construtor de interface, vá para o Modo de exibição de coleção> Inspetor de atributos> Exibir> Plano de fundo .
Espaçamento celular
Alterar o espaçamento mínimo entre células para um valor menor faz com que pareça melhor. No Construtor de interface, acesse Exibição da coleção> Inspetor de tamanho> Espaçamento mínimo e diminua os valores. "Para células" é a distância horizontal e "Para linhas" é a distância vertical.
Forma da célula
Se você quiser cantos arredondados, uma borda e coisas do gênero, pode brincar com a célula layer
. Aqui está um código de exemplo. Você o colocaria diretamente depois cell.backgroundColor = UIColor.cyan
no código acima.
cell.layer.borderColor = UIColor.black.cgColor
cell.layer.borderWidth = 1
cell.layer.cornerRadius = 8
Veja esta resposta para outras coisas que você pode fazer com a camada (sombra, por exemplo).
Alterar a cor ao tocar
Isso contribui para uma melhor experiência do usuário quando as células respondem visualmente aos toques. Uma maneira de conseguir isso é alterar a cor do plano de fundo enquanto a célula está sendo tocada. Para fazer isso, adicione os dois métodos a seguir à sua ViewController
classe:
// change background color when user touches cell
func collectionView(_ collectionView: UICollectionView, didHighlightItemAt indexPath: IndexPath) {
let cell = collectionView.cellForItem(at: indexPath)
cell?.backgroundColor = UIColor.red
}
// change background color back when user releases touch
func collectionView(_ collectionView: UICollectionView, didUnhighlightItemAt indexPath: IndexPath) {
let cell = collectionView.cellForItem(at: indexPath)
cell?.backgroundColor = UIColor.cyan
}
Aqui está a aparência atualizada:
Um estudo mais aprofundado
Versão UITableView deste Q&A