Android Toolbar配合menu使用详解

2024-02-17 21:47:47

Android Toolbar配合menu使用详解

Toolbar使用
普通menu使用
上下文menu使用:
PopupMenu菜单:

历史上的今天(2021.3.5):
1898年3月5日，*生于江苏淮安，早年留学日本。1919年在天津参加“五·四”运动。(1976年1月8日*逝世。)

Toolbar使用

注意:需要更改为Theme.AppCompat.Light.NoActionBar

布局使用:

<androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            android:background="@color/grey"
            app:navigationIcon="@mipmap/ic_launcher"
            app:subtitle="子标题"
            app:subtitleTextColor="@color/red"
            app:title="主标题"
            app:titleMarginStart="30dp"
            app:titleTextColor="@color/red" />

Toolbar参数	类型	说明
background	color/drawable	背景色
theme	@style	menu的一些常见操作 (字体大小颜色等)
layout_scrollFlags		配合AppBarLayout使用下边单独讲该属性
navigationIcon	mipmap/drawable	左侧返回按钮
title	String	主标题
subTitle	String	子标题
titleMarginStart	dp	主标题距离左侧按钮距离
titleTextColor	color	字体颜色
minHeight	dp	Toolbar最小高度

效果图(1.1):

修改为返回按钮,并且为白色:

//配合menu使用,不添加menu不显示
        setSupportActionBar(toolbar);

        //以下三行是修改回退按钮为白色的逻辑
        Drawable upArrow = ContextCompat.getDrawable(this, R.drawable.abc_ic_ab_back_material);
        upArrow.setColorFilter(getResources().getColor(R.color.white), PorterDuff.Mode.SRC_ATOP);
        getSupportActionBar().setHomeAsUpIndicator(upArrow);

        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "返回", Toast.LENGTH_SHORT).show();
            }
        });

注意:在代码中更改图标时,xml布局中一定要使用app:navigationIcon=""

效果图(1.2):

Toolbar字体居中:

点击源码可知,Toolbar是ViewGroup

所以直接在他内部创建TextView居中即可

在内部创建了TextView会吧原本Toolbar的属性覆盖掉

layout_scrollFlags属性:

AppBarLayout依赖
implementation ‘com.google.android.material:material:1.0.0’

简单使用:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbarlayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        tools:ignore="MissingConstraints">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            android:background="@color/grey"
            android:theme="@style/ToolBarStyle"
            app:layout_scrollFlags="scroll"
            app:navigationIcon="@color/colorPrimaryDark"
            app:subtitle="子标题"
            app:subtitleTextColor="@color/red"
            app:title="主标题"
            app:titleMarginStart="30dp"
            app:titleTextColor="@color/red"
            tools:ignore="MissingConstraints">


        </androidx.appcompat.widget.Toolbar>

    </com.google.android.material.appbar.AppBarLayout>


    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rel"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

注意:
根目录为:androidx.coordinatorlayout.widget.CoordinatorLayout,这个布局可以理解为加强版的FramLayout

app:layout_scrollFlags=”scroll”	app:layout_scrollFlags=”scroll\|enterAlways”

app:layout_scrollFlags=“scroll\|enterAlways\|snap”	app:layout_scrollFlags=“scroll\|enterAlways\|exitUntilCollapsed”
	需要配合height 和 minHeight 属性使用

普通menu使用

一般在右上角(常配合toolbar出现)不可变化的menu称之为普通menu

在res目录下创建menu文件夹,创建以menu为跟标签的目录:

menu属性:

<menu>是菜单项的容器。<menu>元素必须是该文件的根节点，并且能够包含一个或多个<item>和<group>元素。
<item>是菜单项，用于定义MenuItem，可以嵌套<menu>元素，以便创建子菜单。
<group>是<item>元素的不可见容器（可选）。可以使用它对菜单项进行分组，使一组菜单项共享可用性和可见性等属性。

item属性:

android:id：菜单项(MenuItem)的唯一标识
android:icon：菜单项的图标（可选）
android:title：菜单项的标题（必选）
android:showAsAction：指定菜单项的显示方式。
- ifRoom 表示在屏幕空间足够的情况下显示在Toolbar中，不够的话就显示在菜单中,如果设置该属性,长按时弹出对应的文字
- never 表示永远不显示在Toolbar中，而是一直显示在菜单中 (默认)
- always 表示永远显示在Toolbar中，如果屏幕空间不够则不显示

声明:Toolbar中的action按钮只会显示图标，菜单中的action按钮只会显示文字。

简单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">

    <!--
    ifRoom 表示在屏幕空间足够的情况下显示在Toolbar中，不够的话就显示在菜单中,
            如果设置该属性,长按时弹出对应的文字
    never 表示永远不显示在Toolbar中，而是一直显示在菜单中   (默认)
    always 表示永远显示在Toolbar中，如果屏幕空间不够则不显示

    声明:Toolbar中的action按钮只会显示图标，菜单中的action按钮只会显示文字。

    -->
    <item
        android:id="@+id/menu_my"
        android:icon="@mipmap/ic_launcher"
        android:title="我的"
        app:showAsAction="never" />

    <item
        android:id="@+id/menu_setting"
        android:icon="@mipmap/ic_launcher"
        android:title="设置"
        app:showAsAction="never" />

    <item
        android:id="@+id/menu_genduo"
        android:title="更多">
        <menu>
            <item
                android:id="@+id/menu_item1"
                android:title="年龄" />
            <item
                android:id="@+id/menu_item2"
                android:title="班级" />

        </menu>

    </item>
</menu>

配合Toolbar使用:

 @Override//普通菜单
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbar_menu, menu);
		//返回true代表普通菜单显示
        return true;
    }

点击事件监听:

  @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()) {
            case R.id.menu_my:
                Toast.makeText(this, "我的", Toast.LENGTH_SHORT).show();
                break;
                .....
        }
        return super.onOptionsItemSelected(item);
    }

效果图(1.3):

对menu简单设置:

代码:

<!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="actionOverflowMenuStyle">@style/ToolBarStyle</item> <!--注意添加!-->
    </style>

    <!-- ToolBar -->
    <style name="ToolBarStyle" parent="@style/ThemeOverlay.AppCompat.ActionBar">
        <!--menu按钮颜色-->
        <item name="android:textColorPrimary">#FFFFFF</item>
        <!--字体颜色-->
        <item name="android:textColor">@color/white</item>
        <!--  修改字体大小-->
        <item name="android:textSize">14sp</item>
        <!--设置menu在 ... 下方-->
        <item name="overlapAnchor">false</item>
        <!--menu背景色-->
        <item name="android:popupBackground">@color/colorPrimary</item>
    </style>

记得在布局中使用哦:

效果图(1.4):

menu按钮简单逻辑操作:

先来看效果图:
效果图(1.5):

toolbar_menu_select代码:

<?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/menu_start"
        android:title="开始"
        app:showAsAction="ifRoom"></item>
    <item
        android:id="@+id/menu_stop"
        android:title="结束"
        app:showAsAction="ifRoom"></item>
</menu>

java逻辑代码:

 private Boolean isSelect = true;
 
    @Override//普通菜单
    public boolean onCreateOptionsMenu(Menu menu) {
        //对menu的点击操作  start
        getMenuInflater().inflate(R.menu.toolbar_menu_select, menu);
        MenuItem menu_start = menu.findItem(R.id.menu_start);
        MenuItem menu_stop = menu.findItem(R.id.menu_stop);
        if (isSelect) {
            menu_start.setEnabled(true);
            menu_stop.setEnabled(false);
        } else {
            menu_start.setEnabled(false);
            menu_stop.setEnabled(true);
        }
        //对menu的点击操作  stop
        return true;
    }

//menu点击事件监听
 @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()) {
            case R.id.menu_start:
                Toast.makeText(this, "开始", Toast.LENGTH_SHORT).show();
                isSelect = !isSelect;
                invalidateOptionsMenu(); //刷新onCreateOptionsMenu
                break;
            case R.id.menu_stop:
                isSelect = !isSelect;
                invalidateOptionsMenu();
                Toast.makeText(this, "结束", Toast.LENGTH_SHORT).show();
                break;
        }
        return super.onOptionsItemSelected(item);
    }

上下文menu使用:

常在某一个View上弹出的称之为上下文menu菜单(长按之后弹出)

这里以RecyclerView点击事件举例

方法一:

RecyclerView代码:

我这里适配器使用的是万能适配器

 private void initRecyclerView() {
        RecyclerView rel = findViewById(R.id.rel);

        rel.setLayoutManager(new LinearLayoutManager(this));

        final ArrayList<String> mlist = new ArrayList<>();
        for (int i = 0; i < 100; i++) {
            mlist.add("元素" + (i + 1));
        }

        MyAdapter adapter = new MyAdapter(R.layout.rel_item_layout, mlist);

        rel.setAdapter(adapter);

        /*
         * 单击事件
         * */
        adapter.setOnItemClickListener(new BaseQuickAdapter.OnItemClickListener() {
            @Override
            public void onItemClick(BaseQuickAdapter adapter, View view, int position) {
                Toast.makeText(MainActivity.this, mlist.get(position), Toast.LENGTH_SHORT).show();
            }
        });

        /*
         * 长按事件注册上下文菜单
         * */
        adapter.setOnItemLongClickListener(new BaseQuickAdapter.OnItemLongClickListener() {
            @Override
            public boolean onItemLongClick(BaseQuickAdapter adapter, View view, int position) {
                //注册上下文菜单
                registerForContextMenu(view);
                return false;
            }
        });
    }

这里最关键的就是在长按事件中注册Menu
registerForContextMenu(view);

上下文菜单代码:

  //上下文菜单
    @Override
    public void onCreateContextMenu(ContextMenu menu, View v, ContextMenu.ContextMenuInfo menuInfo) {
        super.onCreateContextMenu(menu, v, menuInfo);
        menu.setHeaderTitle("请选择操作:");
        menu.add("添加").setOnMenuItemClickListener(new MenuItem.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                Toast.makeText(MainActivity.this, "添加", Toast.LENGTH_SHORT).show();
                return false;
            }
        });
        menu.add("删除");
    }

效果图(1.6):

方式二:

创建toolbar_menu_context,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/menu_add"
        android:title="添加"
        app:showAsAction="ifRoom"></item>

    <item
        android:id="@+id/menu_remove"
        android:title="删除"
        app:showAsAction="ifRoom"></item>
</menu>

代码中使用:

  //上下文菜单
    @Override
    public void onCreateContextMenu(ContextMenu menu, View v, ContextMenu.ContextMenuInfo menuInfo) {
        super.onCreateContextMenu(menu, v, menuInfo);
        getMenuInflater().inflate(R.menu.toolbar_menu_context, menu);
    }

    //上下文菜单点击事件
    @Override
    public boolean onContextItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()) {
            case R.id.menu_add:
                Toast.makeText(this, "add", Toast.LENGTH_SHORT).show();
                break;
            case R.id.menu_remove:
                Toast.makeText(this, "remove", Toast.LENGTH_SHORT).show();
                break;
            default:
                return super.onContextItemSelected(item);
        }
        return true;
    }

效果和方式一是一样的,这里就不给效果图了~

PopupMenu菜单:

还是先上效果图:

popup_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/menu_my"
        android:icon="@mipmap/ic_launcher"
        android:title="我的"
        app:showAsAction="never" />

    <item
        android:id="@+id/menu_setting"
        android:icon="@mipmap/ic_launcher"
        android:title="设置"
        app:showAsAction="never" />

    <item
        android:id="@+id/menu_genduo"
        android:title="更多">
        <menu>
            <item
                android:id="@+id/menu_item1"
                android:title="年龄" />
            <item
                android:id="@+id/menu_item2"
                android:title="班级" />

        </menu>

    </item>
</menu>

popupMenu代码比较简单,就直接上代码了~

 //popupMenu菜单
    public void onPopupMenuClick(View view) {
        PopupMenu popupMenu=new PopupMenu(MainActivity.this,view);//1.实例化PopupMenu
        getMenuInflater().inflate(R.menu.popup_menu,popupMenu.getMenu());//2.加载Menu资源

		//监听事件
        popupMenu.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
               switch (item.getItemId()){
                   case R.id.menu_my:
                       Toast.makeText(MainActivity.this, "我的", Toast.LENGTH_SHORT).show();
                       break;
                   case R.id.menu_setting:
                       Toast.makeText(MainActivity.this, "设置", Toast.LENGTH_SHORT).show();
                       break;
                   case R.id.menu_genduo:
                       Toast.makeText(MainActivity.this, "更多", Toast.LENGTH_SHORT).show();
                       break;
                   case R.id.menu_item1:
                       Toast.makeText(MainActivity.this, "年龄", Toast.LENGTH_SHORT).show();
                       break;
                   case R.id.menu_item2:
                       Toast.makeText(MainActivity.this, "班级", Toast.LENGTH_SHORT).show();
                       break;
               }
                return false;
            }
        });
        popupMenu.show();//4.显示弹出菜单
    }

完整代码

AndroidX Toolbar与状态栏重叠/状态栏修改颜色

原创不易,您的点赞就是对我最大的支持~(如果有不足的地方,欢迎补充哦!)

app:layout_scrollFlags=”scroll”	app:layout_scrollFlags=”scroll\|enterAlways”

app:layout_scrollFlags=“scroll\|enterAlways\|snap”	app:layout_scrollFlags=“scroll\|enterAlways\|exitUntilCollapsed”
	需要配合height 和 minHeight 属性使用

码农公寓