Começando com View Code no iOS

E ai pessoal, tudo certo? Neste artigo vamos aprender a como criar nosso aplicativo IOS utilizando o View Code :)

Antes de mais nada, fazendo uma breve explicação, viewCode é uma prática utilizada na construção de aplicativos IOS onde construímos todos os componentes da nossa tela via código, sem utilizar Storyboard ou Xibs.

Dito isto, vamos iniciar a criação do nosso projeto, e configurá-lo para utilizar. Bora lá?

Criação do projeto e primeiras configurações

Podemos começar criando nosso projeto da forma padrão.

Para este projeto eu chamei de artigoViewCode, mas você pode colocar o nome que quiser.

Você deve reparar que não possui nada diferente, certo? Ok, a primeira coisa que podemos fazer é remover o arquivo Main.storyboard, com View Code não vamos precisar deste arquivo.

Acabamos de remover o arquivo Main, mas agora precisamos dizer para a nossa aplicação que ela não deve mais apontar para este arquivo Main, pois ele deixou de existir, para isso siga os passos abaixo.

• 1- vá até as configurações do seu projeto
• 2- selecione general
• 3- em Main interface podemos remover a palavra Main, e dar enter

Só isso?

Calma, ainda precisamos fazer algumas outras configurações. Ainda na mesma tela vá para a opção Info que está na mesma direção de General, agora em Custom IOS Target Properties siga este caminho.

Application Scene Manifest > Scene Configuration > Application Session Role > Item 0

Você vai encontrar uma opção chamada Storyboard Name que está recebendo uma String chamada Main, podemos remover apenas a String chamada Main ou remover a linha por completo.

Feito isso, vamos agora para o arquivo SceneDelegate e dentro da função scene coloque o seguinte código:

Basicamente estamos verificando se o windowScene existe, para então adicionarmos ele a nossa window, o window.frame está dizendo que a nossa tela vai ocupar o tamanho do dispositivo, e rootViewController está setando qual vai ser a tela que deve ser exibida dentro da window e no final de tudo atribuímos ao window o makeKeyAndVisible, para que ele possa exibir a nossa tela dentro da window.

Criando e exibindo o primeiro componente em tela

Certo! Agora que fizemos toda a configuração necessária, vamos criar nosso primeiro componente e exibir ele em nossa tela. Para isso dentro da classe ViewController dentro do método viewDidLoad logo abaixo da sua chamada super, adicione o seguinte código:

Estamos colocando uma cor de fundo para a nossa tela, agora vamos de fato criar o nosso componente. Novamente dentro o da ViewController coloque o código a seguir:

repare que estamos criando uma variável que vai ser uma função e ela herda do tipo UILabel, dentro dessa função estamos criando uma variável que instancia o tipo UILabel, como estamos trabalhando com auto layout, não podemos esquecer de passar translatesAutoresizingMaskIntoConstraints como false para que o componente passe a obedecer as regras de constraints que vamos setar, alem disso estamos centralizando está label ao centro e adicionado o texto "Meu app ViewCode", no final retornamos essa label e inicializamos a função.

Se você executar seu código agora, ele não vai funcionar, afinal não adicionamos essa Label a nossa tela, e não setamos as suas constraints.

Vamos fazer isso agora mesmo! Para isso crie logo abaixo do método viewDidLoad coloque as duas funções a seguir:

Como você pode ver, temos uma função para configurar os componentes e uma para adicionar as constraints, na primeira função estamos adicionando a nossa titleLabel dentro da View principal, e na segunda estamos adicionando as constraints. O NSLayoutConstraint.activate está ativando as nossas constraints, deixando a nossa titleLabel presa no topo da View Principal.

Não esqueça de chamar as funções configureUI e setContraints dentro do método viewDidLoad, então execute o projeto com command + R, e teremos o nosso título sendo exibido no topo da tela.

Muito bom! Já estamos com o primeiro componente em tela, mas podemos melhorar isso, vamos adicionar um botão para a nossa tela.

Para isso, coloque o seguinte código dentro da classe ViewController

Dentro da função configureUI, adicione o printButton como subView da view principal.

Não esqueça de adicionar também as constraints dos componentes dentro da função setContraints

Se você executar o projeto novamente conseguirá ver o botão e o título sendo exibidos. Muito legal, né?

Mas perceba que nosso botão não faz nada por enquanto, vamos adicionar uma ação para ele? Para isso dentro do componente printButton adicione o seguinte código:

Como primeiro parâmetro do addTarget passamos qual objeto vamos nos referir para executar as ações, vai ser o nosso próprio botão por isso usamos self, o segundo parâmetro vai ser qualquer o método vai ser executado, e o último qual vai ser o tipo de evento do botão.

Podemos então criar o nosso método printButtonPressed logo abaixo da função setContraints, e dentro dele vamos apenas “desembrulhar” o texto opcional dentro do botão, e usar o print para exibi-lo no console

Executando novamente o seu projeto e pressionando o botão, você dever ter um resultado final parecido com este:

Finalizando

Bom, e com isso você acabou de aprender a como criar, configurar e exibir componentes no seu projeto IOS utilizando View Code. Espero que tenha curtido até aqui, e que tenha te ajudado de alguma forma.

Caso tenha interesse em desenvolvimento IOS, ou tenha ficado alguma dúvida, pode me procurar aqui: joaoalexandre.vercel.app

Até uma próxima! :D