SUMÁRIO Introdução ao universo dos Apps Android Criando um novo projeto no Android Studio Meu primeiro aplicativo Android ConstraintLayout. Conhecendo um pouco mais... Criando uma calculadora IMC Android

SiteBook

Desenvolvimento de aplicativos para Android

Constraint Layout – Conhecendo um pouco mais…

O Constraint Layout permite que você crie layouts grandes e complexos de maneira flexível e fáceis de usar com o Layout Editor do Android Studio.

calculadora android imc

O que é Constraint Layout

Constraint Layout é um dos recursos utilizados pelo Android Studio a partir da versão 2.2 para construir layout otimizado que se adaptem á qualquer dispositivo que seja submetido de maneira mais responsiva, posicionando os componentes na tela, utilizando regras matemáticas.

Para exemplificar vamos criar um novo projeto chamado ConstraintLayout. Ao terminar este processo você verá o componente textView no centro da tela com a nossa simpática frase “Hello Word!”. Para facilitar a compreensão como as regras de layout funcionam vamos alterar algumas configurações do componente textView (Hello Word!).

Ao ver a exibição da forma descrita acima, clique no botão “Clear All Constraint”. Será exibida uma mensagem lembrando que todas as constraints presentes no corrente layout serão excluídas. Esta é a oportunidade da ação ser interrompida, se esta não for sua intenção.

Ao clicar sim, aparentemente nada mudou, apenas as linhas desaparecem, indicando que a ação foi executada, no entanto se você mudar a visualização para retrato (Landscape) clicando em “Orientation For Preview” irá observar que o texto não estará mais alinhado no centro da tela.

Se você executar o aplicativo, clicando em “Run App”, a imagem do texto “Hello Word!” será vetorizada por padrão no canto superior esquerdo.

limpar constraints
Clear all Contraints – irá excluir todas as restrições de layout

Outro fato interessante é que surge no canto direito logo acima da representação da activity um símbolo de uma bolinha vermelha com ponto de exclamação. Isto significa que há advertências e/ou erros que talvez precisem ser tratados.

advertencias e erros
Observe os íciones exibidos que indicam advertências e erros

Ao Clicar neste símbolo, as advertências e erros existentes são exibidos em uma caixa especial que surge na interface do Android Studio. Neste nosso exemplo, um erro é exibido “Missing Constraints in ConstraintLayout”, isto é, foram perdidas as restrições do elemento ContraintLayout referente ao componente textView (Hello Word!).

Estas indicações visuais do símbolo, além das informações na caixa de mensagem, irá lhe orientar durante o processo de criação de seu app, direcionando suas ações onde serão necessárias as correções em eventuais bugs.

Inserindo regras de Restrições de Layout.

Existem algumas maneiras de inserir as restrições de layout em um componente. Chamamos de restrições (Constraint) porque limitam e ou restringem o posicionamento de um componente em uma determinada posição na tela ou em relação a outro componente presente na tela.

A primeira sugestão para inserir restrições em um componente que não as têm é usar o recurso “Infer Constraints”, em tradução livre (inferir restrições). Para isto selecione o componente textView (Hello Word!) e clique no botão “Infer Constraints”.

infer-constraints
Insira automaticamente constraints em um componente

Desta forma linhas gráficas em forma de molas serão exibidas a partir de pontos de ancoragem representados por círculos em cada face do componente textView. Estas linhas serão fixadas nas quatro margens laterais da tela, centralizando o componente, como se as molas exercessem pressão em cada direção.

Para compreender melhor vamos ver outra maneira de lidar com esta situação manualmente.

Selecione novamente o componente textView (Hello Word!) e limpe todas as constraints clicando no botão “Clear All Constraint”. Agora clique em um dos círculos de ancoragem, por exemplo, do topo do componente textView (Hello Word!) e arraste com o mouse até a parte superior da tela.

Surgirá uma linha que acompanhará o ponteiro do mouse até a parte central superior da tela. Ao soltar o componente será arrastado para o topo, como se estivesse instalado uma mola no componente.

Para observar este detalhe melhor, faça o mesmo como o ponto de ancoragem na parte de baixo do componente e arraste a linha até a linha de baixo da tela. Logo o componente será centralizado e será exibido linhas semelhantes à molas da vida real. Cada uma puxando para seu lado, centralizando o componente.

Mas este componente estará alinhado apenas na vertical pois não foram criadas restrições na horizontal. Você pode confirmar isto girando a orientação da tela paisagem. Para corrigir isto insira constraints utilizando as ancoras laterais do componente.

Observe que ao inserir um dos lados, o componente será puxado para aquele lado, como se fosse a pressão de uma mola. Agora se o outro lado for inserido a outra constraint, as pressões serão equilibradas e o componente centralizado.

Voltando a visualização da tela para retrato, observe que o componente continuará centralizado proporcionalmente. Lembramos que estas regras de layout serão aplicadas em qualquer dispositivo de qualquer tamanho de tela que o layout for submetido, seja um tablete ou uma smart tv de 70 polegadas.

excluindo constraints
Excluindo constraint através do botão Clear All Constraint e inserindo manualmente

Alinhando componentes em relação a outros existentes.

Se você inserir outro componente no layout como um botão, alinhado e centralizado abaixo do textView (Hello Word!), observará que este alinhamento não ficará sempre no mesmo lugar ao mudar o modo de visualização ou tipo de dispositivo e ainda em modo de execução.

Você poderá criar regras de layout das duas maneiras. Ainda na posição de visualização retrato, selecione o novo componente (button) e clique no botão Infer Constraint e automaticamente serão criadas regras de restrição no componente.

Outra maneira e clicar na ancora superior do novo componente. Feito isto as ancoras que podem ser utilizadas do componente (Hello Word!) serão sinalizadas. Assim você poderá alinhar tanto na parte superior como inferior do componente (Hello Word!).

Feito isto você poderá ancorar o componente button inserido à lateral, ficando colado à margem direita, como era esperado. Como esta posição não é a mais indicada, você pode posicionar o componente, clicando nele e arrastando para uma posição visualmente melhor. Observe que aparecerão linhas gráficas com o espaçamento exato do componente.

Agora você pode experimentar o mais variadas visualizações assim como dispositivos e observará que a posição dos componentes continuarão proporcionalmente nas mesmas posições.

Utilizando Constraint Widget para controlar o posicionamento do componente.

Na lateral direita da interface do Android Studio na aba de atributos, existem um sub atributo denominado Layout. Ao selecionar o componente textView (Hello Word!) observamos deste espaço gráficos com um quadrado, rodeados por outros retângulos com números, neste exemplo com zeros. Ainda observamos duas linhas (uma horizontal e outra vertical) com uma indicação numérica (cinquenta).

Este gráfico representa a Constraint Widget da qual podemos configurar e modificar atributos do componente selecionado. Por exemplo, o quadrado com umas setas ao centro representa o componente selecionado. Os círculos preenchidos em cada lateral deste quadrado representam os pontos de ancoragem das constraints do componente.

Se passar o mouse o circulo da parte inferior, surgirá a imagem de um xis e qual ação ocorrerá, neste caso (delete Bottom Constraint) – Excluir a Constraint Inferior.

Ao clicar esta Constraint será excluída e o componente será arrastado, colando-o à margem superior da tela. Para aumentar o espaçamento entre a margem da tela e o componente, que é zero neste momento, clicando na seta do retângulo superior e escolhendo um dos valores indicados. Note que ao selecionar um, por exemplo, dezesseis, será criado um distanciamento de 16sp entre a margem da tela e o componente. Observe graficamente na tela esta ação.

Na parte inferior do quadrado do Constraint Widget, no ponto que excluímos a Contraint Inferior, surgiu um círculo com um sinal de mais. Isto indica que poderemos adicionar uma Constraint deste ponto. Mais ao clicar neste ponto ela será diferente, isto é, surgirá uma regra que determinará um distanciamento fixo do componente.

Restabelecendo as regras normais das constraints, podemos observar a ação das barras de posicionamento do componente, indicado graficamente com aquelas barras com o número cinquenta no centro. Movimentando na barra horizontas para direita ou esquerda a proporção é alterada. Se posicionarmos a 30% na direita indica por consequência que ficará a 70% da margem direita. Assim da mesma forma atuará a barra vertical, respectivamente.

Um fato importante na questão das margens é que elas influenciam sobre o comportamento do componente em relação ao seu posicionamento na tela. Retorne o componente textView (Hello Word!) ancorados pelas constraints nas quatro margens, centralizado na tela. Na caixa de Constraint Widgets altere uma das margens de 0dp para 24dp. por exemplo. Observe que a posição do componente e alterada, desconsiderando o valor das margens. Quando construir seus layouts lembre-se disto quando seus componentes não ficarem nas posições que você imaginava.

Controlando o tamanho de um componente.

Configure as regras de layout do componente button com as constraints horizontais restabelecidas. Com o componente selecionado, clique no centro do quadro que representa o componente nos símbolo (>> <<) que significa wrap_content, em que o tamanho do componente se reorganiza de acordo com seu conteúdo. Ao clicar ela mudará para posição fixed (|--|), onde o tamanho do componente será fixo.

Ao clicar novamente ela alterará para Match Constraint. Isto fará que o componente ocupe toda a extensão horizontal da tela. O mesmo pode ser feito verticalmente se assim desejar. Um componente onde é comum usar esta configuração seria uma imagem (imageView), que muitas vezes queremos que ela ocupe toda a tela.

Voltando ao exemplo da ocupação total horizontal do componente, note que não há espaçamento nas margens e o componente está colado. Isto esteticamente não é legal. Para isto use as caixas de margens da Constraint Widget e selecione uma medida e digite um valor para personaliza-la.