Ingenieros de Sistemas

Ingenieros de Sistemas
Innovando

jueves, 18 de diciembre de 2014

Progress Bar

Definición
java.lang.Object
    android.view.View
    android.widget.ProgressBar

Es una simple barra de progreso animada, una barra de progreso es un elemento de control gráfico utilizado para visualizar la progresión de una operación de equipo extendida, tales como descarga, transferencia de archivos, o la instalación. A veces, el gráfico se acompaña de una representación textual de los progresos en un formato por ciento.

Característica
  • Influyen en la percepción de la duración de los seres humanos
  • Normalmente el ProgressBar no muestran la cantidad de finalización en los números. Si queremos, podemos mostrarlo en el TextView.
  •  Por defecto, el valor de la barra máximo progreso es de 100. También se puede cambiar estableciendo el nuestro propio valor máximo usando atributo Android
Ejemplo Práctico

 El ejemplo de código siguiente se muestra cómo una barra de progreso se puede  utilizar para indicar el proceso de una simulación de descarga:

package com.example.btn_progressbar;
import android.support.v7.app.ActionBarActivity;
…I mport android.widget.ProgressBar;
    public class MainActivity extends Activity implements OnClickListener {
     ProgressBar pb;
     Button bt1;
     int progressStatus = 0;
     private TextView tv1;
     private Handler handler = new Handler();
     @Override
     protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      pb = (ProgressBar) findViewById(R.id.progressBar1);
      bt1 = (Button) findViewById(R.id.button1);
      tv1 = (TextView) findViewById(R.id.textView2);
      bt1.setOnClickListener(this);       }
     @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;        }
        return super.onOptionsItemSelected(item);    }
            @Override
            public void onClick(View v) {
                        // TODO Auto-generated method stub
                        switch(v.getId()){
                        //Boton Cuadrado
                        case R.id.button1 : {  new Thread(new Runnable() {
                     public void run() {
                         //Mientras que el progreso sea menor a 100
                        while (progressStatus < 100) {
                           progressStatus += 1;
                    handler.post(new Runnable() {
                    public void run() {
                        pb.setProgress(progressStatus);
                       
                                   //Mostrar en el textview el numero de carga sobre el total
                       tv1.setText(progressStatus+"/"+pb.getMax());
                    }});
               
                        try {
                       // Sleep for 200 milliseconds.
                                     //Just to display the progress slowly
                       Thread.sleep(200);
                    } catch (InterruptedException e) {
                       e.printStackTrace();
                       throw new RuntimeException(e);
                    }
                        }}}).start();
                        }                     
                        }}}

Para agregar una barra de progreso en un archivo de diseño, puede utilizar el <ProgressBar> elemento., así:


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical"
    android:gravity="center"
    >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Ejemplo: Visualizar el progreso de una descarga con ProgressBar" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Descargar musica" />

    <ProgressBar
        android:id="@+id/progressBar1"
        style="?android:attr/progressBarStyleHorizontal"
       android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:indeterminate="false"
        android:max="100"
        android:minHeight="50dp"
        android:minWidth="200dp"
        android:progress="1" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
         android:text="" />
   
</LinearLayout>

El resultado es el siguiente :




Vídeo de la Aplicación



      Descargar la Aplicación 


Widget SeekBar

Característica

SeekBar es uno de los elemento de la interfaz de usuario útil en aplicaciones de Android. SeekBar es una extensión de la barra de progreso que permite la selección de valores enteros utilizando una interfaz de usuario natural. Básicamente SeekBar tiene un pulgar que se puede deslizar para elegir un valor entre 0 y algún máximo que ha establecido. Un uso típico de la barra de búsqueda es el control de brillo del dispositivo y control de volumen.



Propiedades
Por defecto, el SeekBar toma el valor máximo de 100. Este valor máximo se puede cambiar con el atributo android:max="10"  en el archivo layout xml.
Atributo android:progress = "5" se utiliza para establecer el valor progreso inicial.
Así que si nos fijamos el atributo progreso a 5, a continuación, durante la carga inicial del pulgar SeekBar comenzará a las 5.
Nuestra actividad implementa SeekBarOnSeekBarChangeListener; Básicamente SeekBarOnSeekBarChangeListener es una interfaz pública estática que se utiliza para escuchar los eventos SeekBar.

Eventos
1.   public void onProgressChanged(SeekBar seekBar, int progresValue, boolean fromUser)
 Se utiliza para notificar que el nivel de progreso ha cambiado.
2.   public void onStartTrackingTouch(SeekBar seekBar) 
Se utiliza para notificar que el usuario ha iniciado un gesto táctil.
3.  public void onStopTrackingTouch(SeekBar seekBar)   
Se utiliza para notificar que el usuario ha terminado un gesto táctil.


Ejemplo Práctico
activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <SeekBar
        android:id="@+id/seekBar1"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="26dp"
        android:max="10"/>

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/seekBar1"
        android:layout_marginLeft="29dp"
        android:layout_marginTop="14dp" />

</RelativeLayout>
------------------------------------------------------------------------------------------------------------------------------
MainActivity.java

package com.example.seekbar;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;
import android.widget.TextView;


public class MainActivity extends Activity {

 private SeekBar seekBar;
 private TextView textView;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  seekBar = (SeekBar) findViewById(R.id.seekBar1);
  textView = (TextView) findViewById(R.id.textView1);
  // Initialize the textview with '0'
  textView.setText(seekBar.getProgress() + "/" + seekBar.getMax());
  seekBar.setOnSeekBarChangeListener(
                new OnSeekBarChangeListener() {
    int progress = 0;
        @Override
      public void onProgressChanged(SeekBar seekBar, 
                                            int progresValue, boolean fromUser) {
        progress = progresValue;
      }

      @Override
      public void onStartTrackingTouch(SeekBar seekBar) {
        // Do something here, 
                      //if you want to do anything at the start of
        // touching the seekbar
      }

      @Override
      public void onStopTrackingTouch(SeekBar seekBar) {
        // Display the value in textview
        textView.setText(progress + "/" + seekBar.getMax());
      }
  });
 }

 @Override
 public boolean onCreateOptionsMenu(Menu menu) {
  // Inflate the menu; 
                //this adds items to the action bar if it is present.
  getMenuInflater().inflate(R.menu.activity_main, menu);
  return true;
 }

}

Capturas de Pantalla








Vídeo de la Aplicación



Descargar Aplicación