Le Tutoriel de Android OptionMenu

Android Option Menu
Exemple d'Option Menu

1. Android Option Menu

Dans Android, un Option Menu est un ensemble d'options principales pour une application, les utilisateurs peuvent sélectionner l'une des options pour effectuer une action. L'option Menu apparaît dans App Bar (la barre d'applications), à droite.

Par exemple, voici un extrait XML pour créer un Option Menu simple.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:title="Menu Item 1" />
    <item android:title="Menu Item 2" >
        <menu >
            <item android:title="Menu Item 2.1" />
            <item android:title="Menu Item 2.2" />
        </menu>
    </item>
    <item android:title="Menu Item 3" />
</menu>

Les utilisateurs doivent cliquer sur l'icône

pour afficher l'Option Menu.

Un Menu peut contenir un ou plusieurs MenuItem et Sub Menu (Menu con).

Avant Android 3.0, vous pouviez facilement définir des icôns pour Menu Item. Mais la conception de Google a changé, ils voulaient que les développeurs mettent toutes les fonctions sur App Bar au lieu du Menu, et ils ne permettaient plus aux icônes d'apparaître sur Menu Item du Overflow Menu ( Débordement du menu). Cependant, il existe quelques exceptions, telles que les appareils Android liés à Samsung prennent toujours en charge l'affichage des icônes dans l'Overflow Menu.

activity_main_menu.xml (2)

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:icon="@drawable/icon_open"
        android:title="Open"
        app:showAsAction="collapseActionView" />
    <item
        android:icon="@drawable/icon_share"
        android:title="Share">
        <menu>
            <item android:title="Facebook" />
            <item android:title="Instagram" />
        </menu>
    </item>
    <item
        android:icon="@drawable/icon_delete"
        android:title="Delete" />

    <item
        android:id="@+id/app_bar_search"
        android:icon="@drawable/icon_search"
        android:title="Search"
        app:actionViewClass="android.widget.SearchView" />

    <item
        android:icon="@drawable/icon_settings"
        android:title="Settings" />
</menu>

Selon un partage sur StackOverflow, vous avez toujours un moyen ''astucieux'' de faire apparaître des icônes dans le Menu Item du Overflow Menu, mais ne garantissez pas que cela fonctionnera dans les futures versions.

https://stackoverflow.com/questions/19750635/icon-in-menu-not-showing-in-android

ActivityMain.java

package org.o7planning.optionmenututorial;

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.view.menu.MenuBuilder;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuInflater;

public class MainActivity extends AppCompatActivity {

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

    @SuppressLint("RestrictedApi")
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater menuInflater = getMenuInflater();
        menuInflater.inflate(R.menu.activity_main_menu, menu);

        // If you want Icon display in Overflow Menu.
        // https://stackoverflow.com/questions/19750635/icon-in-menu-not-showing-in-android
        if(menu instanceof MenuBuilder){
            MenuBuilder m = (MenuBuilder) menu;
            m.setOptionalIconsVisible(true);
        }
        return true;
    }
}

app:showAsAction="always | ifRoom"

La nouvelle approche de Google est que les Menu Item communs d'un Option Menu devraient être affichés dans App Barl, mais les utilisateurs ne verront que son icône, ce qui, selon eux, améliorera l'expérience de l'App Store. l'utilisateur à l'application.

activity_main_menu.xml (3)

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:icon="@drawable/icon_open"
        android:title="Open"
        app:showAsAction="collapseActionView" />
    <item
        android:icon="@drawable/icon_share"
        android:title="Share"
        app:showAsAction="ifRoom">
        <menu>
            <item android:title="Facebook" />
            <item android:title="Instagram" />
        </menu>
    </item>
    <item
        android:icon="@drawable/icon_delete"
        android:title="Delete" />

    <item
        android:id="@+id/app_bar_search"
        android:icon="@drawable/icon_search"
        android:title="Search"
        app:actionViewClass="android.widget.SearchView"
        app:showAsAction="always" />

    <item
        android:icon="@drawable/icon_settings"
        android:title="Settings"
        app:showAsAction="always" />
</menu>

Menu Item avec l'attribut app: showAsAction = "always" s'affichera toujours dans App Bar, et vous ne le verrez pas dans le Overflow Menu.

<item
    android:icon="@drawable/icon_settings"
    android:title="Settings"
    app:showAsAction="always" />

Menu Item avec l'attribut d'application app:showAsAction="ifRoom" apparaîtra sur App Bar s'il y a suffisamment d'espace pour cela. Et quand il apparaît dans App Bar , vous ne le verrez pas dans le Overflow Menu.

Il n'est pas difficile de comprendre quand les fonctions de Search, Settings sont souvent visibles dans App Bar, car ce sont des fonctions importantes de l'application.

Le Tutoriel de Android ContextMenu
Le Tutoriel de Android OptionMenu

2. Exemple d'Option Menu

Exemple d'aperçu:

Sur Android Studio, créez un nouveau projet:

File > New > New Project > Empty Activity
- Name: OptionMenuExample
- Package name: org.o7planning.optionmenuexample
- Language: Java

Copy quelques icônes dans le répertoire drawable du projet:


icon_open.png	icon_delete.png	icon_settings.png	icon_search.png	icon_share.png

Sur Android Studio, sélectionnez:

File > New > Android Resource File

File name: activity_main_menu.xml
Resource Type: Menu

Sur Android Studio, vous pouvez concevoir le Menu de manière intuitive.

Définissez ID, Title, Icon des Menu Item:

Réglez les fonctions "Search" et "Settings" pour qu'elles s'affichent toujours dans App Bar et la fonction "Share" apparaîtra sur App Bar s'il y a suffisamment d'espace libre.

Search: showAsAction="always"
Settings: showAsAction="always"
Share: showAsAction="ifRoom"

activity_main_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/menuItem_open"
        android:icon="@drawable/icon_open"
        android:title="Open" />
    <item
        android:id="@+id/menuItem_share"
        android:icon="@drawable/icon_share"
        android:title="Share"
        app:showAsAction="ifRoom">
        <menu>
            <item
                android:id="@+id/menuItem_facebook"
                android:title="Facebook" />
            <item
                android:id="@+id/menuItem_instagram"
                android:title="Instagram" />
        </menu>
    </item>
    <item
        android:id="@+id/menuItem_delete"
        android:icon="@drawable/icon_delete"
        android:title="Delete" />
    <item
        android:id="@+id/menuItem_search"
        android:icon="@drawable/icon_search"
        android:title="Search"
        app:actionViewClass="android.widget.SearchView"
        app:showAsAction="always" />
    <item
        android:id="@+id/menuItem_settings"
        android:icon="@drawable/icon_settings"
        android:title="Settings"
        app:showAsAction="always" />
</menu>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.java

package org.o7planning.optionmenuexample;

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.view.menu.MenuBuilder;

import android.annotation.SuppressLint;
import android.app.SearchManager;
import android.content.Context;
import android.os.Bundle;
import android.util.Log;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.view.View;
import android.widget.SearchView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private static final String LOG_TAG= "OptionMenuExample";
    private SearchView searchView;

    private String lastQuery;

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


    @SuppressLint("RestrictedApi")
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater menuInflater = getMenuInflater();
        menuInflater.inflate(R.menu.activity_main_menu, menu);

        // If you want Icon display in Overflow Menu.
        // https://stackoverflow.com/questions/19750635/icon-in-menu-not-showing-in-android
        if (menu instanceof MenuBuilder) {
            MenuBuilder m = (MenuBuilder) menu;
            m.setOptionalIconsVisible(true);
        }

        SearchManager searchManager = (SearchManager) getSystemService(Context.SEARCH_SERVICE);
        this.searchView = (SearchView) menu.findItem(R.id.menuItem_search).getActionView();

        this.searchView.setSearchableInfo(searchManager.getSearchableInfo(getComponentName()));
         // Need click "search" icon to expand SearchView.
        this.searchView.setIconifiedByDefault(true);


        searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {

            // Typing search text.
            public boolean onQueryTextChange(String newText) {
                // This is your adapter that will be filtered
                Log.i(LOG_TAG, "onQueryTextChange: " + newText);
                return true;
            }

            // Press Enter to search (Or something to search).
            public boolean onQueryTextSubmit(String query) {
                // IMPORTANT!
                // Prevent onQueryTextSubmit() method called twice.
                // https://stackoverflow.com/questions/34207670
                searchView.clearFocus();

                Log.i(LOG_TAG, "onQueryTextSubmit: " + query);
                return doSearch(query);
            }
        });

        searchView.setOnSearchClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Log.i(LOG_TAG, "SearchView.onSearchClickListener!" );
            }
        }) ;

        return super.onCreateOptionsMenu(menu);
    }


    private boolean doSearch(String query) {
        if (query == null || query.isEmpty()) {
            return false; // Cancel search.
        }
        this.lastQuery = query;

        Toast.makeText(this, "Search: " + query, Toast.LENGTH_LONG).show();
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.menuItem_open:
                Toast.makeText(this, "Open ...", Toast.LENGTH_LONG).show();
                return true;
            case R.id.menuItem_delete:
                Toast.makeText(this, "Delete ...", Toast.LENGTH_LONG).show();
                return true;
            case R.id.menuItem_facebook:
                Toast.makeText(this, "Facebook Share ...", Toast.LENGTH_LONG).show();
                return true;
            case R.id.menuItem_instagram:
                Toast.makeText(this, "Instagram Share ...", Toast.LENGTH_LONG).show();
                return true;
            case R.id.menuItem_settings:
                Toast.makeText(this, "Settings ...", Toast.LENGTH_LONG).show();
                return true;
            case R.id.menuItem_search:
                Log.i(LOG_TAG, "onOptionsItemSelected (R.id.menuItem_search)");
                Toast.makeText(this, "Search ...", Toast.LENGTH_LONG).show();
                return true;
            default:
                return super.onOptionsItemSelected(item);
        }
    }
}

Tutoriels de programmation Android

Tutoriels de programmation Flutter

Le Tutoriel de Android OptionMenu

1. Android Option Menu

2. Exemple d'Option Menu

Tutoriels de programmation Android

Tutoriels de programmation Android

Articles les plus récents