Desarrollo de aplicaciones III Unidad III.- Desarrollo de la interfaz de usuario. Diseño de layouts en Android. Alfonso Felipe Lima Cortés
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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/
Related Documents
