Usar setOnClickListener en Kotlin

David Mbochi Njonge 30 enero 2023
  1. Crear un nuevo proyecto y agregar un botón en Kotlin
  2. Use setOnClickListener() sin una devolución de llamada en Kotlin
  3. Use setOnCliclListener() con una devolución de llamada en Kotlin
  4. Use setOnClickListener() con una expresión Lambda en Kotlin
  5. Use la interfaz View.OnClickListener en la clase MainActivity en Kotlin
Usar setOnClickListener en Kotlin

El método setOnClickListener() es un detector de eventos, lo que significa que solo se invocará cuando se produzca un evento, como un clic en un botón. El setOnClickListener() es un método de la clase View y se puede utilizar con cualquier clase que herede de ella.

En este tutorial, usaremos un Botón para probar el método en acción. La clase Button hereda el método de la clase TextView, que también hereda el método de la clase base View.

Crear un nuevo proyecto y agregar un botón en Kotlin

Vaya a su entorno de desarrollo y cree un nuevo proyecto de Android con una actividad vacía. Asegúrese de que Kotlin sea el idioma seleccionado para esta aplicación.

Para crear un componente Button, vaya al archivo activity_main.xml en la carpeta Diseño y pegue el siguiente código XML dentro de ConstraintLayout.

<Button
            android:text="Click me"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:id="@+id/click_me_btn"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"/>

Use setOnClickListener() sin una devolución de llamada en Kotlin

Vaya a la clase MainActivity de Kotlin y pegue el siguiente código en el método onCreate() justo después del método setContentView().

  val clickMeBtn: Button = findViewById(R.id.click_me_btn)

        clickMeBtn.setOnClickListener {
            val toast = Toast
                .makeText(applicationContext,
                "You have clicked me",
                Toast.LENGTH_SHORT).show()
        }

El método findViewById() nos ayuda a recuperar el botón que hemos creado en nuestro diseño utilizando la identificación única de ese componente. Este método puede recuperar cualquier componente que herede de la clase View porque es un método genérico.

El método setOnClickListener() consume una devolución de llamada como argumento, pero agregamos directamente la acción a realizar dentro de este método sin pasarle ninguna devolución de llamada.

Esto es posible gracias a la anotación @Nullable agregada al método detrás de escena. La anotación indica que el parámetro puede ser opcional o nulo.

Tenga en cuenta que cuando usamos el método setOnClickListener(), primero configura el botón para que se pueda hacer clic si no se puede hacer clic.

Hemos creado un texto usando el método estático makeText() de la clase Toast, y este mensaje se mostrará en la pantalla durante un breve período, y luego desaparecerá.

Ejecute la aplicación

Presione el ícono Ejecutar ubicado en la sección superior derecha de la barra de herramientas del IDE para ejecutar la aplicación. La siguiente imagen muestra la posición del botón Ejecutar.

aplicación en ejecución

Esto ejecutará la aplicación, iniciará el dispositivo virtual y lo instalará en el dispositivo virtual. Si presiona el botón con la etiqueta CLICK ME, se mostrará un mensaje con la etiqueta You have click me en la parte inferior de la pantalla, como se muestra a continuación.

mensaje de brindis kotlin

Use setOnCliclListener() con una devolución de llamada en Kotlin

Como hemos mencionado en el ejemplo anterior, el método setOnClickListener() tiene un parámetro opcional View.OnClickListener que es una devolución de llamada para el método onClick().

Vaya a la clase MainActivity y pegue el siguiente código en el método onCreate() justo debajo del método setContentView(). Asegúrese de comentar el ejemplo anterior.

 val clickMeBtn: Button = findViewById(R.id.click_me_btn)

 clickMeBtn.setOnClickListener(object : View.OnClickListener{
            override fun onClick(view: View?) {
                val toast = Toast
                    .makeText(applicationContext,
                    "You have clicked me",
                    Toast.LENGTH_SHORT).show()
            }
        })

En el ejemplo anterior, pasamos la devolución de llamada View.OnClickLictener al método y anulamos el método onClick().

El método onClick() tiene un parámetro de tipo View, que indica la vista en la que se hizo clic. Puede usar la vista dentro de onClick() para ejecutar cualquier método, como cambiar el color de fondo.

En este ejemplo, hemos mostrado un mensaje de Toast tal como lo hicimos en el ejemplo anterior. Siga los mismos pasos que usamos para ejecutar y probar la aplicación, y obtendrá los mismos resultados.

Use setOnClickListener() con una expresión Lambda en Kotlin

Este ejemplo es similar al que hemos cubierto anteriormente, pero lo convertimos en una expresión lambda en lugar de anular el método onClick() de nuestra devolución de llamada.

Vaya a la clase MainActivity y pegue el siguiente código en el método onCreate() justo después del método setContentView(). Asegúrese de comentar el ejemplo anterior.

 val clickMeBtn: Button = findViewById(R.id.click_me_btn)

 clickMeBtn.setOnClickListener(View.OnClickListener { view ->
            Toast.makeText(applicationContext,
                "You have clicked me",
            Toast.LENGTH_SHORT).show()
         })

Como tenemos acceso a la view en la que se hizo clic, podemos ejecutar cualquier método, pero solo mostramos un mensaje Toast en este ejemplo.

Usa los mismos pasos que usamos para ejecutar y probar el primer ejemplo, y obtendrás un mensaje de Toast en la pantalla, como hemos visto en los otros ejemplos.

Use la interfaz View.OnClickListener en la clase MainActivity en Kotlin

La devolución de llamada View.OnClickListener es una interfaz, y podemos implementar esta interfaz en la clase MainActivity, como se muestra a continuación.

class MainActivity : AppCompatActivity(), View.OnClickListener {
}

Una vez que implementemos la interfaz, debemos implementar el método onClick() dentro de esta clase. Copie y pegue el siguiente código dentro de la clase MainActivity.

    override fun onClick(view: View?){
        when(view?.id){
            R.id.click_me_btn -> {
                Toast.makeText(applicationContext,
                "You have clicked me",
                Toast.LENGTH_SHORT).show()
            }
        }
    }

El método onClick() nos proporciona acceso a la vista en la que se hizo clic, pero como no estamos recuperando el componente por id, tenemos que usar la declaración when que funciona de la misma manera que la declaración switch para identificar el componente en el que se hizo clic.

Si el id coincide con el id de click_me_btn, se ejecuta la funcionalidad que sigue dentro de la función de flecha. Solo mostramos un mensaje Toast en la pantalla en este ejemplo.

Use los mismos pasos que hemos usado para ejecutar y probar los ejemplos anteriores. Este ejemplo muestra los mismos resultados esperados.

David Mbochi Njonge avatar David Mbochi Njonge avatar

David is a back end developer with a major in computer science. He loves to solve problems using technology, learning new things, and making new friends. David is currently a technical writer who enjoys making hard concepts easier for other developers to understand and his work has been published on multiple sites.

LinkedIn GitHub