Si te estás lanzando al mundo del desarrollo móvil, lo primero que te vas a encontrar es que montar la interfaz de usuario es como jugar con piezas de Lego. En el universo de Android, cualquier elemento que veas en pantalla se conoce como View, que básicamente es un rectángulo que ocupa un espacio y que puedes tunear a tu gusto cambiando colores, tamaños o tipografías.
Para que no te pierdas, es fundamental entender que Android separa las cosas: por un lado tienes el archivo layout (XML), que es donde dibujas la interfaz, y por otro la Activity (Java), que es el cerebro que le dice a esos dibujos qué deben hacer cuando el usuario interactúe con ellos. Sin esta pareja, la app sería simplemente una imagen estática sin vida.
Los tres pilares de la interfaz: TextView, EditText y Button
Para empezar a montar algo decente, hay tres componentes que vas a usar sí o sí. El primero es el TextView, que sirve básicamente para soltar texto en pantalla; ya sea para dar una instrucción, mostrar un resultado o simplemente poner un título. No permite que el usuario escriba, es puramente informativo.
Luego tenemos el EditText, que es el hermano interactivo del TextView. Aquí es donde el usuario puede teclear datos, como su nombre de usuario o una contraseña. Un truco muy útil es la propiedad hint, que permite poner un texto sugerido que desaparece en cuanto el usuario empieza a escribir, evitando así llenar la pantalla de etiquetas innecesarias.
Por último, el Button es el encargado de disparar las acciones. Es el elemento que el usuario pulsa para enviar un formulario, realizar un cálculo o pasar a otra pantalla. Para que funcione, necesitamos vincularlo en el código Java mediante un ID único y asignar un escuchador de eventos, comúnmente el setOnClickListener, que es el que se queda «atento» a cuando ocurre el clic.
Manos a la obra: Ejemplo práctico de una calculadora de suma
Imagina que queremos hacer una app sencilla que sume dos números. Primero, en el archivo activity_main.xml, arrastraríamos dos controles de tipo Number (que son una variante de EditText) y un botón. Es vital asignarles IDs claros, como et1 y et2, para que luego no nos volvamos locos buscándolos en el código.
Una vez diseñada la parte visual, saltamos al archivo MainActivity.java. Lo primero es declarar las variables globales de tipo EditText y TextView. Para que Java sepa de qué estamos hablando, usamos el método findViewById, que hace de puente conectando el ID del XML con nuestra variable en el código. Si no haces este paso, la app se cerrará con un error al intentar acceder a un objeto que no existe.
La lógica de la suma es bastante directa pero requiere cuidado con los tipos de datos. Como el EditText siempre nos devuelve el texto como un String, no podemos sumarlos directamente porque concatenaría los números en lugar de sumarlos. Por eso, usamos Integer.parseInt() para convertir ese texto en números enteros, hacemos la operación matemática y luego convertimos el resultado de nuevo a String mediante String.valueOf() para poder mostrarlo en el TextView.
Llevando la interfaz al siguiente nivel: Vistas Personalizadas
A veces, los componentes que vienen de serie no son suficientes y queremos algo más «pro». Para ello, Android nos permite crear vistas personalizadas extendiendo la clase View. Esto es ideal si quieres dibujar algo desde cero, como un control de volumen analógico o un gráfico complejo, utilizando el método onDraw(), que nos da acceso a un Canvas para pintar lo que queramos.
Si necesitas un control más complejo pero basado en piezas que ya existen, la mejor opción son los componentes compuestos. Esto consiste en crear una clase que extienda de un Layout (como un LinearLayout) y agrupar dentro varios widgets. Por ejemplo, podrías crear un campo de texto con un botón de borrar integrado que puedas reutilizar en toda tu aplicación sin tener que rediseñarlo cada vez.
Técnicas avanzadas de modificación y renderizado
Si ya existe un componente que hace casi lo que necesitas, no hace falta empezar de cero; puedes subclasificar el widget y anular solo el método que te interesa. Un ejemplo clásico es crear un EditText con líneas guía, donde solo sobrescribes el método onDraw() para pintar líneas horizontales antes de que se renderice el texto original.
Es crucial entender el ciclo de vida de una View. El método onMeasure() es el que decide cuánto espacio va a ocupar el componente en la pantalla. Si estás creando una vista desde cero, debes llamar a setMeasuredDimension(), o de lo contrario Android lanzará una excepción porque no sabrá cómo ajustar el elemento al contenedor.
- onFinishInflate(): Se ejecuta cuando la vista y sus hijos se han cargado desde el XML.
- onSizeChanged(): Útil para reajustar gráficos cuando el usuario gira la pantalla.
- onTouchEvent(): Fundamental para gestionar gestos táctiles personalizados.
Al final del día, dominar la interacción entre el XML y Java, saber gestionar la conversión de datos en los EditText y entender cómo extender las clases de View te permite pasar de crear pantallas sencillas a desarrollar interfaces móviles robustas, fluidas y visualmente atractivas que se adaptan a cualquier necesidad del usuario. Comparte la información para que más usuarios conozcan del tema.
Continúar leyendo...