Diferencia entre revisiones de «Usuario:ManuelRomero/Android/PrimerosContactos/Dialogo»

De WikiEducator
Saltar a: navegación, buscar
(Página creada con '{{:Usuario:ManuelRomero/Android/PrimerosContactos/nav}} <br> ===Dialog con 2 o 3 botones=== <br/> {{Actividad| #Primero añadimos un botón para que realice esta acción #Le as…')
 
(→‎Tipos de diálogo)
 
(10 revisiones intermedias por el mismo usuario no mostrado)
Línea 1: Línea 1:
 
{{:Usuario:ManuelRomero/Android/PrimerosContactos/nav}}
 
{{:Usuario:ManuelRomero/Android/PrimerosContactos/nav}}
−
<br>  
+
<br>
−
===Dialog con 2 o 3 botones===
+
===Concepto de cajas de dialogo===
−
<br/>
+
*Son widgets que contienen información para el usuario
−
{{Actividad|
+
*La información se presenta en una ventana emergente aparte de la aplicación
−
#Primero añadimos un botón para que realice esta acción
+
*El objetivo de una caja de diálogo puede ser muy diferente
−
#Le asignamos en el atributo onClick en nombre de la función
+
**Simplemente informar de algo sin mucha importancia
−
#implementamos la función
+
**Informar de algo importante que nos necesitemos asegurar que el usuario lo ha leído
−
}}
+
**Pedir información o confirmación de algo (tendremos botones, cajas de texto)
 +
**Informar de que está ocurriendo algo y el porcentaje de ello
 +
*Iremos presentando las diferentes opciones que se plantean, implementando diferentes tipos de notificaciones en android
  
−
<source lang=xml>
+
===Métodos para presentar los diálogos===
−
<Button
+
*Existen dos métodos
−
        android:id="@+id/btnDialogo1"
+
#Basado en versiones anteriores
−
        android:text="Dialogo1"
+
##los diálogos los gestiona la clases  '''''activity''''' desde  una pila
−
        android:layout_width="wrap_content"
+
##Los diálogos no se comparten entre actividades
−
        android:layout_height="wrap_content"
+
##Muchos métodos utilizados están obsoletos
−
        android:onClick="clickDialogo1" />
+
##Es el más fácil de implementar
−
</source>
+
#Basado en fragmentos
−
===El código ===
+
##Usados desde el API 11 (Android 3.0)
−
*Una caja de diálog es un objeto de la clase '''AlertDialog'''
+
##Puede funcionar con versiones anteriores si usamos el ''paquete de soporte Android''
−
*Para configurar las propiedades de la caja de diálogo usamos un objeto que devuelve el método estático '''''AlertDialog.Builder(Context );
+
##Los diálogos los gestiona '''''FragmentManager''''' ''android.app.FragmentManager
−
*El procedimiento para crear/usar cajas de diálogos es el siguiente
+
##Los diálogos  son un tipo especial de fragmento
−
#creo un objeto para las propiedades de la caja de diálogo ''AlerDialog.Builder''
+
##Para usarlo crearemos clases que hereden de la clase '''''DialogFragment'''''
−
#creo la caja de diálogo  AlertDialog a partir de objeto anterior
+
−
#Muestro la caja de diálogo
+
−
<source lang=java>
+
−
AlertDialog.Builder caja = new AlertDialog.Builder(this);7
+
−
caja.setTitle("Titulo");
+
−
    .setIcon("icono.png");
+
−
  ......
+
−
AlertDialog dialogo = caja.create();
+
−
dialogo.show();
+
−
</source>
+
−
*Realizamos el código
+
−
*Observar que para dar las diferentes propiedades puedo hacerlo seguido
+
−
objeto.propiedad1()
+
−
      .propiedad2()
+
−
      ....
+
−
      .propiedadn();
+
−
*Una vez creado el objeto le damos las propiedades que necesarias
+
−
*Los métodos que asignas propiedades son muy intuitivos, y permiten asignar
+
−
#Un título setTitle
+
−
#Un mensaje de texto
+
−
#Uno, dos o tres botones
+
−
#Una lista de items seleccionables (con casillas de verificación (checkboxes) o botones de opción (radio buttons) opcionales)
+
−
#El método setCancelable(boolean) convierte la ventana de dialogo en modal respecto al botón de retroceso
+
  
−
Vermos el código
+
===Tipos de diálogo===
−
<source lang=java>
+
Los tipos de diálogos que podemos encontrar en Android son
−
  public void clickDialogo1(View v){
+
;Dialog
−
  AlertDialog.Builder builder = new AlertDialog.Builder(this);
+
: http://developer.android.com/reference/android/app/Dialog.html
−
  builder.setMessage("¿Desea continuar con la transferencia de dinero?")
+
:Si queremos hacer una caja de diálogo personalizada deberemos usar esta clase como punto de partida y heredar de ella
−
          .setTitle("Advertencia")
+
:En  otro caso podemos usar una de las clases descendientes como vamos a ver a continuación
−
          .setCancelable(false)
+
−
          .setNegativeButton("Cancelar",
+
−
                  new DialogInterface.OnClickListener() {
+
−
                      public void onClick(DialogInterface dialog, int id) {
+
−
                          dialog.cancel();
+
−
                      }
+
−
                  })
+
−
          .setPositiveButton("Continuar",
+
−
                  new DialogInterface.OnClickListener() {
+
−
                      public void onClick(DialogInterface dialog, int id) {
+
−
                          msgOK(); // metodo que se debe implementar
+
−
                      }
+
−
                  });
+
−
  AlertDialog alert = builder.create();
+
−
  alert.show();
+
−
  }
+
  
−
private void msgOK(){
+
[[Imagen:claseDialog1.png]];
−
        Toast t = Toast.makeText(getApplicationContext(), "Has presionado ok", Toast.LENGTH_SHORT);
+
;AlertDialog
−
        t.show();
+
;CharacterPickerDialog
−
}
+
;DatePickerDialog
−
</source>
+
;ProgressDialog
−
*Conviene revisar el método para añadir botones
+
;TimePickerDialog
−
*Tenemos tres métodos para este cometido
+
;Toast
−
setPositiveButton
+
:http://developer.android.com/guide/topics/ui/notifiers/toasts.html
−
setNegativeButton
+
[[Imagen:toast.png]]
−
setNeutralButton
+
Es una notificación que no espera confiración
−
*Estos métodos tienen dos parámetros el texto y el listener
+
−
*Se suele pasar una instancia del listener creandola en el propio parámetros
+
−
*Si quiere usar variables de la clase, éstas tienen que ser constantes
+
  
−
{{Actividad|Se puede añadir otro botón a la caja de diálogo anterior}}
+
#
 +
#Dialogo personalizado
 +
====Dialog====
 +
*La clase Dialog
  
−
===checkButton como opciones===
+
===Clase Toast===
−
*Tenemos diferentes opciones y queremos seleccionar  algunas de ellas
+
clase definida en el paquete  '''''widgwt'''''
−
*En ella el usuario debe checkear distintas opciones (seleccionar idiomas)
+
android.widget.Toast
−
*En este caso debemos invocar al método '''''setMultiChoiceItems'''''
+
[[Imagen:toast.png]]
−
*Este método le pasamos el vector de opciones, un vector de boolenos que nos dice cada opción si está  o no seleccionada y un listener.
+
;Referencia
−
*Igualmente podemos añadir botones de aceptar o cancelar.
+
http://developer.android.com/guide/topics/ui/notifiers/toasts.html
−
<source lang=xml>
+
 
−
  <Button
+
*Esta clase implementa la ventana mas sencilla de notificación.
−
        android:id="@+id/Dialog4"
+
*Es simplemente un alert o MsgBox con un solo parámetro,
−
        android:text="Idiomas"
+
*El parámetro es el texto que visualiza
−
        android:layout_width="wrap_content"
+
*Se visualiza independientemente del activity de la aplicación, por defecto en la parte inferion de la pantalla
−
        android:layout_height="wrap_content"
+
*Por lo que no oculta la activity que sigue visible y activa
−
        android:onClick="clickOpcionMultiple" />
+
*El mensaje generado por '''''Toast''''' desaparece cuando se cumple un ''timeout''
 +
<!-- Aclarar esto de la vista-->
 +
*Un objeto de la clase Toast se puede instanciar con un método estático '''''makeText''''' de la misma clase
 +
<source lang=java>
 +
makeText(contexto, texto, duracion)
 
</source>
 
</source>
 +
Este método recibe tres parámetros
 +
;contexto
 +
:Objeto que describe el en entorno actual de la interfaz de la aplicación
 +
;texto
 +
:La cadena de caracteres que se va a visualizar
 +
;duración
 +
:tiempo en el que dura la ventana emergente
 +
:puede tomar dos valores  como constantes de la propia clase
 +
LENGTH_LONG
 +
LENGTH_SHORT
 +
*El método que añadimos es el siguiente
 
<source lang=java>
 
<source lang=java>
−
public void clickOpcionMultiple(View v){
+
...
−
 
+
    public void clickToast(View v){
−
 
+
    Context contesto = getApplicationContext();
−
AlertDialog.Builder caja = new AlertDialog.Builder(this);
+
    CharSequence texto = "Este ejemplo ha funcionado FACIL!!!!";
−
 
+
    int duracion = Toast.LENGTH_LONG;
−
caja.setTitle("Tu OS móvil preferido?")
+
    Toast mensaje = Toast.makeText(contesto, texto, duracion);
−
    .setMultiChoiceItems(idiomas,idiomasSeleccionados,
+
    mensaje.show();
−
                          new DialogInterface.OnMultiChoiceClickListener() {
+
    }
−
                  @Override
+
...
−
                public void onClick(DialogInterface dialog, int which, boolean isChecked) {
+
−
// TODO Auto-generated method stub
+
−
                      Context contesto = getBaseContext();
+
−
                      int duracion=Toast.LENGTH_SHORT;
+
−
                      Toast.makeText(contesto,idiomas[which]+(isChecked ? "seleccionado":"NOOOOOO seleccionado"),duracion).show();
+
−
                              }
+
−
                  });
+
−
 
+
−
AlertDialog alert = caja.create();
+
−
alert.show();
+
−
}
+
−
}
+
−
 
+
−
 
+
 
</source>
 
</source>
−
===ratioButton ===
+
*Este código se puede implemenar de forma mas sencilla sin crear el objeto Toast
−
*Tenemos diferentes opciones y queremos seleccionar  solo una
+
−
*En este caso usaremos el método setSingleChoiceItems(charSequence[] lista,int item_seleccionado,listener)
+
−
<source lang=xml>
+
−
<Button
+
−
        android:id="@+id/Dialog3"
+
−
        android:text="Sexo"
+
−
        android:layout_width="wrap_content"
+
−
        android:layout_height="wrap_content"
+
−
        android:onClick="clickSingle" />
+
−
</source>
+
−
 
+
 
<source lang=java>
 
<source lang=java>
−
public void clickSingle(View v){
+
.....
−
 
+
    public void clickToast(View v){
−
 
+
         Toast.makeText(contesto, texto, duracion).show();
−
AlertDialog.Builder caja = new AlertDialog.Builder(this);
+
     }
−
caja.setTitle("Tu OS móvil preferido?")
+
.....
−
    .setSingleChoiceItems(sexo, -1, new DialogInterface.OnClickListener() {
+
−
    public void onClick(DialogInterface dialog, int item) {
+
−
         Toast toast = Toast.makeText(getApplicationContext(), "Haz elegido la opcion: " + sexo[item] , Toast.LENGTH_SHORT);
+
−
        toast.show();
+
−
        dialog.cancel();
+
−
    }
+
−
     });
+
−
AlertDialog alert = caja.create();
+
−
alert.show();
+
−
}
+
−
 
+
−
</source>
+
−
===Ventana dialogo con direfentes opciones===
+
−
*En este caso añadimos el método setItems, en lugar de setMessage
+
−
*El método setItems como primer parámetro le pasaremos un vector de charSequences y el segundo es un listener
+
−
*Vemos el código
+
−
<source lang=xml>
+
−
  <Button
+
−
        android:id="@+id/btnOpciones"
+
−
        android:text="Opciones"
+
−
        android:layout_width="wrap_content"
+
−
        android:layout_height="wrap_content"
+
−
        android:onClick="clickMsgOpciones" />
+
 
</source>
 
</source>
 +
*Podemos modificar la ubicación usando el método '''''setGravitity(int posicion, int offset_x, int offset_y);'''''
 
<source lang=java>
 
<source lang=java>
−
public void clickMsgOpciones(View v){
+
....
−
   
+
    public void clickToast(View v){
−
      AlertDialog.Builder caja = new AlertDialog.Builder(this);
+
    Context contesto = getApplicationContext();
−
      caja.setTitle("Indica sexo")
+
    CharSequence texto = "Este ejemplo ha funcionado FACIL!!!!";
−
          .setPositiveButton("Continuar",
+
    int duracion = Toast.LENGTH_LONG;
−
              new DialogInterface.OnClickListener() {
+
    Toast mensaje = Toast.makeText(contesto, texto, duracion);
−
                  public void onClick(DialogInterface dialog, int id) {
+
        mensaje.setGravity(Gravity.CENTER|Gravity.LEFT,0,0);
−
                      msgOK(); // metodo que se debe implementar
+
    mensaje.show();
−
                  }
+
    }
−
              })
+
...
−
          .setItems(sexo, new DialogInterface.OnClickListener() {
+
−
@Override
+
−
      public void onClick(DialogInterface dialog, int elemento) {
+
−
// TODO Auto-generated method stub
+
−
      Toast t = Toast.makeText(getApplicationContext(), "Has seleccionado "+sexo[elemento],Toast.LENGTH_LONG);
+
−
      t.show();
+
−
      dialog.cancel();
+
−
      }
+
−
});
+
−
 
+
−
AlertDialog alert = caja.create();
+
−
alert.show();
+
−
}
+
 
</source>
 
</source>
−
===Barra de progreso circular===
+
*También podríamos cambiar la apariencia, creando un layout para el objeto Toast (Ver documentación oficial).
−
*En este caso la barra de progreso puede ser circular u horizontal
+
===Modificando la interfaz===
−
*Este tipo de barra de progreso se ha de actualizar
+
*Añadimos un botón
−
*Si queremos que se ejecute de forma independiente del proceso debemo crear un hilo de ejecución
+
;Referencia
−
*En este caso creamos un objeto de la clase '''''ProgressDialog'''''
+
http://developer.android.com/reference/android/widget/Button.html
−
<source lang=xml>
+
*Los elementos gráficos los podemos añadir de dos maneras
−
    <Button
+
#En el fichero java  directamente
−
        android:id="@+id/ProgressDialog"
+
#En el fichero xml que descrive el layout de la ventana donde queremos que aparezcan
−
        android:text="Progress Circulo"
+
*Lo haremos en el fichero xml, totalmente recomendado, sencillo y eficaz.
−
        android:layout_width="wrap_content"
+
*La idea es que al hacer click salga un mensaje emergente-
−
        android:layout_height="wrap_content"
+
−
        android:onClick="clickProgressCirculo" />
+
−
</source>
+
−
*En este caso simplemente
+
−
#creamos el objeto ProgressDialog
+
−
#Lo visualizamos
+
−
#Creamos un thread que espere 5 segundos
+
−
#cerramos la barra de diálogo con dismiss()
+
−
<sourece lang=java>
+
−
public void clickProgressCirculo(View v){
+
−
final ProgressDialog barraProgreso = ProgressDialog.show(this, "Haciendo algo","Espere que termine",true);
+
−
+
−
new Thread(new Runnable(){
+
−
public void run(){
+
−
try{
+
−
Thread.sleep(5000);
+
−
barraProgreso.dismiss();
+
−
}catch (InterruptedException e){
+
−
e.printStackTrace();
+
−
}
+
−
}
+
−
}).start();
+
−
+
−
}
+
−
</source>
+
−
 
+
−
===Barra de progreso horizontal===
+
−
*Ahora le diremos que el objeto que tiene la forma horizontal de línea
+
−
*En este caso tenemos una barra que se va rellenando
+
−
*Esto implica que el progreso tendrá un valor inicial e irá modificando hasta llegar a estar totalmente rellena
+
−
*Vamos a añadir un botón para cancelar
+
 
<source lang=xml>
 
<source lang=xml>
 
  <Button
 
  <Button
−
         android:id="@+id/ProgressDialog2"
+
         android:id="@+id/button1"
−
        android:text="Progress Dialog 2"
+
 
         android:layout_width="wrap_content"
 
         android:layout_width="wrap_content"
 
         android:layout_height="wrap_content"
 
         android:layout_height="wrap_content"
−
         android:onClick="clickProgressHorizontal" />
+
         android:text="Mensaje Toast"  
−
</source>
+
        android:onClick="clickToast"/>
−
<source lang=java>
+
−
public void clickProgressHorizontal(View v){
+
−
+
−
Toast t=Toast.makeText(getApplicationContext(),"hola",Toast.LENGTH_LONG);
+
−
final ProgressDialog barraSofisticadaDialogo = new ProgressDialog(this);
+
−
t.show();
+
−
barraSofisticadaDialogo.setIcon(R.drawable.ic_launcher);
+
−
barraSofisticadaDialogo.setTitle("Hanciendo algo, no molesten!!");
+
−
barraSofisticadaDialogo.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);
+
−
barraSofisticadaDialogo.setButton(DialogInterface.BUTTON_POSITIVE,"OK",
+
−
new DialogInterface.OnClickListener() {
+
−
@Override
+
−
public void onClick(DialogInterface dialog, int which) {
+
−
// TODO Auto-generated method stub
+
−
Toast.makeText(getBaseContext(), "Ok cliqueado",Toast.LENGTH_SHORT).show(); }
+
−
  }
+
−
);
+
−
barraSofisticadaDialogo.setProgress(0);
+
−
barraSofisticadaDialogo.show();
+
−
Log.d("BARRASOFISTICADA","Antes del Runnable");
+
−
new Thread(new Runnable(){
+
−
public void run(){
+
−
for (int i=1;i<=15;i++){
+
−
try{
+
−
Log.d("BARRASOFISTICADA","dentro del Runnable");
+
−
Thread.sleep(100);
+
−
barraSofisticadaDialogo.incrementProgressBy((int)(100/15));
+
−
+
−
}catch (InterruptedException e){
+
−
e.printStackTrace();
+
−
}
+
−
}//End for
+
−
barraSofisticadaDialogo.dismiss();
+
−
Log.d("BARRASOFISTICADA","terminado el  bucle");
+
−
+
−
}
+
−
}).start();
+
−
Log.d("BARRASOFISTICADA","terminado el  Runnable");
+
−
 
+
 
</source>
 
</source>
 +
*Entre los atributos vemos que está '''''onClick'''''
 +
*Este atributo especifica el nombre del método que se va a ejecutar cuando ocurra la acción
 +
*En el código ese método recibirá la vista de este layout como parámetro
 +
===El fichero java===
 +
*Escribimos el código para que aparezca el mensaje
 +
*Básicamente lo que haremos es escribir el código de este método '''''clickToast'''''
 +
*Este método recibe como argumento la vista donde está el botón ç
 +
*En él instanciaremos un objeto de la clase '''''Toast'''''

Última revisión de 11:07 3 nov 2013



  • Son widgets que contienen información para el usuario
  • La información se presenta en una ventana emergente aparte de la aplicación
  • El objetivo de una caja de diálogo puede ser muy diferente
    • Simplemente informar de algo sin mucha importancia
    • Informar de algo importante que nos necesitemos asegurar que el usuario lo ha leído
    • Pedir información o confirmación de algo (tendremos botones, cajas de texto)
    • Informar de que está ocurriendo algo y el porcentaje de ello
  • Iremos presentando las diferentes opciones que se plantean, implementando diferentes tipos de notificaciones en android

Métodos para presentar los diálogos

  • Existen dos métodos
  1. Basado en versiones anteriores
    1. los diálogos los gestiona la clases activity desde una pila
    2. Los diálogos no se comparten entre actividades
    3. Muchos métodos utilizados están obsoletos
    4. Es el más fácil de implementar
  2. Basado en fragmentos
    1. Usados desde el API 11 (Android 3.0)
    2. Puede funcionar con versiones anteriores si usamos el paquete de soporte Android
    3. Los diálogos los gestiona FragmentManager android.app.FragmentManager
    4. Los diálogos son un tipo especial de fragmento
    5. Para usarlo crearemos clases que hereden de la clase DialogFragment

Los tipos de diálogos que podemos encontrar en Android son

Dialog
http://developer.android.com/reference/android/app/Dialog.html
Si queremos hacer una caja de diálogo personalizada deberemos usar esta clase como punto de partida y heredar de ella
En otro caso podemos usar una de las clases descendientes como vamos a ver a continuación

ClaseDialog1.png;

AlertDialog
CharacterPickerDialog
DatePickerDialog
ProgressDialog
TimePickerDialog
Toast
http://developer.android.com/guide/topics/ui/notifiers/toasts.html

Toast.png 

Es una notificación que no espera confiración
  2. Dialogo personalizado

Dialog

  • La clase Dialog

Clase Toast

clase definida en el paquete widgwt 

android.widget.Toast

Toast.png

Referencia 
http://developer.android.com/guide/topics/ui/notifiers/toasts.html
  • Esta clase implementa la ventana mas sencilla de notificación.
  • Es simplemente un alert o MsgBox con un solo parámetro,
  • El parámetro es el texto que visualiza
  • Se visualiza independientemente del activity de la aplicación, por defecto en la parte inferion de la pantalla
  • Por lo que no oculta la activity que sigue visible y activa
  • El mensaje generado por Toast desaparece cuando se cumple un timeout
  • Un objeto de la clase Toast se puede instanciar con un método estático makeText de la misma clase 
 makeText(contexto, texto, duracion)

Este método recibe tres parámetros

contexto
Objeto que describe el en entorno actual de la interfaz de la aplicación
texto
La cadena de caracteres que se va a visualizar
duración
tiempo en el que dura la ventana emergente
puede tomar dos valores como constantes de la propia clase 
LENGTH_LONG
LENGTH_SHORT
  • El método que añadimos es el siguiente 
...
    public void clickToast(View v){
    	Context contesto = getApplicationContext();
    	CharSequence texto = "Este ejemplo ha funcionado FACIL!!!!";
    	int duracion = Toast.LENGTH_LONG;
    	Toast mensaje = Toast.makeText(contesto, texto, duracion);
    	mensaje.show();
    }
...
  • Este código se puede implemenar de forma mas sencilla sin crear el objeto Toast 
.....
    public void clickToast(View v){
        Toast.makeText(contesto, texto, duracion).show();
    }
.....
  • Podemos modificar la ubicación usando el método setGravitity(int posicion, int offset_x, int offset_y); 
....
    public void clickToast(View v){
    	Context contesto = getApplicationContext();
    	CharSequence texto = "Este ejemplo ha funcionado FACIL!!!!";
    	int duracion = Toast.LENGTH_LONG;
    	Toast mensaje = Toast.makeText(contesto, texto, duracion);
        mensaje.setGravity(Gravity.CENTER|Gravity.LEFT,0,0);
    	mensaje.show();
    }
...
  • También podríamos cambiar la apariencia, creando un layout para el objeto Toast (Ver documentación oficial).

Modificando la interfaz

  • Añadimos un botón
Referencia 
http://developer.android.com/reference/android/widget/Button.html
  • Los elementos gráficos los podemos añadir de dos maneras
  1. En el fichero java directamente
  2. En el fichero xml que descrive el layout de la ventana donde queremos que aparezcan
  • Lo haremos en el fichero xml, totalmente recomendado, sencillo y eficaz.
  • La idea es que al hacer click salga un mensaje emergente- 
 <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Mensaje Toast" 
        android:onClick="clickToast"/>
  • Entre los atributos vemos que está onClick
  • Este atributo especifica el nombre del método que se va a ejecutar cuando ocurra la acción
  • En el código ese método recibirá la vista de este layout como parámetro

El fichero java

  • Escribimos el código para que aparezca el mensaje
  • Básicamente lo que haremos es escribir el código de este método clickToast
  • Este método recibe como argumento la vista donde está el botón ç
  • En él instanciaremos un objeto de la clase Toast
Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:ManuelRomero/Android/PrimerosContactos/Dialogo&oldid=13697»