Diseño de Interfaz de Usuario Android: Composiciones Relativas

Entender los Layouts es importante para el buen diseño de la aplicación Android. En este tutorial, usted aprenderá todo sobre relative layouts, los cuales organizan los controles de la interfaz de usuarios, o widgets, en la pantalla en relación de unos a otros, o su layout principal. Cuando se usa correctamente, los relative layouts puede ser los layout potentes y flexibles sobre las que pueden ser diseñadas muchas aplicaciones Android interesantes.

¿Qué es un Relative Layout?

Después de los layouts linear, los cuales muestran los controles en una sola fila o columna, los relative layout son uno de los tipos mas comunes de layouts utilizados por los diseñadores de la interfaz de usuario de Android. Es como otros layouts, los relative layouts pueden ser definidos dentro de los recursos layout XML o por medio de programación en el código de la aplicación de Java. Los relative layouts funcionan como da a entender su nombre: organiza los controles relativos unos a otros, o el mismo control parent.

¿Qué significa esto? Significa que los controles child, tales como ImageView, TextView y los controles Button, pueden ser ubicados arriba, abajo, a la izquierda o la derecha de unos u otros. Los controles child, además, pueden ser ubicados en relación al parent (que es el contenedor del relative layout) incluyendo los controles de ubicación alineados arriba, abajo, a la izquierda o derecha del layout.

El control de ubicación child del relative layout está definido usando reglas. Estas reglas definen como se mostraran los controles dentro del relative layout. Para la lista completa de las reglas para los relative layouts, revise la documentación Android SDK para la clase RelativeLayout. Los atributos XML asociados para el uso en los recursos XML, también, están definidos en la documentación.

NOTA: Las reglas requieren que cada control child tenga su atributo id ajustado adecuadamente.

Un relative layout

Los relative layout, se comprenden mejor a través de un ejemplo. Digamos que queremos diseñar una pantalla con un control EditText y un Button. Queremos que el Button esté a la derecha del control EditText. Por lo tanto, podríamos definir un relative layout con dos controles child: el EditText y el Button. El control EditText podría tener una regla que dice: alinear éste control en el lado izquierdo del control parent (es decir, el layout) y a la izquierda de un segundo control  Button. Mientras tanto, el control Button podría tener un regla que dice: alinear este control al lado derecho del control parent (es decir, el layout).

La siguiente figura muestra solamente un relative layout, mostrado en modo retrato y panorámico. El relative layout tiene dos controles child: un control EditText y un Button.

Definiendo un XML Layout Resource con un Relative Layout

La manera más conveniente y sostenible para diseñar una aplicación de interfaz de usuario es al crear un XML layout resource.  Este método simplifica mucho el proceso de diseño UI, moviéndose de la creación static y layout de los controles de interfaz de usuaio y la definición de los controles de los atributos,  el XML, en lugar de las letras de código.

XML layout resource, deben ser guardados en la jerarquía del directorio del proyecto: /res/layout. Vamos a echar un vistazo a los relative layout presentados en la sección anterior. Este archivo layout resource, nombrado convenientemente como /res/layout/relative.xml, está definido en XML como sigue:

1

2

<?xml version="1.0" encoding="utf-8"?>

3

<RelativeLayout

4

    xmlns:android="http://schemas.android.com/apk/res/android"

5

    android:layout_height="fill_parent"

6

    android:layout_width="fill_parent">

7

    <EditText

8

        android:id="@+id/EditText01"

9

        android:hint="Enter some text..."

10

        android:layout_alignParentLeft="true"

11

        android:layout_width="fill_parent"

12

        android:layout_toLeftOf="@+id/Button01"

13

        android:layout_height="wrap_content"></EditText>

14

    <Button

15

        android:id="@+id/Button01"

16

        android:text="Press Here!"

17

        android:layout_width="wrap_content"

18

        android:layout_alignParentRight="true"

19

        android:layout_height="wrap_content"></Button>

20

</RelativeLayout>

Recuerde que, desde la parte interna del Activity, solamente una sola línea de código dentro del método onCreate() es necesaria para cargar y mostrar un layout resource en la pantalla. Si el layout resource fue guardado en el archivo /res/layout/relative.xml, entonce esa línea de código sería:

1

2

setContentView(R.layout.relative);

Este relative layout tiene su anchura y altura configurada para llenar la pantalla y tres reglas configuradas en sus controles child:

• EditText01: Alinear al lado izquierdeo del layout.
• EditText01: Mostrar a la izquierda el Button01
• Button01: Alinear al lado derecho del layout. 

Definiendo un Relative Layout por medio de programación

Además, usted puede por medio de la programación crear y configurar relative layouts. Esto se hace usando la clase RelativeLayout (android.widget.Relative). Encontrará los parámetros específicos child en la clase RelativeLayout.LayoutParams. Asimismo, los parámetros normales de los layout (android.view.ViewGroup.LayoutParams), tales como layout_height y layout_width, así como también los parámetros de los márgenes (ViewGroup.MarginLayoutParams), aún se utilizan en los objetos RelativeLayout.
En lugar de cargar un layout resource usando el método setContentView() como se mostró anteriormente, en su lugar, debe desarrollar los contenidos de las pantallas en Java y luego proporcionar un objeto parent layout que contiene todos los contenidos de controles como vistas child para el método setContentView(). En este caso, su parent layout sería el relative layout.
Por ejemplo, el siguiente código ilustra cómo por medio de la programación, una instancia Activity tiene un RelativeLayout y coloca un TextView y un control Button dentro de éste en su método onCreate(), al igual que el que vimos en la sección anterior.

1

2

public void onCreate(Bundle savedInstanceState) {

3

    super.onCreate(savedInstanceState);

4

    // setContentView(R.layout.relative);

5

6

        EditText ed = new EditText(this);

7

        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(LayoutParams.FILL_PARENT, 

8

                LayoutParams.WRAP_CONTENT);

9

        params.addRule(RelativeLayout.ALIGN_PARENT_LEFT);

10

        // use same id as defined when adding the button

11

        params.addRule(RelativeLayout.LEFT_OF, 1001); 

12

        ed.setLayoutParams(params);

13

        ed.setHint("Enter some text....");

14

15

        Button but1 = new Button(this);

16

        RelativeLayout.LayoutParams params2 = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, 

17

                LayoutParams.WRAP_CONTENT);

18

        params2.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);

19

        but1.setLayoutParams(params2);

20

        but1.setText("Press Here!");

21

        // give the button an id that we know

22

        but1.setId(1001);         

23

        RelativeLayout layout1 = new RelativeLayout(this);

24

        layout1.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));

25

        layout1.addView(ed);

26

        layout1.addView(but1);

27

        setContentView(layout1);

28

}

Vamos a ver mejor el código Java que listamos anteriormente. Primero creamos un control EditText como normal. Le dimos algunos parámetros RelativeLayout y, después, configuramos sus reglas. En este caso, creamos dos reglas para el control EditText.

Luego, creamos el control Button y configuramos su regla (alinear al borde derecho del parent layout). Finalmente, creamos un objeto RelativeLayout, ajustamos sus parámetros, añadimos dos controles child usando el método addView() y cargamos el realtive layout para mostrar usando el método setContentView().

Como puede ver, el código puede crecer rápidamente en tamaño con más controles agregados a la pantalla. Para organización y duración, definir y usar los layouts por medio de programación es lo mejor que queda para algún caso en vez de la regla.

Explorando las Propiedades y Atributos Importantes de los Relative Layout.

Ahora hablemos un poco de los atributos que ayudan a configurar un relative layout y sus controles child. Algunos atributos específicos se aplican a relative layouts concretos, incluyendo:

• Las reglas para centrar un control child dentro de un parent layout, incluyendo: centro horizontal, centro vertical o ambos.
• Las reglas para la alineación de los controles child dentro del parent child, incluyendo: alinear arriba, abajo, izquierda o derecha de uno de los bordes.
• Las reglas para la alineación en relación a otros controles child incluyendo: alinear arriba, abajo, izquierda o derecha de los bordes.
• Las reglas para la alineación de los controles child en relación a los controles child, incluyendo: ubicación a la izquierda de un control específico, o .arriba o abajo de otro control.

También, los atributos generales ViewGroup se utilizan para los relative layout. Estos incluyen:

• Parámetros de Layout Genéricos tales como layout_height (requerido) y layout_width (requerido) (la clase: ViewGroup.LayoutParams).
• Los parámetros de los márgenes de los layout tales como margin_top, margin_left, margin_right y margin_bottom (clase: ViewGroup. MarginLayoutParams).
• Los parámetros de los Layout tales como layout_height y layout_width (clase: ViewGroup.LayoutParams).

Ahora, ¡vamos a poner algunas de esas reglas en acción!

Trabajando con las Reglas Layout

Vamos a ver un diseño de pantalla más complejo. Para los propósitos de este ejercicio, empezaremos mirando en el final del diseño de la pantalla, y luego trabajaremos hacia atrás, discutiendo las características y reglas de los relativa layout usadas para lograr este resultado final.

Digamos que queremos diseñar una pantalla que luce así:

Para diseñara esta pantalla usando un relative layout, continué con los siguientes pasos.

Paso 1: Define un Relative Layout en su archivo XML Resource

Primero, define un relative layout en su archivo XML resource. Ya que quiere este layout para controlar los contenidos de toda la pantalla, ajusta sus atributos de altura y anchura por medio de fill_parent. Su archivo XML resource debería de lucir algo así:

1

2

<?xml version="1.0" encoding="utf-8"?>

3

<RelativeLayout

4

    xmlns:android="http://schemas.android.com/apk/res/android"

5

    android:layout_height="fill_parent"

6

    android:layout_width="fill_parent">

7

8

</RelativeLayout>

Paso 2: Determine los controles child

Después, determinamos cuales controles child necesitamos. En este caso, necesitamos siete controles TextView (uno para cada color). Configurelos como normalmente lo haría, ajustando los atributos de texto para strings, colores de fondo, tamaños de fuente, etc. Ubique cada uno de estos controles dentro de su relative layout.

Paso 3: Define la reglas Relative Layout

Luego, define las reglas para cada control child, para conseguir que aparezcan en los lugares apropiados:

• El control RED TextView no tiene una configuración específica configurada. Por defecto, este control se presentará en el lado de la esquina superior izquierda del parent layout.
• El control ORANGE TextView está centrado horizontalmente en el parent layout. Debido a que todos los controles por defecto aparecen en la esquina superior izquierda de la pantalla, esto fija, efectivamente, el control arriba y en medio del borde del parent layout.
• El control YELLOW TextView está alineado al lado del borde derecho del parent layout. Debido a que todos los controles por defecto aparecen en la esquina superior izquierda de la pantalla, esto fija, efectivamente, el control arriba a la derecha del parent layout.
• El control GREEN TextView está centrado verticalmente dentro del parent layout y configurado para mostrar hacia la izquierda del control BLUE TextView.
• El control BLUE TextView está alineado al centro (horizontal y verticalmente) del parent control. Este lo muestra en el medio de la pantalla.
• El control INDIGO TextView está centrado verticalmente dentro del parent layout y configurado para mostrar a la derecha del control BLUE TextView.
• El control VIOLET TextView está alineado en el borde inferior del parent layout. Su anchura está configurada para rellenar el parent, permitiéndose extenderse hasta el borde inferior de la pantalla.

Si define estas reglas en su archivo XML resource, entonces este debería de lucir algo así:

1

2

<?xml version="1.0" encoding="utf-8"?>

3

<RelativeLayout

4

    xmlns:android="http://schemas.android.com/apk/res/android"

5

    android:layout_height="fill_parent"

6

    android:layout_width="fill_parent">

7

8

9

    <TextView

10

        android:text="RED"

11

        android:id="@+id/TextView01"

12

        android:layout_height="wrap_content"

13

        android:background="#f00"

14

        android:gravity="center"

15

        android:textColor="#000"

16

        android:layout_width="wrap_content"

17

        android:padding="25dp"></TextView>

18

19

20

21

22

    <TextView

23

        android:text="ORANGE"

24

        android:layout_height="wrap_content"

25

        android:background="#ffa500"

26

        android:gravity="center"

27

        android:textColor="#000"

28

        android:id="@+id/TextView02"

29

        android:layout_width="wrap_content"

30

        android:layout_centerHorizontal="true"

31

        android:padding="25dp"></TextView>

32

33

34

35

36

    <TextView

37

        android:text="YELLOW"

38

        android:layout_height="wrap_content"

39

        android:background="#ffff00"

40

        android:gravity="center"

41

        android:textColor="#000"

42

        android:id="@+id/TextView03"

43

        android:layout_width="wrap_content"

44

        android:layout_alignParentRight="true"

45

        android:padding="25dp"></TextView>

46

47

48

49

    <TextView

50

        android:text="GREEN"

51

        android:layout_height="wrap_content"

52

        android:background="#0f0"

53

        android:gravity="center"

54

        android:textColor="#000"

55

        android:id="@+id/TextView04"

56

        android:layout_width="wrap_content"

57

        android:layout_toLeftOf="@+id/TextView05"

58

        android:padding="25dp"

59

        android:layout_centerVertical="true"></TextView>

60

61

62

63

    <TextView

64

        android:text="BLUE"

65

        android:layout_height="wrap_content"

66

        android:background="#00f"

67

        android:gravity="center"

68

        android:textColor="#fff"

69

        android:id="@+id/TextView05"

70

        android:layout_width="wrap_content"

71

        android:layout_centerInParent="true"

72

        android:layout_margin="10dp"

73

        android:padding="25dp"></TextView>

74

75

76

77

78

    <TextView

79

        android:text="INDIGO"

80

        android:layout_height="wrap_content"

81

        android:gravity="center"

82

        android:textColor="#fff"

83

        android:id="@+id/TextView06"

84

        android:layout_width="wrap_content"

85

        android:layout_toRightOf="@+id/TextView05"

86

        android:background="#4b0082"

87

        android:padding="25dp"

88

        android:layout_centerVertical="true"></TextView>

89

90

91

92

    <TextView

93

        android:text="VIOLET"

94

        android:layout_height="wrap_content"

95

        android:background="#ee82ee"

96

        android:gravity="center"

97

        android:textColor="#000"

98

        android:id="@+id/TextView07"

99

        android:layout_alignParentBottom="true"

100

        android:layout_width="fill_parent"

101

        android:padding="25dp"></TextView>

102

103

</RelativeLayout>

Consejos de Uso para los RelativeLayout

Estos son algunos consejos para trabajar con relative layouts.

• Los controles child de los relative layout deben tener un atributo id único para aplicar las reglas correctamente.
• Tenga cuidado con las reglas circulares. Las reglas circulares ocurren cuando dos controles tienen reglas que se apuntan entre si. Si incluye un conjunto de reglas circulares en su diseño layout, entonces conseguirá el siguiente error:

  1
  2	IllegalStateException: Circular dependencies cannot exist in a RelativeLayout

  Puede ser útil para recordar que las reglas de los relative layout están aplicadas en un paso.

• Mantenga las reglas de sus relative layout en un mínimo. Esto ayuda a reducir la probabilidad de reglas circulares y hace su layout sea más controlable y flexible.
• Como siempre, recuerde probar que el diseño de su layout funciona como se espera en los dos modos, vertical y horizontal, así como también en diferentes tamaños de pantalla y resoluciones.
• Use relative layout en lugar de nesting layout linear para mejorar el desempeño de la aplicación y la capacidad de respuesta.

En conclusión

La aplicación de interfaz de usuario Android está definida usando layouts, y los relative layout son uno de los tipos de layout utilizados para hacer que las aplicaciones de pantalla sean tanto flexibles como potentes. Los relative layout permiten que los controles child sean organizados en relación unos a otros y en relación al parent (a los bordes y centrado vertical y horizontalmente). Una vez que domine las reglas de como los relative layouts puede ser increíblemente versátiles, permitiendole crear layouts complejos sin sobrecarga de diferentes layouts anidados, de este modo se mejor el rendimiento.

Acerca de los Autores

Desarrolladores de Celulares; Lauren Darcey y Shane Conder son coautores de varios libros sobre el desarrollo en Android: un libro de programación a fondo titulado: Desarrollo de Aplicaciones Inalámbricas de Android y Sams Aprenda usted mismo a Desarrollar Aplicaciones para Android en 24 horas. Cuando no escriben, ellos pasan su tiempo desarrollando programas para celulares en sus empresas y proporcionando servicios de consultoría. Pueden ser localizado a través de correo electrónico: androidwirelessdev+mt@gmail.com o por medio de su blog en androidbook.blogspot.com y en Twitter @androidwireless.