Actividades e intenciones

Interfaces de usuario [Desarrollo de aplicaciones
para Android]
M. en C. Sergio Luis Pérez Pérez
UAM C UAJIMALPA , M ÉXICO, D. F.
Trimestre 14-P
Sergio Luis Pérez (UAM C UAJIMALPA)
Curso de Interfaces de Usuario
1 / 33
Actividades e intenciones
Actividades e intenciones
1
Actividades e intenciones
2
Creación de menús
3
Uso de la vista ListView
Sergio Luis Pérez (UAM C UAJIMALPA)
Curso de Interfaces de Usuario
2 / 33
Actividades e intenciones
Actividades e intenciones I
Una actividad en Android es equivalente a lo que conocemos
como ventanas.
Lo ideal es asociar una clase por actividad.
Todas las actividades que se desarrollen deben heredar de
Activity.
Los pasos generales para crear nuevas actividades son:
1
Crear un nuevo layout para la actividad que se desea crear.
2
Crear una nueva clase descendiente de Activity.
3
Asociar el layout creado a la nueva clase.
Sergio Luis Pérez (UAM C UAJIMALPA)
Curso de Interfaces de Usuario
3 / 33
Actividades e intenciones
Actividades e intenciones II
4
Activar la nueva actividad desde alguna otra actividad (si es que no
es la principal).
5
Registrar la nueva actividad en el archivo AndroidManifest.xml.
Para realizar la comunicación entre actividades se utilizan
instancias de intenciones, que se realizan mediante la clase Itent.
Para enviar datos de
una actividad a otra se utiliza el método putExtra de la clase Intent.
Intent nueva intencion = new Intent(this, ActividadALanzar.class);
nueva intencion.putExtra(“nombre dato”, “valor dato”)
startActivity(nueva intencion);
Sergio Luis Pérez (UAM C UAJIMALPA)
Curso de Interfaces de Usuario
4 / 33
Actividades e intenciones
Actividades e intenciones III
La actividad que recibe los datos requiere una instancia de la
clase Bundle.
Para obtener los datos que vengan de otra actividad se utilizará el
método getTipoDeDato de la clase Bundle.
Bundle extras = getIntent().getExtras();
TipoDeDato dato = extras.getTipoDeDato(“nombre dato”);
La actividad lanzada también puede devolver datos a la que la
invocó, una vez que termine.
Del lado de la actividad lanzadora se utiliza el método
startActivityForResult en lugar del método startActivity.
Intent nueva intencion = new Intent(this, ActividadALanzar.class);
startActivityForResult(nueva intencion, codigoDeSolicitud);
Sergio Luis Pérez (UAM C UAJIMALPA)
Curso de Interfaces de Usuario
5 / 33
Actividades e intenciones
Actividades e intenciones IV
Además se sobre-escribe el método onActivityResult, Ejemplo:
@Override protected void onActivityResult(int requestCode,
int resultCode, Intent data){
if(requestCode == codigoDeSolicitud &&
resultCode == RESULT OK){
TipoDeDato dato = data.getExtras().getTipoDeDato(“dato”);
}
}
Finalmente, en alguna parte de la actividad llamada se debe
utilizar un código como el siguiente:
public void regresarDeActividad(View V){
Intent intencionRegreso = new Intent();
intencionRegreso.putExtra(“dato”, “valor dato”);
setResult(RESULT OK, intencionRegreso);
finish();}
Sergio Luis Pérez (UAM C UAJIMALPA)
Curso de Interfaces de Usuario
6 / 33
Actividades e intenciones
Actividades e intenciones V
Ejercicio: crear una actividad que se visualice al pulsar un botón de
otra actividad.
1
Cree una aplicación de Android que contenga al menos un botón
o bien utilice una que ya tenga creada.
2
En el directorio res/layout crear un nuevo archivo Android XML file
con el nombre que prefiera y que contenga a una vista de tipo
TextView.
3
Agregue los atributos de id y text a la vista TextView en el xml.
4
Cree una nueva clase, llamada AcercaDe, para asociarla con
dicha actividad. Dicha clase deberá heredar de Activity y
sobre-escribir el método onCreate.
Sergio Luis Pérez (UAM C UAJIMALPA)
Curso de Interfaces de Usuario
7 / 33
Actividades e intenciones
Actividades e intenciones VI
5
En la clase principal de la aplicación agregue un método que
será asociado a un botón que, al presionarse, lanzará la actividad
creada. Para ello requerirá crear una instancia de tipo Intent.
public void mostrarAcercaDe(View view){
Intent nueva intencion = new Intent(this, AcercaDe.class);
startActivity(nueva intencion);
}
6
Asocie el evento onClick de algún botón al método creado
(android:onClick=“mostrarAcercaDe”).
7
Luego registre la nueva actividad creada en el archivo
AndroidManifest.xml.
1
En el archivo AndroidManifest.xml seleccione la pestaña de
Application.
Sergio Luis Pérez (UAM C UAJIMALPA)
Curso de Interfaces de Usuario
8 / 33
Actividades e intenciones
Actividades e intenciones VII
2
En la opción de Application Nodes presione el botón de agregar
(Add).
3
Rellene los campos necesarios (al menos el campo Name y
opcionalmente Theme y Label) y guarde los cambios.
8
Ejecute la aplicación y observe los resultados.
9
Realice lo mismo ahora con otro botón y con una nueva actividad,
pero ahora debe enviar datos a la actividad lanzada y recibir
datos al finalizar ésta.
10
Ejecute la aplicación y observe los resultados.
11
Finalmente, realice un método escuchador por código para algún
botón, el cual permita finalizar la aplicación. Para ello realice los
siguientes pasos:
Sergio Luis Pérez (UAM C UAJIMALPA)
Curso de Interfaces de Usuario
9 / 33
Actividades e intenciones
Actividades e intenciones VIII
Cree un botón en la actividad principal llamado Salir.
Cree un método llamado finalizar que implemente la interfaz
escuchadora del botón Salir.
public void salirDeActividad(int referencia){
Button boton = (Button) findViewById(referencia);
boton.setOnClickListener(new OnClickListener(){
@Override
public void onClick(View v) {
finish();
}
});
}
Dentro del método onCreate mande llamar el método creado (por
ejemplo: salirDeActividad(R.id.boton salir);).
Ejecute la aplicación y observe los resultados.
Sergio Luis Pérez (UAM C UAJIMALPA)
Curso de Interfaces de Usuario
10 / 33
Actividades e intenciones
Actividades e intenciones IX
Las intenciones son la forma de realizar acciones o tareas.
Las intenciones permiten lanzar actividades o servicios desde las
aplicaciones.
Las intenciones se clasifican en dos tipos:
Explicitas: indican exactamente cuál es el componente que se
desea lanzar. Se utiliza el constructor Intent(Context contexto,
Class<? > clase). Ejemplo:
Intent intencion = new Intent(this, NombreDeLaClase.class);
startActivity(intencion);
Sergio Luis Pérez (UAM C UAJIMALPA)
Curso de Interfaces de Usuario
11 / 33
Actividades e intenciones
Actividades e intenciones X
Implı́citas: solicitan tareas abstractas (como la intención de enviar
mensajes) y se realizan en tiempo de ejecución. Se utiliza el
constructor Intent(String accion, Uri uri). Ejemplo:
Intent intencion =
new Intent(Intent.ACTION DIAL, URI.parse(“tel:1234567890”));
startActivity(intencion);
El principal uso de las intenciones es para:
Lanzar actividades mediante startActivity().
Lanzar servicios mediante startService().
Lanzar anuncios de tipo broadcast mediante sendBoradcast().
Comunicar servicios mediante bindService().
Sergio Luis Pérez (UAM C UAJIMALPA)
Curso de Interfaces de Usuario
12 / 33
Actividades e intenciones
Actividades e intenciones XI
La intenciones podrán ser lanzadas por la aplicaciones o bien por
el sistema.
Los principales criterios que deben tomarse en cuenta al crear
intenciones son:
Nombre del componente: se indica el componente que se desea
lanzar mediante su nombre completo.
Acción: es la cadena de caracteres donde se indica la acción a
realizar. Puede ser predefinida o propia.
Categorı́a: sirve para complementar las acciones mediante
información adicional del componente a lanzar.
Datos: permiten referenciar a los datos con los que se trabajará.
Sergio Luis Pérez (UAM C UAJIMALPA)
Curso de Interfaces de Usuario
13 / 33
Actividades e intenciones
Actividades e intenciones XII
Extras: permiten especificar la información adicional con la que se
trabajará en el componente que será lanzado. Para esto se utiliza
el método putExtra().
Ejemplos de acciones predefinidas son:
Constante
Acción
ACTION CALL
Inicia una llamada telefónica
ACTION EDIT
Permite la edición de datos
ACTION MAIN
Inicia como la actividad principal
ACTION SYNC
Sincroniza los datos del dispositivo
en un servidor
ACTION BATTERY LOW Advertencia baterı́a baja
ACTION SCREEN ON
Activa la pantalla
Sergio Luis Pérez (UAM C UAJIMALPA)
Curso de Interfaces de Usuario
14 / 33
Actividades e intenciones
Actividades e intenciones XIII
Ejemplos de categorı́as predefinidas son:
Constante
Descripción
CATEGORY BROWSABLE
Indica que la actividad lanzada
puede mostrar los datos
referenciados por un enlace.
CATEGORY HOME
La actividad muestra la pantalla
de inicio del dispositivo (o bien
tecla HOME).
CATEGORY PREFERENCE Indica que la actividad a lanzar
es un panel de preferencias.
Ejercicio: Creación de intenciones implı́citas.
1
Cree un nuevo proyecto que contenga en la actividad principal
cinco botones con los siguientes nombres:
Abrir un sitio Web
Sergio Luis Pérez (UAM C UAJIMALPA)
Curso de Interfaces de Usuario
15 / 33
Actividades e intenciones
Actividades e intenciones XIV
Realizar una llamada.
Abrir Google Maps.
Tomar una fotografı́a.
Escribir un correo.
2
Después cree los siguientes métodos y asocie cada uno de ellos
al correspondiente botón (mediante el atributo onClick).
public void abrirPaginaWeb(View vista){
Intent intencion = new Intent(Intent.ACTION VIEW,
Uri.parse(“https://computacion.cs.cinvestav.mx/ sperez/”));
startActivity(intencion);
}
Sergio Luis Pérez (UAM C UAJIMALPA)
Curso de Interfaces de Usuario
16 / 33
Actividades e intenciones
Actividades e intenciones XV
public void realizarLlamada(View vista){
Intent intencion = new Intent(Intent.ACTION CALL,
Uri.parse(“tel:5554756506”));
startActivity(intencion);
}
public void abrirGoogleMaps(View vista){
Intent intencion = new Intent(Intent.ACTION VIEW,
Uri.parse(“geo:41.656313,-0.877351”));
startActivity(intencion);
}
public void tomarFoto(View vista){
Intent intencion =
new Intent(“android.media.action.IMAGE CAPTURA”);
startActivity(intencion);
}
Sergio Luis Pérez (UAM C UAJIMALPA)
Curso de Interfaces de Usuario
17 / 33
Actividades e intenciones
Actividades e intenciones XVI
public void escribirCorreo(View vista){
Intent intencion = new Intent(Intent.ACTION SEND);
intencion.setType(“text/plain”);
intencion.putExtra(Intent.EXTRA SUBJECT,
“Descripcion del asunto”);
intencion.putExtra(Intent.EXTRA TEXT,
“Texto del correo”);
intencion.putExtra(Intent.EXTRA EMAIL,
new String[]“sergio10barca@gmail.com”);
startActivity(intencion);
}
3
Para que sea posible realizar llamadas en el archivo
AndroidManifest.xml se debe insertar la siguiente lı́nea que
proporciona los permisos adecuados a nuestra aplicación.
Sergio Luis Pérez (UAM C UAJIMALPA)
Curso de Interfaces de Usuario
18 / 33
Actividades e intenciones
Actividades e intenciones XVII
<uses-permission
android:name=“android.permission.CALL PHONE”/ >
4
Ejecute la aplicación y observe los resultados.
Nota: si la aplicación es ejecutada en el emulador puede ser que
algunos botones no funcionen por lo que se recomienda utilizar
un dispositivo real.
Sergio Luis Pérez (UAM C UAJIMALPA)
Curso de Interfaces de Usuario
19 / 33
Creación de menús
Creación de menús
1
Actividades e intenciones
2
Creación de menús
3
Uso de la vista ListView
Sergio Luis Pérez (UAM C UAJIMALPA)
Curso de Interfaces de Usuario
20 / 33
Creación de menús
Creación de menús I
Se pueden asociar menús a las actividades, los cuales pueden
ser desplegados al presionar el botón menú del dispositivo.
Estos menús son bastante útiles pues se mantienen ocultos hasta
que dicho botón es presionado.
Para crear un menú se realizan los siguientes pasos:
1
Sobre el directorio res pulse el botón derecho y solicite crear un
nuevo archivo XML eligiendo en la opción Resource Type = Menu,
el nombre puede ser menu.xml.
2
En el nuevo archivo menu.xml que aparece, mediante el botón Add,
agregue un par de elementos de tipo item.
3
Agregue las propiedades adecuadas a los items como tı́tulo y
algunas imágenes.
Sergio Luis Pérez (UAM C UAJIMALPA)
Curso de Interfaces de Usuario
21 / 33
Creación de menús
Creación de menús II
4
Para que el menú funcione primero es necesario sobre-escribir el
método onCreateOptionsMenu en el código java de la actividad
principal, el cual asociará dicho menú al botón menú del dispositivo
(en el emulador se activa con la tecla F2).
@Override
public boolean onCreateOptionsMenu(Menu menu) {
super.onCreateOptionsMenu(menu);
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.menu, menu);
return true;//se hace visible el menu
}
5
Para activar la funcionalidad deseada al presionar cada elemento
de menú, se debe sobre-escribir el método onOptionsItemSelected,
Sergio Luis Pérez (UAM C UAJIMALPA)
Curso de Interfaces de Usuario
22 / 33
Creación de menús
Creación de menús III
también en el código java de la actividad principal.
@Override
public boolean onOptionsItemSelected(MenuItem item){
switch(item.getItemId()){
case R.id.menuItem1:{
metodoMenuItem1(null);
}break;
case R.id.menuItem2:{
metodoMenuItem2(null);
}break;
default:break;
}
return true;//permite terminar el elemento correctamente
}
Sergio Luis Pérez (UAM C UAJIMALPA)
Curso de Interfaces de Usuario
23 / 33
Uso de la vista ListView
Uso de la vista ListView
1
Actividades e intenciones
2
Creación de menús
3
Uso de la vista ListView
Sergio Luis Pérez (UAM C UAJIMALPA)
Curso de Interfaces de Usuario
24 / 33
Uso de la vista ListView
Uso de la vista ListView I
La vista ListView permite visualizar una lista vertical deslizable de
varios elementos.
Cada uno de los elementos de ListView puede definirse como
layouts.
Cualquier actividad que vaya a visualizar un ListView debe
heredar de ListActivity.
Para crear un ListView se realizan los siguientes pasos:
1
Se diseña un layout que contenga un ListView.
2
Se diseña un layout el cual simplemente se repetirá en la lista.
3
Se crea una actividad que visualice el layout con el ListView.
Sergio Luis Pérez (UAM C UAJIMALPA)
Curso de Interfaces de Usuario
25 / 33
Uso de la vista ListView
Uso de la vista ListView II
4
Finalmente, se personaliza cada uno de los elementos del ListView.
Un ListView deben ir dentro de un FrameLayout y acompañados
de una vista como TextView con la finalidad de desplegar algún
otro valor en caso de que no haya elementos en la lista.
<FrameLayout · · · >
<TextView android:id=“@android:id/empty”
.../ >
<ListView android:id=“@android:id/list”
.../ >
< /FrameLayout>
En el método onCreate() de la clase que corresponda al ListView
debe agregarse el método setListAdapter con la finalidad de
asociar los objetos de una lista al ListView.
Sergio Luis Pérez (UAM C UAJIMALPA)
Curso de Interfaces de Usuario
26 / 33
Uso de la vista ListView
Uso de la vista ListView III
setListAdapter(new ArrayAdapter<String>
(this, android.R.layout.layoutLista, R.id.titulo, Lista));
setListAdapter proporciona el cursor para un ListView.
El ArrayAdapter espera por defecto las referencias de recursos
previstas en un TextView.
ArrayAdapter permite también diseños mas complejos. Puede
encontrar más información en
http://developer.android.com/reference/android/widget/ArrayAdapter.h
En el ejemplo anterior tenemos:
this: contexto de la aplicación.
Sergio Luis Pérez (UAM C UAJIMALPA)
Curso de Interfaces de Usuario
27 / 33
Uso de la vista ListView
Uso de la vista ListView IV
android.R.layout.layoutLista: es la referencia de recurso que se
utilizará para todos los elementos de la lista.
R.id.titulo: identifica el id de la vista que sera desplegada.
Lista: contiene la información que deberá ser desplegada en los
elementos del ListView.
Ejercicio: crear un ListView visualizando sus elementos como layouts.
1
Cree un nuevo layout de tipo LinearLayout e incluya un
FrameLayout el cual contendrá dentro el ListView deseado. La
estructura del xml debe ser parecida a la siguiente:
Sergio Luis Pérez (UAM C UAJIMALPA)
Curso de Interfaces de Usuario
28 / 33
Uso de la vista ListView
Uso de la vista ListView V
<LinearLayout · · · >
<TextView . . . / >
<FrameLayout · · · >
<TextView android:id=“@android:id/empty”
.../ >
<ListView android:id=“@android:id/list”
.../ >
< /FrameLayout>
< /LinearLayout>
2
Registre la nueva actividad en el documento AndroidManifest.xml.
3
Realice un layout que represente a cada uno de los elementos de
la lista. La propiedad más importante es el alto del elemento y se
denota mediante:
Sergio Luis Pérez (UAM C UAJIMALPA)
Curso de Interfaces de Usuario
29 / 33
Uso de la vista ListView
Uso de la vista ListView VI
“?android:attr/listPreferredItemHeight”
que es un parámetro estándar de configuración del sistema.
<RelativeLayout . . .
android:layout width=“fill parent”
android:layout height=“?android:attr/listPreferredItemHeight”>
<ImageView
android:layout width=“?android:attr/listPreferredItemHeight”
android:layout height=“fill parent”
android:src=“@drawable/imagen1”/ >
<TextView
android:layout toRightOf=“@id/icono”
android:layout alignParentTop=“true”
android:textAppearance=“?android:attr/textAppearanceLarge”
android:singleLine=“true”/ >< /RelativeLayout>
Sergio Luis Pérez (UAM C UAJIMALPA)
Curso de Interfaces de Usuario
30 / 33
Uso de la vista ListView
Uso de la vista ListView VII
4
Ejecute la aplicación y observe los resultados.
Si se desea personalizar cada elemento del ListView (con
diferentes textos, imágenes, etc.) entonces se debe crear el
propio ListView heredando de la clase BaseAdapter.
El constructor de la clase personalizada sólo requiere recibir la
lista de elementos (registro de records, referencias de imágenes,
etc.) y la actividad correspondiente, ası́ como llamar a la clase
padre con super().
Para implementar la funcionalidad completa se deben
sobre-escribir los siguientes métodos:
View getView(int position, View convertView, ViewGroup
parent): permite construir un objeto View con el layout
correspondiente a la posición denotada por position.
Sergio Luis Pérez (UAM C UAJIMALPA)
Curso de Interfaces de Usuario
31 / 33
Uso de la vista ListView
Uso de la vista ListView VIII
int getCount(): permite conocer el número de elementos en la
lista.
Object getItem(int position): devuelve el position-ésimo elemento
de la lista.
long getItemId(int position): devuelve el position-ésimo
identificador del correspondiente elemento de la lista.
El único método que merece la pena detallar es getView().
Se construye un objeto View, a partir de un layout predefinido,
mediante el uso del método inflate de la clase LayoutInflater.
Se coloca el texto e imagen que corresponda.
Finalmente se debe llamar al método setListAdapter en la clase
Java que desplegará al ListView, de forma similar a la siguiente:
Sergio Luis Pérez (UAM C UAJIMALPA)
Curso de Interfaces de Usuario
32 / 33
Uso de la vista ListView
Uso de la vista ListView IX
setListAdapter(new MiListView (this, argumentos));
@Override
public View getView(int position, View convertView,
ViewGroup parent) {
LayoutInflater inflater = actividad.getLayoutInflater();
View vista =
inflater.inflate(R.layout.mi layout elemento, null, true);
TextView texto = (TextView) vista.findViewById(R.id.titulo);
texto.setText(lista.elementAt(position));
ImageView imagen =
(ImageView) vista.findViewById(R.id.icono);
imagen.setImageResource(R.drawable.imagenDeseada);
return vista;
}
Sergio Luis Pérez (UAM C UAJIMALPA)
Curso de Interfaces de Usuario
33 / 33