Android Toolbar配合menu使用详解

Android Toolbar配合menu使用详解

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

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

Toolbar使用

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

Android Toolbar配合menu使用详解_第1张图片

布局使用:

<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):
Android Toolbar配合menu使用详解_第2张图片

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

//配合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):

Android Toolbar配合menu使用详解_第3张图片

Toolbar字体居中:

点击源码可知,Toolbar是ViewGroup

Android Toolbar配合menu使用详解_第4张图片

所以直接在他内部创建TextView居中即可
Android Toolbar配合menu使用详解_第5张图片
在内部创建了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”
Android Toolbar配合menu使用详解_第6张图片 Android Toolbar配合menu使用详解_第7张图片
app:layout_scrollFlags=“scroll|enterAlways|snap” app:layout_scrollFlags=“scroll|enterAlways|exitUntilCollapsed”
Android Toolbar配合menu使用详解_第8张图片 Android Toolbar配合menu使用详解_第9张图片
需要配合height 和 minHeight 属性使用

普通menu使用

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

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

menu属性:

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

item属性:

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

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

简单xml文件:
Android Toolbar配合menu使用详解_第10张图片
代码:

<?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):

Android Toolbar配合menu使用详解_第11张图片

对menu简单设置:
Android Toolbar配合menu使用详解_第12张图片
代码:

<!-- 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>

记得在布局中使用哦:

Android Toolbar配合menu使用详解_第13张图片

效果图(1.4):

Android Toolbar配合menu使用详解_第14张图片

menu按钮简单逻辑操作:

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

Android Toolbar配合menu使用详解_第15张图片

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):

Android Toolbar配合menu使用详解_第16张图片

方式二:

创建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菜单:

还是先上效果图:

Android Toolbar配合menu使用详解_第17张图片

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与状态栏重叠/状态栏修改颜色
  • 我的博客

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

你可能感兴趣的:(Android,Android,Toolbar,Menu)