Saltar la navegación

9.1. Activity & Layout

Los ficheros Activity

Cuando se genera un proyecto, estaremos delante de nuestra primera activity, llamada MainActivity. Una Activity es cada una de las pantallas que ve el usuario, en ellas se declaran los métodos (funciones) que se pueden hacer. Por ejemplo, imaginemos que la aplicación es de cocina, pues una activity sería cortar las verduras, hervir, freír, etc. Las activities tienen dos partes, la lógica y la visual (los layouts que veremos a continuación).

En la parte lógica, que la desarrollaremos en Kotlin, daremos respuesta a cada unas de las interacciones del usuario. Si seguimos con el ejemplo anterior, imaginemos que el usuario pulsa el botón de freír, este evento llegaría a nuestra clase y ahí ejecutamos la acción. No quiero entrar más en detalle, porque lo veremos más tarde.

La activity es básicamente una clase kotlin (.kt) que extiende de AppCompatActivity, que tiene los métodos necesarios para poder comunicarnos con Android. Así que, por defecto, siempre tendremos la función “OnCreate” que será el encargado de crear nuestra actividad y asignarle un layout:

package com.example.appejemplo

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

Layout

El layout es la segunda parte de la actividad, la interfaz. En ella se agregarán los componentes como los botones, imágenes y demás. Estos archivos son muy simples y se pueden completar arrastrando los componentes o picándolos en XML.

Para acceder a él, debemos ir a la estructura del proyecto, que está en el lado izquierdo en la ruta app/res/layout.

Con hacer doble click sobre el archivo se nos abrirá y veremos algo así:

<?xml version="1.0" encoding="utf-8"?>
<relativelayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    tools:context=".MainActivity">
<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />
</relativelayout>

El código anterior, generado por defecto, está en formato XML anidado. Se observa un elemento padre “RelativeLayout” y dentro un “TextView” que es un componente muy básico para mostrar texto no editable en la pantalla. Lo que se conoce como "Etiqueta".

Si se pulsa en el icono superior de la derecha, con la etiqueta Split, podremos ver el diseño de la vista a tiempo real.

Trabajando con los Layouts

Ahora vamos a ver la parte más visual del layout, para ello, en la parte superior derecha, se muestran tres botones: "Code", "Split" y "Design". Desde aquí podemos cambiar la forma de trabajar con las vistas. Si nos vamos a Design, veremos que el código cambia por la vista (a la derecha) y han aparecido nuevas columnas (a la izquierda).

Desde aquí, si podemos manipular los componentes que están dentro de la vista, e incluso añadir nuevos.

Paso 1

Vamos a coger un botón de la caja de componentes que está en la esquina superior izquierda.

Paso 2

Botón ubicado
Elaboración propia (CC BY-NC-SA)


Pulsamos en el botón y lo arrastramos a la parte de la vista que queramos. Comprobarás que esto último es imposible. ¿Por qué?

El botón debe tomar referencias de algún otro elemento. Lo normal es que se fije en una posición relativa a los bordes pero, como veremos más adelante, por eficiencia no es lo más recomendable.

Para este ejemplo, usaremos los bordes:

  1. Pulsa en cada círculo ubicado en los laterales del botón y arrástralos a cada borde.
  2. Con dos círculos que posiciones, será suficiente.
  3. Ya puedes colocar el botón donde desees.

Paso 3

Con el botón aún seleccionado, nos aparecerán una serie de campos en el lateral derecho, estos, son los atributos del botón.

Los podemos editar desde aquí o desde el XML. Por facilidad, lo haremos desde aquí, pero para mayor rapidez se hace desde el código, pues es la forma más óptima para dejar nuestras vistas impolutas.

Los tres atributos básicos que debemos añadir:

  • ID: Es el identificador único del componente, con él, podremos definir en nuestra activity dicho componente para poder trabajar con él. Como es un botón que nos hará cambiar de activity, lo llamaré “btnChangeActivity”.
  • layout_width: Este campo hace referencia a la anchura del componente. Este campo es obligatorio y se puede fijar la anchura a través de dos opciones:
    • Wrap_content” que añadirá una anchura lo suficientemente grande para incluir todo el contenido (en este caso el texto “BUTTON”)
    • Match_parent” que cogerá todo el espacio que su padre (en este caso el RelativeLayout) le permita.
  • layout_height: Permite asignarle la altura a cada componente. Sigue el mismo comportamiento que el “layout_width”.

Para este ejercicio se dejarán la anchura y altura en “wrap_content” pero se puede cambiar por “match_parent” para comprobar y entender el comportamiento.

Paso 4

Finalmente, obtenemos algo como esto:

Botón en modo wrap_content
Elaboración propia (CC BY-NC-SA)

Creado con eXeLearning (Ventana nueva)