web-dev-qa-db-fra.com

Comment faire en sorte que le menu d'options apparaisse en bas de l'écran?

Voici ce que j'essaie d'implémenter: lorsque les utilisateurs cliquent sur le menu situé dans le coin supérieur droit de la barre d'outils, un menu d'options apparaît en bas de l'écran. Voir l'image ci-dessous:

 enter image description here

Je ne suis pas sûr de quelle méthode devrais-je appeler pour l'élément en bas. Quelqu'un peut-il me donner un indice sur la façon de mettre en œuvre cela?

J'implémente avec succès l'icône dans la barre de menu en haut à droite avec le code ci-dessous. Mais je ne sais pas comment afficher les options en bas de l'écran, avec la largeur match_parent et la hauteur wrap_content

onClick dans le coin supérieur droit

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

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();

        switch (id) {
            case R.id.more:
                //How to show the 2 option in the bottom of screen here


                return true;
        }

        return super.onOptionsItemSelected(item);
    }

Mettre à jour

Après avoir implémenté le code de Nikesh, la fenêtre s’affiche comme suit:

 enter image description here

javaandroidandroid-layoutandroid-xmlandroid-menu
13
ken

RÉPONSE MISE À JOUR

Vous pouvez maintenant utiliser Material Design BottomAppBar

  • Une barre d'application inférieure affiche la navigation et les actions clés au bas des écrans de mobile.

Exemple de code

Ajoutez des dépendances ci-dessous dans votre build.gradle

implementation 'com.google.Android.material:material:1.0.0'

Maintenant, créez 3 fichiers de menu dans le répertoire res/menu

 enter image description here

bottom_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu 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">

    <item
        Android:id="@+id/app_bar_search"
        Android:icon="@drawable/ic_search"
        Android:title="Search"
        app:showAsAction="ifRoom" />
    <item
        Android:id="@+id/app_bar_fav"
        Android:icon="@drawable/ic_favorite"
        Android:title="Favorite"
        app:showAsAction="ifRoom"/>
    <item
        Android:icon="@drawable/ic_favorite"
        Android:title="Favorite"
        app:showAsAction=""/>
</menu>

nav_drawer_menu.xml

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

    <item
        Android:id="@+id/navItemOne"
        Android:title="Nav Item 1"
        app:showAsAction="never"/>

    <item
        Android:id="@+id/navItemTwo"
        Android:title="Nav Item 2"
        app:showAsAction="never"/>

    <item
        Android:id="@+id/navItemThree"
        Android:title="Nav Item 3"
        app:showAsAction="never"/>
</menu>

toolbar_menu.xml

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

    <item
        Android:id="@+id/app_bar_fav"
        Android:icon="@drawable/ic_favorite"
        Android:title="Favorite"
        app:showAsAction="ifRoom"/>
    <item
        Android:id="@+id/app_bar_search"
        Android:icon="@drawable/ic_search"
        Android:title="Search"
        app:showAsAction="ifRoom"/>
    <item
        Android:id="@+id/app_bar_settings"
        Android:title="Settings"
        app:showAsAction="never"/>

    <item
        Android:title="Menu Item 1"
        app:showAsAction="never"/>

    <item
        Android:title="Menu Item 2"
        app:showAsAction="never"/>
    <item
        Android:title="Menu Item 3"
        app:showAsAction="never"/>

</menu>

Maintenant, créez un nom de classe BottomNavigationDrawerFragment pour ouvrir le tiroir de navigation par le bas

import Android.content.Context
import Android.os.Bundle
import Android.view.Gravity
import Android.view.LayoutInflater
import Android.view.View
import Android.view.ViewGroup
import Android.widget.Toast
import com.google.Android.material.bottomsheet.BottomSheetDialogFragment
import kotlinx.Android.synthetic.main.bottom_nav_layout.*

class BottomNavigationDrawerFragment : BottomSheetDialogFragment() {

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        return inflater.inflate(R.layout.bottom_nav_layout, container, false)
    }
    override fun onActivityCreated(savedInstanceState: Bundle?) {
        super.onActivityCreated(savedInstanceState)

        navigation_view.setNavigationItemSelectedListener { menuItem ->
            // Bottom Navigation Drawer menu item clicks
            when (menuItem!!.itemId) {
                R.id.navItemOne -> context!!.toast(" Nav item one is Clicked ")
                R.id.navItemTwo -> context!!.toast(" Nav item Two is Clicked ")
                R.id.navItemThree -> context!!.toast(" Nav item Three is Clicked ")
            }
            // Add code here to update the UI based on the item selected
            // For example, swap UI fragments here
            true
        }
    }

    // This is an extension method for easy Toast call
    fun Context.toast(message: CharSequence) {
        val toast = Toast.makeText(this, message, Toast.LENGTH_SHORT)
        toast.setGravity(Gravity.BOTTOM, 0, 600)
        toast.show()
    }
}

Code de MainActivity

import Android.os.Bundle
import Android.view.Menu
import Android.view.MenuItem
import Android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import kotlinx.Android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        //  attach menu to your BottomAppBar
        bottomBar.replaceMenu(R.menu.bottom_menu)

        // handle click event of navigationIcon
        bottomBar.setNavigationOnClickListener {
            toast("Navigation Icon Clicked")
            val bottomNavDrawerFragment = BottomNavigationDrawerFragment()
            bottomNavDrawerFragment.show(supportFragmentManager, bottomNavDrawerFragment.tag)
        }

        // handle click event of FloatingActionButton
        fab.setOnClickListener {
            toast("Fab Icon Clicked")

        }

        //handle click event of menu of BottomAppBar
        bottomBar.setOnMenuItemClickListener { menuItem ->

            when (menuItem!!.itemId) {
                R.id.app_bar_search -> toast("Search menu of bottomBar is clicked!")
            }

            true
        }
    }

    // Overriding Actionbar menu
    override fun onCreateOptionsMenu(menu: Menu): Boolean {
        val inflater = menuInflater
        inflater.inflate(R.menu.toolbar_menu, menu)
        return true
    }


    //handle click event of menu of Actionbar
    override fun onOptionsItemSelected(item: MenuItem?): Boolean {
        when (item!!.itemId) {
            R.id.app_bar_fav -> toast("Fav menu item of toolbar is clicked!")
            R.id.app_bar_search -> toast("Search menu item of toolbar is clicked!")
            R.id.app_bar_settings -> toast("Settings item  of toolbar is clicked!")
            else -> toast("Menu item  of toolbar  is clicked!")
        }

        return true
    }

    // method to display toast
    private fun toast(message: String) {
        Toast.makeText(this, message, Toast.LENGTH_SHORT).show()
    }
}

layout.activity_main

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:id="@+id/main_content"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:background="#ffffff"
    Android:fitsSystemWindows="true">

    <com.google.Android.material.bottomappbar.BottomAppBar
        Android:id="@+id/bottomBar"
        style="@style/Widget.MaterialComponents.BottomAppBar"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:layout_gravity="bottom"
        app:fabCradleMargin="10dp"
        app:fabCradleVerticalOffset="4dp"
        Android:backgroundTint="@color/colorPrimary"
        app:fabAlignmentMode="center"
        app:navigationIcon="@drawable/ic_drawer"/>

    <com.google.Android.material.floatingactionbutton.FloatingActionButton
        Android:id="@+id/fab"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        app:layout_anchor="@id/bottomBar"
        app:srcCompat="@drawable/ic_apps" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

bottom_nav_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    xmlns:tools="http://schemas.Android.com/tools"
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content">


    <com.google.Android.material.navigation.NavigationView
        Android:id="@+id/navigation_view"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:layout_gravity="bottom"
        Android:layout_marginStart="8dp"
        Android:layout_marginTop="8dp"
        Android:layout_marginEnd="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:menu="@menu/nav_drawer_menu"/>

</androidx.constraintlayout.widget.ConstraintLayout>

SAMPLE CODE for Java Lover

BottomNavigationDrawerFragment

import Android.content.Context;
import Android.os.Bundle;
import Android.view.LayoutInflater;
import Android.view.MenuItem;
import Android.view.View;
import Android.view.ViewGroup;
import Android.widget.Toast;
import com.google.Android.material.bottomsheet.BottomSheetDialogFragment;
import com.google.Android.material.navigation.NavigationView;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import neel.com.bottomappbar.R;

public class BottomNavigationDrawerFragment extends BottomSheetDialogFragment {

    private Context mContext;

    @Override
    public void onAttach(Context context) {
        super.onAttach(context);
        mContext=context;
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        View rootView= inflater.inflate(R.layout.bottom_nav_layout, container, false);

        NavigationView navigationView=rootView.findViewById(R.id.navigation_view);

        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {

                switch (menuItem.getItemId()){
                    case R.id.navItemOne:
                        Toast.makeText(mContext, "Nav item One is Clicked ", Toast.LENGTH_SHORT).show();
                        return true;
                    case R.id.navItemTwo:
                        Toast.makeText(mContext, "Nav item Two is Clicked ", Toast.LENGTH_SHORT).show();
                        return true;
                    case R.id.navItemThree:
                        Toast.makeText(mContext, "Nav item Three is Clicked ", Toast.LENGTH_SHORT).show();
                        return true;
                }
                return false;
            }
        });

        return rootView;
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
    }
}

Activité principale

import Android.os.Bundle;
import Android.view.Menu;
import Android.view.MenuItem;
import Android.view.View;
import Android.widget.Toast;
import com.google.Android.material.bottomappbar.BottomAppBar;
import com.google.Android.material.floatingactionbutton.FloatingActionButton;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import neel.com.bottomappbar.R;

public class MainActivity extends AppCompatActivity {

    BottomAppBar bottomAppBar;
    FloatingActionButton floatingActionButton;

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

        bottomAppBar = findViewById(R.id.bottomBar);

        //  attach menu to your BottomAppBar
        bottomAppBar.replaceMenu(R.menu.bottom_menu);

        // handle click event of navigationIcon of bottomAppBar
        bottomAppBar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                BottomNavigationDrawerFragment bottomNavigationDrawerFragment = new BottomNavigationDrawerFragment();
                bottomNavigationDrawerFragment.show(getSupportFragmentManager(), bottomNavigationDrawerFragment.getTag());
            }
        });

        //handle click event of menu of BottomAppBar
        bottomAppBar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.app_bar_search:
                        Toast.makeText(MainActivity.this, "Search menu of bottomBar is clicked!", Toast.LENGTH_SHORT).show();
                        return true;
                    case R.id.app_bar_fav:
                        Toast.makeText(MainActivity.this, "Favorite menu of bottomBar is clicked!", Toast.LENGTH_SHORT).show();
                        return true;

                }
                return false;
            }
        });

        floatingActionButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this, "Fab Is clicked ", Toast.LENGTH_SHORT).show();
            }
        });
    }

    // Overriding Actionbar menu
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbar_menu, menu);
        return true;
    }

    //handle click event of menu of Actionbar
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.app_bar_fav:
                Toast.makeText(MainActivity.this, "Fav menu item of toolbar is clicked!", Toast.LENGTH_SHORT).show();
                return true;
            case R.id.app_bar_search:
                Toast.makeText(MainActivity.this, "Search menu item of toolbar is clicked!", Toast.LENGTH_SHORT).show();
                return true;
            case R.id.app_bar_settings:
                Toast.makeText(MainActivity.this, "app_bar_settings", Toast.LENGTH_SHORT).show();
                return true;

        }
        return false;
    }
}

pour plus d'informations s'il vous plaît vérifier ci-dessous articles 

SORTIE

https://www.youtube.com/watch?v=k145bGLrleo

ANCIENNE REPONSE

essayez ceci attachez cette PopupMenu à votre événement de clic en vue de dessous, quelque chose comme un événement de clic

étape 1 _ {créer une vue au début de votre mise en page comme ça} _

<View
Android:layout_gravity="center"
Android:id="@+id/myView"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"/>

étape 2crée un fichier new_menu.xml comme celui-ci

<menu xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto">
<item
    Android:id="@+id/temp"
    Android:title="@string/str_menu_account_logout"
    Android:icon="@drawable/next"
    app:showAsAction="ifRoom"></item>

</menu>

ajoutez maintenant ce code pour créer un menu d'options dans votre fichier Java}

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

@Override
public boolean onOptionsItemSelected(MenuItem item) {

    if (item.getItemId() == R.id.temp) {
        PopupMenu popupMenu = new PopupMenu(this, findViewById(R.id.myView),Gravity.CENTER);
        popupMenu.inflate(R.menu.home_menu);
        popupMenu.show();
        return true;
    }

    return false;

}
4
Nilesh Rathod

Je suggérerai d'utiliser la barre d'applications Conception de matériaux (en bas), avec quelques modifications, vous pouvez obtenir le résultat.

Essayez ceci https://material.io/design/components/app-bars-bottom.html

espérons que cela aidera.

0
Prakash Sharma

Answer by @Nilesh est très élaboré et un peu compliqué.

Solution simple

  1. Créez FrameLayout et organisez vos boutons dans la structure du cadre en fonction de vos besoins. Set id - J'utilise id = "menu"

  2. Définir la visibilité sur le système Android disparu: visibilité = "disparu"

  3. Sur le menubutton, cliquez sur

    findViewById (R.id.menu) .setVisibility (View.VISIBLE);

  4. Maintenant, pour que le menu disparaisse lorsque vous cliquez en dehors du menu, ajoutez une vue ou une disposition vide derrière le menu. set ontouch listner. Définissez la visibilité GONE lorsque vous appuyez sur la vue d’arrière-plan.

0
m__

Simple . Construisez une boîte de dialogue avec son propre contenu qui constituera le menu inférieur . Lorsque l’utilisateur clique dessus, la boîte de dialogue devrait apparaître, mais sa position serait inférieure à celle ancrée au bas. Vous pouvez trouver de nombreux codes concernant la manière de positionner la boîte de dialogue au bas de l'éboulis ancré !! SO ne pas en ajouter. J'espère que ça aide.!

0
Debasish Ghosh