Interfaz de usuario en Android
Posted by jbeer | Filed under Tecnología, Tutoriales
Una de las cosas más interesantes que tiene Android (bajo mi punto de vista, claro está), es la creación de interfaces de usuario.
Android nos ofrece la posibilidad de crear la “fachada” de la aplicación mediante ficheros XML. De esta forma, nos podemos concentrar en el aspecto funcional de la aplicación (código Java) o puramente estético (XML). También podríamos generar la interfaz mediante código Java, pero queda mucho más estético y ordenado usando lo que Android nos ofrece.
Tal y como comentaba en el artículo Estructura de una aplicación Android, tenemos la carpeta “res”, donde almacenábamos todos los recursos del sistema. Dentro de estos recursos están nuestros archivos XML que usaremos para crear las vistas de nuestra aplicación.
Una aplicación recién creada, contendrá las carpetas drawable, layout y values. Nos vamos a centrar en la carpeta layout. Si nos aventuramos y vemos que contiene esta carpeta, podemos ver que Eclipse nos ha generado un fichero main.xml. Este fichero contiene una vista simple, un contenedor (Layout) y una vista (View) simple que contiene una cadena de texto tipo “Hola Mundo”. Esta vista se mostrará en la pantalla en cuanto arranquemos la aplicación.
<?xml version=“1.0″ encoding=“utf-8″?>
<LinearLayout xmlns:android=“http://schemas.android.com/apk/res/android”
android:orientation=“vertical”
android:layout_width=“fill_parent”
android:layout_height=“fill_parent”
>
<TextView
android:layout_width=“fill_parent”
android:layout_height=“wrap_content”
android:text=“@string/hello”
/>
</LinearLayout>
Esta es la forma de cualquier vista en Andorid. Tendremos un árbol de Layouts y de Widgets anidados con tags propios y multitud de atributos, de esta forma se usa toda la potencia de XML.
Centrémonos en esta vista básica. Tenemos para empezar la primera linea,
<?xml version=“1.0″ encoding=“utf-8″?>
que debe estar en todo fichero XML que queramos usar (de lo contrario Eclipse se quejará y nos marcará un error de fichero mal codificado). Esta linea no tiene mucho misterio, simplemente nos aparece la versión de xml que estamos usando y la codificación. Lo interesante viene a continuación.
<LinearLayout xmlns:android=“http://schemas.android.com/apk/res/android”
android:orientation=“vertical”
android:layout_width=“fill_parent”
android:layout_height=“fill_parent”
>
nos encontramos con el primer Layout, en este caso un LinearLayout. Los Layouts, son contenedores de otros elementos en una vista, dentro de cada Layout podemos poner los elementos que queramos, incluso otros Layouts. De esta forma podemos estructurar nuestra vista tal y como deseemos.
Tenemos una gran variedad de Layouts, dependiendo de como posicionen los elementos en la pantalla. LinearLayout apila sus “hijos” (En inglés nos encontraremos terminología como “parents” and “children”, en este caso el LinearLayout es padre del TextView y el TextView es hijo del LinearLayout, bastante intuitivo). En este caso, se apilan de forma “vertical”, ya que es como lo indicamos en uno de sus tributos “android:orientation”, si pusiesemos “horizontal” los elementos se colocarían de izquierda a derecha, ahora mismo están colocados de arriba a abajo.
Otros ejemplos de Layouts:
RelativeLayout: Todos los elementos van colocados en relación con otro elemento cercano y/o su padre. De esta forma, podemos colocar una imagen a “15px” de un texto.
AbsoluteLayout: Coloca los elementos en posiciones absolutas dentro de la pantalla. De esta forma podríamos poner una imagen en la posición (100,100)px. Tenemos que tener en cuenta que el punto (0,0) está en la parte superior izquierda de la pantalla.
TableLayout: Con este contenedor, podemos generar tablas.
Pasa saber más sobre los Layouts pinchad en este enlace:
Dependiendo del tipo de aplicación que queramos realizar, pues usaremos un Layout u otro.
Sigamos analizando los atributos de nuestro LinearLayout
android:layout_width=“fill_parent”
android:layout_height=“fill_parent”
Estos atributos nos permiten indicar el tamaño del Layout (o de los elementos), en este caso le indicamos que “llene al padre”, es decir, toda la pantalla estará ocupada por este Layout. Otro valor que le podemos asignar a este atributo es “wrap_content”, mediante el cual, el tamaño del Layout se ajustaría al contenido. Es posible poner valores númericos (en pixels) para indicar tamaño.
Hay una gran cantidad de atributos que podemos asignarles a las vistas, para ver una lista completa y detallada lo mejor es visitar la Guía de Referencia.
Dentro del LinerLayout, podemos ver el siguiente código:
<TextView
android:layout_width=“fill_parent”
android:layout_height=“wrap_content”
android:text=“@string/hello”
/>
Este es un elemento TextView, que nos permite insertar un texto en nuestra vista. Es un elemento simple y no tiene mucha complejidad. Nos volvemos a encontrar con los atributos de alto y ancho además de un nuevo atributo: android:text. Aquí es donde va el texto que aparecerá en la pantalla, podemos poner un texto “literal”, o hacer referencia a un texto guardado en otro archivo (en este caso el archivo string.xml dentro de la carpeta values). Esta última forma es la más elegante a la hora de poner texto estático en nuestra aplicación.
Para terminar, cerramos la etiqueta del LinearLayout
</LinearLayout>
y ya tendríamos nuestro XML bien formado.
En siguientes artículos veremos algunos ejemplos más complejos de vistas.
Tags: android
10 Responses to “Interfaz de usuario en Android”
-
bet Says:
March 13th, 2009 at 6:02 ammuy claro, como siempre!
-
Marketing Mega Virtual Says:
March 13th, 2009 at 12:45 pmHola , como estas, queria felicitarte, pues tu pagina es excelente , me encantan los contenidos , digno de su publicacion ,si queres , entra en mi sitio , y dejame un comentario , y si te interesa , hacemos intrcambio de links , banners , cualquier cosa , avisame , te dejo mi email tvinternet08@gmail.com , te mando un abrazo .
El equipo de Marketing Mega Virtual
-
ValeSalazar Says:
March 27th, 2009 at 3:27 pmbuena guia para comenzar,
hola que tal estoi empezando a desarrollar aplicaciones para este sistema operativo que se ve que viene con grandes cosas interesantes…
i pues nadamas para estar en contacto y ver la posibilidad de intercambiar codigo opiniones ideas mi correo es luisvalentin4@hotmail.com
i por hay si saben algo de como hacer una replicacion de una BD (sqlite) instalada en el android .. replicarla en un servidor Local..
ps les agradeceria mucho..
stamos en contactoo
-
ValeSalazar Says:
March 27th, 2009 at 3:30 pmcreo que di un correo maligno jeje (microsoft) igual pueden mandrme ai info.. o si lo desean luisvalentin4@gmail.com
-
jbeer Says:
March 28th, 2009 at 1:24 pmMuy buenas ValeSalazar, tengo más artículos relacionados con Anroid en
http://www.brighthub.com/mobile/google-android/topics/guides.aspx
Respecto a lo de replicar una base de datos sqlite a un servidor local, podrías ser más específico? Quieres migrar sqlite a mysql por ejemplo? O quieres obtener las bases de datos internas del móvil? Hasta lo que yo he podido investigar, el dispositivo móvil tiene algún tipo de protección contra lectura, vamos, que no se pueden sacar archivos internos o de sistema.
Cualquier informacion adicional, estate atento a esta página, que pronto subiré más tutoriales, lo mismo que la página “The Bright hub”.
Un saludo
-
ValeSalazar Says:
April 15th, 2009 at 2:53 pmDisculpa la tardanza (vacaciones) pues mas que nada respecto a lo de replicacion me refiero a la informacion que guardo en una basededatos de una aplicacion que hice, mandarla a un servidor local (una pc con Mysql o igual sqlite)..
es decir hice una aplicacion que guarda info en una basededatos
esa info mandarla a una pc para posterior mente explotar esa info..
mi aplicacion ya guarda mui bien la info, puedo consultar mi basededatos con condroid de echo la tengo funcionando en el G1 HTC
-
jbeer Says:
April 16th, 2009 at 12:18 amBuenas ValeSalazar
Bueno, yo en futuros proyectos tendré que hacer algo por el estilo. Supongo que habría que implementarse algún sistema de sincronización. No se si hay algo implementado, puedes probar hacerlo manualmente. ¿Puedes conectarte desde el móvil al servidor?
En mi PFC enviaba, mediante Bluetooth, una serie de información, desde un dispositivo móvil (J2ME) hasta un servidor (J2SE) con Bluetooth. Hacía un streaming simple, enviaba los datos a pelo y en el servidor los recogía y los trataba para insertarlos en la base de datos.
Si encuentro algo interesante mientras investigo, te lo haré saber.
Un saludo
-
DroidDraw | deMalagana Says:
April 16th, 2009 at 12:46 am[...] nuestro último artículo: Interfaz de usuario en Android veíamos como usar el XML para crear interfaces de usuario. De esta forma separábamos [...]
-
ValeSalazar Says:
April 18th, 2009 at 11:42 amSi tengo creado un programa mediante sockets tcp el cual uso para enviar datos desde mi cliente al servidor y guardarlos en una base de datos pero solo en J2SE.
He intentado hacer esta misma aplicacion sobre Android pero aun no tengo resultados; hasta el momento solo me limito a guardar mi info dentro de el G1..
Igual yo si encuentro mas info hay intercambiamos tal vez te sirva para tus futuros proyectos.
/*
*por cierto… DroidDraw se ve que esta bueno no lo he usado mucho
*pero facilitara el desarrollo grafico de las aplicaciones
*/ -
jbeer Says:
April 20th, 2009 at 12:46 amTodavía no he trabajo con sockets en Android, así que no tengo mucha idea de como estará implementado.
Respecto a DroidDraw, en efecto, es una pequeña maravilla. Viene muy bien para ver como Android monta gráficamente la aplicación.
Pronto escribiré algo sobre las bases de datos de Android
