(ANDROID) Creación de la interfaz gráfica básica

Después de estar una semana sin portátil porque el ventilador dijo basta vuelvo a crear contenido para este blog.

En este artículo lo que explicaré de forma básica es como crear la interfaz gráfica, añadiendo elementos y poder acceder a ellos a través de código.

El diseño de las interfaces se pueden hacer o bien por código o mediante un xml donde pongamos inicialmente todos los componentes que queramos tener en nuestra interfaz (aunque posteriormente por código se puede también añadir o quitar). Lo bueno de hacer la interfaz mediante xml es que podemos ir viendo como quedará y además tenemos separado la interfaz con el comportamiento del mismo, por lo que podemos realizar cambios en la interfaz y no tener que tocar nada en el código que lo maneja.

Para añadir un xml a nuestro proyecto sobre el mismo desplegaremos el menú contextual con el botón derecho >> New >> Android XML File. En el campo "File" pondremos el nombre que queramos que tenga la interfaz y con la cual accederemos en nuestra aplicación a ella, por ejemplo yo la llamaré "l_page2".  Una vez elegido el nombre del archivo daremos a Finish para finalizar la creación del archivo.

Si ahora desplegáis la carpeta "res" y luego la carpeta "layout" veréis que aparece el nuevo archivo creado junto a otro llamado "main". Ese archivo está porque cuando se crea un proyecto se generan unos archivos iniciales para que el proyecto ya sea ejecutable. Se crea ese archivo que es la interfaz de la primera pantalla que se verá al ejecutarse. El código asociado a la primera pantalla (Activity) es "MainActivity.java" que está dentro de la carpeta "srt" y dentro del paquete de nuestra aplicación.

Ahora vamos a construir una interfaz sencilla en "l_page2". Lo abrimos y se nos abre la herramienta para construir la interfaz visualmente mediante el arrastre de componentes del listado de "Palette". Para este tutorial estoy usando la versión de Android 4.0.3 por lo que tal vez los controles sean diferentes a los que pongáis en otras versiones. 

Lo que primero haremos será añadir un layout donde poder añadir nuestros controles y posteriormente poder acceder al mismo y añadir/quitar elementos por código. En otro artículo ya entraré en detalle en los layouts pero por ahora utilizaremos el "LinearLaoyut (Vertical)" que añade cada uno de los elementos verticalmente (uno debajo del otro), y el "LinearLayout (Horizontal)" que añade cada uno de los elementos horizontalmente (todos en fila uno detrás del otro).

Usaré un LinearLayout (Vertical) el cual añadiré arrastrando desde la Palette hasta la vista de nuestra interfaz a la derecha. Para ver las propiedades de un elemento hay que seleccionarlo y en la pestaña de la derecha "Properties" aparecerán las propiedades del elemento de la interfaz, si no saliera se despliega el menú contextual del elemento, se va a la última opción "Show in" y luego se selecciona "Properties".

En todos los elementos que añadamos hay que ponerle un nombre único para poder luego acceder a ellos. Para cambiar el nombre hay que cambiar la propiedad ID. En el ejemplo yo voy a nombrarlo "@+id/page2_layout1". En este layout vamos a añadir un control para que muestre texto (TextView) y un botón (Button). Para ello tendremos que arrastrarlos desde la paleta de controles a dentro del layout que hemos creado. Os dejo a vosotros la búsqueda de los controles necesarios para que os familiaricéis con la paleta. Tendría que quedar algo parecido a la siguiente imagen:

Ahora tendremos que cambiar los ID de ambos controles que acabamos de añadir, al TextView lo llamo "@+id/page2_txthola" y al botón "@+id/page2_btndimehola".

Cada control puede tener diferentes propiedades, pero la mayoría comparten unas comunes como son las que explicaré a continuación: 

• Background: es el fondo que tendrá el control, se puede añadir por ejemplo un drawable que representa un elemento visual. Inicialmente solo tenemos el del icono de la aplicación, pero se pueden añadir más añadiendo imágenes a la carpeta "drawable" que está en la carpeta "res" de nuestro proyecto (si no está se puede crear). En otro artículo ya hablaré del tema de las imágenes, porque se puede o bien añadir una imagen para todas los tipos de dispositivos o diferenciarlo según el tamaño del dispositivo donde se vea la aplicación.
• Rotation: rota el control visualmente los grados que se le indican.
• Text: es el texto que aparece en el control. Podemos o bien introducir un texto tal cual o añadir un "string" que nos servirá para luego poder tenerlo traducido en varios idiomas. Para añadir un string debemos darle al botón con los tres puntitos de la derecha en la propiedad y darle a "new string" o seleccionar uno que ya hubiéramos creado. Podemos ir a cambiar los valores de esos string en el archivo strings.xml dentro de la carpeta "values" qué está en la carpeta "res" de nuestro proyecto. De esta forma podríamos crear el texto "Aceptar" y utilizarlo en varios botones, y posteriormente en el xml cambiar "Aceptar" por "Ok" y cambiaría para todos los elementos que utilizaran ese string.
• TextColor: representa el color del texto. Para añadir un nuevo color habrá que crear un "Android XML File" dentro de la carpeta "values" en "res". En "Resource Type" hay que seleccionar "Values" y se le da un nombre al archivo que contendrá los colores, por ejemplo "Colores". Posteriormente se abre el archivo creado y se añade un elemento "Color" en el botón "Add". En el elemento de color que creamos se tendrá que poner un nombre y un código de color RGB.
• En el apartado Misc de la pestaña propiedades hay una serie de propiedades para controlar donde se mostrará el control. Layout gravity indica donde se sitúa el control dentro del elemento que lo contiene, por ejemplo podríamos poner que el botón se situara en el centro de la pantalla horizontalmente poniendo "center". Esta disposición tiene relación con el elemento que lo contiene, no es lo mismo poner que esté centrado dentro de un layout vertical que horizontal, en uno se centrará verticalmente y en el otro horizontalmente (lo mejor probar y ver a lo que me refiero). Layout Height y Layout Width representa el alto y ancho del control, podemos hacer que se adapte al contenido (wrap_content) o se adapte al contenedor donde está haciéndose más grande si fuera necesario (fill_parent). Los layout margin XXXX representan la separación que hay entre el control y su alrededor, por ejemplo si queremos que del elemento superior esté a 15dp, pondremos en Layout margin top el valor 15dp.

Hay muchas más propiedades, pero lo mejor es ir probando cada uno o mirar en la API de Google para más detalles.

Bien, ahora lo que hay que hacer es darle comportamiento a estos controles, hacer que cuando se pulse  el botón en el textview aparezca el texto "hola mundo".  Lo que tendremos que hacer es crear un Activity dentro de nuestro proyecto para que se vea nuestra interfaz y la podamos controlar. Simplemente hay que seleccionar nuestro proyecto, ir al menú contextual y luego New >> Android Activity. Lo importante de la pantalla que aparece es poner el nombre y darle a finish, para el ejemplo pondré "Page2". La Activity se crea inicialmente con el siguiente código:

El método "onCreate" es el primero que se cree cuando se cree la actividad. Ahí tendremos que poner nuestro código que se ejecutará al inicio de la actividad, por ejemplo, indicaremos que layout tiene que mostrar. Simplemente añadiremos al final del método la instrucción "setContentView(R.layout.l_page2);". Quedaría algo así:

Con esto lo que hemos hecho es que cargue en esa actividad el layout "l_page2" que hemos creado. Ahora lo que tendremos que hacer es obtener la referencia al textview y el button para poder darle un comportamiento. En el siguiente código se muestra el código final, solo destacar que para obtener la referencia a un control de la interfaz tendremos que utilizar el método "findViewById" al cual le pasamos el ID que identifica el control deseado y nos lo devuelve. No explicaré la teoría de eventos y listeners porque se supone que hay que tener una base con Java para poder programar en Android y no es el fin de este artículo.

Tal como tenemos el proyecto, si ahora le damos a ejecutar en un terminal no mostrará nuestra actividad, porque el programa iniciará la actividad que se creó automáticamente cuando creamos el proyecto. Podríamos haber hecho todo dentro de la actividad y layout que se crean por defecto, pero me parecía más correcto hacerlo todo nosotros aunque quede más raro. Para poder hacer que cuando se inicie la aplicación se abra nuestra actividad que hemos creado abriremos la actividad que se crea por defecto "MainActivity" dejaremos la actividad según se muestra en la siguiente imagen.

Lo que se hace es crear un objeto Intent que será el encargado de iniciar la actividad, en el constructor del Intent se le pasa la actividad que lo llama y como segundo parámetro la clase de la actividad que debe iniciar. El método startActivity simplemente inicia la actividad finalmente (En otro artículo hablaré más sobre los Intent y como pasar información entre actividades).

Por último, solo hay que ejecutar la aplicación en un dispositivo virtual o sobre un móvil conectado a nuestro ordenador para ver como ha quedado.