View Code em Swift

Como colocar elementos de UI no seu aplicativo iOS sem usar Storyboard

Muitxs developers amam a praticidade de apenas “puxar” os outlets até o código, configurar os "identifiers" e ajustar os elementos de interface pelo Storyboard. Isso funciona muito bem se você está criando um projeto pessoal ou começando um com uma equipe que prefira essa ferramenta. Entretanto, se você for executar a manutenção de um aplicativo que não possua Storyboard, como você vai dar assistência? Para lhe ajudar nesse problema, explicarei neste artigo como fazer um aplicativo 100% View Code, isto é, tudo será feito programaticamente. O código possui uma vantagem primordial quando estamos falando de projetos em que se trabalham muitas pessoas: com View Code, o código diminui drasticamente conflitos de "merge" no Git em comparação ao Storyboard. Vamos começar!

1. Criação de um projeto do XCode:

Crie normalmente um novo projeto com nome, time e nome da organização.

2. Remoção do arquivo Storyboard

Clique com o botão direito para mostrar as características do arquivo "Main.storyboard" e depois clique em Delete, após isso, conclua clicando em Move to Trash, para que não fique resquícios do arquivo no seu projeto.

3. Info.plist

Clique no Info.plist para remover o nome do arquivo do seu projeto. Para realizar a remoção, basta clicar no sinal de menos (-) na linha em vermelho abaixo. Repita o mesmo procedimento clicando no projeto em si (primeiro ícone da esquerda), depois clique em Info e retire o Main .

4. SceneDelegate

Quando criamos um novo projeto, ele já vem com um arquivo chamado SceneDelegate. Como apagamos o Main.Storyboard, é aqui que temos que dizer qual a tela que será inicializada. Observe que eu uso um "mainCoordinator" para fazer as transições de tela, mas isso é assunto para outro dia…

5. Colocando os elementos

Uma vez que eu configurei qual tela será a primeira tela ao entrar no app, posso então colocar os elementos. Para tanto, crio um novo arquivo, no caso será "LoginViewController" que herda de UIViewController. Eu coloquei todos os meus arquivos de views como sendo final class porque eu não quero que esses arquivos possam ser herdados. Após isso, inicializo todos os meus elementos, como no código abaixo. O private lazy var está sendo utilizado para que esses elementos só sejam inicializados quando forem chamados via código, ao invés de quando a tela aparece, por isso eu tenho que pedir que eles apareçam mais para frente.

6. Configurando as características dos elementos

Agora chegou a hora de ajustar esses elementos na interface. Para tanto, no viewDidLoad() eu tenho que colocar o nome daquela variável e codificar todos os seus atributos que ficavam visíveis pelo Storyboard na mão. Não se esqueça de colocá-los na view. Observe abaixo que o código acessa mais características do que o próprio Storyboard:

7. Configurando a posição dos elementos

Esta é a hora que mexeremos com autolayout, ou seja, ajustar a disposição dos elementos na tela, tanto no modo portrait, quanto no landscape. Lembre-se que isso só pode ser feito após depois que as views forem adicionadas na hierarquia (addSubview). De imediato, saiba que todos elementos possuem quatro âncoras, uma para cada lado, ou seja, direita, esquerda, topo e base. Assim, eu tenho que acessar as constraints/âncoras dos meus elementos. Existem algumas maneiras de fazer isso, mostrarei uma delas:

No trecho de código acima, eu coloquei o nome do elemento e acessei suas âncoras, vou pegar o loginButton como exemplo:
a) Ao fazer loginButton.bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: -100).isActive = true eu quero dizer que a base do botão, deverá estar ancorada com a base da minha view (que no caso é a tela em si), mas que estará com menos 100 pontos. Isso faz com que o final do elemento esteja a 100 pontos a cima do final da tela. Se quiséssemos que o botão estivesse 100 pontos abaixo do topo da tela, deveríamos fazer loginButton.bottomAnchor.constraint(equalTo: self.view.topAnchor, constant: 100).isActive = true.

b) Ao fazer loginButton.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: -10).isActive = true eu determino que a âncora direita do meu botão estará presa à âncora direita na minha view, com -10 pontos, ou seja, está 10 pontos para dentro.

É importante ressaltar aqui o que quer dizer o sinal: para as âncoras direita e inferior, o sinal de menos indica que estarão para dentro da view. Já para as âncoras esquerda e superior, o sinal de menos indica que estarão para fora da view. É por isso que para ajustar a âncora esquerda do meu botão, eu não uso o sinal de menos, eu coloco apenas 10, porque eu quero que esteja 10 pontos para dentro da view. Outra forma de pensar é mentalizando o plano cartesiano.

Por último, você pode se perguntar qual a diferença entre trailing/leadingAnchor e right/leftAnchor, as guidelines da Apple mandam usar trailing e leading, já se referem às esquerda e direitas relativas, pois há países onde não há a leitura da esquerda para a direita e sim ao contrário, então isso já seria ajustado na tela para o fluxo de leitura fazer sentido. Só use o right e left se obrigatoriamente os elementos, como imagens por exemplo, têm que estar naquela posição.

Assim, termino de demonstrar um pouquinho sobre como ajustar elementos gráficos usando view code. O aplicativo demonstrativo base que eu fiz poderá ser consultado sem moderação nesse link do GitHub: https://github.com/cassiaabarbosa/CassCompany.