Construyendo una UI básica para Android

sekthdroid Leave a comment

Buenos días, hoy vamos a seguir con los tutoriales básicos de Android para avanzar un poco en lo que a desarrollar en Android se refiere. Aquí veremos como se diseña una pequeña interfaz gráfica para nuestro primer proyecto (el cual ayer realizamos en el tutorial).

Aquí definiremos un poco como funciona Android respecto a las Interfaces Gráficas de Usuario (GUI), el lenguaje usado para hacerlas, y algunos de los atributos mas importantes

Dicho esto, podemos empezar.

Las interfaces gráficas de usuario en Android son construidas usando una jerarquía de View y Viewgroups. Los objetos View son elementos de la interfaz de usuario como botones o campos para introducir texto, y los objetos Viewgroups son contenedores invisibles que especifican como los View hijos deben mostrarse, ya sea en celda o verticalmente por ejemplo.

Android provee un vocabulario en XML que corresponde a las subclases de View y Viewgroups por lo que podemos definir nuestra interfaz de usuario en XML usando una jerarquía de elementos de la GUI.

  • Crear un Linear Layout

    Para empezar vamos a crear un LinearLayout a nuestra aplicación, para ello abriremos Eclipse y abriremos el archivo activity_main.xml, el cual nos abrirá la vista gráfica para crear la interfaz, la cual nos puede sacar algo de quicio en aplicaciones mas complejas, por lo que iremos al editor de XML, en el cual veremos para empezar un RelativeLayout, el cual se agrega automáticamente al crear la BlankActivity.

    Lo primero que haremos es borrar el TextView que nos aparece (el que contiene el “Hello World”) y cambiaremos el RelativeLayout a LinearLayout, y agregaremos un atributo al LinearLayout, el atributo android:orientation=”horizontal”. El resultado será algo como lo siguiente:

    			<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	    	xmlns:tools="http://schemas.android.com/tools"
	    	android:layout_width="match_parent"
	    	android:layout_height="match_parent"
			android:orientation="horizontal" >
			</LinearLayout>

    LinearLayout es una subclase de Viewgroup que establece a sus “hijos” orientación horizontal, como se especifica en el atributo android:orientation. Cada elemento del LinearLayout aparecerá en la pantalla en el mismo orden en el que esté definido en el XML.

    Los otros 2 atributos, android:layout_width y android:layout_height son requeridos por todos los View para especificar su tamaño.

    Como el LinearLayout es el layout raiz, debería rellenar todo el area de la pantalla que le sea posible a la aplicación poniendo a los atributos android:layout_width y android:layout_height el valor de “match_parent”. Este valor declara que la vista debería expandirse en ancho y altura para que sea igual a la altura y anchura de su vista padre.

  • Añadir un Campo de Texto

    Para crear un campo de texto editable, debemos añadir un elemento EditText dentro del LinearLayout.

    Como todo objeto View, debemos definir una serie de atributos XML para especificar las propiedades de ese objeto EditText.
    Aquí vemos la declaración de este elemento dentro del LinearLayout

    			<EditText 
        	android:id="@+id/edit_message"
        	android:layout_width="wrap_content"
        	android:layout_height="wrap_content"
        	android:hint="@string/edit_message"/>

    Sobre estos atributos vamos a ver un poco para que sirven

    • android:id

      Proporciona un identificador único al View, que podemos usar para referenciar el objeto desde el código de la aplicación, para poder tratar con la información que introduzcamos dentro, ya sea leerla o modificarla (lo veremos en la siguiente lección).
      El símbolo (@) es requerido cuando referenciamos algún objeto o recurso desde el XML. Está seguido por el tipo de recurso (id en este caso), una barra “/” y el nombre del recurso (edit_message).
      El símbolo (+) antes del tipo de recurso es necesario solo cuando se está definiendo el ID de un recurso por primera vez.

    • android:layout_height y android:layout_width

      En vez de usar tamaños específicos para el ancho y la altura , el valor wrap_content especifica que el view debería ser tan grande como sea necesario para ajustar el contenido. Si hubieramos usado match_parent, entonces el EditText habría rellenado la pantalla, porque habría ajustado el tamaño a su elemento padre (LinearLayout).

    • android:hint

      Es una string por defecto que se muestra cuando el campo de texto está vacío. El valor @string/edit_message hace referencia a un string que está en otro archivo aparte. Como se refiere a un recurso concreto (no como los identificadores o ID), no necesita el símbolo (+). Sim embargo como no hemos definido ningun recurso string aun, veremos un error si compilamos. Lo arreglaremos en el siguiente punto.

  • Añadir un recurso String

    Cuando tenemos que agregar texto en la interfaz de usuario, deberíamos especificar cada string como recurso. Esto permite que podamos manejar todas las strings desde una localización exacta, que hará mas facil encontrar y actualizar. Esto tambien es usado para hacer que tu aplicación tenga varios idiomas dando definiciones alternativas para cada recurso string.

    Por defecto, nuestro proyecto incluye un archivo de recursos string en res/values/strings.xml. Abrimos este archivo y borramos el elemento "hello_world". Entonces añadiremos uno nuevo llamado "edit_message" y le daremos como valor “Introduzca un mensaje”.

    Ya de paso, añadiremos un string “Enviar” para el botón que agregaremos a continuación, el cual llamaremos "button_send".

    Tras estos pasos, el archivo strings.xml quedará algo así:

    			<resources>

			    <string name="app_name">My First App</string>
			    <string name="menu_settings">Settings</string>
			    <string name="title_activity_main">MainActivity</string>
			    <string name="edit_message">Introduzca un Mensaje</string>
			    <string name="button_send">Enviar</string>
		
			</resources>

  • Agregando un botón

    Ahora agregaremos un Button al layout, inmediatamente siguiendo al elemento EditText

    			<Button 
		        android:layout_width="wrap_content"
		        android:layout_height="wrap_content"
		        android:text="@string/button_send" />

    El ancho y altura se establecen con el valor "wrap_content" ya que el boton será tan grande como necesite para ajustar el texto del botón. Este botón tampoco necesita android:id ya que no lo referenciaremos en el código de la actividad.

    Esto funciona bien para el botón, pero no para el campo de texto, ya que si el usuario introduce un texto grande se ajustará según el texto que contenga. Para ello, podríamos rellenar el espacio de pantalla a lo ancho sobrante con el campo de texto, lo cual podemos hacerlo dentro del Linearlayout con el atributo android:layout_weight.

    El valor weight es un número que especifica la cantidad de espacio restante que cada view debería consumir, relativo a la cantidad consumida por sus elementos hermanos.

    El weight por defecto para todas las views es 0, así que si especificamos cualquier valor mayor que 0 a una sola view, entonces la view rellenará todo el espacio restante despues de que a las demás views se les haya dado el espacio que necesitan. Por lo tanto, a nuestro elemento EditText, le daremos un weight de 1 y dejaremos al botón sin weight.

    			<EditText 
	        android:id="@+id/edit_message"
	        android:layout_width="wrap_content"
	        android:layout_height="wrap_content"
	        android:layout_weight="1"
	        android:hint="@string/edit_message"/>

    Para mejorar la eficiencia del layout cuando especificamos un wwight, deberíamos cambiar el valor del ancho del EditText para que sea 0 (0dp). Ajustando este valor mejora el rendimiento del layout porque usar "wrap_content" como ancho requiere que el sistema calcule un ancho que es definitivamente irrelevante porque el valor que asignamos a weight requiere otro calculo de anchura para llenar el espacio sobrante.

    			<EditText 
	        android:id="@+id/edit_message"
	        android:layout_width="0dp"
	        android:layout_height="wrap_content"
	        android:layout_weight="1"
	        android:hint="@string/edit_message"/>

    • Finalmente, el layout nos debería quedar así:

    		<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	    xmlns:tools="http://schemas.android.com/tools"
	    android:layout_width="match_parent"
	    android:layout_height="match_parent"
		android:orientation="horizontal" >
		
	    <EditText 
	        android:id="@+id/edit_message"
	        android:layout_width="0dp"
	        android:layout_height="wrap_content"
	        android:layout_weight="1"
	        android:hint="@string/edit_message"/>
	    <Button 
	        android:layout_width="wrap_content"
	        android:layout_height="wrap_content"
	        android:text="@string/button_send" />
		</LinearLayout>

Ahora podemos ejecutar finalmente nestra aplicación, pulsando Run en la barra de herramientas, y viendo el resultado.

En esta lección hemos visto un poco los atrbutos mas importantes que acompañan a cada layout, como son el ancho, el alto, el peso o weight, y como se relacionan entre ellos para coordinarse y mejorar el rendimiento de nuestra aplicación.

Sin mas, cualquier corrección o aporte es bienvenido!

Saludos!!!