Diseño relativo de Android
Android RelativeLayout te permite especificar cómo se posicionan las vistas secundarias entre sí. La posición de cada vista se puede especificar como relativa a elementos hermanos o relativa a la principal.
Disposición relativa
Atributos de diseño relativo
Los siguientes son los atributos importantes específicos de RelativeLayout:
No Señor. | Atributo y descripción |
---|---|
1 |
android:id Este es el ID que identifica de forma única el diseño. |
2 |
android:gravity Esto especifica cómo un objeto debe colocar su contenido, tanto en el eje X como en el Y. Los valores posibles son top, bottom, left, right, center, center_vertical, center_horizontal, etc. |
3 |
android:ignoreGravity Esto indica qué vista no debería verse afectada por la gravedad. |
Con RelativeLayout, puede alinear dos elementos por el borde derecho o hacer uno debajo del otro, centrado en la pantalla, centrado a la izquierda, etc. De forma predeterminada, todas las vistas secundarias se dibujan en la parte superior izquierda del diseño, por lo que debe definir la posición de cada vista utilizando las diversas propiedades de diseño disponibles enRelativeLayout.LayoutParams y algunos de los atributos importantes se dan a continuación:
No Señor. | Atributo y descripción |
---|---|
1 |
android:layout_above Coloca el borde inferior de esta vista sobre el ID de vista de anclaje dado y debe ser una referencia a otro recurso, en la forma "@ [+] [paquete:] tipo: nombre" |
2 |
android:layout_alignBottom Hace que el borde inferior de esta vista coincida con el borde inferior del ID de vista de anclaje dado y debe ser una referencia a otro recurso, en la forma "@ [+] [paquete:] tipo: nombre". |
3 |
android:layout_alignLeft Hace que el borde izquierdo de esta vista coincida con el borde izquierdo del ID de vista de anclaje dado y debe ser una referencia a otro recurso, en la forma "@ [+] [paquete:] tipo: nombre". |
4 |
android:layout_alignParentBottom Si es verdadero, hace que el borde inferior de esta vista coincida con el borde inferior del padre. Debe ser un valor booleano, ya sea "verdadero" o "falso". |
5 |
android:layout_alignParentEnd Si es verdadero, hace que el borde final de esta vista coincida con el borde final del padre. Debe ser un valor booleano, ya sea "verdadero" o "falso". |
6 |
android:layout_alignParentLeft Si es verdadero, hace que el borde izquierdo de esta vista coincida con el borde izquierdo del padre. Debe ser un valor booleano, ya sea "verdadero" o "falso". |
7 |
android:layout_alignParentRight Si es verdadero, hace que el borde derecho de esta vista coincida con el borde derecho del padre. Debe ser un valor booleano, ya sea "verdadero" o "falso". |
8 |
android:layout_alignParentStart Si es verdadero, hace que el borde inicial de esta vista coincida con el borde inicial del padre. Debe ser un valor booleano, ya sea "verdadero" o "falso". |
9 |
android:layout_alignParentTop Si es verdadero, hace que el borde superior de esta vista coincida con el borde superior del padre. Debe ser un valor booleano, ya sea "verdadero" o "falso". |
10 |
android:layout_alignRight Hace que el borde derecho de esta vista coincida con el borde derecho del ID de vista de anclaje dado y debe ser una referencia a otro recurso, en la forma "@ [+] [paquete:] tipo: nombre". |
11 |
android:layout_alignStart Hace que el borde inicial de esta vista coincida con el borde inicial del ID de vista de anclaje dado y debe ser una referencia a otro recurso, en la forma "@ [+] [paquete:] tipo: nombre". |
12 |
android:layout_alignTop Hace que el borde superior de esta vista coincida con el borde superior del ID de vista de anclaje dado y debe ser una referencia a otro recurso, en la forma "@ [+] [paquete:] tipo: nombre". |
13 |
android:layout_below Coloca el borde superior de esta vista debajo del ID de vista de anclaje dado y debe ser una referencia a otro recurso, en la forma "@ [+] [paquete:] tipo: nombre". |
14 |
android:layout_centerHorizontal Si es verdadero, centra este hijo horizontalmente dentro de su padre. Debe ser un valor booleano, ya sea "verdadero" o "falso". |
15 |
android:layout_centerInParent Si es verdadero, centra este hijo horizontal y verticalmente dentro de su padre. Debe ser un valor booleano, ya sea "verdadero" o "falso". |
dieciséis |
android:layout_centerVertical Si es verdadero, centra este hijo verticalmente dentro de su padre. Debe ser un valor booleano, ya sea "verdadero" o "falso". |
17 |
android:layout_toEndOf Coloca el borde de inicio de esta vista al final del ID de vista de anclaje dado y debe ser una referencia a otro recurso, en la forma "@ [+] [paquete:] tipo: nombre". |
18 |
android:layout_toLeftOf Coloca el borde derecho de esta vista a la izquierda del ID de vista de anclaje dado y debe ser una referencia a otro recurso, en la forma "@ [+] [paquete:] tipo: nombre". |
19 |
android:layout_toRightOf Coloca el borde izquierdo de esta vista a la derecha del ID de vista de anclaje dado y debe ser una referencia a otro recurso, en la forma "@ [+] [paquete:] tipo: nombre". |
20 |
android:layout_toStartOf Coloca el borde final de esta vista al inicio del ID de vista de anclaje dado y debe ser una referencia a otro recurso, en la forma "@ [+] [paquete:] tipo: nombre". |
Ejemplo
Este ejemplo lo llevará a través de sencillos pasos para mostrar cómo crear su propia aplicación de Android usando el diseño relativo. Siga los siguientes pasos para modificar la aplicación de Android que creamos en el capítulo Ejemplo de Hello World :
Paso | Descripción |
---|---|
1 | Utilizará Android Studio IDE para crear una aplicación de Android y nombrarla como demostración en un paquete com.example.demo como se explica en el capítulo Ejemplo de Hello World . |
2 | Modifique el contenido predeterminado del archivo res / layout / activity_main.xml para incluir algunos widgets en el diseño relativo. |
3 | Defina las constantes requeridas en el archivo res / values / strings.xml |
4 | Ejecute la aplicación para iniciar el emulador de Android y verifique el resultado de los cambios realizados en la aplicación. |
A continuación se muestra el contenido del archivo de actividad principal modificado src/com.example.demo/MainActivity.java. Este archivo puede incluir cada uno de los métodos fundamentales del ciclo de vida.
package com.example.demo;
import android.os.Bundle;
import android.app.Activity;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
A continuación se mostrará el contenido de res/layout/activity_main.xml archivo -
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingLeft="16dp"
android:paddingRight="16dp" >
<EditText
android:id="@+id/name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="@string/reminder" />
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentStart="true"
android:layout_below="@+id/name">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="@+id/button" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="@+id/button2" />
</LinearLayout>
</RelativeLayout>
A continuación se mostrará el contenido de res/values/strings.xml para definir dos nuevas constantes -
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="action_settings">Settings</string>
<string name="reminder">Enter your name</string>
</resources>
Intentemos ejecutar nuestro modificado Hello World!aplicación que acabamos de modificar. Supongo que habías creado tuAVDmientras realiza la configuración del entorno. Para ejecutar la aplicación desde Android Studio, abra uno de los archivos de actividad de su proyecto y haga clic en el icono Ejecutar en la barra de herramientas. Android Studio instala la aplicación en su AVD y la inicia y, si todo está bien con su configuración y aplicación, se mostrará la siguiente ventana del emulador: