Esta página foi traduzida pela API Cloud Translation.

Como criar uma interface responsiva com o ConstraintLayout Parte do Android Jetpack.

ConstraintLayout permite criar layouts grandes e complexos com uma hierarquia de visualização plana, sem grupos de visualizações aninhados. É semelhante a RelativeLayout em que todas as visualizações são dispostas de acordo com as relações entre visões irmãs e o layout pai, mas é mais flexível que RelativeLayout e mais fácil de usar com o Layout Editor do Android Studio.

Todo o poder do ConstraintLayout está disponível diretamente no Ferramentas visuais do Layout Editor, porque a API de layout e o Layout Editor são especialmente criados uns para os outros. É possível criar seu layout com ConstraintLayout arrastando em vez de editar o XML

Esta página mostra como criar um layout com ConstraintLayout em Android Studio 3.0 ou mais recente. Para mais informações sobre o Layout Editor, consulte Criar uma interface com o Layout Editor.

Para conferir os vários layouts que podem ser criados com ConstraintLayout: consulte Projeto de exemplos de layout restrito no GitHub (link em inglês).

Visão geral sobre restrições

Para definir a posição de uma visualização no ConstraintLayout, adicione em pelo menos uma restrição horizontal e uma vertical para a visualização. Cada restrição representa uma conexão ou alinhamento com outra visualização, o layout pai ou um diretriz invisível. Cada restrição define a posição da visualização ao longo do vertical ou horizontal. Cada visualização deve ter no mínimo uma restrição para cada eixo, mas muitas vezes são necessários mais.

Quando você solta uma visualização no Layout Editor, ela permanece onde você a deixou, caso não tenha restrições. Isso é apenas para facilitar a edição. Se uma visualização não tiver quando você executa o layout em um dispositivo, ele é desenhado na posição [0,0] (canto superior esquerdo).

Na Figura 1, o layout fica bom no editor, mas não há nenhum vertical restrição na visualização C. Quando esse layout for desenhado em um dispositivo, veja C horizontalmente alinha-se com as bordas esquerda e direita da visualização A, mas aparece no topo da da tela, porque ele não tem restrição vertical.

Figura 1. O editor mostra a visualização C abaixo de A, mas não tem restrição vertical.

Figura 2. A visualização C agora está verticalmente restrita abaixo da visualização A.

Embora uma restrição ausente não cause um erro de compilação, o layout O editor indica a falta de restrições como um erro na barra de ferramentas. Para acessar erros e outros avisos, clique em Show Warnings and Errors Para ajudar a evitar a perda de restrições, o Layout Editor adiciona automaticamente restrições para você com o Conexão automática e inferência de restrições atributos de machine learning.

Adicionar ConstraintLayout ao seu projeto

Para usar ConstraintLayout no seu projeto, faça o seguinte:

Verifique se o repositório maven.google.com está declarado no seu arquivo settings.gradle:

Groovy

    dependencyResolutionManagement {
      ...
      repositories {
          google()
      }
    )

Kotlin

    dependencyResolutionManagement {
      ...
      repositories {
          google()
      }
    }

Adicionar a biblioteca como uma dependência no nível do módulo build.gradle, conforme mostrado no exemplo a seguir. Novidades versão pode ser diferente da mostrada no exemplo.

Groovy

dependencies {
    implementation "androidx.constraintlayout:constraintlayout:2.2.0-beta01"
    // To use constraintlayout in compose
    implementation "androidx.constraintlayout:constraintlayout-compose:1.1.0-beta01"
}

Kotlin

dependencies {
    implementation("androidx.constraintlayout:constraintlayout:2.2.0-beta01")
    // To use constraintlayout in compose
    implementation("androidx.constraintlayout:constraintlayout-compose:1.1.0-beta01")
}

Na barra de ferramentas ou na notificação de sincronização, clique em Sync Project with Gradle. Arquivos.

Agora você está pronto para criar seu layout com o ConstraintLayout.

Converter um layout

Figura 3. O menu para converter um layout em ConstraintLayout:

Para converter um layout já existente em um layout restrito, siga estas etapas:

Abra o layout no Android Studio e clique na guia Design no parte inferior da janela do editor.
Na janela Component Tree, clique com o botão direito do mouse no layout e selecione Converta LinearLayout em ConstraintLayout.

Criar um novo layout

Para iniciar um novo arquivo de layout restrito, siga estas etapas:

Na janela Project, clique na pasta do módulo e selecione Arquivo > Novo > XML > XML de layout.
Digite um nome para o arquivo de layout e insira "androidx.constraintlayout.widget.ConstraintLayout" para a variável Raiz Tag.
Clique em Finish.

Adicionar ou remover uma restrição

Para adicionar uma restrição, faça o seguinte:

Vídeo 1. O lado esquerdo de uma visualização é restrito à esquerda. ao lado do pai.

Arraste uma visualização da janela Palette para o editor.

Quando você adiciona uma visualização a uma ConstraintLayout, ela aparece caixa delimitadora com alças quadradas de redimensionamento em cada canto e circulares restrições em cada lado.
Clique na visualização para selecioná-la
Escolha uma destas opções:
- Clique em uma alça de restrição e arraste-a para um ponto de fixação disponível. Esse ponto pode ser a borda de outra visualização, a borda do layout ou uma diretriz. Conforme você arrasta a alça de restrição, O editor mostra possíveis sobreposições de conexão e sobreposições azuis.
- Clique em uma das opções Criar uma conexão na seção Layout da janela Attributes, conforme mostrado na Figura 4.
  
  Figura 4. O Layout da janela Attributes permite criar conexões de rede.

Quando a restrição é criada, o editor default margin para separar as duas visualizações.

Ao criar restrições, lembre-se das seguintes regras:

Cada visualização precisa ter pelo menos duas restrições: uma horizontal e outra vertical.
Você só pode criar restrições entre uma alça de restrição e uma âncora que compartilham o mesmo plano. Um plano vertical, à esquerda e à direita lados de uma visualização pode ser restrita apenas a outro plano vertical, e podem ser restritos apenas a outros valores de referência.
Cada alça de restrição pode ser usada para apenas uma restrição, criar várias restrições de diferentes visualizações para o mesmo ponto de fixação.

Você pode excluir uma restrição realizando uma das seguintes ações:

Clique em uma restrição para selecioná-la e depois em Excluir.
Pressione Ctrl e clique (Command e clique no macOS) e âncora de restrição. A restrição fica vermelha para indicar que você pode clicar para e excluí-lo, como mostrado na Figura 5.

Figura 5. Uma restrição vermelha indica clique nele para excluí-lo.
Na seção Layout da janela Attributes, clique em uma âncora de restrição, como mostrado na figura 6.

Figura 6. Clique em uma restrição âncora para excluí-lo.

Vídeo 2. Adicionar uma restrição que se opõe a uma já existente.

Se você adicionar restrições opostas a uma visualização, as linhas de restrição se tornarão enroladas como uma mola para indicar as forças opostas, como mostrado no vídeo 2. A o efeito é mais visível quando o tamanho da visualização é definido como "fixo" ou "encapsular o conteúdo", Nesse caso, a visualização é centralizada entre as restrições. Se, em vez disso, você quiser a visualização seja ampliada para atender às restrições, mude o tamanho para "corresponder às restrições". Se você quer manter o tamanho atual, mas mover a visualização para que não fique centralizada, ajustar o viés da restrição.

Você pode usar restrições para atingir diferentes tipos de comportamento de layout, como descritos nas seções a seguir.

Posição do pai

Restringir o lado de uma visualização à borda correspondente do layout.

Na figura 7, o lado esquerdo da visualização está conectado à borda esquerda da layout pai. Você pode definir a distância a partir da borda com margem.

Figura 7. Uma restrição horizontal para o pai.

Posição da ordem

Definir a ordem de aparência de duas visualizações, vertical ou na horizontal.

Na figura 8, B está restrito a estar sempre à direita de A, e C está restrito abaixo de A. No entanto, essas restrições não implicam alinhamento, de modo que B pode ainda se movem para cima e para baixo.

Figura 8. Horizontal e vertical restrição.

Alinhamento

Alinhe a borda de uma visualização com a mesma borda de outra.

Na figura 9, o lado esquerdo de B está alinhado com o lado esquerdo de A. Se você quiser para alinhar os centros de visualização, crie uma restrição em ambos os lados.

Você pode deslocar o alinhamento arrastando a visualização para dentro a partir da restrição. Por exemplo, a figura 10 mostra B com um alinhamento de deslocamento de 24 dp. O deslocamento é definidos pela margem da visualização restrita.

Você também pode selecionar todas as visualizações que quiser alinhar e clicar em Alinhar na barra de ferramentas para selecionar o tipo de alinhamento.

Figura 9. Um alinhamento horizontal restrição.

Figura 10. Um deslocamento horizontal e a restrição de alinhamento.

Alinhamento da linha de base

Alinhe a linha de base do texto de uma visualização à linha de base do texto de outra.

Na figura 11, a primeira linha de B está alinhada com o texto em A.

Para criar uma restrição de linha de base, clique com o botão direito do mouse na visualização de texto que você quer restrição e clique em Show Baseline. Depois, clico no texto e arraste-a para outra linha de base.

Figura 11. Um alinhamento de linha de base restrição.

Restringir a uma linha guia

É possível adicionar uma diretriz vertical ou horizontal para restringir o e não aparece para os usuários do app. É possível posicionar a diretriz no layout com base nas unidades de dp ou em uma porcentagem relativa à a borda do layout.

Para criar uma diretriz, clique em Diretrizes. na barra de ferramentas e clique em Adicionar diretriz vertical ou Adicionar Diretriz horizontal.

Arraste a linha pontilhada para reposicioná-la e clique no círculo na borda a diretriz para alternar o modo de medição.

Figura 12. Uma visualização restrita a um diretriz.

Restringir a uma barreira

Semelhante a uma diretriz, uma barreira é uma linha invisível que você pode restringir visualizações, mas uma barreira não define sua própria posição. Em vez disso, a barreira a posição se move com base na posição das visualizações contidas nela. Isso é útil quando você quer restringir uma visualização a um conjunto de visualizações em vez de uma visualização específica.

Por exemplo, na figura 13, a visualização C está restrita à direita de um barreira A barreira é definida como "fim" (ou o lado direito, em um movimento da esquerda para a direita layout) das visualizações A e B. A barreira se move dependendo o lado direito da visualização A ou da visualização B está mais à direita.

Para criar uma barreira, siga estas etapas:

Clique em Diretrizes. na barra de ferramentas, depois clique em Add Vertical Barrier ou Adicionar barreira horizontal.
Na janela Component Tree, selecione as visualizações desejadas na e arrastá-la para o componente da barreira.
Selecione a barreira na Component Tree, abra o Atributos e defina barrierDirection.

Agora você pode criar uma restrição de outra visualização para a barreira.

Você também pode restringir as visualizações que estão dentro da barreira às barreira Dessa forma, você pode alinhar todas as visualizações na barreira umas com as outras, mesmo que você não saiba qual é a visualização mais longa ou mais alta.

Você também pode incluir uma diretriz dentro de uma barreira para garantir um "mínimo" posição da barreira.

Figura 13. A visualização C está restrita a uma barreira, que se move com base na posição e no tamanho das visualizações A e B.

Ajustar o viés da restrição

Quando você adiciona uma restrição em ambos os lados de uma visualização, e o tamanho da visualização da mesma dimensão é "fixa" ou "encapsular o conteúdo", a visualização fica centralizada entre as duas restrições com um viés de 50% por padrão. Você pode ajustar o viés arrastando o controle deslizante na janela Attributes ou arrastando visualização, como mostrado no vídeo 3.

Se, em vez disso, você quiser que a visualização estenda o próprio tamanho para atender às restrições, mude o tamanho para "corresponder às restrições".

Vídeo 3. Ajustar o viés da restrição.

Ajustar o tamanho da visualização

Figura 14. Ao selecionar uma visualização, a A janela Attributes inclui controles para 1 proporção, 2 excluir restrições, 3 modo de altura ou largura, 4 margens e 5 Viés de restrição. Você também pode destacar restrições individuais no Layout Editor clicando nelas na 6.

É possível usar as alças dos cantos para redimensionar uma visualização, mas isso fixa no código o tamanho: a visualização não é redimensionada para diferentes conteúdos ou tamanhos de tela. Para selecione um modo de dimensionamento diferente, clique em uma visualização e abra a opção Attributes. no lado direito do editor.

Próximo ao topo da janela Attributes está o inspetor de visualização, que inclui controles para vários atributos de layout, conforme mostrado na figura 14. Isso é disponível apenas para visualizações em um layout restrito.

Você pode alterar a forma como a altura e a largura são calculadas clicando no símbolos indicados com a frase de destaque 3 na figura 14. Esses símbolos representam o modo de tamanho da seguinte maneira. Clique no símbolo para alternar entre estas configurações:

Fixo: especifique uma dimensão específica na caixa de texto a seguir ou redimensionar a visualização no editor.
Ajustar conteúdo: a visualização se expande somente o necessário para caber no conteúdo.

layout_restrictedWidth (link em inglês)

Defina como true para permitir que a dimensão horizontal mude para e respeitar as restrições. Por padrão, um widget definido como WRAP_CONTENT não é limitada por restrições.

Match Constraints: a visualização se expande o máximo possível para atender às restrições de cada lado, depois de contabilizar as margens da visualização. No entanto, pode modificar esse comportamento com os seguintes atributos e valores. Esses têm efeito somente quando você define a largura da visualização como "match constraints":
- layout_constraintWidth_min (em inglês)
  Isso leva uma dimensão dp para a largura mínima da visualização.
- layout_constraintWidth_max (em inglês)
  Isso leva uma dimensão dp para a largura máxima da visualização.
No entanto, se a dimensão especificada tiver apenas uma restrição, a visualização se expande para ajustar o conteúdo. O uso desse modo para altura ou largura também permite definir uma proporção de tamanho.

Observação: não é possível usar match_parent para nenhuma visualização em um ConstraintLayout. Em vez disso, use "match constraints" (0dp).

Definir o tamanho como uma proporção

Figura 15. A visualização é definida para um aspecto de 16:9 com a largura com base em uma proporção da altura.

Você pode definir o tamanho da visualização com uma proporção, como 16:9, se pelo menos um dos as dimensões de visualização estão definidas para "corresponder restrições" (0dp). Para ativar proporção, clique em Toggle Aspect Ratio Constraint (frase de destaque 1 na figura 14) e insira a Proporção width:height na entrada exibida.

Se a largura e a altura estiverem definidas como "corresponder às restrições", clique em Alternar restrição de proporção para selecionar qual dimensão é baseada em uma proporção um do outro. O inspetor de visualização indica qual dimensão é definida como proporção conectando as bordas correspondentes com uma linha sólida.

Por exemplo, se você definir os dois lados como "match constraints", clique em Alternar Restrição de proporção duas vezes para definir a largura como uma proporção da altura. O tamanho total é determinado pela altura da visualização, que pode ser definida em de qualquer forma, como mostrado na figura 15.

Ajustar as margens da visualização

Para que suas visualizações tenham um espaçamento uniforme, clique em Margem na barra de ferramentas para selecionar a margem padrão para cada visualização adicionada à o mesmo layout organizacional. Qualquer alteração feita na margem padrão se aplica somente às visualizações que você adicionar a partir de então.

Você pode controlar a margem de cada visualização na janela Attributes ao clicando no número na linha que representa cada restrição. Na figura 14, a frase de destaque 4 mostra que a margem inferior está definida como 16dp.

Figura 16. A Margin da barra de ferramentas .

Todas as margens oferecidas pela ferramenta são fatores de 8 dp para ajudar a alinhar suas visualizações às recomendações para a grade quadrada de 8 dp do Material Design.

Controlar grupos lineares com uma cadeia

Figura 17. Uma cadeia horizontal com duas visualizações.

Uma cadeia é um grupo de visualizações vinculadas umas às outras com de posição. As visualizações em uma cadeia podem ser distribuídas vertical ou horizontalmente.

Figura 18. Exemplos de cada rede estilo.

As cadeias podem ser estilizadas de uma das seguintes maneiras:

Distribuição: as visualizações são distribuídas uniformemente depois que as margens são considerados. Esse é o padrão.
Espalhados por dentro: a primeira e a última visualizações estão fixadas no restrições em cada extremidade da cadeia, e o restante é uniforme distribuídos.
Ponderada:quando a cadeia é definida como spread ou espalhadas para dentro, você pode preencher o espaço restante configurando uma ou mais visualizações para "corresponder às restrições" (0dp). Por padrão, o espaço é distribuídos de maneira uniforme entre cada visualização definida para "corresponder às restrições", mas você pode atribuir um peso de importância a cada visualização usando o método layout_constraintHorizontal_weight e layout_constraintVertical_weight. Isso funciona da mesma forma que layout_weight em uma layout linear: a visualização com o maior valor de peso tem mais espaço e visualizações com o mesmo peso recebem a mesma quantidade de espaço.
Empacotado:as visualizações são agrupadas depois que as margens são contabilizadas. pelas quais É possível ajustar o viés de toda a cadeia (esquerda ou direita, para cima ou para baixo, mudando a "cabeça" da corrente viés de visualização.

O "chefe" da rede visualização: a visualização mais à esquerda em uma cadeia horizontal (em um layout da esquerda para a direita) e a visualização mais acima em uma cadeia vertical: define o estilo da cadeia em XML. No entanto, é possível alternar entre spread, spread internal e Empacotado: selecione qualquer visualização na cadeia e clique no botão de corrente que aparece abaixo da visualização.

Para criar uma cadeia, faça o seguinte, conforme mostrado no vídeo 4:

Selecione todas as visualizações a serem incluídas na cadeia.
Clique com o botão direito do mouse em uma das visualizações.
Selecione Redes.
Selecione Centralizar horizontalmente ou Centralizar verticalmente.

Vídeo 4. Como criar uma cadeia horizontal.

Confira alguns pontos a serem considerados ao usar cadeias:

Uma visualização pode fazer parte de uma cadeia horizontal e vertical, para que você possa criar layouts de grade flexíveis.
Uma cadeia só funciona corretamente se cada extremidade dela está restrita a outro objeto no mesmo eixo, como mostrado na figura 14.
Embora a orientação de uma cadeia seja vertical ou horizontal, usar um não alinha as visualizações nessa direção. Para alcançar a posição adequada cada visualização na cadeia, inclua outras restrições, como restrições de alinhamento.

Criar restrições automaticamente

Em vez de adicionar restrições a cada visualização à medida que você as coloca no layout, você pode mover cada visualização para as posições desejadas no Layout Editor e e clique em Infer Constraints para criar restrições automaticamente.

Infer Constraints verifica o layout para determinar o conjunto mais eficaz de restrições para todas as visualizações. Ele restringe as visualizações às posições atuais proporcionando flexibilidade. Talvez seja necessário fazer ajustes o layout reagem da forma como você pretende para diferentes tamanhos e orientações de tela.

O Autoconnect to Parent é um recurso separado que você pode ativar. Quando estiver ativado e você adicionar visualizações filhas a um pai, esse recurso automaticamente cria duas ou mais restrições para cada visualização à medida que você as adiciona ao mas somente quando for apropriado restringir a visualização ao pai o mesmo layout organizacional. A conexão automática não cria restrições para outras visualizações no layout.

O recurso de conexão automática fica desativado por padrão. Clique em Ativar Conexão automática com pai/mãe na barra de ferramentas do Layout Editor.

Animações de frames-chave

Em um ConstraintLayout, é possível animar mudanças no tamanho e a posição dos elementos usando ConstraintSet e TransitionManager

Um ConstraintSet é um objeto leve que representa restrições, margens e preenchimento de todos os elementos filhos em uma ConstraintLayout. Quando você aplica um ConstraintSet a um exibido em ConstraintLayout, o layout atualiza as restrições de todos os seus filhos.

Para criar uma animação usando ConstraintSet, especifique dois layouts. que atuam como frames-chave de início e fim da animação. Em seguida, você pode carregar um ConstraintSet do segundo arquivo de frame-chave e aplicá-lo ao ConstraintLayout exibidos.

Observação:as animações ConstraintSet animam somente o tamanho e dos elementos filhos. Eles não animam outros atributos, como cor.

O exemplo de código a seguir mostra como animar movendo um único botão para a parte inferior da tela.

// MainActivity.kt

fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.keyframe_one)
    constraintLayout = findViewById(R.id.constraint_layout) // member variable
}

fun animateToKeyframeTwo() {
    val constraintSet = ConstraintSet()
    constraintSet.load(this, R.layout.keyframe_two)
    TransitionManager.beginDelayedTransition()
    constraintSet.applyTo(constraintLayout)
}

// layout/keyframe1.xml
// Keyframe 1 contains the starting position for all elements in the animation
// as well as final colors and text sizes.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

// layout/keyframe2.xml
// Keyframe 2 contains another ConstraintLayout with the final positions.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Observação:com o Android Studio 3.6 e versões mais recentes, a O recurso de vinculação de visualizações pode substituir Chamadas de findViewById(). Ele também oferece segurança de tipo durante a compilação. para códigos que interagem com visualizações. Considere usar a vinculação de visualizações em vez de findViewById():

Outros recursos

ConstraintLayout é usado na Girassol app de demonstração.