El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En esta sección, aprenderemos cómo manejar la entrada del usuario en aplicaciones Android utilizando Kotlin. Este es un aspecto crucial del desarrollo de aplicaciones móviles, ya que permite a los usuarios interactuar con la aplicación de manera efectiva.

Contenido

Introducción a la Entrada del Usuario
Componentes de Entrada Comunes
Manejo de Eventos de Entrada
Validación de Entrada del Usuario
Ejemplo Práctico
Ejercicios Prácticos

Introducción a la Entrada del Usuario

La entrada del usuario en una aplicación Android puede provenir de diversas fuentes, como toques en la pantalla, gestos, entrada de texto, etc. Es fundamental manejar estas entradas de manera eficiente para proporcionar una experiencia de usuario fluida y receptiva.

Componentes de Entrada Comunes

EditText

EditText es uno de los componentes más utilizados para la entrada de texto. Permite a los usuarios ingresar y editar texto.

<EditText
    android:id="@+id/editText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Enter text here" />

Button

Button es un componente que permite a los usuarios realizar acciones al hacer clic en él.

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Submit" />

CheckBox

CheckBox permite a los usuarios seleccionar o deseleccionar una opción.

<CheckBox
    android:id="@+id/checkBox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="I agree" />

Manejo de Eventos de Entrada

Para manejar eventos de entrada, como clics en botones o cambios en campos de texto, utilizamos listeners.

OnClickListener

Para manejar clics en un botón, utilizamos OnClickListener.

val button: Button = findViewById(R.id.button)
button.setOnClickListener {
    // Acción a realizar cuando se hace clic en el botón
    val editText: EditText = findViewById(R.id.editText)
    val inputText = editText.text.toString()
    Toast.makeText(this, "Input: $inputText", Toast.LENGTH_SHORT).show()
}

TextWatcher

Para manejar cambios en un campo de texto, utilizamos TextWatcher.

val editText: EditText = findViewById(R.id.editText)
editText.addTextChangedListener(object : TextWatcher {
    override fun afterTextChanged(s: Editable?) {
        // Acción a realizar después de que el texto ha cambiado
    }

    override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {
        // Acción a realizar antes de que el texto cambie
    }

    override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
        // Acción a realizar mientras el texto está cambiando
    }
})

Validación de Entrada del Usuario

Es importante validar la entrada del usuario para asegurarse de que los datos ingresados sean correctos y seguros.

Ejemplo de Validación

Validemos que el campo de texto no esté vacío antes de permitir que el usuario continúe.

val button: Button = findViewById(R.id.button)
button.setOnClickListener {
    val editText: EditText = findViewById(R.id.editText)
    val inputText = editText.text.toString()
    
    if (inputText.isEmpty()) {
        editText.error = "This field cannot be empty"
    } else {
        Toast.makeText(this, "Input: $inputText", Toast.LENGTH_SHORT).show()
    }
}

Ejemplo Práctico

Vamos a crear una pequeña aplicación que permita al usuario ingresar su nombre y mostrar un saludo cuando se presione un botón.

Layout XML

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <EditText
        android:id="@+id/editTextName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter your name" />

    <Button
        android:id="@+id/buttonGreet"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Greet" />

</LinearLayout>

Código Kotlin

import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity

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

        val editTextName: EditText = findViewById(R.id.editTextName)
        val buttonGreet: Button = findViewById(R.id.buttonGreet)

        buttonGreet.setOnClickListener {
            val name = editTextName.text.toString()
            if (name.isEmpty()) {
                editTextName.error = "Please enter your name"
            } else {
                Toast.makeText(this, "Hello, $name!", Toast.LENGTH_SHORT).show()
            }
        }
    }
}

Ejercicios Prácticos

Ejercicio 1: Validación de Email

Crea una aplicación que permita al usuario ingresar su dirección de correo electrónico y valide que el formato sea correcto antes de mostrar un mensaje de bienvenida.

Ejercicio 2: Selección de Opciones

Crea una aplicación que tenga un CheckBox para aceptar términos y condiciones. Solo permite al usuario continuar si ha marcado la casilla.

Ejercicio 3: Contador de Caracteres

Crea una aplicación que tenga un EditText y un TextView. Muestra el número de caracteres ingresados en el EditText en el TextView en tiempo real.

Soluciones a los Ejercicios

Solución Ejercicio 1

val buttonSubmit: Button = findViewById(R.id.buttonSubmit)
buttonSubmit.setOnClickListener {
    val editTextEmail: EditText = findViewById(R.id.editTextEmail)
    val email = editTextEmail.text.toString()
    
    if (email.isEmpty() || !android.util.Patterns.EMAIL_ADDRESS.matcher(email).matches()) {
        editTextEmail.error = "Please enter a valid email address"
    } else {
        Toast.makeText(this, "Welcome, $email!", Toast.LENGTH_SHORT).show()
    }
}

Solución Ejercicio 2

val buttonContinue: Button = findViewById(R.id.buttonContinue)
val checkBoxTerms: CheckBox = findViewById(R.id.checkBoxTerms)

buttonContinue.setOnClickListener {
    if (!checkBoxTerms.isChecked) {
        Toast.makeText(this, "You must accept the terms and conditions", Toast.LENGTH_SHORT).show()
    } else {
        // Continue to the next activity
    }
}

Solución Ejercicio 3

val editText: EditText = findViewById(R.id.editText)
val textViewCount: TextView = findViewById(R.id.textViewCount)

editText.addTextChangedListener(object : TextWatcher {
    override fun afterTextChanged(s: Editable?) {
        textViewCount.text = "Character count: ${s?.length}"
    }

    override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {}

    override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {}
})

Conclusión

En esta sección, hemos aprendido cómo manejar la entrada del usuario en aplicaciones Android utilizando Kotlin. Hemos cubierto componentes de entrada comunes, manejo de eventos de entrada, validación de entrada del usuario y hemos implementado un ejemplo práctico. Además, hemos proporcionado ejercicios prácticos para reforzar los conceptos aprendidos. En la siguiente sección, exploraremos cómo manejar redes y almacenamiento de datos en aplicaciones Android.

Manejo de Entrada del Usuario