En la entrada sobre la creación del primer proyecto en Android, luego vimos cómo crear nuestra aplicación básica, revisamos la estructura del proyecto y diferentes conceptos como SDK, Manifest y las actividades y su ciclo de vida, ahora continuaremos modificando el proyecto actual. con el objetivo de profundizar en la creación de aplicaciones.
Como se mencionó, modificaremos la aplicación creada en esta entrada donde creamos el primer proyecto de Android, nos quedaremos allí en esta pantalla.
Allí podemos ver que la aplicación predeterminada crea un componente TextView con el texto “Hello World”, desde la vista dividida. (Si a estas alturas no sabes cómo crear la aplicación, te recomiendo revisar la entrada mencionada anteriormente).
Estando aquí modificaremos esta vista agregando nuevos componentes, si luego vamos a la vista de dibujo, podremos modificar la pantalla a nuestro gusto, en este caso crearemos la siguiente interfaz.
Como podemos ver hemos agregado un componente PlainText que en realidad corresponde a un campo de edición o que puede tener propiedades como texto plano, contraseña, Teléfono, Correo entre otras, de igual manera el Layout definido nos permite modificar el tamaño de los componentes y asignar una posición relativa, en este caso el campo de texto tiene una posición relativa al textView del título.
Si vamos a la vista Dividida, veremos el código xml generado y desde aquí podremos modificar las propiedades manualmente, en este caso se le ha agregado un color al título y un tamaño de 25sp, tenga en cuenta que cada componente tiene una propiedad id , así como propiedades para controlar el posicionamiento del componente en la pantalla.
Encontramos otros componentes como consejo que corresponde a un titular de lugar que se muestra mientras el campo está vacío, se pueden agregar otras propiedades de la misma manera para diseñar el componente.
Ahora un componente como el cual también tiene la propiedad id la cual es relativa al componente campo de texto, en este caso modificamos el identificador.
Lógica de aplicación.
Para realizar el procesamiento lógico y de la información nos dirigimos a la clase MainActivity.kt, de allí obtenemos los componentes gráficos a través de su id mediante el método findViewById().
Agregamos el evento de clic del botón y creamos una función llamada onClick() (Se puede llamar de cualquier forma)
En esta función se agrega lógica para capturar el valor del campo de texto, al cual se referencia de la misma manera que el botón, pero en este caso, creando un componente de tipo EditText que referencia el id del campo de texto.
Posteriormente, el valor del campo se obtiene y se agrega a una variable String que luego se presenta en un componente tipo Toast que permite mostrar un mensaje temporal en pantalla.
Cuando ejecutamos la aplicación, el emulador se inicia y podemos probar el sistema agregando el nombre de usuario y presionando el botón “enter”, vemos como se muestra Toast, que dura unos segundos.
Posteriormente modificamos la pantalla agregando otro componente TextView sin texto, que nos servirá para mostrar la información sobre el nombre ingresado, pero ahora directamente en pantalla.
Para realizar esta lógica volvemos a la clase MainActivity.kt y en la función referenciamos el componente EditText con el id asignado y luego enviamos el mensaje que queremos mostrar.
Posteriormente lanzamos nuevamente la aplicación y tenemos el siguiente resultado.
Otra alternativa a la captura de datos es declarar los componentes globalmente, evitando así tener que declararlos en cada función:
¡¡Importante de usar!! para evitar que tengas referencias nulas.
Observación:
En las líneas 11 y 12 se utiliza nullsafety, esta es una característica de Kotlin que permite controlar los valores nulos dentro de la aplicación, evitando que cargue la popular NullPointerException, no podemos asignar valores nulos directamente, pero de esta manera cuando indicamos ¿Editar texto? le estamos diciendo al compilador que este campo puede tener una referencia nula y permitir su procesamiento.
¡¡en las líneas 26 y 27 se usa !! decirle al compilador que no revise si el valor es nulo y por lo tanto puede compilar sin problemas, pero si es nulo tirar la excepción en la consola por si sabemos que puede llegar un valor nulo y aun así queremos procesar
Otra alternativa recomendada sería hacer llamadas seguras, así cuando intentes llamar al objeto, si es nulo, no se lanzará la excepción, pero el valor nulo se almacenará sin terminar el proceso, por lo que la variable debe ser anulable para para que se compile correctamente.
Y listo, con esto tenemos nuestra primera aplicación funcional con captura de datos y eventos de botones.
También te puede interesar.
¿Hay algo que quieras añadir o comentar sobre esta entrada? siéntete libre de hacer….Y si te ha gustado... te invito a compartir y Suscríbase haciendo clic en el botón "Unirse a este sitio" para escuchar más publicaciones como esta 😉