Bienvenido a la tercera parte de la introducción de Desarrollo de Aplicaciones para Android, en donde continuaremos el post anterior y veremos los diferentes componentes que contamos para diseñar nuestras pantallas y como interactuar con ellas en la parte lógica de nuestro proyecto.
Introducción al Desarrollo de Apps para Android – Parte 3
Layouts
Estos elementos están ubicados dentro de la carpeta «layouts» los cuales cuentan con una extensión .xml la cual es el formato que vamos a estar trabajando. Estos tienen una escritura muy similar al HTML ya que trabaja con etiquetas las cuales se van anidando unas dentro de otras.
Para trabajar con nuestro layout debemos abrir el archivo que se llama «activity_main.xml» en donde para interactuar con la parte gráfica existen dos opciones, la parte de diseño en donde se pueden quitar o poner los elementos con tan solo arrastrarlos de la paleta de componentes al layout o también contamos con una segunda parte que esta basada en código XML en donde tal como explicamos en el post anterior se puede acceder haciendo click en la pestaña «Text».
Para añadir un elemento mediante código XML como por ejemplo un botón, simplemente basta con colocar el siguiente código el cual es el mismo que se crea por defecto al momento de agregarlo desde la pestaña de diseño:
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/textView"
android:layout_toEndOf="@+id/textView"
android:layout_marginTop="102dp"
android:id="@+id/button" /> Elementos
Existen varios elementos de los cuales disponemos, y cada uno de ellos cuentan con su propio propósito y propiedades, vamos a ver algunos de ellos.
- RelativeLayout: Este elemento es el que se crea por defecto al momento de generar una actividad nueva el cual es el padre del resto de los componentes que se ingresen, esto lo podemos ver ingresando a la pestaña «Text».
El RelativeLayout esta basado en ubicar los elementos que tenga dentro de forma relativa uno de otros, por lo que se hace mas complejo acomodarlos y colocarlos de forma que a nosotros nos guste ya que no presenta un orden especifico. - LinearLayout: Este elemento a diferencia del RelativeLayout se le puede asignar una orientación vertical u horizontal para que ordene los elementos que tiene dentro. Para realizar este cambio solo debemos cambiar el elemento RelativeLayout por LinearLayout y a continuación agregar la propiedad android:orientation=»horizontal« para indicarle que debe ordenar los elementos que tenga dentro de forma horizontal o si necesitamos que sea vertical solamente lo cambiamos por «vertical». Es muy importante saber que se pueden colocar varios LinearLayout uno dentro de otros para así lograr un diseño mas a medida.
- TextView: Este elemento se utiliza básicamente para mostrar información que sea necesaria para la aplicación, el cual puede ser modificado sin problemas alterando la propiedad android:text dentro del apartado «Text» de nuestro layout o bien sino mediante una cierta lógica lo cual lo veremos mas adelante.
- EditText: El control EditText (caja de edición de texto) es uno de los medios que tiene el usuario para ingresar datos a la aplicación por esto es que se vuelve uno de los elementos mas indispensables al momento de interactuar con el mismo. Este cuenta con varias propiedades pero las 2 mas importantes son android:hint, que es un texto que se va a ingresar por defecto el cual solo lo va a ver el usuario si es que aun no a escrito nada, la otra propiedad importante es android:inputType el cual es fundamental al momento de agregar este elemento ya que aquí es donde le especificaremos de que tipo va a ser este campo (texto, textPassword, number, date, etc).
- Button: Este es un tipo botón normal, el cual se le puede asignar un texto y puede contener una imagen la cual debe ser del tipo icono entre otras propiedades. Es utilizado para realizar acciones por lo que este elemento también es imprescindible para la aplicación al momento de que el usuario interactua con la misma. Se le puede asignar una función agregando la propiedad android:onClick=»ejecutar» en donde «ejecutar» es el nombre de la función que debe estar creada en el MainActivity.java que va a ser llamada al momento de ser presionado.
Modificar contenido de un TextView mediante una acción
Para modificar el contenido de un TextView debemos editar el archivo MainActivity en donde le indicaremos que cuando se presione un botón se modifique el contenido que tiene.
Para realizar esto debemos primero que nada crear una función con el nombre que le especificamos anteriormente en la propiedad android:onClick del botón en donde en este caso debe llamarse «ejecutar» en donde nos pedirán importar la clase View para que esto funcione.
public void ejecutar(View v){
} Luego de realizar esto debemos obtener el elemento TextView a modificar haciendo referencia a el identificador que le pusimos en los pasos anteriores el cual nosotros lo dejamos con el valor que viene por defecto el cual es «textView».
Par realizar esto debemos hacer uso de la función findViewById la cual es global dentro de nuestro proyecto y se hacer uso desde cualquier actividad.
TextView textView = (TextView) findViewById(R.id.textView);
Por último luego de que ya tenemos este elemento debemos hacer uso de la función predefinida setText() la cual esta disponible en casi todos los elementos con los que contamos.
textView.setText("Este es el nuevo texto a mostrar"); Esta función completa debería de quedar de la siguiente manera:
public void ejecutar(View v){
TextView textView = (TextView) findViewById(R.id.textView);
textView.setText("Este es el nuevo texto a mostrar");
} Para verificar de que esto funciona correctamente debemos ejecutar nuestro emulador y correr nuestra aplicación tal como lo explicamos en el post anterior. Luego de esto lo único que resta por hacer es presionar en el botón y listo, el texto de nuestro TextView cambio por el que nosotros le definimos.
Conclusión
Espero que les haya gustado este post sobre la parte 2 del mini curso de Introducción al Desarrollo de Apps para Android, como podan ver es muy simple modificar el contenido de un elemento mediante un evento. Lo que si deben tener en cuenta al momento de diseñar es que si utilizan los RelativeLayout los elementos se acomodan solos pero se hace mas difícil ajustarlos a medida a diferencia que en el LinearLayout ya que puedes colocar unos dentro de otros y manera cada uno de ellos con diferentes orientaciones.
Si te ha gustado este post sigue atento nuestra serie de ‘Introducción al Desarrollo de Apps para Android – Parte 4’ que publicaremos pronto.