Ciclo Formativo de Grado Superior

Desarrollo de Aplicaciones Multiplataforma

Módulo
Programación Multimedia y Disp. Móviles

Curso Académico
2019-2020

UT03. Diseño de la Interfaz de Usuario

Menú, App Bar y ListView (APUNTES)

Versión del Documento

1.0

Actualizado a
17/10/2019
Profesor
Jonay García González

Email
jonaygarciav@gmail.com
Tabla de Contenidos

Tabla de contenido
3. Menú, App Bar y ListViews ........................................................................................................................ 1
3.1. Menu y App Bar ................................................................................................................................. 1
3.1.1 Menú de Opciones y barra de App ............................................................................................ 1
3.1.2 Menú contextual y modo de acción contextual ........................................................................ 2
3.2. ListView.............................................................................................................................................. 9
3.2.1 Controlar eventos en una ListView.......................................................................................... 12

i Jonay García González

Menú, App Bar y ListViews

3. Menú, App Bar y ListViews

3.1. Menu y App Bar

Los menús son un componente común de la interfaz de usuario en muchos tipos de aplicaciones. Para
proporcionar una experiencia de usuario conocida y uniforme, debes usar las Menu API para presentar al
usuario acciones y otras opciones en las actividades.

A partir de Android 3.0 (nivel de API 11), los dispositivos con Android ya no tienen que proporcionar un botón
Menú dedicado. Con este cambio, las apps de Android dejarán de depender de los paneles de menú
tradicionales de 6 elementos; en su lugar, proporcionarán una barra de app para mostrar las acciones más
comunes del usuario.

Aunque el diseño de la experiencia de usuario para algunos elementos del menú cambió, la semántica para
definir un conjunto de acciones y opciones sigue basándose en las API de Menu. Esta guía muestra cómo
crear tres tipos fundamentales de presentaciones de menús o acciones en todas las versiones de Android.

3.1.1 Menú de Opciones y barra de App

El menú de opciones es la colección principal de elementos de menú para una actividad. Está situado en el
Sidebar de nuestra aplicación. Es donde debes colocar las acciones que tienen un impacto global en la app,
como “Buscar”, “Redactar correo electrónico” y “Ajustes”.

1 Jonay García González

Menú, App Bar y ListViews

3.1.2 Menú contextual y modo de acción contextual

Un menú contextual es un menú flotante que aparece cuando el usuario hace un clic largo en un elemento.
Proporciona acciones que afectan el contenido seleccionado o el marco contextual.

En el menú de acción contextual se muestran los elementos de acción que afectan el contenido seleccionado
en una barra en la parte superior de la pantalla y se permite al usuario seleccionar varios elementos.

2 Jonay García González

Menú, App Bar y ListViews

3.1.2.1 Definición de un menú XML

Para todos los tipos de menús, Android proporciona un formato XML estándar para definir los elementos del
menú. En lugar de incorporar un menú en el código de la actividad, debes definir un menú y todos los
elementos en un recurso de menú XML. Luego, puedes agrandar el recurso de menú (cargarlo como un objeto
Menu) en la actividad.

El uso del recurso de menú es una práctica recomendada por algunos motivos:

 Es más fácil visualizar la estructura del menú en XML.

 Separa el contenido del menú del código de comportamiento de la aplicación.
 Te permite crear configuraciones alternativas del menú para diferentes versiones de la plataforma,
tamaños de pantallas y otras configuraciones aprovechando el framework de recursos de la app.

Para definir el menú, crea un archivo XML dentro del directorio res/menu del proyecto y desarrolla el menú
con los siguientes elementos:

<menu>

Define un Menu, que es un contenedor para elementos del menú. Un elemento <menu> debe ser el nodo
raíz del archivo y puede tener uno o más elementos <item> y <group>.

3 Jonay García González

Menú, App Bar y ListViews
<item>

Crea un MenuItem, que representa un único elemento en un menú. Este elemento puede contener un
elemento <menu> anidado para crear un submenú.

<group>

Contenedor opcional e invisible para elementos <item>. Te permite categorizar los elementos del menú para
que compartan propiedades, como el estado de una actividad o visibilidad.

Aquí presentamos un menú de ejemplo denominado menu_main.xml:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context="com.pdm.cfgs.menuapp.MainActivity">
<item android:id="@+id/MenuOpc1"
android:title="@string/opcion1"
android:icon="@android:drawable/ic_menu_preferences">
</item>
<item android:id="@+id/MenuOpc2"
android:title="@string/opcion2"
android:icon="@android:drawable/ic_menu_compass">
</item>
<item android:id="@+id/MenuOpc3"
android:title="@string/opcion3"
android:icon="@android:drawable/ic_menu_agenda">
</item>
</menu>

Este fichero xml genera un menú que muestra tres opciones:

4 Jonay García González

Menú, App Bar y ListViews

El elemento <item> admite varios atributos que puedes usar para definir la apariencia y el comportamiento
de un elemento. Los elementos del menú precedente incluyen estos atributos:

android:id

ID de un recurso que es exclusivo del elemento y permite que la aplicación lo reconozca cuando el usuario lo
selecciona.

android:icon

Referencia a un elemento de diseño para usar como el ícono del elemento.

android:title

Referencia a un string para usar como el título del elemento.

3.1.2.2 Configuración del Menú en la Actividad

Una vez definido el menú en el fichero XML, tendremos que implementar el evento onCreateOptionsMenu()
de la actividad que queremos que lo muestre (esto también es posible que lo tengamos ya incluido por
defecto en nuestra actividad principal). En este evento deberemos “inflar” el menú de forma parecida a cómo
ya hemos hecho otras veces con otro tipo de layouts. Primero obtendremos una referencia al menú mediante
el método getMenuInflater() y posteriormente generaremos la estructura del menú llamando a su método

5 Jonay García González

Menú, App Bar y ListViews

inflate() pasándole como parámetro el ID del menu definido en XML, que en nuestro caso será
R.menu.activity_main. Por último, devolveremos el valor true para confirmar que debe mostrarse el menú.

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

Construido el menú, la implementación de cada una de las opciones se incluirá en el evento

onOptionsItemSelected() de la actividad que mostrará el menú. Este evento recibe como parámetro el item
de menú que ha sido pulsado por el usuario, cuyo ID podemos recuperar con el método getItemId(). Según
este ID podremos saber qué opción ha sido pulsada y ejecutar unas acciones u otras. En nuestro caso de
ejemplo, lo único que haremos será modificar el texto de una etiqueta (lblMensaje) colocada en la pantalla
principal de la aplicación.

@Override
public boolean onOptionsItemSelected(MenuItem item) {

String mensaje;
int id = item.getItemId();

Toast aviso;
switch (item.getItemId()) {
case R.id.MenuOpc1:

mensaje = "Opcion 1 pulsada!";

aviso = Toast.makeText(getApplicationContext(), mensaje,
Toast.LENGTH_SHORT);
aviso.show();
return true;

case R.id.MenuOpc2:

mensaje = "Opcion 2 pulsada!";

aviso = Toast.makeText(getApplicationContext(), mensaje,
Toast.LENGTH_SHORT);
aviso.show();
return true;

case R.id.MenuOpc3:

mensaje = "Opcion 3 pulsada!";

aviso = Toast.makeText(getApplicationContext(), mensaje,
Toast.LENGTH_SHORT);
aviso.show();

6 Jonay García González

Menú, App Bar y ListViews
return true;

default:
return super.onOptionsItemSelected(item);
}

Nota: Cuando creemos una aplicación en la que vayamos a implementar un menú, es recomendable elegir la
actividad Basic Activity en el asistente, ya que crea el fichero XML del menú de la aplicación, así como los
métodos onCreateOptionsMenu() y onOptionsItemSelected() de manera automática.

3.1.2.3 Menú Contextual asociado a un Elemento del Layout

Si queremos que el menú, en vez de acceder a él, se nos muestre cuando pulsemos un elemento de nuestra
interfaz gráfica como un TextView o un EditText, debemos asociar el menú contextual al elemento mediante
el método registerForContextMenu().

7 Jonay García González

Menú, App Bar y ListViews

Por ejemplo, imaginemos que tenemos un elemento TextView cuyo id es tv_saludo, y queremos que, cuando
pulsemos sobre él, nos muestre el menú contextual:

public class MainActivity extends AppCompatActivity {

private TextView tvSaludo;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

tvSaludo = (TextView)findViewById(R.id.tv_saludo);
registerForContextMenu(tvSaludo);
}

@Override
public void onCreateContextMenu(ContextMenu menu, View v,
ContextMenu.ContextMenuInfo menuInfo)
{
…
}

@Override
public boolean onContextItemSelected(MenuItem item) {

…
}
}
}

La llamada registerForContextMenu(tvSaludo) asocia el menú al elemento TextView tv_saludo.

Los métodos onCreateContextMenu() y onContextItemSelected() son exactamente los mismos que los del
ejemplo anterior.

8 Jonay García González

Menú, App Bar y ListViews

3.2. ListView

Una vista ListView en Android visualiza una lista desplegable verticalmente de varios elementos, donde
cada elemento puede definirse como un Layout:

Para utilizar un ListView dentro de un Layout se puede usar la siguiente estructura:

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

<ListView
android:id="@android:id/list"

9 Jonay García González

Menú, App Bar y ListViews
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ListView>

</LinearLayout>

Donde tenemos un LinearLayout que contiene un elemento ListView que se visualizará cuando haya algún
elemento en la lista.

NOTA: Para crear nuevos identificadores debes utilizar la expresión "@+id/nombre_identificador". El carácter
@ significa que se trata de un identificador de recurso que se definirá en la clase R.java. El carácter + significa
que el recurso ha de ser creado en este momento. En este caso hemos utilizado identificadores definidos en
el sistema (es decir @android: significa que es un recurso definido en la clase android.R.java).

Una vez creado el Layout que contiene el ListView tendremos que visualizarlo en una actividad. Para este
propósito utilizaremos un tipo de actividad especial llamada ListActivity.

public class MainActivity extends ListActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

Posteriormente crearemos un array donde iremos donde definiremos los elementos en la lista:

static final String[] androidVersions = new String[] { "Cupcake", "Donut",

"Eclair", "Froyo", "Gingerbread", "Honeycomb", "Ice Cream Sandwich", "Jelly Bean",
"KitKat", "Lollipop", "Marshmallow", "Nougat", "Oreo", "Pie" };

Luego crearemos un ArrayAdapter que asociaremos al array que acabamos de crear

ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,

android.R.layout.simple_list_item_1, androidVersions);

Los parámetros del constructor son:

 this: es el contexto con la información sobre el entorno de la aplicación

10 Jonay García González

Menú, App Bar y ListViews

 R.layout.simple_list_item_1: Es una referencia a un documento de diseño XML incorporado que

forma parte del sistema operativo Android, ya está predefinido, en lugar de usar diseños
personalizados. Esto hace que cada elemento del array se muestre en forma de lista, un elemento
debajo del otro. Este es el diseño más sencillo de lista.
 androidVersions: array con los elementos a mostrar en la lista.

Si queremos ver más diseños XML predefinidos:

https://developer.android.com/reference/android/R.layout.html

Asociamos el ArrayAdapter a la lista creada en el layout:

setListAdapter(adapter);

Con el código anterior se mostraría la siguiente aplicación:

11 Jonay García González

Menú, App Bar y ListViews

3.2.1 Controlar eventos en una ListView

Si queremos que cuando pulsemos un nuevo elemento realizar una acción, debemos llamar al método
setOnItemClickListener, el cual, el parámetro int position nos dará la posición del array que ha sido pulsado
en la pantalla:

listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
public void onItemClick(AdapterView<?> parent, View view,
int position, long id) {

}
});

12 Jonay García González