Crear una Ruleta Animada con Android: Paso a Paso

En este post, vamos a explorar cómo construir una ruleta animada en una aplicación Android, utilizando Kotlin. La ruleta gira al presionar un botón, y al detenerse, selecciona aleatoriamente un jugador basado en un rango asociado a diferentes sectores.

Características del Proyecto

1. Ruleta animada: Una animación fluida que simula el giro de una ruleta.
2. Sonido durante la animación: Un audio acompaña el giro para mejorar la experiencia del usuario.
3. Selección aleatoria de un jugador: La ruleta selecciona un rango de jugadores, y luego se elige uno de manera aleatoria.
4. Optimización para barras de sistema: Diseño adaptativo con padding dinámico.

Código Completo

Aquí está el código detallado del archivo MainActivity.kt:

package android.desde.cero.ruleta

import android.media.MediaPlayer
import android.os.Bundle
import android.util.Log
import android.view.animation.Animation
import android.view.animation.DecelerateInterpolator
import android.view.animation.RotateAnimation
import android.widget.Button
import android.widget.ImageView
import androidx.activity.enableEdgeToEdge
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat

class MainActivity : AppCompatActivity() {
    var mediaPlayer: MediaPlayer? = null

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

        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main)) { v, insets ->
            val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom)
            insets
        }

        val ruleta = findViewById<ImageView>(R.id.ruleta)
        val btn = findViewById<Button>(R.id.btn)

        btn.setOnClickListener {
            val random = java.util.Random()
            val ran = random.nextInt(360) + 3600
            var lngDegrees = 0

            val animation = RotateAnimation(
                lngDegrees.toFloat(),
                (lngDegrees + ran).toFloat(),
                Animation.RELATIVE_TO_SELF,
                0.5f,
                Animation.RELATIVE_TO_SELF,
                0.5f
            ).apply {
                duration = 3000
                fillAfter = true
                interpolator = DecelerateInterpolator()
            }

            lngDegrees = (lngDegrees + ran) % 360

            animation.setAnimationListener(object : Animation.AnimationListener {
                override fun onAnimationStart(animation: Animation?) {
                    mediaPlayer = MediaPlayer.create(this@MainActivity, R.raw.ic_audio)
                    mediaPlayer?.start()
                }

                override fun onAnimationEnd(animation: Animation?) {
                    mediaPlayer?.stop()
                    mediaPlayer?.release()
                    mediaPlayer = null

                    val partes = 12
                    val v = partes - Math.floor(lngDegrees / (360.0 / partes)).toInt()
                    val equipos_id = v

                    val (min, max) = when (equipos_id) {
                        1 -> 1 to 12
                        2 -> 13 to 24
                        3 -> 25 to 36
                        4 -> 37 to 48
                        5 -> 49 to 60
                        6 -> 61 to 72
                        7 -> 73 to 84
                        8 -> 85 to 96
                        9 -> 97 to 108
                        10 -> 109 to 120
                        11 -> 121 to 132
                        12 -> 123 to 144
                        else -> 1 to 144
                    }

                    val jugadores_id = random.nextInt(max - min + 1) + min
                    Log.d("JUGADOR", jugadores_id.toString())
                }

                override fun onAnimationRepeat(animation: Animation?) {}
            })

            ruleta.animation = animation
            ruleta.startAnimation(animation)
        }
    }

    override fun onDestroy() {
        super.onDestroy()
        mediaPlayer?.release()
        mediaPlayer = null
    }
}

Explicando el código

1. Configuración Inicial

La aplicación utiliza enableEdgeToEdge para optimizar el diseño en dispositivos con barras de sistema modernas. El padding dinámico asegura que el contenido no quede oculto detrás de barras.

2. Animación de la Ruleta

• Se crea una animación de rotación con RotateAnimation.
• El ángulo total de giro se calcula sumando un número aleatorio grande (3600 + 360).
• La animación tiene una interpolación desacelerada para simular la física realista.

3. Sonido durante la Animación

• Se inicializa un MediaPlayer para reproducir un archivo de audio (R.raw.ic_audio).
• El sonido comienza al iniciar la animación y se detiene al finalizar.

4. Selección de Jugador

• La ruleta se divide en 12 sectores. Cada sector representa un rango.
• El ángulo final de la ruleta (lngDegrees) determina el sector.
• Dentro del sector, se selecciona aleatoriamente un jugador.

Recursos Requeridos

1. Archivos XML: Diseños en res/layout/activity_main.xml que incluyen un ImageView para la ruleta y un Button.
2. Archivo de audio: Un archivo de sonido (e.g., ic_audio.mp3) en la carpeta res/raw.

Mejora y Personalización

• Estilo de animación: Ajustar el duration e interpolador para un efecto diferente.
• Diseño visual: Personalizar la imagen de la ruleta para representar equipos, números, o temáticas específicas.
• Funciones avanzadas: Agregar retroalimentación visual como texto que muestre el jugador seleccionado.

Con este proyecto, hemos construido una funcionalidad interactiva y visualmente atractiva para aplicaciones Android. 🚀 ¡Empieza a experimentar y personalizar tu propia ruleta!

Leido 1140 veces | 0 usuarios