ConstraintLayout no Android Studio 2.2
O Android Studio 2.2 inclui um novo editor de layout (Fig. 1) que é especialmente construído para um novo layout chamado ConstraintLayout, embora ainda seja possível editar um ConstraintLayout em XML. ConstraintLayout foi construído a partir do zero, com um layout novo que torna mais fácil ao construir uma UI Android.
Fig. 1 Novo editor de layouts – Plano de Fundo
Depois de arrastar e soltar uma view em ConstraintLayout, pode-se adicionar restrições para definir a posição desta visão, arrastando uma linha de âncora para outros elementos no layout. O editor de layout também pode inteligentemente inferir as restrições para todos os pontos de vista com um único clique.
ConstraintLayout está disponível em uma nova biblioteca de suporte que é compatível com Android 2.3 (Gingerbread) e superior, mas o editor de layout novo está disponível apenas no Preview do Android Studio 2.2
| Nota: Para a versão inicial do ConstraintLayout, não há documentação de referência da API. O Google UI informa que assim que disponibilizar uma versão mais estável do API, irá disponibilizar a documentação da API, mas tudo o que você precisa para construir um ConstraintLayout está disponível através do editor de layout no Preview do Android Studio 2.2. |
Visão Geral do ConstraintsLayout
Um Constraint Layout é uma descrição de como deve ser posicionada uma View em relação aos outros elementos do layout. Pode-se definir uma constraint para um ou mais views, ligando-se a view a um:
- Um ponto de ancoragem em um outro ponto da view.
- Uma lateral do layout.
- Uma invisível linha de instrução.
Como o layout de cada exibição é definido por associação com outros elementos do layout, pode-se criar um layout complexo com uma hierarquia horizontal. Embora seja conceitualmente semelhante ao RelativeLayout, ConstraintLayout é mais flexível e é projetado para o uso inteiramente à partir do novo editor de layouts.
Tipos de Constraints
Os diferentes tipos de Constraints que podem ser definidas são as seguintes:
- Ligação lateral com o layout: Ligue o lado de uma view para o lado correspondente do layout. Por exemplo, ligar o lado superior de uma perspectiva da extremidade superior do ConstraintLayout.
- Ligação lateral com view: Ligue o lado de uma view para o lado oposto de outro ponto da view. Por exemplo, ligar o lado superior de uma view A do lado inferior da view B, de modo que A seja sempre abaixo B.
- Alinhamento lateral com a view: Alinhe a borda de uma view à mesma lateral de outro ponto da view. Por exemplo, alinhar o lado esquerdo da view A do lado esquerdo da view B de tal modo que eles são empilhados verticalmente e alinhado à esquerda.
- Alinhamento padrão da view: Alinhar o texto padrão com a view do texto padrão à outra view. Utilize estes alinhamentos de views horizontais quando for mais importante que o texto dentro das views padrões seja alinhando às arestas das views alinhadas.
Uma vez que se adiciona um constraint para a view no editor de layout, você pode arrastar a view para reposicionar e adicionar outras constraints para garantir a sua disposição correspondente a diferentes tamanhos de tela de formas apropriadas.
Pode-se, também, garantir que todos as views sejam espaçadas uniformemente pela definição das margens padrão para todas as views com o editor de layout Android Studio.
Adicionando ConstraintLayout ao seu projeto
Os novos modelos de projeto no Android Studio 2.2 foram atualizados para utilizar o ConstraintLayout para a maioria dos layouts, par serem utilizados quando se iniciar um novo projeto. Se estiver atualizando um projeto existente, faça o seguinte:
a. Clique em Tools > Android > SDK Manager.
|
Para adicionar um novo constraint layout ao seu projeto:
Adicionando Constraints com o Editor de Layout
|
Para converter um layout existente em um constraintLayout (Fig. 2):
|
Fig. 2 Menu para converter um Layout para ConstraintLayout
Adicionando Constraints com o Editor de Layout (Fig.4)
Autoconnect
Por padrão, um recurso chamado Autoconnect (Fig.3) está habilitado no Editor de Layout. Este recurso cria automaticamente uma ou mais constraints para cada view que você soltar no layout.
Fig.3 AutoConnect
Autoconnect nem sempre podem conectar as coisas do jeito que você quer, mas é fácil de ajustar ou remover cada constraint. Embora se possa desabilitar o Autoconnect apenas clicando em Turn off Autoconnect 
, é bom ter cautela com as views em locais do layout sem constraints, por padrão, não possui informações de layout. Embora o editor de layout mostra cada view onde ele caiu usando coordenadas absolutas, o gerenciador de layout atual não aplica estas coordenadas se não for adiconado constraints para a view, então eles aparecerão no canto superior esquerdo quando o Android tiver funcionando.
Em qualquer ponto durante a edição de seu layout, pode-se solicitar que o editor de layout automaticamente crie constraints para todas as views no layout clicando Infer constraints 
. Deve-se tentar isso com cada layout que se crie para ter certeza de que não foi perdido nenhum constraint, o que poderia deixar a view flutuando no canto superior esquerdo.
Para criar um constraint entre uma view e o pai ConstraintLayout, clique e segure nos círculos das views e arraste até a lateral do layout.
Fig. 4 Adicionando um constraint na borda livre
Constraint entre duas views
Para criar um constraint entre duas views, clique e segure na alça, em seguida, arraste-o para alça constraint de outro widget (figura 5a). Para criar um constraint usando o texto de base entre duas views, passe o cursor sobre a âncora alongado abaixo do texto até a âncora brilhar, em seguida, clique e arraste a conexão com a linha de base de uma outra view (figura 5b).
 (a) Adicionando uma ligação do constraint à outra view |
 (b) Adicionando uma ligação entre as views |
| Fig. 5 Ligações entre Constraint e Views |
Orientação Vertical ou Horizontal
Pode-se acrescentar uma orientação vertical ou horizontal (Fig. 6), que é invisível para o usuário, mas está disponível para conexões de constraints, semelhante às arestas do layout. Para criar uma instrução, clique com o botão direito em qualquer lugar do layout e clique em Add Vertical Guideline ou Add Horizontal Guideline.
Para adicionar constraints opostas a uma view, então as linhas de ligação se tornar distorcidos para indicar as forças opostas. Por exemplo, se você adicionar um constraint para o lado esquerdo e direito da view apontando para o lado esquerdo e direito do layout, então a view centralizará por padrão.
Fig. 6 Centralizando uma view adicionando uma constraint em ambos os lados
Edição de Constraints e Margens das Views
Para editar os constraints e margens das views, selecione a view no editor de layout e clique em Properties no lado direito do editor (Fig. 7). A janela Properties (propriedades) inclui um inspector de layout na parte superior e campos para outras propriedades de visualização, tais como texto e plano de fundo de um botão.
Fig. 7 Janela de Propriedades
Ao criar conexões em lados opostos (como mostrado na figura 5b), pode-se ajustar a posição relativa em qualquer direção na janela Proprieties (propriedades) arrastando o controle deslizante para qualquer direção horizontal ou vertical. Para remover o constraint, clique em qualquer extremidade da conexão. Para uma explicação passo a passo de técnicas básicas e avançadas de layout com o novo editor de layout, consulte o ConstraintLayout Codelab.
Veja mais a respeito do Android 2.2 em:
Referências
[1] http://tools.android.com/tech-docs/layout-editor
É muito promissor. Mas, não sei se é eu que não estou sabendo usar, tenho achado ele muito bugado, dá mais trabalho construir layouts por ele do que pelos métodos tradicionais. Para desenvolvimento nativo IOS usa-se apenas as constraints, mas é bem mais funcional.
Não sei se entendi bem mas o diferencial do Constraints é a flexibilidade de criar o Layout através do Drag and Drop e movimentar os elementos em real time.