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

De WikiEducator
Saltar a: navegación, buscar
(→‎Tipos de diálogo)
 
(8 revisiones intermedias por el mismo usuario no mostrado)
Línea 2: Línea 2:
 
<br>
 
<br>
 
===Concepto de cajas de dialogo===
 
===Concepto de cajas de dialogo===
−
*Son widgets que contienen informción para el usuario
+
*Son widgets que contienen información para el usuario
−
*La información se presenta en una ventana aparte de la aplicación
+
*La información se presenta en una ventana emergente aparte de la aplicación
−
*La ventana puede tener botones para que el usuario interactúe
+
*El objetivo de una caja de diálogo puede ser muy diferente
−
*Puede pedir información o simplemente aceptar o confirmar algo
+
**Simplemente informar de algo sin mucha importancia
−
*Iremos presentando las diferentes opciones que se plantean
+
**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===
 
===Métodos para presentar los diálogos===
 
*Existen dos métodos
 
*Existen dos métodos
Línea 19: Línea 23:
 
##Los diálogos los gestiona '''''FragmentManager''''' ''android.app.FragmentManager
 
##Los diálogos los gestiona '''''FragmentManager''''' ''android.app.FragmentManager
 
##Los diálogos  son un tipo especial de fragmento
 
##Los diálogos  son un tipo especial de fragmento
−
===Tipos de diálogo===
+
##Para usarlo crearemos clases que hereden de la clase '''''DialogFragment'''''
  
 +
===Tipos de diálogo===
 +
Los tipos de diálogos que podemos encontrar en Android son
 
;Dialog
 
;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
 +
 +
[[Imagen:claseDialog1.png]];
 
;AlertDialog
 
;AlertDialog
 
;CharacterPickerDialog
 
;CharacterPickerDialog
Línea 27: Línea 38:
 
;ProgressDialog
 
;ProgressDialog
 
;TimePickerDialog
 
;TimePickerDialog
−
;Dialogo personalizado
 
 
;Toast
 
;Toast
 +
:http://developer.android.com/guide/topics/ui/notifiers/toasts.html
 +
[[Imagen:toast.png]]
 +
Es una notificación que no espera confiración
 +
 +
#
 +
#Dialogo personalizado
 +
====Dialog====
 +
*La clase Dialog
  
−
===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
 
−
#En el fichero java  directamente
 
−
#En el fichero xml que descrive el layout de la ventana donde queremos que aparezcan
 
−
*Lo haremos en el fichero xml por simplicidad
 
−
*La idea es que al hacer click salga un mensaje emergente
 
−
<source lang=xml>
 
−
<Button
 
−
        android:id="@+id/button1"
 
−
        android:layout_width="wrap_content"
 
−
        android:layout_height="wrap_content"
 
−
        android:text="Mensaje Toast"
 
−
        android:onClick="clickToast"/>
 
−
</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'''''
 
 
===Clase Toast===
 
===Clase Toast===
 
clase definida en el paquete  '''''widgwt'''''
 
clase definida en el paquete  '''''widgwt'''''
 
  android.widget.Toast
 
  android.widget.Toast
 +
[[Imagen:toast.png]]
 
;Referencia  
 
;Referencia  
 
  http://developer.android.com/guide/topics/ui/notifiers/toasts.html
 
  http://developer.android.com/guide/topics/ui/notifiers/toasts.html
−
*Esta clase implementa la ventana mas sencilla de diálogo
+
 
 +
*Esta clase implementa la ventana mas sencilla de notificación.
 
*Es simplemente un alert o MsgBox con un solo parámetro,
 
*Es simplemente un alert o MsgBox con un solo parámetro,
 
*El parámetro es el texto que visualiza
 
*El parámetro es el texto que visualiza
−
*Se visualiza independientemente del activity de la aplicación
+
*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
 
*Por lo que no oculta la activity que sigue visible y activa
 
*El mensaje generado por '''''Toast''''' desaparece cuando se cumple un ''timeout''
 
*El mensaje generado por '''''Toast''''' desaparece cuando se cumple un ''timeout''
−
 
 
<!-- Aclarar esto de la vista-->
 
<!-- 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
 
*Un objeto de la clase Toast se puede instanciar con un método estático '''''makeText''''' de la misma clase
Línea 72: Línea 66:
 
  makeText(contexto, texto, duracion)
 
  makeText(contexto, texto, duracion)
 
</source>
 
</source>
−
Este métod recibe tres parámetros
+
Este método recibe tres parámetros
 
;contexto  
 
;contexto  
 
:Objeto que describe el en entorno actual de la interfaz de la aplicación
 
:Objeto que describe el en entorno actual de la interfaz de la aplicación
Línea 82: Línea 76:
 
  LENGTH_LONG
 
  LENGTH_LONG
 
  LENGTH_SHORT
 
  LENGTH_SHORT
−
El método que añadimos es el siguiente
+
*El método que añadimos es el siguiente
 
<source lang=java>
 
<source lang=java>
 +
...
 
     public void clickToast(View v){
 
     public void clickToast(View v){
 
     Context contesto = getApplicationContext();
 
     Context contesto = getApplicationContext();
 
     CharSequence texto = "Este ejemplo ha funcionado FACIL!!!!";
 
     CharSequence texto = "Este ejemplo ha funcionado FACIL!!!!";
 
     int duracion = Toast.LENGTH_LONG;
 
     int duracion = Toast.LENGTH_LONG;
−
   
 
 
     Toast mensaje = Toast.makeText(contesto, texto, duracion);
 
     Toast mensaje = Toast.makeText(contesto, texto, duracion);
 
     mensaje.show();
 
     mensaje.show();
 
     }
 
     }
 +
...
 
</source>
 
</source>
−
===Ventana dialogo con ckeckbox===
+
*Este código se puede implemenar de forma mas sencilla sin crear el objeto Toast
−
*A continución realizaremos otra ventana de diálogo
+
−
*Seguimos usando el mismo proyecto
+
−
*En ella el usuario debe checkear distintas opciones (seleccionar idiomas)
+
−
*En la misma confirmaremos o cancelaremos la selección
+
−
===Realización de la práctica===
+
−
*Modificamos el interfaz
+
−
<source lang=xml>
+
−
  <Button
+
−
        android:id="@+id/button2"
+
−
        android:layout_width="wrap_content"
+
−
        android:layout_height="wrap_content"
+
−
        android:text="Opciones Lengaje"
+
−
        android:onClick="clickMesajeOpciones"/>
+
−
</source>
+
−
*Definimos un array de opciones
+
 
<source lang=java>
 
<source lang=java>
−
CharSequence[] idiomas={"Españlo","Inglés","Alemán"};
+
.....
−
    boolean [] idiomasSeleccionados=new boolean[idiomas.length];
+
    public void clickToast(View v){
 +
        Toast.makeText(contesto, texto, duracion).show();
 +
    }
 +
.....
 
</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 clickDialogoOpciones(View v){
+
....
−
    showDialog(0);
+
     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();
 +
    }
 +
...
 
</source>
 
</source>
−
*El uso del método showDialog esta depreciado a partir de la versión 3.0 de android.
+
*También podríamos cambiar la apariencia, creando un layout para el objeto Toast (Ver documentación oficial).
−
*El argumento indica un determinado cuadro de diálogo a mostrar
+
===Modificando la interfaz===
−
 
+
*Añadimos un botón
−
*implementamos el método '''''clickMesajeOpciones'''''
+
;Referencia
−
*Este método lo que hace es llamar al método '''''onCreateDialog()''''' que hay que sobreescribir
+
http://developer.android.com/reference/android/widget/Button.html
−
*Retorna un objeto Dialog que hay que importar de la clase import android.app.Dialog;
+
*Los elementos gráficos los podemos añadir de dos maneras
−
 
+
#En el fichero java  directamente
−
 
+
#En el fichero xml que descrive el layout de la ventana donde queremos que aparezcan
−
*Para mostrar el código debemos implementar el método '''''onCreateDialog(int)'''''
+
*Lo haremos en el fichero xml, totalmente recomendado, sencillo y eficaz.
−
*Para crear un cuadro de diálogo utiliza el constructur '''''Buider''''' de la clase '''''AlertDialog'''''
+
*La idea es que al hacer click salga un mensaje emergente-
−
*Se establecen las propiedades como icono, título, botones, casillas de verificación, ...
+
<source lang=xml>
−
*se invoca al método create del objeto builder
+
<Button
−
<source lang=java>
+
        android:id="@+id/button1"
−
Builder ventanaDialogo = new AlertDialog.Builder(this);
+
        android:layout_width="wrap_content"
−
ventanaDialogo.setIcon(R.drawable.ic_launcher);
+
        android:layout_height="wrap_content"
−
ventanaDialogo.setTitle("Ejemplo de cuadro diálogo 1 con texto" );
+
        android:text="Mensaje Toast"
−
ventanaDialogo.setPositiveButton("SI", new DialogInterface.OnClickListener() {
+
        android:onClick="clickToast"/>
−
@Override
+
−
  public void onClick(DialogInterface dialog, int which) {
+
−
          // TODO Auto-generated method stub
+
−
          Context contesto = getBaseContext();
+
−
          int duracion=Toast.LENGTH_LONG;
+
−
          Toast.makeText(contesto,"OK seleccionado",duracion).show();
+
−
  }
+
−
});
+
 
</source>
 
</source>
−
===Barra de progreso===
+
*Entre los atributos vemos que está '''''onClick'''''
−
*En este caso usaremos un objeto ProgressDialog en lugar de un Builder
+
*Este atributo especifica el nombre del método que se va a ejecutar cuando ocurra la acción
−
<source lang=java>
+
*En el código ese método recibirá la vista de este layout como parámetro
−
public void clickProgressDialog(View v){
+
===El fichero java===
−
final ProgressDialog barraProgreso = ProgressDialog.show(this, "Haciendo algo","Espere que termine",true);
+
*Escribimos el código para que aparezca el mensaje
−
new Thread(new Runnable(){
+
*Básicamente lo que haremos es escribir el código de este método '''''clickToast'''''
−
public void run(){
+
*Este método recibe como argumento la vista donde está el botón ç
−
try{
+
*En él instanciaremos un objeto de la clase '''''Toast'''''
−
Thread.sleep(5000);
+
−
barraProgreso.dismiss();
+
−
}catch (InterruptedException e){
+
−
e.printStackTrace();
+
−
}
+
−
}
+
−
}).start();
+
−
}
+
−
</source>
+
−
*Lo peculiar de este método es que creamos un thread
+
−
*Un thread o hilo es una línea de ejecución independiente de la ejecución de la aplicación que la invoca.
+
−
===Otra barra de tarea===
+
−
<source lang=java>
+
−
case 2:
+
−
   
+
−
    barraSofisticadaDialogo = new ProgressDialog(this);
+
−
    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(); }
+
−
});
+
−
    return barraSofisticadaDialogo;
+
−
</source>
+
−
<math>Escribir la fórmula aquí</math>
+

Última revisión de 12: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»