Desenvolvimento iOS com Swift 2 - Auto Layouts

Quando criamos aplicativos iOS e adicionamos elementos de interface do usuário a esse aplicativo, eles podem parecer perfeitos em um dispositivo. No entanto, agora devemos tentar o mesmo aplicativo em algum outro dispositivo. Certamente veremos mudanças drásticas na IU e alguns elementos podem não aparecer também.

O layout automático é a técnica que usaremos para resolver esse problema. Neste capítulo, vamos entender como fazer Auto Layout, Aplicar restrições e Stack View para fazer seu aplicativo parecer perfeito e melhor em todos os dispositivos.

Começaremos criando um novo aplicativo de visualização única.

Adicionando Elementos

Adicione um rótulo no centro superior da visualização e um no canto inferior direito da visualização, conforme mostrado abaixo -

Agora, tente mudar a orientação e veremos que o canto inferior direito não aparece, enquanto o Centro não está no centro.

(Tip - Você não precisa executar o simulador para ver os layouts, basta clicar em Exibir como - iPhone x, na parte inferior da tela, conforme mostrado na imagem a seguir.)

Selecione a versão do iPhone e a orientação. Veremos que os elementos da IU não estão organizados corretamente. Portanto, quando mudamos nossa orientação, dispositivo ou ambos, o rótulo inferior direito desaparecerá e o centro não ficará no centro.

Isso acontece porque não especificamos a posição fixa dos elementos. Para resolver isso, usaremos restrições.

Aplicação de restrições a elementos de interface do usuário

Clique no rótulo central, pressione o controle e arraste para qualquer lugar dentro da visualização, solte. Agora você deve estar vendo -

Selecione Center Horizontally in Container. Novamente, repita a etapa acima e escolha Espaçamento vertical para guia de layout superior.

Agora, clique no botão Adicionar nova restrição e selecione a altura e largura, e clique em Adicionar 2 restrições.

Clique no rótulo inferior direito, controle e arraste do rótulo para qualquer lugar dentro da visualização e escolha “Espaço à direita para a margem do contêiner”. Da mesma forma, escolha Espaçamento vertical para guia de layout inferior.

(Tip- Para selecionar várias opções de uma vez, pressione shift e escolha as opções. Certifique-se de não liberar o turno até que tenha selecionado tudo.)

Depois de aplicar todas as restrições, a visualização deve ter a seguinte aparência -

Stack View

A visualização de pilha funciona organizando os elementos em pilhas. Depois de organizar, definimos as restrições apenas uma vez e todos os elementos são organizados de acordo. Para começar com a visualização da pilha, crie a seguinte visualização, que não ficará melhor em outros dispositivos. No entanto, ele será adequado para outros dispositivos nesta seção.

Agora, selecione os dois botões superiores - selecione um botão, pressione o comando e selecione o segundo. Para incorporá-los em uma visualização de pilha, vá para editor → incorporar em → visualização de pilha.

OR

No canto inferior direito, há uma opção Selecione esta opção e isso irá incorporar as visualizações na visualização da pilha.

Vista de pilha horizontal

A visualização de pilha horizontal teria a aparência mostrada na captura de tela a seguir.

Enquanto esta visão de pilha está selecionada, vá para o inspetor de atributos. Altere Distribuição para Preencher Igualmente e Espaçamento para 10.

Agora, selecione esta visualização da pilha e o botão inferior e incorpore novamente na visualização da pilha. Desta vez, o eixo de visualização da pilha será vertical, enquanto na visualização da pilha anterior, ele era horizontal.

Vistas de pilha vertical

Agora sua visualização será semelhante a -

Enquanto esta visão de pilha estiver selecionada, vá para o inspetor de atributos e certifique-se de que corresponde à captura de tela abaixo.

Agora, sua visão deve ser a seguinte -

A última etapa é fazer restrições para esta visualização de pilha.

Selecione a visualização da pilha → Clique no botão adicionar nova restrição.

Isso abrirá uma nova janela na qual temos que seguir os passos mostrados na próxima imagem.

Adicionando restrições à visualização da pilha

A captura de tela a seguir descreve como adicionar restrições a uma visualização de pilha.

Isso é tudo o que faremos com layouts automáticos. No próximo capítulo, discutiremos sobre animações.

Isso é tudo o que faremos com layouts automáticos. No próximo capítulo, discutiremos sobre animações.