Construindo um Componente customizado com XIB (iOS)

Um dos trabalhos mais desgastantes da computação é quando você precisa reconstruir algo que já foi feito anteriormente, normalmente tendo que ficar copiando e colando um bloco de código que já foi escrito antes.

Para resolver essa reescrita de código utilizamos algumas técnicas de programação, como criação de funções para serem chamadas, utilização de herança para reutilizar o código da classe pai, utilização de interfaces, etc.

Por conta dessa necessidade, foi criado dentro do framework UIKit uma maneira de reaproveitar componentes de tela, esse recurso é chamado XIB (NeXTSTEP Interface Builder), que basicamente é um arquivo XML que pode ser editado graficamente pelo XCode e depois ser reutilizado em outras telas.

Neste artigo será mostrado como construir componentes reutilizáveis utilizando XIB, caso queira saber mais sobre XIB veja o artigo abaixo.

Qual a diferença de XIB para NIB (iOS)

Construção

Como dito anteriormente construiremos um componente customizado, então fabricaremos uma View com duas características, a primeira é uma UIImageView que poderá ter sua imagem alterada e a segunda será um UILabel que poderá ter seu texto alterado.

Criando projeto

1. Para criar um projeto é bem fácil, primeiro clicar em create a new Xcode project.
2. Selecionar a opção App na aba de temples de projeto.
3. Adicionar um nome no projeto e selecionar a Storyboard na opção de interface.
4. Por fim selecionar a pasta de destino do seu projeto.

Criando projeto

Organizando projeto

Na construção de uma nova XIB são criados 2 arquivos, um dos arquivos é o NomeDoComponente.swift, onde possuirá toda a lógica deste objeto, e outro é o NomeDoComponente.xib, sendo ele o arquivo que salva as mudanças gráficas efetuadas pelo editor.

Por sempre haver dois arquivos é importante organizar o projeto para ser fácil e intuitivo os encontrar, para isso criaremos uma pasta para salva-los.

1. Clique com o botão direito na pasta do projeto.
2. Selecione new group.
3. Escolha o nome da pasta.

Criando um grupo

Criando arquivos

Agora com a pasta feita podemos criar os arquivos swift e o XIB da nossa nova View.

Arquivo Swift

1. Clique com o botão direito do mouse na pasta criada anteriormente e selecione new file.
2. Com a aba de templates aberta pode ser selecionado o Swift File ou Cocoa Touch Class, nesse caso escolheremos a segunda opção, pois o arquivo gerado é mais completo.
3. Decidir o nome da sua view.
4. Definir sua subclass como UIView.
5. Criar arquivo.

Criando arquivo swift do componente

Arquivo XIB

1. Clique com o botão direito do mouse na pasta criada anteriormente e selecione new file.
2. Selecione a opção View.
3. Coloque o nome da XIB igual ao nome do arquivo Swift.

Criando arquivo XIB

Configurando XIB

Agora com os arquivos criados temos que conectar o arquivo XIB com o Swift.

1. Selecionar a XIB.
2. Abrir o Document Outline (barra da esquerda) e os Inspectors (barra da direita).
3. Selecionar a opção do Files's Owner.
4. Alterar a class para o nome do arquivo swift do seu componente.

Definindo o file owner

Agora alteraremos a parte estética da view, permitindo alterar o tamanho da view, mudaremos o Background do nosso componente, adicionaremos uma UILabel e uma UIImageView e por fim adicionaremos suas constraints.

Tamanho

1. Selecione a view customizada.
2. Abra o attributes inspector.
3. Selecione o modo freeform.

Liberando o tamanho da view

Agora podemos alterar o tamanho da maneira que quisermos. No nosso caso deixaremos a largura em 120 pontos e a altura em 240.

1. Selecione a view customizada.
2. Abra o Size inspector.
3. Escreva na aba de Width o valor desejado.
4. Escreva na aba de Height o valor desejado.

Alterando o tamanho da view

Agora com o tamanho definido adicionaremos os componentes dessa view, que no caso são UIImageView e a UILabel.

Adicionando Componentes

1. Selecione a view customizada.
2. Clique no + em cima do editor ou aperte ⌘ + shift + L para abrir a lista de componentes.
3. Pesquise por UILabel selecione e arraste para a tela.
4. Pesquise por UIImageView selecione e arraste para a tela.

Adicionando componentes

Com os componentes posicionados podemos adicionar suas respectivas constraints, para que eles se adaptem conforme o tamanho do componente pai. Já que o foco desse artigo não é explicar constraints pediremos para o XCode gerá-las automaticamente, o que geralmente não é o ideal.

Constraints

1. Selecione a view customizada.
2. Clique no botão fix autolayout issues, depois selecione a opção de add missing constraints.

Adicionando constraints

Com essas alterações a nossa view já está pronta para ser chamada no controller, porém para facilitar a observação adicionaremos uma imagem para o UIImageView e adicionar uma cor de background na view.

Toques Finais

1. Selecione a view customizada.
2. Abra o attributes inspector.
3. Escolha a cor do background.
4. Selecione a UIImageView
5. Abra o attributes inspector.
6. Defina qual imagem aparecerá.

Últimos toques

Configurando o arquivo Swift

Agora com o XIB configurado escreveremos o seu código de inicialização, mas primeiro faremos as referências dos subcomponentes existentes.

Referencias

1. Selecione o assistent, que abre o código da view ao lado da XIB.
2. Segurando ctrl selecione o subcomponente e arraste para o código que aparece a direita.
3. Depois escolha um nome para esse IBOutlet.

Configurando os IBOutlets

Com as conexões feitas podemos focar no código abaixo, na linha 11 temos uma variável estática chamada identifier, ela servirá para salvar e reutilizar o nome desta XIB de maneira fácil, por conta disso o texto escrito nela tem que ser exatamente o nome da XIB.

Entre as linhas 17–20 e 22–25 temos dois construtores, o primeiro é referente aquando o componente é inicializado como um subcomponente de um Storyboard ou outra XIB, na próxima seção será mostrado como fazer isso. O segundo construtor é referente aquando o componente é inicializado via código. Em ambos construtores é chamado o método initSubViews(), ele é a chave para que o componente customizado usando XIB funcione.

Na linha 29 indicamos qual a XIB que estamos referenciando, neste ponto passamos o identifier criado anteriormente, e passamos o bundle como nil. Esse ultimo parâmetro serve para determinar em qual bundle/modulo a sua XIB está, no nosso caso ela está no main bundle, então podemos passar como o valor como nil.

Na linha 31 e 32 inicializamos a XIB selecionada como uma NIB, o método nib.instantiate, recebe o withOwner a própria classe, e recebe um options que é um dicionário de opções extras da NIB.

Em seguida utilizamos um .first, pois nossa XIB só possui um componente customizado. Depois convertemos esse objeto para uma UIView, caso não seja possível lançamos um erro.

Na linha 34 definimos o frame da view, na linha 35 dizemos que ela possuirá uma altura e uma largura flexível e por último na linha 37 definimos que nossa nib será uma subview.

Por fim temos uma função chamada configureImageAndText, que servirá para podermos mudar o texto e a imagem do componente de uma maneira mais fácil.

Chamando o Componente

Agora com tudo configurado é só chamarmos o componente, para isso temos 2 opções, a primeira é usando a Storyboard/XIB, a segunda é chamando nosso componente via código.

Storyboard/XIB

1. Abrir o Storyboard ou outra XIB, neste caso abriremos o storyboard.
2. Clique no + em cima do editor ou aperte ⌘ + shift + L para abrir a lista de componentes.
3. Adicione um UIView.
4. Selecionando a view adicionada e abra a aba de attributes inspector.
5. Em custom class coloque sua CustomView em class.
6. Em Size inspector mude a altura e a largura do seu objeto.
7. Ainda dentro do Size Inspector clique em todas as opções da opção do Autoresizing.
8. Rodar o programa.

Abrindo custom view usando Storyboard.

Via Código

A criação em tela de uma XIB customizada é igual criação de qualquer outra view que existe nativo do UIKit.

Na linha 8 criamos o rect da view, que serve para determinar o seu posicionamento em tela e qual as suas dimensões. Na linha 9 inicializamos essa view passando o rect como o frame dela.

Por fim alteramos sua cor na linha 10 e a definimos como subview da controller na linha 11.

Abrindo custom view pelo código.

Alterando dados do Componente

Agora que o componente está funcionando, podemos alterar as informações que ele possui, no caso já efetuamos um pequeno exemplo disso quando trocamos a cor do componente para verde, mas agora trocaremos a imagem e o texto mostrado.

Antes de alterarmos os valores é preciso criar uma conexão da customView do Storyboard com o código.

1. Selecione o assistent, que abre o código da view ao lado da XIB.
2. Segurando ctrl selecione o customView e arraste para o código que aparece a direita.
3. Depois escolha um nome para esse IBOutlet.

Configurando outlet da custom view.

Agora só precisamos chamar o método configureImageAndText com os dois componentes criados, passando a imagem e o texto que definimos.

Alterando valores das views.

Conclusão

Com isso você consegue construir views customizadas e alterar seus valores, evitando ao máximo ter que ficar reconstruído do 0 essas telas. Você pode baixar esse projeto clicando neste link.

Caso você queira entender melhor a diferença entre XIB e NIB, leia o artigo abaixo onde explico melhor essa diferença.

Qual a diferença de XIB para NIB (iOS)