Desarrollo de aplicaciones III

Unidad III.- Desarrollo

de la interfaz de

usuario.Diseño de layouts en Android.

Alfonso Felipe Lima Cortés

Diseño interfaces de usuario en Android.

• Diseñar interfaces de usuario para aplicaciones Android no es

solo tomar los elementos y arrastrarlos al diseñador para ser

alineados, ordenados y configurarlos; sino que conlleva una

serie de aspectos y conceptos importantes a analizar y

comprender, los cuales serán necesarios aplicar al momento

de realizar diseño si queremos lograr un buen trabajo.

Diseño interfaces de usuario en Android.

• Una interfaz de usuario representada por layout (.xml) está

estructurada por una serie de elementos y puede diseñarse a

nivel código o utilizando el diseñador de layouts.

• En Android Developers la explicación detallada acerca del

diseño de interfaces de usuario �

http://developer.android.com/guide/topics/ui/index.html

• http://developer.android.com/guide/practices/ui_guidelines/i

ndex.html

Agregar un nuevo layout.

El diseñador de layouts.

Explorando los componentes.

El ADT proporciona un conjunto de elementos que

pueden utilizarse en las interfaces de usuario, los

elementos se caracterizan por su uso destinado,

como cuadros de texto con un tipo predefinido,

elementos de calendario, reproductor y control de

multimedia, marcador telefónico, visor de contenido

web, entre otros.

http://developer.android.com/reference/android/widget/package-summary.html

Editar layouts desde código

• Un layout puede ser más fácil de editar a nivel código si nos

familiarizamos con los componentes y su atributos.

Editar layouts en el diseñador

Si encontramos complicado

hacerlo desde código, la opción

entonces es hacerlo desde el

diseñador, para ello sobre el

elemento de la interfaz

acceder al menú contextual

donde encontramos los

atributos principales y

accedemos a su manipulación

directamente.

Los conceptos.

• Es importante revisar la información correspondiente para

cada elemento a utilizar, toda la información técnica se

encuentra en

http://developer.android.com/reference/android/widget/pack

age-summary.html

Primer ejercicio:

• Agregue los elementos

correspondientes para lograr esta

interfaz de usuario.

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical" >

<TextView

android:id="@+id/textView1"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="@string/info_contacto"

android:textSize="24sp" />

<EditText

android:id="@+id/editText1"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:inputType="textPersonName"

android:hint="Nombre" >

<requestFocus />

</EditText>

<EditText

android:id="@+id/editText2"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:inputType="textPersonName"

android:hint="Apellidos" />

<EditText

android:id="@+id/editText3"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:inputType="textEmailAddress"

android:hint="Email" />

<EditText

android:id="@+id/editText4"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:inputType="phone"

android:hint="Teléfono" />

<LinearLayout

android:id="@+id/linearLayout1"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:gravity="center" >

<Button

android:id="@+id/button1"

android:layout_width="wrap_content"

android:layout_height="wrap_content«

android:text="Aceptar" />

<Button

android:id="@+id/button2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Cancelar" />

</LinearLayout>

</LinearLayout>

Ejemplo de interfaz de usuario.<?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"

android:background="@drawable/android_wp">

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_gravity="center_vertical"

android:text="@string/hello" />

<TextView

android:id="@+id/textView1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Nombre:" />

<EditText

android:id="@+id/NombreTxt"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:inputType="textPersonName" />

<requestFocus />

<TextView

android:id="@+id/textView2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Edad:" />

<EditText

android:id="@+id/EdadTxt"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:inputType="number" >

</EditText>

<Button

android:id="@+id/OKBtn"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Aceptar" />

</LinearLayout>

Ejemplo de interfaz de usuario.

Búsqueda de herramientas.

• Puede utilizar la herramienta de diseño en línea por

http://www.droiddraw.org/ que facilita el diseño de las

interfaces de usuario.

• Localice sitios de internet que contengan colecciones de

iconos e imágenes que pueda utilizar en su aplicaciones.

• http://findicons.com

• http://www.androidicons.com/

• Puede buscar otras soluciones ya existentes que faciliten el

diseño.

http://www.droiddraw.org/

Documentación de apoyo.

Este libro es una guía que nos

lleva de la mano en el desarrollo

de aplicaciones para Android.

Documentación de apoyo.

Actualmente en la red existe una gran variedad de documentación

que podemos tomar como apoyo al diseñar y desarrollar para

Android.

No podemos pasar por alto algunos consejos que expertos y

analistas han publicado para nosotros cuando se trata de diseñar y

desarrollar.

http://www.androidpatterns.com/

http://coding.smashingmagazine.com/2011/06/30/designing-for-

android/