Diferenças entre ConstraintLayout e RelativeLayout

Estou confuso sobre a diferença entre ConstraintLayoute RelativeLayout. Alguém poderia me dizer as diferenças exatas entre eles?

A intenção de ConstraintLayouté otimizar e nivelar a hierarquia de visualizações de seus layouts aplicando algumas regras a cada visualização para evitar o aninhamento.

As regras lembram RelativeLayout, por exemplo, a configuração da esquerda para a esquerda de alguma outra visualização.

app:layout_constraintBottom_toBottomOf="@+id/view1"

Ao contrário RelativeLayout, ConstraintLayoutoferece um biasvalor usado para posicionar uma vista em termos de 0% e 100% de deslocamento horizontal e vertical em relação às alças (marcadas com círculo). Essas porcentagens (e frações) oferecem posicionamento perfeito da vista em diferentes densidades e tamanhos de tela.

app:layout_constraintHorizontal_bias="0.33" <!-- from 0.0 to 1.0 -->
app:layout_constraintVertical_bias="0.53" <!-- from 0.0 to 1.0 -->

A alça da linha de base (tubo longo com cantos arredondados, abaixo da alça do círculo) é usada para alinhar o conteúdo da vista com outra referência de vista.

Alças quadradas (em cada canto da vista) são usadas para redimensionar a vista em dps.

Isso é totalmente baseado em opiniões e minha impressão de ConstraintLayout

Propriedades equivalentes de layout relativo e de layout de restrição

(1) Layout relativo:

android:layout_centerInParent="true"    

(1) Equivalente ao layout da restrição:

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"

(2) Layout relativo:

android:layout_centerHorizontal="true"

(2) Equivalente ao layout da restrição:

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintEnd_toEndOf="parent"

(3) Layout relativo:

android:layout_centerVertical="true"    

(3) Equivalente ao layout da restrição:

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"

(4) Layout relativo:

android:layout_alignParentLeft="true"   

(4) Equivalente ao layout da restrição:

app:layout_constraintLeft_toLeftOf="parent"

(5) Layout relativo:

android:layout_alignParentStart="true"

(5) Equivalente ao layout da restrição:

app:layout_constraintStart_toStartOf="parent"

(6) Layout relativo:

android:layout_alignParentRight="true"

(6) Equivalente ao layout da restrição:

app:layout_constraintRight_toRightOf="parent"

(7) Layout relativo:

android:layout_alignParentEnd="true"    

(7) Equivalente ao layout da restrição:

app:layout_constraintEnd_toEndOf="parent"

(8) Layout relativo:

android:layout_alignParentTop="true"

(8) Equivalente à disposição das restrições:

app:layout_constraintTop_toTopOf="parent"

(9) Layout relativo:

android:layout_alignParentBottom="true" 

(9) Equivalente ao layout da restrição:

app:layout_constraintBottom_toBottomOf="parent"

(10) Layout relativo:

android:layout_alignStart="@id/view"

(10) Equivalente ao layout da restrição:

app:layout_constraintStart_toStartOf="@id/view"

(11) Layout relativo:

android:layout_alignLeft="@id/view" 

(11) Equivalente ao esquema de restrições:

app:layout_constraintLeft_toLeftOf="@id/view"

(12) Layout relativo:

android:layout_alignEnd="@id/view"  

(12) Equivalente ao esquema de restrições:

app:layout_constraintEnd_toEndOf="@id/view"

(13) Layout relativo:

android:layout_alignRight="@id/view"

(13) Equivalente à disposição das restrições:

app:layout_constraintRight_toRightOf="@id/view"

(14) Layout relativo:

android:layout_alignTop="@id/view"  

(14) Equivalente ao esquema de restrições:

app:layout_constraintTop_toTopOf="@id/view"

(15) Layout relativo:

android:layout_alignBaseline="@id/view" 

(15) Equivalente ao esquema de restrições:

app:layout_constraintBaseline_toBaselineOf="@id/view"

(16) Layout relativo:

android:layout_alignBottom="@id/view"

(16) Equivalente ao esquema de restrições:

app:layout_constraintBottom_toBottomOf="@id/view"

(17) Layout relativo:

android:layout_toStartOf="@id/view"

(17) Equivalente ao esquema de restrições:

app:layout_constraintEnd_toStartOf="@id/view"

(18) Layout relativo:

android:layout_toLeftOf="@id/view"  

(18) Equivalente ao esquema de restrições:

app:layout_constraintRight_toLeftOf="@id/view"

(19) Layout relativo:

android:layout_toEndOf="@id/view"

(19) Equivalente ao esquema de restrições:

app:layout_constraintStart_toEndOf="@id/view"

(20) Layout relativo:

android:layout_toRightOf="@id/view"

(20) Equivalente ao esquema de restrições:

app:layout_constraintLeft_toRightOf="@id/view"

(21) Layout relativo:

android:layout_above="@id/view" 

(21) Equivalente ao esquema de restrições:

app:layout_constraintBottom_toTopOf="@id/view"

(22) Layout relativo:

android:layout_below="@id/view" 

(22) Equivalente ao esquema de restrições:

app:layout_constraintTop_toBottomOf="@id/view"

Reportado por @davidpbr ConstraintLayout performance

Fiz dois layouts de 7 filhos semelhantes, um com pai ConstraintLayoute mãe RelativeLayout. Com base na ferramenta de rastreamento de método do Android Studio, parece que ele ConstraintLayoutpassa mais tempo no onMeasure e executa trabalho adicional no onFinishInflate.

Biblioteca utilizada ( support-v4, appcompat-v7…):

com.android.support.constraint:constraint-layout:1.0.0-alpha1

Dispositivos / versões do Android reproduzidos em: Samsung Galaxy S6 (SM-G920A. Desculpe, não Nexus ATM). Android 5.0.2

Comparação rápida de rastreamento de método:

Exemplo de repositório do Github: https://github.com/OnlyInAmerica/ConstraintLayoutPerf

A seguir estão as diferenças / vantagens:

1. O Layout de restrição tem poder duplo no Layout relativo e no Linear: defina as posições relativas das visualizações (como o layout relativo) e defina pesos para a interface do usuário dinâmica (que só era possível no layout linear).

2. Um uso muito poderoso é o agrupamento de elementos, formando uma corrente. Dessa forma, podemos formar um grupo de visões que, como um todo, podem ser colocadas da maneira desejada sem adicionar outra camada de hierarquia apenas para formar outro grupo de visões.

3. Além dos pesos, podemos aplicar o viés horizontal e vertical, que nada mais é do que a porcentagem de deslocamento do centro. (desvio de 0,5 significa alinhado centralmente. Qualquer valor menor ou mais significa movimento correspondente na respectiva direção).

4. Outro recurso muito importante é que ele respeita e fornece a funcionalidade para lidar com as visualizações GONE, para que os layouts não sejam quebrados se alguma visualização for definida como GONE através do código java. Mais pode ser encontrado aqui: https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html#VisibilityBehavior

5. Fornece poder de restrição automática aplicada pelo uso da ferramenta Blue print e Visual Editor, que facilita o design de uma página.

Todos esses recursos levam ao achatamento da hierarquia de visualizações, o que melhora o desempenho e também ajuda a criar uma interface de usuário dinâmica e responsiva, que pode se adaptar mais facilmente a diferentes tamanhos e densidades de tela.

Aqui é o melhor lugar para aprender rapidamente: https://codelabs.developers.google.com/codelabs/constraint-layout/#0

Uma grande diferença é que o ConstraintLayout respeita as restrições, mesmo que a exibição acabe. Portanto, ele não quebrará o layout se você tiver uma corrente e quiser fazer uma exibição desaparecer no meio.

Além da resposta @ dhaval-jivani.

Atualizei o projeto github do projeto para a versão mais recente do layout de restrição v.1.1.0-beta3

Eu medi e comparei o tempo do método onCreate e o tempo entre o início do onCreate e o final da execução do último método preformDraw, visível no monitor da CPU. Todos os testes foram feitos no Samsung S5 mini com o Android 6.0.1. Resultados aqui:

Novo começo (abertura da primeira tela após o lançamento do aplicativo)

esquema relativo

OnCreate: 123ms

Tempo de desenho - OnCreate: 311.3ms

Layout de restrição

OnCreate: 120.3ms

Tempo de desenho - OnCreate tempo: 310ms

Além disso, verifiquei o teste de desempenho deste artigo , aqui o código e constatou que o loop on conta menos de 100 variantes de layout de restrição são mais rápidas durante a execução de inflar, medir e layout e variantes com layout relativo. E em dispositivos Android antigos, como o Samsung S3 com Android 4.3, a diferença é maior.

Como conclusão, concordo com os comentários do artigo :

Vale a pena refatorar as exibições antigas, ativá-lo de RelativeLayout ou LinearLayout?

Como sempre: depende 🙂

Eu não refatoraria nada, a menos que você tenha um problema de desempenho com sua hierarquia de layout atual ou deseje fazer alterações significativas no layout. Embora eu não tenha medido isso recentemente, não encontrei nenhum problema de desempenho nos últimos lançamentos. Então eu acho que você deve estar seguro para usá-lo. mas - como eu disse - não migre apenas para migrar. Faça isso apenas se houver necessidade e se beneficiar com isso. Para novos layouts, no entanto, quase sempre uso o ConstraintLayout. É muito melhor comparar com o que tínhamos antes.

Oficialmente, ConstraintLayouté muito mais rápido

Na versão N do Android, a ConstraintLayoutclasse fornece funcionalidade semelhante RelativeLayout, mas a um custo significativamente menor.

A verdadeira pergunta a fazer é: existe algum motivo para usar outro layout que não seja um layout de restrição? Eu acredito que a resposta pode ser não.

Para aqueles que insistem que são direcionados a programadores iniciantes ou similares, eles devem fornecer algum motivo para serem inferiores a qualquer outro layout.

Os layouts de restrições são melhores em todos os aspectos (eles custam 150k no tamanho do APK). Eles são mais rápidos, mais fáceis, mais flexíveis, reagem melhor às mudanças, corrigem os problemas quando os itens desaparecem, se adaptam melhor a tipos de tela radicalmente diferentes e não usam um monte de loop aninhado por tanto tempo estrutura de árvore desenhada para tudo. Você pode colocar qualquer coisa em qualquer lugar, com relação a qualquer coisa, em qualquer lugar.

Eles eram um pouco esquisitos em meados de 2016, onde o editor de layout visual simplesmente não era bom o suficiente, mas estão ao ponto de que, se você tiver um layout, poderá considerar seriamente o uso de um layout de restrição, até quando faz a mesma coisa que um RelativeLayout, ou mesmo um simples LinearLayout. FrameLayoutsclaramente ainda tem seu objetivo. Mas não consigo ver a construção de mais nada neste momento. Se eles começassem com isso, não teriam acrescentado mais nada.

A conclusão que posso tirar é

1) Podemos fazer o design da interface do usuário sem tocar na parte xml do código; para ser sincero, sinto que o Google copiou como a interface do usuário é projetada em aplicativos iOS ; faz sentido se você estiver familiarizado com o desenvolvimento da interface no iOS, mas no layout relativo, difícil definir as restrições sem tocar no design xml .

2) Em segundo lugar, possui uma hierarquia de visualização plana diferente de outros layouts, além de um desempenho melhor do que o layout relativo, que você pode ter visto em outras respostas

3) Ele também possui outras coisas além do layout relativo, como o posicionamento relativo circular, onde podemos posicionar outra vista em relação a essa em determinado raio e com determinado ângulo, o que não pode ser feito no layout relativo.

Estou dizendo novamente: projetar interface do usuário usando o layout de restrição é o mesmo que projetar interface do usuário no iOS; portanto, no futuro, se você trabalhar no iOS, será mais fácil se tiver usado o layout de restrição

A única diferença que notei é que as coisas definidas em um layout relativo via arrastar e soltar automaticamente têm suas dimensões em relação a outros elementos inferidos; portanto, quando você executa o aplicativo, o que vê é o que obtém. No entanto, no layout da restrição, mesmo que você arraste e solte um elemento na exibição de design, quando você executa o aplicativo, as coisas podem mudar. Isso pode ser facilmente corrigido definindo manualmente as restrições ou, uma ação mais arriscada é clicar com o botão direito do mouse no elemento na árvore de componentes, selecionar o submenu de layout de restrição e clicar em 'inferir restrições'. Espero que isto ajude