Componentes UI Básicos en Android: Controles de Interacción y Progreso

1. activity_main.xml

Descripción: Define un botón para navegar a una pantalla con componantes adicionales

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pantalla_principal"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Explorar Controles"
        android:onClick="navegarControles"/>
</LinearLayout>

2. MainActivity.java

Descrpición: Gestiona la navegación entre actividades

package com.ejemplo.interfaz_usuario;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;

public class ControladorPrincipal extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
    
    public void navegarControles(View vista){
        Intent intento = new Intent(this, PantallaControles.class);
        startActivity(intento);
    }
}

3. activity_controles.xml

Descripción: Contiene:

• Un elemento de texto
• Una barra de desplazamianto
• Una calificación por estrellas
• Indicadores de progreso circulares y horizontales
• Botones para controlar el progreso

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:id="@+id/pantalla_controles"
    android:layout_width="match_parent"
    android:layout_marginLeft="10dp"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/mensaje_texto"
        android:text="Soy un texto dinámico"
        android:textSize="25sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <SeekBar
        android:id="@+id/barra_deslizamiento"
        android:max="60"
        android:progress="0"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <RatingBar
        android:id="@+id/barra_calificacion"
        android:max="5"
        android:progress="0"
        android:stepSize="0.5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <ProgressBar
        android:id="@+id/indicador_progreso1"
        android:max="100"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <ProgressBar
        android:id="@+id/indicador_progreso2"
        android:max="100"
        style="?android:progressBarStyleLarge"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <ProgressBar
        android:id="@+id/indicador_progreso3"
        android:max="100"
        android:progress="10"
        style="?android:progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <LinearLayout
        android:layout_width="match_parent"
        android:orientation="horizontal"
        android:layout_height="wrap_content">
        <Button
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:text="Iniciar"
            android:onClick="iniciarProgreso"
            android:layout_height="wrap_content" />
        <Button
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:text="Detener"
            android:onClick="detenerProgreso"
            android:layout_height="wrap_content" />
    </LinearLayout>
</LinearLayout>

4. PantallaControles.java

package com.ejemplo.interfaz_usuario;

import android.app.Activity;
import android.os.Bundle;
import android.os.SystemClock;
import android.view.View;
import android.widget.ProgressBar;
import android.widget.RatingBar;
import android.widget.SeekBar;
import android.widget.TextView;
import android.widget.Toast;

public class PantallaControles extends Activity {
    // Referencia a la barra de desplazamiento
    private SeekBar barraDeslizamiento;
    // Referencia al elemento de texto
    private TextView mensajeTexto;
    // Referencia a la barra de calificación
    private RatingBar barraCalificacion;
    // Referencia al indicador de progreso circular
    private ProgressBar indicadorProgreso3;
    
    int contador = 0;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_controles);
        
        mensajeTexto = (TextView)findViewById(R.id.mensaje_texto);
        barraDeslizamiento = (SeekBar)findViewById(R.id.barra_deslizamiento);
        barraCalificacion = (RatingBar)findViewById(R.id.barra_calificacion);
        indicadorProgreso3 = (ProgressBar)findViewById(R.id.indicador_progreso3);
        
        // Implementar escucha de eventos para la barra de desplazamiento
        barraDeslizamiento.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            // Parámetro progresoActual indica el valor actual de la barra
            public void onProgressChanged(SeekBar barra, int progresoActual, boolean desdeUsuario) {
                // Modificar el tamaño del texto según el valor de la barra
                mensajeTexto.setTextSize(barraDeslizamiento.getProgress());
            }
            @Override
            public void onStartTrackingTouch(SeekBar barra) {
                // Acciones al comenzar a deslizar
            }
            @Override
            public void onStopTrackingTouch(SeekBar barra) {
                // Mostrar el valor seleccionado al detener el deslizamiento
                // Toast.makeText(PantallaControles.this,"Valor: "+barraDeslizamiento.getProgress(),Toast.LENGTH_LONG).show();
            }
        });

        // Utilizar un hilo para simular cambios automáticos en la barra
        new Thread(new Runnable() {
            @Override
            public void run() {
                while(contador < 60){
                    // Actualizar la interfaz de usuario en el hilo principal
                    runOnUiThread(new Runnable() {
                        @Override
                        public void run() {
                            // Establecer el progreso actual
                            barraDeslizamiento.setProgress(contador);
                        }
                    });
                    contador++;
                    // Pausa entre actualizaciones
                    SystemClock.sleep(500);
                }
            }
        }).start();

        // Configurar escucha para la barra de calificación
        barraCalificacion.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener() {
            @Override
            public void onRatingChanged(RatingBar barra, float valor, boolean desdeUsuario) {
                Toast.makeText(PantallaControles.this,"Tu calificación: "+valor+" estrellas",Toast.LENGTH_SHORT).show();
            }
        });
    }
    
    // Variable para controlar el estado de ejecución
    boolean estaEjecutando = true;
    // Variable para el progreso actual
    int progresoActual = 0;
    
    // Método para iniciar la animación de progreso
    public void iniciarProgreso(View vista){
        new Thread(new Runnable() {
            @Override
            public void run() {
                while(estaEjecutando){
                    // Actualizar el progreso
                    progresoActual++;
                    indicadorProgreso3.setProgress(progresoActual);
                    SystemClock.sleep(200);
                    if(progresoActual >= 100){
                        runOnUiThread(new Runnable() {
                            @Override
                            public void run() {
                                Toast.makeText(PantallaControles.this,"Progreso completado",Toast.LENGTH_LONG).show();
                                // Detener cuando se complete
                                detenerProgreso(null);
                            }
                        });
                    }
                }
            }
        }).start();
    }
    
    // Método para detener la animación y reiniciar
    public void detenerProgreso(View vista){
        estaEjecutando = false;
        indicadorProgreso3.setProgress(0);
        progresoActual = 0;
    }
}