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