LinuxParty

Ratio: 5 / 5

Inicio activadoInicio activadoInicio activadoInicio activadoInicio activado
 

Hasta ahora, en nuestros tutoriales sobre Android UI no hemos visto los menús, por supuesto son una parte esencial de la experiencia del usuario de nuestra aplicación. Siga leyendo para comenzar con su primer tipo de menú de Android, el menú de opciones.

La interfaz de usuario de Android ofrece tres tipos de menú básicas:

  1. El menú de opciones es el que aparece al hacer clic sobre el botón del menú en los dispositivos Android, o por medio de la barra de acción en la parte superior de la pantalla en las más nuevas (Versión de 3.0). El menú de opciones debe manejar las acciones globales de aplicaciones que tengan sentido para toda la aplicación.
  2. Los menús contextuales aparecen al hacer clic en un elemento. Los menús contextuales deben controlar acciones específicas de los elementos. Son particularmente útiles GridView o ListView, donde se muestra al usuario una lista de elementos.
  3. Los menús emergentes muestran una lista vertical de elementos. Estos son buenos para ofrecer opciones para una segunda parte de un comando de menú, en lugar de un menú independiente.

En este tutorial, vamos a ver la creación de un menú de opciones a través de XML, y en la adición de un elemento de menú mediante programación. En el próximo artículo vamos a ver los menús contextuales para los elementos individuales y para lotes de artículos. Vamos a utilizar el código del artículo anterior "Desarrollo de Aplicaciones Android: Cómo configurar una lista Clickable de Imágenes con GridView", y añadimos un menú a eso.

Menú Opciones

Es la mejor práctica para definir un menú y sus elementos como un recurso de menú XML, luego inflarlo de código. Esto hace que sea más fácil ver la estructura del menú, significa que usted puede crear fácilmente diferentes versiones del menú para hardware diferente, y que separa el código visual y de comportamiento.

Las partes importantes del menú XML (para ambas opciones y menús contextuales) son:

  • <menu> -- a container for menu items (<item> and <group> elements), which must be the root node of the menu XML file.
  • <item> -- a menu item ( MenuItem una vez inflado en el código).
  • <group> -- allows you to categorise <item>s into groups, but isn't itself visible.

Aquí hay un menú de opciones de ejemplo en res/menu/main_menu.xml :

<menu xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:id="@+id/background"
        android:title="@string/background_title"/>
        android:showAsAction="never"
    <item
        android:id="@+id/toast"
        android:title="@string/toast_title"/>
        android:showAsAction="ifRoom"
</menu>

El atributo id nos permitirá referimos a este elemento de menú en el código más adelante; y el atributo title es el título del texto del artículo, que se mostrará si no hay un icono. showAsAction especifica si la acción se mostrará por sí mismo en la barra de acciones, o simplemente en el menú "Más acciones" en el lado derecho de la barra. Aquí, una acción se mostrará si hay espacio, y el otro no se mostrará. Consulte la documentación para más atributos que puede establecer para un elemento de menú.

(Original.: See the docs for more attributes you can set for a menu item. )

Usted también necesitará añadir cadenas a res/values/strings.xml :

<string name="background_title">Change background colour</string>
<string name="toast_title">Show toast message</string>

Una vez que haya creado el menú, es programarlo para que se muestre en tiempo de ejecución. Agregue esto a GridViewTestActivity:

public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.main_menu, menu);
    return true;
}

Compila y ejecuta, y echa un vistazo a su menú de opciones. Se trata de Android 4.3 por lo que muestra la barra de acción; en Android 2.3 o bajo usted pulsa el botón de menú para desplegar el menú de opciones, y lo que parece a la parte inferior de la pantalla.

android menu option

En Android 4.3 se muestra la barra de acción; en Android 2.3 o bajo usted pulsa el botón de menú para desplegar el menú de opciones, y lo que parece a la parte inferior de la pantalla.

El texto utilizado en la barra de acción no es lo ideal; que sería mejor crear y guardar un icono en res/drawable y añadiendo este atributo al elemento de menú:

android:icon="@drawable/toast_icon.png"

Manejo de clics de menú

Actualmente, no pasa nada cuando el usuario hace clic en los elementos de menú. Tenemos que escribir un método para manejar los clics:

public boolean onOptionsItemSelected(MenuItem item) {
  switch (item.getItemId()) {
    case R.id.background:
      changeBackground();
      return true;
    case R.id.toast:
      Toast.makeText(getBaseContext(), R.string.toast_message, 
                     Toast.LENGTH_LONG).show();
      return true;
    default:
      return super.onOptionsItemSelected(item);
  }
}
    
private void changeBackground() {
  gridview.setBackgroundColor(Color.CYAN);
}

Todo lo que necesitamos es una sentencia switch, que se ve en el ID de elemento para decidir qué acción hay que hacer. Tenga en cuenta que el valor predeterminado es dejar pasar a la superclase. Esto es particularmente útil si quieres tener algunos elementos de menú en múltiples actividades en una sola aplicación. Usted puede escribir una superclase que sólo crea un menú básico, y luego heredar de que superclase para conseguir esos mismos métodos en todas sus actividades.

Compilar y ejecutar esto, y usted será capaz de ver un mensaje o cambiar el color de fondo. Una buena mejora sería para dar al usuario una selección de diferentes colores de fondo.

android menu actions

Ver un mensaje o cambiar el color de fondo cuando el usuario hace clic en los elementos de menú escribiendo un método para manejar los clics.

Adición de un elemento de menú en el código

Aunque la mayoría de las veces es la mejor manera de escribir sus artículos de menú en XML, a veces tienes que ser capaz de añadir un elemento de menú mediante programación - por ejemplo, un elemento de menú que aparece sólo en ciertas circunstancias, o que cambia. En primer lugar, echemos un vistazo a cambio de un elemento del menú según el día de la semana:

public class GridViewTestActivity extends Activity {
  private Menu menu;
  int backgroundColour;
  public boolean onCreateOptionsMenu(Menu menu) {
   	this.menu = menu;
    getMenuInflater().inflate(R.menu.main_menu, menu);
    setBackgroundItem();
    return true;
  }
    
  public boolean onOptionsItemSelected(MenuItem item) {
    // as before
    case R.id.background:
   	  changeBackground(backgroundColour);
      return true;
    // rest as before
  }
    
  private void setBackgroundItem() {
    Calendar cal = Calendar.getInstance();
    int day = cal.get(Calendar.DAY_OF_WEEK);
    if (day == Calendar.SUNDAY) {
      backgroundColour = Color.MAGENTA;
      MenuItem item = menu.findItem(R.id.background);
      item.setTitle("Change background colour to magenta");
    } else {
      backgroundColour = Color.CYAN;
    }
  }
    
  private void changeBackground(int color) {
    gridview.setBackgroundColor(color);
  }
}

Mucho de esto es el mismo código que antes, sólo refactorizar un poco (necesitamos el menú y el color de fondo como las variables de clase). El principal cambio está en setBackgroundItem() , que comprueba el día de la semana, y si es un domingo, agarra el elemento de menú color de fondo usando su ID, y cambia el título con item.setTitle() .

android menu dynamic

Los menús de fondo cambia de color según el día de la semana.

Añadir un elemento de menú conjunto también es bastante sencillo.

 public class GridViewTestActivity extends Activity {
  private static final int NEW_MESSAGE = 0;
  public boolean onCreateOptionsMenu(Menu menu) {
    // add this line:
    addNewItem();
  }
  public boolean onOptionsItemSelected(MenuItem item) {
    	switch (item.getItemId()) {
    // rest of switch statement as before
   	case NEW_MESSAGE:
      Toast.makeText(getBaseContext(), R.string.new_message, 
                     Toast.LENGTH_LONG).show();
    // rest as before
  }
  private void addNewItem() {
    menu.add(0, NEW_MESSAGE,0, R.string.new_message_title);
  }
} 

El primer argumento de menu.add() es el ID de grupo; no tenemos grupos en este menú por lo que este es cero. El segundo es el ID de elemento, definido en la parte superior de la clase. El tercero es el orden, utilizamos 0, ya que no importa el orden. Por último, le damos el título. Y ese es nuestro nuevo elemento de menú creado. No olvide añadir un caso a onOptionsItemSelected() para que su nuevo elemento de menú se maneja correctamente.

Compilar y ejecutar, y verá aparecer el mensaje nuevo. Tenga en cuenta sin embargo que, si bien un elemento de menú añadido dinámicamente a veces es correcta, es posible que sea mejor crear el elemento de menú en XML como con los otros, y luego utilizando esta línea:

item.setVisible(false);

para establecer su visibilidad sobre la base de las condiciones del código, al igual que hemos cambiado el título del elemento de menú color de fondo en el código.

Hemos cubierto los conceptos básicos de los menús de opciones; revisar el tutorial de el mes que viene para más información sobre los menús contextuales y procesamiento por lotes de elementos de una lista.

Pin It

Escribir un comentario


Código de seguridad
Refescar



Redes:



 

Suscribete / Newsletter

Suscribete a nuestras Newsletter y periódicamente recibirás un resumen de las noticias publicadas.

Donar a LinuxParty

Probablemente te niegues, pero.. ¿Podrías ayudarnos con una donación?


Tutorial de Linux

Nos obligan a moslestarte con la obviedad de que este sitio utiliza Cookies. Ver política