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_height="match_parent" android:orientation="vertical" > <TextView android:id="@+id/textview1" android:text="@string/info_contacto" android:textsize="24sp" /> <EditText android:id="@+id/edittext1" android:inputtype="textpersonname" android:hint="nombre" > <requestfocus/> </EditText> <EditText android:id="@+id/edittext2" android:inputtype="textpersonname" android:hint="apellidos" /> <EditText android:id="@+id/edittext3" android:inputtype="textemailaddress" android:hint="email" /> <EditText android:id="@+id/edittext4" android:inputtype="phone" android:hint="teléfono" /> <LinearLayout android:id="@+id/linearlayout1" 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: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_gravity="center_vertical" android:text="@string/hello" /> <TextView android:id="@+id/textview1" android:layout_width="wrap_content" android:text="nombre:" /> <EditText android:id="@+id/nombretxt" android:inputtype="textpersonname" /> <requestfocus /> <TextView android:id="@+id/textview2" android:layout_width="wrap_content" android:text="edad:" /> <EditText android:id="@+id/edadtxt" android:inputtype="number" > </EditText> <Button android:id="@+id/okbtn" android:layout_width="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-forandroid/