Diferencia entre revisiones de «PDM ConstraintLayout»

De MediaWiki
Ir a la navegación Ir a la búsqueda
Línea 28: Línea 28:
 
* Exemplo de uso de Barries: [https://constraintlayout.com/basics/barriers.html https://constraintlayout.com/basics/barriers.html]
 
* Exemplo de uso de Barries: [https://constraintlayout.com/basics/barriers.html https://constraintlayout.com/basics/barriers.html]
  
 +
* Exemplo de uso de Flow-Layer: [https://medium.com/androiddevelopers/introducing-constraint-layout-2-0-9daa3e99995b https://medium.com/androiddevelopers]
  
  
  
 
<br />
 
<br />
 +
 
=Exemplos de código xerado=
 
=Exemplos de código xerado=
 
==Botón empregando un margin top-left==
 
==Botón empregando un margin top-left==

Revisión del 16:04 15 oct 2020

Introdución

  • Máis información:


  • ConstrainLayout é un layout que pode ser utilizado con calquera versión de Android a partires do Android 2.3 (API level 9).
Isto o consigo facendo uso dunha librería de compatibilidade (que se engade por defecto no Android Studio) de nome: com.android.support.constraint:constraint-layout:1.1.3 e que podemos ver no arquivo build.gradle na sección 'dependencies'.
Dito layout vai permitir colocar os compoñentes gráficos con respecto a outros layout e outros compoñentes gráficos, de forma relativa a eles.
Todo se pode facer graficamente utilizando Android Studio, e ademais na maioría das ocasión non necesitaremos crear layouts dentro de layouts como pasaba nos outros layouts.



Funcionamento



Exemplos de código xerado

Botón empregando un margin top-left

<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:scrolling_image_view="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".UD2.Activity.OlaMundoActUD2">
   <Button
       android:id="@+id/button2"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginStart="16dp"
       android:layout_marginTop="8dp"
       android:text="Button"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>


Botón centrado

* Fai uso de das liñas bias xa que ten constraint polos dous lados.
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:app="http://schemas.android.com/apk/res-auto"
 4     xmlns:scrolling_image_view="http://schemas.android.com/apk/res-auto"
 5     xmlns:tools="http://schemas.android.com/tools"
 6     android:layout_width="match_parent"
 7     android:layout_height="match_parent"
 8     tools:context=".UD2.Activity.OlaMundoActUD2">
 9 
10     <Button
11         android:id="@+id/button2"
12         android:layout_width="wrap_content"
13         android:layout_height="wrap_content"
14         android:layout_marginTop="8dp"
15         android:layout_marginBottom="8dp"
16         android:text="Button"
17         app:layout_constraintBottom_toBottomOf="parent"
18         app:layout_constraintEnd_toEndOf="parent"
19         app:layout_constraintStart_toStartOf="parent"
20         app:layout_constraintTop_toTopOf="parent" />
21 </android.support.constraint.ConstraintLayout>


Botón desprazado á esquerda

* Fai uso de das liñas bias xa que ten constraint polos dous lados.
* Modificamos a relación no ancho para que sempre teña un 25% do espazo á esquerda e 75% á dereita, respetando os margins.
: O mesmo aplicaríase a calquera dirección (arriba-abaixo-esquerda-dereita)
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:app="http://schemas.android.com/apk/res-auto"
 4     xmlns:scrolling_image_view="http://schemas.android.com/apk/res-auto"
 5     xmlns:tools="http://schemas.android.com/tools"
 6     android:layout_width="match_parent"
 7     android:layout_height="match_parent"
 8     tools:context=".UD2.Activity.OlaMundoActUD2">
 9 
10     <Button
11         android:id="@+id/button2"
12         android:layout_width="wrap_content"
13         android:layout_height="wrap_content"
14         android:layout_marginTop="8dp"
15         android:layout_marginBottom="8dp"
16         android:text="Button"
17         app:layout_constraintBottom_toBottomOf="parent"
18         app:layout_constraintEnd_toEndOf="parent"
19         app:layout_constraintHorizontal_bias="0.25"
20         app:layout_constraintStart_toStartOf="parent"
21         app:layout_constraintTop_toTopOf="parent" />
22 </android.support.constraint.ConstraintLayout>

Botón cun margin superior e un ancho completo

  • Exemplo de match_constraint fronte a wrap_content
O botón ocupa todo o ancho do seu contenedor
Cando se emprega ConstraintLayout todo view ten que ter a lo menos unha referencia arriba ou abaixo e outra esquerda-dereita.


 1 <?xml version="1.0" encoding="utf-8"?>
 2 <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:app="http://schemas.android.com/apk/res-auto"
 4     xmlns:scrolling_image_view="http://schemas.android.com/apk/res-auto"
 5     xmlns:tools="http://schemas.android.com/tools"
 6     android:layout_width="match_parent"
 7     android:layout_height="match_parent"
 8     tools:context=".UD2.Activity.OlaMundoActUD2">
 9 
10     <Button
11         android:id="@+id/button2"
12         android:layout_width="320dp"
13         android:layout_height="50dp"
14         android:layout_marginTop="16dp"
15         android:text="Button"
16         app:layout_constraintStart_toStartOf="parent"
17         app:layout_constraintTop_toTopOf="parent" />
18 
19 </android.support.constraint.ConstraintLayout>


Exemplo de tres botóns relacionados

  • Os constraint´s indicados son un exemplo dos que hai. Poden ser para calquera dirección. Lista completa na referencia que se atopa nesta sección ao principio.
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:app="http://schemas.android.com/apk/res-auto"
 4     xmlns:scrolling_image_view="http://schemas.android.com/apk/res-auto"
 5     xmlns:tools="http://schemas.android.com/tools"
 6     android:layout_width="match_parent"
 7     android:layout_height="match_parent"
 8     tools:context=".UD2.Activity.OlaMundoActUD2">
 9 
10     <Button
11         android:id="@+id/button1"
12         android:layout_width="wrap_content"
13         android:layout_height="wrap_content"
14         android:layout_marginEnd="72dp"
15         android:layout_marginBottom="332dp"
16         android:text="Button"
17         app:layout_constraintBottom_toBottomOf="parent"
18         app:layout_constraintEnd_toEndOf="parent" />
19 
20     <Button
21         android:id="@+id/button2"
22         android:layout_width="wrap_content"
23         android:layout_height="wrap_content"
24         android:layout_marginTop="48dp"
25         android:layout_marginEnd="60dp"
26         android:text="Button"
27         app:layout_constraintEnd_toStartOf="@+id/button1"
28         app:layout_constraintTop_toBottomOf="@+id/button3" />
29 
30     <Button
31         android:id="@+id/button3"
32         android:layout_width="wrap_content"
33         android:layout_height="wrap_content"
34         android:layout_marginStart="16dp"
35         android:layout_marginTop="56dp"
36         android:text="Button"
37         app:layout_constraintStart_toStartOf="parent"
38         app:layout_constraintTop_toTopOf="parent" />
39 </android.support.constraint.ConstraintLayout>

Exemplo de tres botóns con distribución de espazo

  • Exemplo de tres botóns relacionados no que o espazo se distribúe igual entre eles.
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:app="http://schemas.android.com/apk/res-auto"
 4     xmlns:scrolling_image_view="http://schemas.android.com/apk/res-auto"
 5     xmlns:tools="http://schemas.android.com/tools"
 6     android:layout_width="match_parent"
 7     android:layout_height="match_parent"
 8     tools:context=".UD2.Activity.OlaMundoActUD2">
 9 
10     <Button
11         android:id="@+id/button3"
12         android:layout_width="wrap_content"
13         android:layout_height="wrap_content"
14         android:layout_marginTop="66dp"
15         android:text="Button"
16         app:layout_constraintStart_toStartOf="@+id/button11"
17         app:layout_constraintTop_toBottomOf="@+id/button11" />
18 
19     <Button
20         android:id="@+id/button10"
21         android:layout_width="wrap_content"
22         android:layout_height="wrap_content"
23         android:layout_marginTop="66dp"
24         android:text="Button"
25         app:layout_constraintStart_toStartOf="@+id/button3"
26         app:layout_constraintTop_toBottomOf="@+id/button3" />
27 
28     <Button
29         android:id="@+id/button11"
30         android:layout_width="wrap_content"
31         android:layout_height="wrap_content"
32         android:layout_marginTop="24dp"
33         android:layout_marginEnd="24dp"
34         android:text="Button"
35         app:layout_constraintEnd_toEndOf="parent"
36         app:layout_constraintTop_toTopOf="parent" />
37 </android.support.constraint.ConstraintLayout>


Exemplo de un botón con un Guidle asociado

  • Liñá GuidLine de tipo vertical (tamén hai horizontal) con 78dp de espazo á esquerda (tamén podería ser a dereita).
  • Botón cun margin esquerdo mínimo de 8, situado á dereita da GuidLine e un bias horizontal propio de 25% á esquerda, sobre o espazo que queda despois de situarse á dereita do GuideLine.
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:app="http://schemas.android.com/apk/res-auto"
 4     xmlns:scrolling_image_view="http://schemas.android.com/apk/res-auto"
 5     xmlns:tools="http://schemas.android.com/tools"
 6     android:layout_width="match_parent"
 7     android:layout_height="match_parent"
 8     tools:context=".UD2.Activity.OlaMundoActUD2">
 9 
10     <android.support.constraint.Guideline
11         android:id="@+id/guideline"
12         android:layout_width="wrap_content"
13         android:layout_height="wrap_content"
14         android:orientation="vertical"
15         app:layout_constraintGuide_begin="78dp" />
16 
17     <Button
18         android:id="@+id/button12"
19         android:layout_width="wrap_content"
20         android:layout_height="wrap_content"
21         android:layout_marginStart="8dp"
22         android:text="Button"
23         app:layout_constraintEnd_toEndOf="parent"
24         app:layout_constraintHorizontal_bias="0.25"
25         app:layout_constraintStart_toStartOf="@+id/guideline"
26         app:layout_constraintTop_toTopOf="parent" />
27 </android.support.constraint.ConstraintLayout>

Exemplo de dous guidelines con porcentaxe e un botón

  • Os guidlines tamén poden ser situados por porcentaxe de espazo con respecto a o espazo da Activity.
Exemplo de dúas guidelines verticais (poden ser horizontais).
  • A da esquerda está situada a 30% con respecto ao lado esquerdo da activity.
  • A da dereita está situada a 25% con respecto ao lado dereito da activity
O botón está situado con respecto as dúas guidlines no centro ocupando todo o ancho ata chegar as dúas guidelines
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:app="http://schemas.android.com/apk/res-auto"
 4     xmlns:scrolling_image_view="http://schemas.android.com/apk/res-auto"
 5     xmlns:tools="http://schemas.android.com/tools"
 6     android:layout_width="match_parent"
 7     android:layout_height="match_parent"
 8     tools:context=".UD2.Activity.OlaMundoActUD2">
 9 
10     <Button
11         android:id="@+id/button12"
12         android:layout_width="0dp"
13         android:layout_height="53dp"
14         android:layout_marginStart="8dp"
15         android:layout_marginEnd="8dp"
16         android:text="Button"
17         app:layout_constraintBottom_toBottomOf="parent"
18         app:layout_constraintEnd_toStartOf="@+id/guideline2"
19         app:layout_constraintHorizontal_bias="0.194"
20         app:layout_constraintStart_toStartOf="@+id/guideline"
21         app:layout_constraintTop_toTopOf="parent" />
22 
23     <android.support.constraint.Guideline
24         android:id="@+id/guideline"
25         android:layout_width="wrap_content"
26         android:layout_height="wrap_content"
27         android:orientation="vertical"
28         app:layout_constraintGuide_percent="0.3" />
29 
30     <android.support.constraint.Guideline
31         android:id="@+id/guideline2"
32         android:layout_width="wrap_content"
33         android:layout_height="wrap_content"
34         android:orientation="vertical"
35         app:layout_constraintGuide_percent="0.75" />
36 </android.support.constraint.ConstraintLayout>

Exemplo de barriers

  • Dos TextView cun tamaño definido en ancho están situados á esquerda e a dereita da activity, tendo o tamaño vertical a wrap_content.
  • Un barrier está asociado aos dos textviews e o barrierdirection (hai moitas direccións, consultar referencia de Android) está en bottom
  • Unha imaxe está situada no centro e verticalmente está asociada ao barrier.


  • Ao engadir novo texto que faga que calquera dos dous TextView´s aumente o seu tamaño vertical, a posición da imaxe se modificará para que sempre estea por debaixa da label de texto que teña o tamaño máis grande.
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:app="http://schemas.android.com/apk/res-auto"
 4     xmlns:scrolling_image_view="http://schemas.android.com/apk/res-auto"
 5     xmlns:tools="http://schemas.android.com/tools"
 6     android:layout_width="match_parent"
 7     android:layout_height="match_parent"
 8     tools:context=".UD2.Activity.OlaMundoActUD2">
 9 
10     <TextView
11         android:id="@+id/textView"
12         android:layout_width="121dp"
13         android:layout_height="wrap_content"
14         android:layout_marginStart="8dp"
15         android:layout_marginTop="8dp"
16         android:text="TextView"
17         app:layout_constraintStart_toStartOf="parent"
18         app:layout_constraintTop_toTopOf="parent" />
19 
20     <TextView
21         android:id="@+id/textView2"
22         android:layout_width="70dp"
23         android:layout_height="wrap_content"
24         android:layout_marginStart="69dp"
25         android:layout_marginTop="8dp"
26         android:layout_marginEnd="8dp"
27         android:text="TextView"
28         app:layout_constraintEnd_toEndOf="parent"
29         app:layout_constraintStart_toEndOf="@+id/textView"
30         app:layout_constraintTop_toTopOf="parent" />
31 
32     <android.support.constraint.Barrier
33         android:id="@+id/barrier2"
34         android:layout_width="wrap_content"
35         android:layout_height="wrap_content"
36         app:barrierDirection="bottom"
37         app:constraint_referenced_ids="textView,textView2"
38         tools:layout_editor_absoluteY="533dp" />
39 
40     <ImageView
41         android:id="@+id/imageView"
42         android:layout_width="wrap_content"
43         android:layout_height="wrap_content"
44         android:layout_marginStart="8dp"
45         android:layout_marginTop="8dp"
46         android:layout_marginEnd="8dp"
47         app:layout_constraintEnd_toEndOf="parent"
48         app:layout_constraintStart_toStartOf="parent"
49         app:layout_constraintTop_toTopOf="@+id/barrier2"
50         tools:srcCompat="@tools:sample/avatars" />
51 </android.support.constraint.ConstraintLayout>






-- Ángel D. Fernández González -- (2018).