Android: diseños de interfaz de usuario

El bloque de construcción básico para la interfaz de usuario es un Viewobjeto que se crea a partir de la clase Vista y ocupa un área rectangular en la pantalla y es responsable del dibujo y manejo de eventos. View es la clase base para los widgets, que se utilizan para crear componentes de IU interactivos como botones, campos de texto, etc.

los ViewGroup es una subclase de View y proporciona un contenedor invisible que contiene otras vistas u otros grupos de vistas y define sus propiedades de diseño.

En el tercer nivel, tenemos diferentes diseños que son subclases de la clase ViewGroup y un diseño típico define la estructura visual para una interfaz de usuario de Android y se puede crear en tiempo de ejecución usando View/ViewGroup objetos o puede declarar su diseño utilizando un archivo XML simple main_layout.xml que se encuentra en la carpeta res / layout de su proyecto.

Parámetros de diseño

Este tutorial trata más sobre la creación de su GUI basada en diseños definidos en un archivo XML. Un diseño puede contener cualquier tipo de widgets, como botones, etiquetas, cuadros de texto, etc. A continuación se muestra un ejemplo simple de archivo XML con LinearLayout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:orientation="vertical" >
   
   <TextView android:id="@+id/text"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="This is a TextView" />
      
   <Button android:id="@+id/button"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="This is a Button" />
      
   <!-- More GUI components go here  -->
   
</LinearLayout>

Una vez que se haya creado su diseño, puede cargar el recurso de diseño desde el código de su aplicación, en su implementación de devolución de llamada Activity.onCreate () como se muestra a continuación:

public void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.activity_main);
}

Tipos de diseño de Android

Hay una serie de diseños proporcionados por Android que utilizará en casi todas las aplicaciones de Android para proporcionar una vista, apariencia y sensación diferentes.

No Señor Diseño y descripción
1 Disposición lineal

LinearLayout es un grupo de vistas que alinea a todos los elementos secundarios en una sola dirección, vertical u horizontalmente.

2 Disposición relativa

RelativeLayout es un grupo de vistas que muestra vistas secundarias en posiciones relativas.

3 Disposición de la mesa

TableLayout es una vista que agrupa las vistas en filas y columnas.

4 Diseño absoluto

AbsoluteLayout le permite especificar la ubicación exacta de sus hijos.

5 Disposición del marco

FrameLayout es un marcador de posición en la pantalla que puede usar para mostrar una sola vista.

6 Vista de la lista

ListView es un grupo de vistas que muestra una lista de elementos desplazables.

7 Vista en cuadrícula

GridView es un ViewGroup que muestra elementos en una cuadrícula desplazable bidimensional.

Atributos de diseño

Cada diseño tiene un conjunto de atributos que definen las propiedades visuales de ese diseño. Hay algunos atributos comunes entre todos los diseños y hay otros atributos que son específicos de ese diseño. Los siguientes son atributos comunes y se aplicarán a todos los diseños:

No Señor Atributo y descripción
1

android:id

Este es el ID que identifica de forma exclusiva la vista.

2

android:layout_width

Este es el ancho del diseño.

3

android:layout_height

Esta es la altura del diseño

4

android:layout_marginTop

Este es el espacio adicional en la parte superior del diseño.

5

android:layout_marginBottom

Este es el espacio adicional en la parte inferior del diseño.

6

android:layout_marginLeft

Este es el espacio adicional en el lado izquierdo del diseño.

7

android:layout_marginRight

Este es el espacio adicional en el lado derecho del diseño.

8

android:layout_gravity

Esto especifica cómo se colocan las Vistas secundarias.

9

android:layout_weight

Esto especifica cuánto espacio adicional en el diseño debe asignarse a la Vista.

10

android:layout_x

Esto especifica la coordenada x del diseño.

11

android:layout_y

Esto especifica la coordenada y del diseño.

12

android:layout_width

Este es el ancho del diseño.

13

android:paddingLeft

Este es el relleno izquierdo relleno para el diseño.

14

android:paddingRight

Este es el relleno correcto para el diseño.

15

android:paddingTop

Este es el relleno superior relleno para el diseño.

dieciséis

android:paddingBottom

Este es el relleno inferior relleno para el diseño.

Aquí el ancho y la altura son la dimensión del diseño / vista que se puede especificar en términos de dp (píxeles independientes de la densidad), sp (píxeles independientes de la escala), pt (puntos que son 1/72 de pulgada), px ( Píxeles), mm (Milímetros) y finalmente en (pulgadas).

Puede especificar el ancho y el alto con medidas exactas, pero más a menudo, utilizará una de estas constantes para establecer el ancho o el alto:

  • android:layout_width=wrap_content le dice a su vista que se ajuste a las dimensiones requeridas por su contenido.

  • android:layout_width=fill_parent le dice a su vista que sea tan grande como su vista principal.

El atributo de gravedad juega un papel importante en el posicionamiento del objeto de vista y puede tomar uno o más (separados por '|') de los siguientes valores constantes.

Constante Valor Descripción
parte superior 0x30 Empuje el objeto hacia la parte superior de su contenedor, sin cambiar su tamaño.
fondo 0x50 Empuje el objeto hacia el fondo de su contenedor, sin cambiar su tamaño.
izquierda 0x03 Empuje el objeto hacia la izquierda de su contenedor, sin cambiar su tamaño.
Correcto 0x05 Empuje el objeto hacia la derecha de su contenedor, sin cambiar su tamaño.
center_vertical 0x10 Coloque el objeto en el centro vertical de su contenedor, sin cambiar su tamaño.
fill_vertical 0x70 Aumente el tamaño vertical del objeto si es necesario para que llene completamente su contenedor.
center_horizontal 0x01 Coloque el objeto en el centro horizontal de su contenedor, sin cambiar su tamaño.
fill_horizontal 0x07 Aumente el tamaño horizontal del objeto si es necesario para que llene completamente su contenedor.
centrar 0x11 Coloque el objeto en el centro de su contenedor tanto en el eje vertical como en el horizontal, sin cambiar su tamaño.
llenar 0x77 Aumente el tamaño horizontal y vertical del objeto si es necesario para que llene completamente su contenedor.
clip_vertical 0x80 Opción adicional que se puede configurar para que los bordes superior y / o inferior del niño se recorten a los límites de su contenedor. El clip se basará en la gravedad vertical: una gravedad superior recortará el borde inferior, una gravedad inferior recortará el borde superior y ninguna de las dos recortará ambos bordes.
clip_horizontal 0x08 Opción adicional que se puede configurar para que los bordes izquierdo y / o derecho del niño se recorten a los límites de su contenedor. El clip se basará en la gravedad horizontal: una gravedad izquierda recortará el borde derecho, una gravedad derecha recortará el borde izquierdo y ninguna recortará ambos bordes.
comienzo 0x00800003 Empuje el objeto hasta el comienzo de su contenedor, sin cambiar su tamaño.
fin 0x00800005 Empuje el objeto hasta el final de su contenedor, sin cambiar su tamaño.

Ver identificación

Un objeto de vista puede tener asignado un ID único que identificará la Vista de manera única dentro del árbol. La sintaxis de un ID dentro de una etiqueta XML es:

android:id="@+id/my_button"

A continuación se muestra una breve descripción de los signos @ y +:

  • El símbolo arroba (@) al principio de la cadena indica que el analizador XML debe analizar y expandir el resto de la cadena de identificación e identificarla como un recurso de identificación.

  • El símbolo más (+) significa que este es un nuevo nombre de recurso que debe crearse y agregarse a nuestros recursos. Para crear una instancia del objeto de vista y capturarlo del diseño, use lo siguiente:

Button myButton = (Button) findViewById(R.id.my_button);