Diferencia entre revisiones de «PDM ConstraintLayout»
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
Sumario
- 1 Introdución
- 2 Funcionamento
- 3 Exemplos de código xerado
- 3.1 Botón empregando un margin top-left
- 3.2 Botón centrado
- 3.3 Botón desprazado á esquerda
- 3.4 Botón cun margin superior e un ancho completo
- 3.5 Exemplo de tres botóns relacionados
- 3.6 Exemplo de tres botóns con distribución de espazo
- 3.7 Exemplo de un botón con un Guidle asociado
- 3.8 Exemplo de dous guidelines con porcentaxe e un botón
- 3.9 Exemplo de barriers
Introdución
- Máis información:
- Manual completo de uso neste enlace.
- Outra explicación neste enlace.
- Outro exemplo neste enlace
- 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
- Exemplo de uso de Constraint: https://constraintlayout.com/basics/create_constraint.html
- Exemplo de uso de Chains: https://constraintlayout.com/basics/create_chains.html
- Exemplo de uso de GuideLines: https://constraintlayout.com/basics/guidelines.html
- Exemplo de uso de Dimensions: https://constraintlayout.com/basics/dimensions.html
- Exemplo de uso de Barries: https://constraintlayout.com/basics/barriers.html
- Exemplo de uso de Flow-Layer: https://medium.com/androiddevelopers
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).