Android控件<第十五篇>：Toolbar基本使用

作者: NoBugException | 来源:发表于2021-09-07 21:44 被阅读0次

Android控件<第十五篇>：Toolbar基本使用
Android UI进阶之旅6--Material Design
setSupportActionBar()方法报错
Android 第十九天自定义ActionBar遇到问题
Android Develop —— ToolBar使用
02-Toolbar的使用
ToolBar使用
AppCompat Toolbar控件去掉阴影
Android ToolBar 使用完全解析
Android 使用Toolbar

（1）简介

Toolbar 是 Android 5.0 推出的一个 Material Design 风格的导航控件 ,用来取代之前的 Actionbar 。与 Actionbar 相比，Toolbar 明显要灵活的多。它不像 Actionbar 一样，一定要固定在Activity的顶部，而是可以放到界面的任意位置。

（2）修改主题

当我们新建一个工程时，我们发现默认是有导航栏的，如图：

图片.png

那是因为默认app主题自带了导航栏

图片.png

我们发现，系统自带的是一个actionBar，那么我们就换一个主题

图片.png

三种主题任意选择一个即可。

现在开始添加一个ToolBar。

（3）Toolbar导包选择

图片.png

如图所示，Toolbar有两种导包，建议使用v7的那个，因为第二种只支持Android5.0以上的手机。

（4）Toolbar基本代码

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar_normal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:collapseIcon="@mipmap/ic_launcher"
    app:buttonGravity="bottom"
    app:navigationIcon="@mipmap/ic_launcher"
    app:popupTheme="@style/Animation.AppCompat.Dialog"
    app:logoDescription="asdasdasd"
    app:maxButtonHeight="50dp"
    app:navigationContentDescription="tttttt"
    app:title="Title"
    app:titleTextColor="#ffffff"
    android:background="@color/colorPrimaryDark"
    app:subtitle="SubTitle"
    app:subtitleTextColor="#ffffff"
    app:logo="@mipmap/ic_launcher">

</android.support.v7.widget.Toolbar>

（5）基本属性

background 设置背景色

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar_normal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimaryDark">

</android.support.v7.widget.Toolbar>

图片.png

目前发现，设置toolbar背景色之后，状态栏也会随之变化。

navigationIcon 添加返回按钮

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar_normal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimaryDark"
    app:navigationIcon="@mipmap/back">

</android.support.v7.widget.Toolbar>

图片.png

logo 添加logo

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar_normal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimaryDark"
    app:navigationIcon="@mipmap/back"
    app:logo="@mipmap/ic_launcher">

</android.support.v7.widget.Toolbar>

图片.png

title和subtitle 添加标题和子标题

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar_normal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimaryDark"
    app:navigationIcon="@mipmap/back"
    app:logo="@mipmap/ic_launcher"
    app:title="ToolBar标题"
    app:subtitle="ToolBar子标题">

</android.support.v7.widget.Toolbar>

图片.png

titleTextColor和subtitleTextColor 修改标题和子标题的颜色

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar_normal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimaryDark"
    app:navigationIcon="@mipmap/back"
    app:logo="@mipmap/ic_launcher"
    app:title="ToolBar标题"
    app:subtitle="ToolBar子标题"
    app:titleTextColor="#ffffff"
    app:subtitleTextColor="#ffffff">

</android.support.v7.widget.Toolbar>

图片.png

collapseIcon 设置折叠视图的图标

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar_normal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimaryDark"
    app:navigationIcon="@mipmap/back"
    app:logo="@mipmap/ic_launcher"
    app:title="ToolBar标题"
    app:collapseIcon="@mipmap/back"
    app:subtitle="ToolBar子标题"
    app:titleTextColor="#ffffff"
    app:subtitleTextColor="#ffffff">

图片.png

这个后面有详细介绍。

（6）添加菜单

通过inflateMenu可以添加toolbar的菜单

    toolbar_normal.inflateMenu(R.menu.toolbar_menu);

菜单布局是

<menu
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/action_search"
        android:icon="@mipmap/back"
        android:title="按钮1"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_notification"
        android:icon="@mipmap/back"
        android:title="按钮2"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_item_one"
        android:title="按钮3"
        app:showAsAction="never" />

    <item
        android:id="@+id/action_item_two"
        android:title="按钮4"
        app:showAsAction="never" />
</menu>

效果如下：

图片.png

每个菜单都可以设置特有的属性

orderInCategory
设置菜单项的排列顺序，必须设置大于等于0的整数值。数值小的排列在前，如果值相等，则按照xml中的顺序展现。
title
菜单项的标题。
icon
菜单项的图标。
showAsAction
该属性有五个值，可以混合使用。

always：总是显示在Toolbar上。
ifRoom：如果Toolbar上还有空间，则显示，否则会隐藏在溢出列表中。
never：永远不会显示在Toolbar上，只会在溢出列表中出现。
withText：文字和图标一起显示。
collapseActionView：声明了这个操作视窗应该被折叠到一个按钮中，当用户选择这个按钮时，这个操作视窗展开。一般要配合ifRoom一起使用才会有效。

这里重点介绍一下collapseActionView属性，利用collapseActionView属性实现“点击按钮展开成搜索框”

第一步：设置折叠视图图标

图片.png

第二步：修改菜单属性

图片.png

这样的话就可以实现下图的效果

42.gif

（7）setOnMenuItemClickListener

设置Item的点击事件

    toolbar_normal.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
        @Override
        public boolean onMenuItemClick(MenuItem menuItem) {
            switch (menuItem.getItemId()){
                case R.id.action_item_one:
                    break;
                case R.id.action_item_two:
                    break;
                case R.id.action_notification:
                    break;
                case R.id.action_search:
                    break;
            }
            return true;
        }
    });

（8）setNavigationOnClickListener

设置返回键点击事件

    toolbar_normal.setNavigationOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {

        }
    });

（9）SearchView

有关SearchView，前面已经介绍过怎么展示了，下面介绍怎么去设置监听

    SearchView searchView = (SearchView) menuItem.getActionView();
    searchView.setQueryHint("搜索");
    
    //((ImageView)searchView.findViewById(R.id.search_button)).setImageResource(R.mipmap.shennvguo2);

    searchView.setOnSearchClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            //当点击搜索编辑框的时候执行，刚进入时默认点击搜索编辑框
        }
    });

    searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
        @Override
        public boolean onQueryTextSubmit(String s) {
            //点击软键盘搜索的时候执行
            return false;
        }

        @Override
        public boolean onQueryTextChange(String s) {
            //搜索框文本发生改变的时候执行
            return false;
        }
    });
    searchView.setOnQueryTextFocusChangeListener(new View.OnFocusChangeListener() {
        @Override
        public void onFocusChange(View v, boolean hasFocus) {
            //当得到焦点和失去焦点的时候执行
        }
    });

    menuItem.setOnActionExpandListener(new MenuItem.OnActionExpandListener() {
        @Override
        public boolean onMenuItemActionExpand(MenuItem item) {
            //展开时回调
            return true;
        }

        @Override
        public boolean onMenuItemActionCollapse(MenuItem item) {
            //收起来时回调
            return true;
        }
    });

（10）Overflow

修改overflow的图标

    //设置overflow图标
   toolbar_normal.setOverflowIcon(ContextCompat.getDrawable(this,R.mipmap.overflow));

图片.png

（11）overflow popup主题

图片.png

溢出菜单就不介绍了，目前没有什么好办法可以自定义布局。

图片.png

（12）添加子布局

图片.png

Toolbar的父类是ViewGroup，我们常用的线性布局和相对布局的父类也是ViewGroup，所以Toolbar也同样可以添加子布局，看以下代码

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar_normal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimaryDark"
    app:navigationIcon="@mipmap/back"
    app:popupTheme="@style/OverflowMenuStyle"
    app:collapseIcon="@mipmap/back">


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/colorAccent"
        android:text="标题"
        android:layout_gravity="center"
        android:textSize="20sp"/>


</android.support.v7.widget.Toolbar>

我们添加一个标题，使它居中

图片.png

[本章完...]

Android控件<第十五篇>：Toolbar基本使用
（1）简介 Toolbar 是 Android 5.0 推出的一个 Material Design 风格的导航控件...
Android UI进阶之旅6--Material Design
Toolbar的基本使用当作简单的控件使用即可。 Toolbar是一个ViewGroup，里面可以放子控件。因此...
setSupportActionBar()方法报错
在Android开发中，使用ToolBar控件替代ActionBar控件，需要在java代码中使用setSuppo...
Android 第十九天自定义ActionBar遇到问题
问题一：在Android开发中，使用ToolBar控件替代ActionBar控件，需要在java代码中使用setS...
Android Develop —— ToolBar使用
Android ToolBar 简介 ToolBar是Android 5.0 推出的一个新的导航控件，用于取代之前...
02-Toolbar的使用
一、Toolbar的简介 Toolbar 是 android 5.0 引入的一个新控件，Toolbar出现之前，我...
ToolBar使用
ToolBar 基本使用 Toolbar是在Android5.0开始推出的一个MaterialDesign风格的导...
AppCompat Toolbar控件去掉阴影
在Android 5.0以上，AppCompat toolbar控件会自带阴影效果，有时候设计的页面toolbar...
Android ToolBar 使用完全解析
ToolBar简介 ToolBar是Android 5.0推出的一个新的导航控件用于取代之前的ActionBar，...
Android 使用Toolbar
本文介绍在Android5.0以上应用中使用Toolbar作为标题栏基本用法是在XML中：初始化Toolbar...