Android: diseño de interfaz de usuario

En este capítulo, veremos los diferentes componentes de la interfaz de usuario de la pantalla de Android. Este capítulo también cubre los consejos para mejorar el diseño de la interfaz de usuario y también explica cómo diseñar una interfaz de usuario.

Componentes de la pantalla de la interfaz de usuario

Una interfaz de usuario típica de una aplicación de Android consta de una barra de acción y el área de contenido de la aplicación.

Barra de acción principal
Ver control
Área de contenido
Barra de acción dividida

Estos componentes también se han mostrado en la imagen a continuación:

Comprensión de los componentes de la pantalla

La unidad básica de la aplicación de Android es la actividad. Una interfaz de usuario se define en un archivo xml. Durante la compilación, cada elemento del XML se compila en una clase de GUI de Android equivalente con atributos representados por métodos.

Ver y ver grupos

Una actividad consta de vistas. Una vista es solo un widget que aparece en la pantalla. Podría ser un botón, etc. Se pueden agrupar una o más vistas en un GroupView. El ejemplo de ViewGroup incluye diseños.

Tipos de diseño

Hay muchos tipos de diseño. Algunos de los cuales se enumeran a continuación:

Disposición lineal
Diseño absoluto
Disposición de la mesa
Disposición del marco
Disposición relativa

Disposición lineal

El diseño lineal se divide a su vez en diseño horizontal y vertical. Significa que puede organizar las vistas en una sola columna o en una sola fila. Aquí está el código de diseño lineal (vertical) que incluye una vista de texto.

<?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:layout_width=”fill_parent”
      android:layout_height=”wrap_content”
      android:text=”@string/hello” />
</LinearLayout>

AbsoluteLayout

AbsoluteLayout le permite especificar la ubicación exacta de sus hijos. Se puede declarar así.

<AbsoluteLayout
   android:layout_width=”fill_parent”
   android:layout_height=”fill_parent”
   xmlns:android=”http://schemas.android.com/apk/res/android” >
   
   <Button
      android:layout_width=”188dp”
      android:layout_height=”wrap_content”
      android:text=”Button”
      android:layout_x=”126px”
      android:layout_y=”361px” />
</AbsoluteLayout>

TableLayout

TableLayout agrupa las vistas en filas y columnas. Se puede declarar así.

<TableLayout
   xmlns:android=”http://schemas.android.com/apk/res/android”
   android:layout_height=”fill_parent”
   android:layout_width=”fill_parent” >
   
   <TableRow>
      <TextView
         android:text=”User Name:”
         android:width =”120dp”
         />
      
      <EditText
         android:id=”@+id/txtUserName”
         android:width=”200dp” />
   </TableRow>
   
</TableLayout>

Disposición relativa

RelativeLayout le permite especificar cómo se posicionan las vistas secundarias entre sí. Puede declararse así.

<RelativeLayout
   android:id=”@+id/RLayout”
   android:layout_width=”fill_parent”
   android:layout_height=”fill_parent”
   xmlns:android=”http://schemas.android.com/apk/res/android” >
</RelativeLayout>

FrameLayout

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

<?xml version=”1.0” encoding=”utf-8”?>
<FrameLayout
   android:layout_width=”wrap_content”
   android:layout_height=”wrap_content”
   android:layout_alignLeft=”@+id/lblComments”
   android:layout_below=”@+id/lblComments”
   android:layout_centerHorizontal=”true” >
   
   <ImageView
      android:src = “@drawable/droid”
      android:layout_width=”wrap_content”
      android:layout_height=”wrap_content” />
</FrameLayout>

Aparte de estos atributos, existen otros atributos que son comunes en todas las vistas y ViewGroups. Se enumeran a continuación:

No Señor	Ver y descripción
1	layout_width Especifica el ancho de View o ViewGroup
2	layout_height Especifica la altura de View o ViewGroup
3	layout_marginTop Especifica espacio adicional en la parte superior de View o ViewGroup
4	layout_marginBottom Especifica espacio adicional en la parte inferior de View o ViewGroup
5	layout_marginLeft Especifica espacio adicional en el lado izquierdo de View o ViewGroup
6	layout_marginRight Especifica espacio adicional en el lado derecho de View o ViewGroup
7	layout_gravity Especifica cómo se colocan las vistas secundarias
8	layout_weight Especifica cuánto espacio adicional en el diseño debe asignarse a la Vista

Unidades de medida

Cuando especifica el tamaño de un elemento en una interfaz de usuario de Android, debe recordar las siguientes unidades de medida.

No Señor	Unidad y descripción
1	dp Pixel independiente de la densidad. 1 dp equivale a un píxel en una pantalla de 160 ppp.
2	sp Píxel independiente de la escala. Esto es similar a dp y se recomienda para especificar tamaños de fuente.
3	pt Punto. Un punto se define como 1/72 de pulgada, según el tamaño físico de la pantalla.
4	px Pixel. Corresponde a los píxeles reales de la pantalla

Densidades de pantalla

No Señor	Densidad y DPI
1	Low density (ldpi) 120 ppp
2	Medium density (mdpi) 160 ppp
3	High density (hdpi) 240 ppp
4	Extra High density (xhdpi) 320 ppp

Optimización de diseños

Estas son algunas de las pautas para crear diseños eficientes.

Evite el anidamiento innecesario
Evite usar demasiadas vistas
Evite la anidación profunda

↰ Previous page Next page ↱