Como utilizar viewCode

Em primeiro lugar temos que saber o que é viewCode, certo?

ViewCode é uma maneira de criar interface para o seu aplicativo iOS sem uma pré-visualização da sua interface, ou seja, sem storyBoard e totalmente em código.

Neste artigo irei mostrar passo a passo como configurar o projeto para utilizar o view code e como criar e manipular os elementos através do código.

1. Criando o projeto no XCode

Aqui você irá criar normalmente o projeto preenchendo os dados exigidos como desejar, nome, time e nome da organização.

2. Removendo o arquivo Storyboard

Clique com o botão direito sob o arquivo “Main.storyboard” depois em Delete.

Nessa janela, selecione a opção “Move to Trash”, para que não fique resquícios do arquivo no seu projeto.

3. Remover referência no info.plist

Abra o arquivo info.plist e remova a referência ao Main. Para remover você terá que selecionar o sinal de menos (-) na linha do Storyboard Name.

4. Remover Main Interface no target do projeto

Selecione o projeto, e dentro de General, teremos a partição Deployment Info, aqui iremos remover o Main do Main interface, basta selecionar o texto e usar a tecla backspace do seu teclado.

5. Configurando a navegação do App

Aqui iremos modificar o arquivo SceneDelegate. Como ele vem configurado por padrão para inicializar o app pelo Storyboard, agora teremos que configurá-lo para iniciar por nossa viewController.

No Scene delegate, coloque o código a seguir:

6. Verificando se a configuração deu certo

Para ter certeza que toda a configuração que fizemos esta correta, vamos modificar a cor de fundo da nossa tela e rodar o app.

No arquivo ViewController, dentro do método viewDidLoad, vamos adicionar a seguinte linha de código:

Agora rode o app, se a tela estiver como a imagem abaixo, toda a configuração foi realizada com sucesso!

Caso contrário, reveja os passos anteriores!

Bora codar!

Agora que já temos o projeto configurado, iremos ver como criar os componentes.

Criando os elementos

Em primeiro lugar vamos a estrutura que vamos utilizar para criar esse elemento. Aqui vamos definir o nome do nosso elemento e de qual tipo ele será. Ele terá a estrutura como se fosse a de uma função anônima.

Agora dentro desse elemento, iremos criar uma instância dele para poder configurá-lo e retorná-lo com essas configurações.

É necessário adicionarmos a propriedade translatesAutoresizingMaskIntoConstraints = false, ela dirá ao xcode que esse elemento irá respeitar as constraints que adicionarmos pra ele via código.

Com nossa label criada, iremos agora personalizá-la. Adicionando um texto, com label.text e cor com label.textColor.

Também podemos centralizar o texto dentro da label e escolher um tamanho para a fonte:

Com nossa label configurada, teremos agora que adicionar constraints a ela.

Constraints

As constraints são utilizadas para que você consiga dizer onde na tela, você deseja que seu elementos fique localizado.

Uma constraint tem a seguinte anatomia:

Irei começar demonstrando como centralizar a label que criamos na tela.

No layout trabalharemos com 2 eixos para isso, o eixo X, que irá dizer como ficará o alinhamento dessa label na horizontal, e o eixo y, que irá dizer como ficará o alinhamento na vertical.

Para isso iremos criar a função setupConstraints.

Dentro dessa função iremos adicionar a label como subView

Agora que já temos a label adicionada como subView, teremos que adicionar suas constraints. Nesse ponto é muito importante sempre levar em consideração que qualquer elemento que você deseja colocar na tela, deve conter um tamanho e uma orientação, somente assim ele irá aparecer na tela.

O que acabamos de fazer foi dizer que queremos o centro do eixo X da labelTitle igual ao eixo X da view. Dentro de uma viewController, a view representa o espaço da tela. Fizemos o mesmo com o eixo Y, e depois demos a label um tamanho, tanto de altura(heightAnchor) quanto de largura(widthAnchor).

Agora para ver sua label na tela, teremos que chamar a função setupConstraints dentro do nosso ciclo de vida viewDidLoad().

(Dentro da viewDidLoad também mudei a cor do fundo da tela para branco, como mostra no código abaixo).

Caso você tenha seguido todos os passo acima, sua tela deverá estar assim:

Perfeito agora vamos melhorar um pouco o código de ativação das nossas constraints. Para isso faremos uso do seguinte bloco de código:

A função activate espera um array de constraints, para que ela possa deixar todas essas constraints ativas.

O código com as constraints ficará da seguinte maneira:

Aqui retiramos a expressão .isActive = true, pois não iremos mais precisar dela, e a substituímos por uma vírgula ( , ). Indicando a separação entre cada constraint que será ativa dentro do nosso array. Dessa maneira temos um código mais limpo e uma maneira mais fácil e menos repetitiva de ativar nossas constraints.

Agora para ver um pouco mais sobre constraints, iremos adicionar mais uma label na tela, embaixo da que já temos criada.

Como já foi mostrado acima como criar uma label, irei mostrar apenas o diferencial que será na parte de constraints.

Chamei a nova label criada de labelText, as constraints adicionadas para ela, foram as seguintes:

Lembrando que essas constraints devem ser implementadas dentro da nossa função setupConstraints, criada mais cedo neste artigo.

Dessa vez temos duas constraints diferentes das anteriores, são elas topAnchor e bottomAnchor, ela serve para conseguirmos colocar o top(topo) da nossa labelText ligada ao bottom da nossa labelTitle, na expressão também passamos a constant de 20, que é a distância em pontos que desejamos manter entre as labels.

Depois de adicionar sua nova label e suas constraints, seu app deve estar da seguinte maneira:

Nosso objetivo agora é implementar um scroll na tela e ter um título com um texto embaixo, para que seja possível visualizarmos esse scroll funcionando, e assim entendermos um pouco mais sobre seu funcionamento.

Implementando scroll na tela

Em primeiro lugar temos que criar nossa scrollView. Então seguindo o mesmo fluxo de montagem de nossas labels, iremos criar esse elemento com o seguinte código:

Depois de criado, devemos criar suas constraints.

Agora iremos levar mais uma coisa em consideração, a safe area. Ela representa essa parte da tela:

Iremos utilizá-la em nossas constraints para evitar que nosso layout passe por cima da status bar do nosso iphone, que é onde aparecem as informações de horário, conexão de rede, bateria e etc.

Sendo assim, iremos precisar de uma referência dessa safe area. Para isso, utilizaremos o código a seguir:

Acima temos a view, que representa nossa tela, seguida do .safeAreaLayoutGuide, ou seja a nossa safe area que esta dentro da nossa view.

Podemos declarar essa linha de código dentro de nossa função setupConstraints, mas teremos que adicioná-la nas primeiras linhas dentro de nossa função, para podermos utilizá-la nas linhas abaixo.

Agora iremos criar as constraints de nossa Scroll com as áreas da nossa safe area, o código ficará da seguinte maneira: (Lembrando de adicioná-las dentro de nossa função setupConstraints ).

Dessa vez temos novamente mais 2 constraints que não vimos anteriormente, são elas:

• leadingAnchor, se refere a esquerda
• trailingAnchor se refere a direita.

Existem também leftAnchor e rightAnchor, porém a Apple nos recomenda utilizar a leading e trailing pois existem países onde a leitura se faz da direita para esquerda e não o contrário como estamos acostumados. Por exemplo, para o português ou inglês a leitura se faz da esquerda para a direita, então para as pessoas que utilizam esse idioma, o leading ou left vão ser a mesma coisa, porém para os casos dos idiomas como Hebraico e Árabe, que são lidos da direita para esquerda, o leading e trailing são invertidos, isso faz com que o leading seja igual ao right e trailing igual ao left.

Levando isso tudo em consideração acabamos de deixar nossa scroll exatamente do mesmo tamanho que nossa safe area, grudando suas ancoras do topo, parte inferior, esquerda e direita.

Agora precisamos colocar nossas duas labels dentro de nossa scroll, nos permitindo deixar um texto maior do que os limites da tela e assim podermos realizar o scroll para ver todo seu conteúdo.

Primeira coisa que fazemos então é dizer que a nossa scrollView irá ter como subView nossas labels, nós iremos modificar esse código:

E o deixaremos dessa maneira:

Agora iremos substituir as constraints que havíamos feito anteriormente por essas:

Existem alguns pontos importantes a serem levados em consideração nesse caso.

As constraints que foram modificadas na labelTitle, foram:

• centerXAnchor, onde substituímos a view pela scroll.
• centerYAnchor, substituída pela TopAnchor para deixarmos o título do nosso texto mais acima.

Já na labelText:

• heightAnchor, foi retirada. Queremos que o conteúdo dela, ou seja sua quantidade de texto defina sua altura.
• centerXAnchor, foi retirada.
• leadingAnchor e trailingAnchor, foram adicionadas para mantermos a largura do texto responsiva, independente do tamanho da tela, o texto sempre será esticado até faltar 16 pontos tanto da esquerda como na direita.
• bottomAnchor, essa constraint da parte inferior sempre deve ser adicionada entre o último item e a ScrollView, pois a scroll precisa de uma referência para saber até onde ela deve ir.

Agora vamos adicionar um texto maior para nossa labelText, você pode escolher um texto qualquer de sua escolha. (lembrando que para adicionar um texto a label, você deverá utilizar label.text = “ ”, passando o texto desejado dentro das aspas).

No caso eu modificarei o texto do título para condizer com o texto sobre o lançamento do primeiro iphone que adicionei.

Caso você tenha feito todos os passos anteriores, seu app deve estar parecido com este:

Código completo da nossa viewController:

Por hoje é isso pessoal, essa foi apenas uma pequena introdução ao viewCode e como ele funciona. Continuem estudando mais sobre viewCode e como recomendação fica aprendam como utilizar UIStackView e também UITableView.

Link do projeto para consultas: https://github.com/llBrenno/ViewCode.git

Observação: no projeto do link acima você encontrará também um exemplo de UITableView. 😉