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);