Inicio
Sin categoría

Tutorial de Kotlin para Android para principiantes: crea un cuestionario sencillo

Actualizado al 24 febrero, 2021

Kotlin es uno de los dos idiomas oficiales utilizados en el desarrollo de Android y es la opción preferida de Google cuando se trata de la plataforma. Esta es una buena noticia para los aspirantes a desarrolladores, debido a su curva de aprendizaje significativamente más superficial y su naturaleza amigable para los principiantes. Encontrar su camino a través de un tutorial de Kotlin es más fácil de lo que piensa, lo que significa que cualquiera puede comenzar a crear aplicaciones para la plataforma Android.

Sin embargo, Kotlin también llegó un poco más tarde a la fiesta que su hermano Java, siendo solo un idioma oficial desde 2017. También se usa con menos frecuencia fuera de Android, por lo que muchos desarrolladores establecidos aún no están familiarizados con él.

En este tutorial de Kotlin, veremos el proceso de creación de una aplicación de Kotlin simple, un cuestionario, que servirá como punto de partida para ayudarte a aprender Kotlin en general. ¡Vamos!

Lea también: Una guía para el desarrollo de aplicaciones de Android para principiantes en 5 sencillos pasos

Comenzando su primer proyecto de Android Kotlin

Para aprender el desarrollo de Kotlin para Android, primero deberá descargar Android Studio y configurar todo. Si no sabe cómo hacer esto, puede encontrar una guía para ese proceso aquí:

Cómo instalar Android Studio y comenzar su primer proyecto

Una vez hecho esto, inicie un nuevo proyecto y asegúrese de haber seleccionado Kotlin como idioma en el menú desplegable. Ahora elija una “Actividad vacía” como plantilla de inicio.

Serás recibido con un código que se ve así:

class MainActivity: AppCompatActivity () {
    anular la diversión onCreate (SavedInstanceState: Bundle?) {
        super.onCreate (SavedInstanceState)
        setContentView (R.layout.activity_main)
    }
}

Este código repetitivo se encuentra en su archivo MainActivity.kt y es lo primero que se ejecutará cuando inicie la aplicación. Todo lo que hace este código es decirle a Android que muestre el archivo de diseño: activity_main.xml . Android Studio también lo ha abierto para nosotros, en otra pestaña en la parte superior de la ventana principal. Puede presionar esta pestaña en cualquier momento para ver un diseñador visual donde puede arrastrar y soltar elementos como botones y vistas de texto. Si todo lo que ve es más código cuando abre este archivo, deberá cambiar a la vista “Diseño” presionando el botón en la parte superior derecha.

En el desarrollo de Android, deberá trabajar no solo con Kotlin / Java, sino también con XML. XML significa “Extensible Markup Language” y es un “lenguaje de marcado”. Esto significa que no dicta acciones lógicas o dinámicas, sino que simplemente define dónde van las cosas en una página.

Cuando cree aplicaciones de Android, deberá crear diseños utilizando XML y el diseñador visual, y luego definir cómo funcionan esos elementos en el código Kotlin o Java correspondiente. No entraremos en detalles sobre cómo funciona XML en este tutorial de Kotlin, por lo que si desea obtener más información al respecto, consulte esta publicación:

Una introducción a XML para nuevos desarrolladores de Android: el potente lenguaje de marcado

Por ahora, simplemente siga las instrucciones y, con suerte, todo quedará claro.

Kotlin: empezar y crear el diseño

Antes de comenzar a aprender a programar en Kotlin, primero haremos algunos cambios en el archivo XML para que podamos crear el diseño que queremos.

Para hacer la vida más fácil, simplemente haga clic en la vista “Código” y luego pegue lo siguiente para sobrescribir lo que ya está allí:

<? xml version = "1.0" encoding = "utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    herramientas: context = ". MainActivity">

    <TextView
        android: id = "@ + id / textView2"
        android: layout_width = "wrap_content"
        android: layout_height = "wrap_content"
        android: text = "¡Prueba de Android!"
        android: textSize = "20sp"
        aplicación: layout_constraintBottom_toBottomOf = "parent"
        aplicación: layout_constraintHorizontal_bias = "0.498"
        aplicación: layout_constraintLeft_toLeftOf = "parent"
        aplicación: layout_constraintRight_toRightOf = "parent"
        aplicación: layout_constraintTop_toTopOf = "parent"
        aplicación: layout_constraintVertical_bias = "0.117" />

    <TextView
        android: id = "@ + id / textView"
        android: layout_width = "200dp"
        android: layout_height = "wrap_content"
        android: text = "¿Cuáles son los dos lenguajes oficiales para el desarrollo de Android? \ n \ n A) Kotlin y Java \ n \ n B) Java y Python \ n \ n C) Kotlin y Python"
        android: textSize = "11sp"
        aplicación: layout_constraintBottom_toTopOf = "@ + id / button"
        aplicación: layout_constraintEnd_toEndOf = "parent"
        aplicación: layout_constraintHorizontal_bias = "0.498"
        aplicación: layout_constraintStart_toStartOf = "parent"
        aplicación: layout_constraintTop_toBottomOf = "@ + id / textView2"
        aplicación: layout_constraintVertical_bias = "0.083" />

    <Botón
        android: id = "@ + id / button"
        android: layout_width = "wrap_content"
        android: layout_height = "wrap_content"
        android: layout_marginStart = "32dp"
        android: text = "A"
        aplicación: layout_constraintBottom_toBottomOf = "parent"
        aplicación: layout_constraintStart_toStartOf = "parent"
        aplicación: layout_constraintTop_toTopOf = "parent"
        aplicación: layout_constraintVertical_bias = "0.674" />

    <Botón
        android: id = "@ + id / button2"
        android: layout_width = "wrap_content"
        android: layout_height = "wrap_content"
        android: layout_marginStart = "40dp"
        android: text = "B"
        aplicación: layout_constraintBottom_toBottomOf = "parent"
        aplicación: layout_constraintStart_toEndOf = "@ + id / button"
        aplicación: layout_constraintTop_toTopOf = "parent"
        aplicación: layout_constraintVertical_bias = "0.674" />

    <Botón
        android: id = "@ + id / button3"
        android: layout_width = "wrap_content"
        android: layout_height = "wrap_content"
        android: texto = "C"
        aplicación: layout_constraintBottom_toBottomOf = "parent"
        aplicación: layout_constraintEnd_toEndOf = "parent"
        aplicación: layout_constraintHorizontal_bias = "0.472"
        aplicación: layout_constraintStart_toEndOf = "@ + id / button2"
        aplicación: layout_constraintTop_toTopOf = "parent"
        aplicación: layout_constraintVertical_bias = "0.674" />

</androidx.constraintlayout.widget.ConstraintLayout>

Esto, a su vez, significa que podemos centrarnos en la programación de Kotlin y no tener que preocuparnos por el aspecto de nuestra aplicación. Mucho.

¡Hacer que tus botones hagan cosas!

Ahora que tenemos nuestro diseño, la buena noticia es que es extremadamente fácil hacer referencia a esos elementos y cambiarlos dentro de la programación de Kotlin.

Para hacer esto, necesitamos referirnos a los “ID” que le dimos a nuestros puntos de vista. Una “vista” es el nombre técnico de los widgets que componen nuestro diseño, como botones y etiquetas de texto. Si desea obtener más información sobre Android

Verá que ya hicimos esto en el XML:

android: id = "@ + id / button"

En este caso, el “ID” del botón es “botón”. Tenga en cuenta que esto distingue entre mayúsculas y minúsculas. La palabra “Botón” con una “B” mayúscula en realidad se refiere al concepto más amplio de todos los botones en Kotlin.

Por lo tanto, podemos consultar el botón de nuestro código. Si escribiéramos button.setText (“¡Respuesta correcta!”), Entonces cambiaría el texto del primer botón para decir “¡Respuesta correcta!”

Pero no queremos hacer eso. En su lugar, lo haremos de modo que al hacer clic en el primer botón se diga “¡CORRECTO!” y le permite a nuestro jugador saber que hizo clic en la solución correcta.

Para hacer esto, mostraremos un mensaje en la pantalla que se conoce como “mensaje de brindis”. Esta es una pequeña burbuja de texto flotante que desaparece después de un par de segundos.

No se preocupe por la línea de texto que crea y muestra el mensaje de brindis, esto es algo que rara vez necesitará y que es parte de Android en lugar de Kotlin.

Vamos a hacer que estos mensajes se muestren cuando hagamos clic en uno de estos botones:

button.setOnClickListener {
         Toast.makeText ( applicationContext , " CORRECT !", Toast. LENGTH_SHORT ) .show ()
     }

    button2.setOnClickListener {
         Toast.makeText ( applicationContext , "WRONGO!", Toast. LENGTH_SHORT ) .show ()
     }

    button3.setOnClickListener {
         Toast.makeText ( applicationContext , "WRONGO!", Toast. LENGTH_SHORT ) .show ()
     }

}

Coloque este código dentro de la función onCreate (ese es todo el código entre las llaves que siguen a la palabra onCreate). En Kotlin, como Java, el código se puede “bloquear” junto colocándolo entre corchetes. Esta agrupación es útil si queremos que un conjunto específico de código se ejecute fuera de una ruta lineal, por ejemplo. Aprenderemos qué es una “función” en un momento.

Ahora haz clic en el botón de reproducción verde en el IDE de Android Studio, asegurándote de que tienes un dispositivo virtual configurado o un dispositivo Android conectado. Ahora verás que tu juego aparece en la pantalla y podrás seleccionar un responder. Y he aquí, hacer clic en “A” debería mostrar el mensaje correcto y los otros dos deberían mostrar el mensaje incorrecto.

Tutorial de Kotlin: uso de funciones en Kotlin

Puede pensar que ha creado su primera aplicación para Android Kotlin, pero en realidad hay muy poca programación de Kotlin aquí. Más bien, confiamos principalmente en el XML para la apariencia y el SDK de Android para el rendimiento. “SetText”, por ejemplo, no es un ejemplo de Kotlin, sino que es parte de una clase de Android (TextView). Es decir, Kotlin en sí no admite este tipo de botones y etiquetas de texto, sino que simplemente se usa para la estructura en este caso.

Y hasta ahora, este no es un gran programa. Solo hay una pregunta y la respuesta se asigna a un solo botón. Si queremos convertir esto en un programa dinámico que pueda mostrar múltiples preguntas y respuestas, entonces necesitamos agregar algo de lógica. Aquí es donde entra el código de Kotlin.

Primero, estructuramos esto un poco mejor. En programación, nunca queremos escribir algo más veces de las necesarias, así que vamos a poner nuestros mensajes tostados en una función. Una función es un fragmento de código al que se puede hacer referencia en cualquier punto del resto del programa.

Lea también: Kotlin vs Java para Android: diferencias clave

Para definir una función, necesitamos darle un nombre que describa lo que hace. A continuación, le añadimos la palabra “diversión” y lo seguimos con llaves. Asegúrese de hacer esto fuera de la función onCreate pero dentro de la clase MainActivity (aunque es una simplificación masiva, este es efectivamente el nombre del archivo).

Aquí adentro, vamos a mostrar nuestros brindis. Para ver cómo funciona esto, coloquemos solo un mensaje de brindis dentro de nuestra función y luego llamémoslo desde el botón uno:

class MainActivity: AppCompatActivity () {
    anular la diversión onCreate (SavedInstanceState: Bundle?) {
        super.onCreate (SavedInstanceState)
        setContentView (R.layout. activity_main )

        button.setOnClickListener {
             showToast ()
         }

     
    }

    fun showToast () {
        Toast.makeText ( applicationContext , " CORRECT !", Toast. LENGTH_SHORT ) .show ()
    }

}

Ejecute esto y el código se comportará exactamente como lo hacía antes. La única diferencia es que el código está mejor organizado.

¿Ves cómo ahora solo tenemos que escribir el nombre de la función con dos corchetes para ejecutar nuestra línea de código en cualquier punto? Si showToast () hiciera algo más complejo, esto podría ahorrarnos incontables horas; ¡especialmente si alguna vez necesitamos cambiar la forma en que se muestra el mensaje del brindis!

Sin embargo, lo que realmente queremos hacer es cambiar la respuesta que se muestra según el botón en el que se hace clic. Podríamos hacer esto con una segunda función, pero mejor aún sería colocar ambos mensajes dentro de una sola función.

Para ello, utilizaremos dos nuevos conceptos de la programación de Kotlin.

Argumentos, variables y declaraciones condicionales de Kotlin

Ahora que sabe cómo usar funciones para agrupar secciones de código en Android, la siguiente parte de este tutorial de Kotlin es donde sucederá la verdadera magia. ¡Ahora aprenderás tres habilidades invaluables para codificar en Kotlin y en cualquier otro idioma!

Primero, una variable es un “contenedor” de datos. Para decirlo de otra manera, una variable le permite usar una palabra para representar otra palabra, un número o incluso una lista de elementos. Probablemente recordará las variables de las lecciones de álgebra:

a + 2 = 3, encuentra a!

Aquí, obviamente se usa a para representar “1”. Usamos variables de manera similar en la programación para que podamos cambiar la forma en que se comporta nuestro código dependiendo de las interacciones del usuario u otras entradas.

Sin embargo, lo que también podemos hacer con las variables es pasarlas entre funciones. Cuando hacemos esto, lo llamamos un “argumento”. Básicamente, esto nos permite pasar una entrada a nuestra función para cambiar la salida.

Lea también: Las mejores herramientas de desarrollo de Android para comenzar

Para definir los argumentos que aceptará una función, simplemente debemos colocarlos dentro de las llaves.

Estamos usando un tipo de variable llamada número entero, que se conoce como “Int” en Kotlin. Los enteros, también recordará de las matemáticas, son números enteros sin posiciones decimales.

Por lo tanto, necesitamos actualizar nuestra función para que se vea así:

showToast divertido (respuesta: Int) {}

Aquí, el nombre de la función es “respuesta” y es del tipo integer. Ahora, cuando posteriormente llamemos a nuestra función, necesitamos agregar un número entero dentro de las llaves:

showToast (1)

Puede pasar tantos argumentos a una función como desee, siempre que los defina cada uno y los separe con comas.

En este caso, asignaremos a cada botón un número. A = 1, B = 2 y C = 3. ¡Ahora la función showToast sabe en qué botón hizo clic el usuario!

button.setOnClickListener {
     showToast (1)
}

button2.setOnClickListener {
     showToast (2)
}

button3.setOnClickListener {
     showToast (3)
}

¡Ahora solo tenemos que cambiar el mensaje brindis que se muestra según la respuesta que leamos!

Para hacer esto, usamos algo llamado “declaración condicional”. Eso significa que una línea de código solo se reproducirá bajo ciertas condiciones. En este caso, solo mostraremos el mensaje correcto si el usuario hizo clic en la respuesta correcta. Lo logramos con el siguiente código:

si (respuesta == 1) {
         Toast.makeText ( applicationContext , " CORRECT !", Toast. LENGTH_SHORT ) .show ()
}

Esta es una declaración “si” y solo mostrará el código dentro de las llaves si la declaración entre llaves regulares es verdadera. En este caso, si la variable “respuesta” tiene el valor “1”, ¡entonces podemos ejecutar el código!

¿Qué hacemos si la respuesta es 2 o 3? Bueno, ¡siempre podríamos usar dos declaraciones condicionales más! Pero una solución más rápida sería utilizar la declaración “else”. Esto hace exactamente lo que esperaría que hiciera cuando sigue a una declaración “si”:

fun showToast (respuesta: Int) {
    si (respuesta == 1) {
        Toast.makeText ( applicationContext , " CORRECT !", Toast. LENGTH_SHORT ) .show ()
    } demás {
        Toast.makeText ( applicationContext , "WRONGO!", Toast. LENGTH_SHORT ) .show ()
    }
}

Haciendo el juego divertido

Si no siguió todo eso la primera vez, le recomiendo volver a leerlo varias veces. Esta es la parte más importante del tutorial de Kotlin, y con solo esas pocas habilidades, ¡podrás manejar una gran cantidad de código!

A continuación, vamos a flexibilizar nuestras nuevas habilidades de codificación para convertir esto en un juego real.

Primero, crearemos tres variables más. Estas serán variables globales creadas fuera de cualquier función y, por lo tanto, accesibles a todas las funciones.

Tenga en cuenta que en Kotlin, no es necesario asignar una variable a un tipo. En lenguajes como Java, debe indicar de inmediato si su variable es un entero (número entero), cadena (palabra), número con decimal (flotante), etc. En Kotlin, podemos escribir “var” y dejar que Kotlin descúbrelo!

Antes de la función onCreate () , agregue estas tres líneas:

var questionNo = 0

var preguntas = listOf ("¿Cuáles son los dos lenguajes oficiales para el desarrollo de Android? \ n \ n A) Kotlin y Java \ n \ n B) Java y Python \ n \ n C) Kotlin y Python", "¿Cómo se define una función en Kotlin? \ n \ n A) void \ n \ n B) var \ n \ n C) function "," ¿Para qué se usa una variable? \ n \ n A) Para contener datos \ n \ n B ) Para insertar un valor aleatorio \ n \ n C) No sé "," ¿Qué significa SDK en Android SDK? \ N \ n A) Software Development Kit \ n \ n B) Software Development Kotlin \ n \ n C) Algo que no sé ")

var rightAnswers = listOf (1, 2, 1, 1)

La primera variable es otro número entero y se utilizará para realizar un seguimiento del número de pregunta en el que estamos. El segundo es un poco más complicado. Esta es una “lista”, lo que significa que es una variable que puede contener varios valores, en este caso, varias cadenas. Cada una de nuestras cadenas está separada por una coma y se le dará un índice para hacer referencia más adelante (tenga en cuenta que el primer elemento de la lista recibe el índice: 0). Tenga en cuenta que Kotlin (y la mayoría de los idiomas) reconoce el símbolo \ n como “nueva línea” y no aparecerá en nuestra salida.

(Esto se ve un poco feo, y si estuviera creando una aplicación real, podría elegir almacenar estos valores en un archivo XML separado).

La última línea crea otra lista, esta vez llena de números enteros. ¡Estas son las respuestas correctas para cada una de nuestras preguntas!

Lea también: Cómo hacer una aplicación sin experiencia en programación: ¿cuáles son sus opciones?

A continuación, estamos creando una nueva función llamada updateQuestion . Todo lo que vamos a hacer aquí es cambiar nuestra pregunta según el número de pregunta. Hacemos esto así:

fun updateQuestion () {
            questionNo = questionNo + 1
            textView.setText (preguntas.get (questionNo))
}

Debido a que solo llamamos a esta función cuando alguien responde correctamente, podemos aumentar con seguridad el valor de nuestra variable questionNo al comienzo de la función. A continuación, vamos a establecer la pregunta que se muestra actualizando textView.

Cuando usamos “get” de esta manera con una lista, solo necesitamos insertar el índice entre corchetes para recuperar el valor que se coloca allí. De esta manera, podemos tomar la siguiente pregunta aumentando gradualmente ese valor.

Finalmente, cambiamos nuestra condición de “respuesta correcta” a la entrada correcta en nuestra lista de respuestas correctas. El código resultante debería verse así:

class MainActivity: AppCompatActivity () {

    var questionNo = 0
    var preguntas = listOf ("¿Cuáles son los dos lenguajes oficiales para el desarrollo de Android? \ n \ n A) Kotlin y Java \ n \ n B) Java y Python \ n \ n C) Kotlin y Python", "¿Cómo se define una función en Kotlin? \ n \ n A) void \ n \ n B) var \ n \ n C) function "," ¿Para qué se usa una variable? \ n \ n A) Para contener datos \ n \ n B ) Para insertar un valor aleatorio \ n \ n C) No sé "," ¿Qué significa SDK en Android SDK? \ N \ n A) Software Development Kit \ n \ n B) Software Development Kotlin \ n \ n C) Algo que no sé ")
    var rightAnswers = listOf (1, 2, 1, 1)

    anular la diversión onCreate (SavedInstanceState: Bundle?) {
        super.onCreate (SavedInstanceState)
        setContentView (R.layout. activity_main )

        button.setOnClickListener {
             showToast (1)
         }

        button2.setOnClickListener {
             showToast (2)
         }

        button3.setOnClickListener {
             showToast (3)
         }

    }

    fun showToast (respuesta: Int) {
        if (answer == rightAnswers.get (questionNo)) {
            Toast.makeText ( applicationContext , " CORRECT !", Toast. LENGTH_SHORT ) .show ()
            updateQuestion ()
        } demás {
            Toast.makeText ( applicationContext , "WRONGO!", Toast. LENGTH_SHORT ) .show ()
        }
    }

    fun updateQuestion () {
        questionNo = questionNo + 1
        textView.setText (preguntas.get (questionNo))
    }

}

Continuando con el tutorial de Kotlin

Ejecute este código y ahora debería encontrar que la pregunta se actualiza cada vez que obtiene la respuesta correcta. Este es un juego completo y funcional, y podrías crear muchos más proyectos como este con las habilidades que aprendiste aquí.

El único pequeño problema con todo esto es que ahora mismo, ¡el juego se bloqueará tan pronto como te quedes sin preguntas!

Pero en lugar de entregarle la respuesta en una bandeja de plata, lo invitaré a que se vaya y encuentre la respuesta usted mismo. Después de todo, así es como realmente aprenderá Kotlin: construyendo sus propios proyectos y aprendiendo cómo hacer cada cosa nueva cuando la necesite.

¡Encuentra otro tutorial de Kotlin, sigue aprendiendo y estarás creando increíbles aplicaciones de Android en poco tiempo!

¡Puntúa este artículo!

tutorial kotlin para android para principiantes: