Android——ToolBar(工具栏)详解(含源码下载)

在 Android Studio 中默认创建 1 个 App 时,顶部都会默认添加导航栏 ActionBar 组件。但是ActionBar 存在一些缺点,如使用不灵活难以扩展等问题。因此在 Android 5.0 时 ToolBar 诞生了,由于它高度的可定制性、灵活性、具有 Material Design 风格等优点,越来越多的 App 开始使用ToolBar。

为了兼容以前的系统版本,ActionBar 仍然需要保留,但是要想使用 ToolBar 就需要先将ActionBar 关闭。
ToolBar 的使用方法如下:
1、打开 res/values 目录中的 styles.xml 文件,在该文件中将主题样式修改为没有 ActionBar。

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

2、在layout布局添加Toolbar组件

<androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:theme="?attr/actionBarTheme"/>

3、ToolBar 之所以比 ActionBar 强大,是因为 ToolBar 有着非常灵活的属性方法。见下表:ToolBar 常用的属性方法
我们在MainActivity中添加Toolbar相关属性:

Toolbar toolbar = findViewById(R.id.toolbar);//绑定ToolBar
toolbar.setLogo(R.mipmap.ic_launcher);//设置logo
toolbar.setNavigationIcon(R.drawable.ic_action_finish);//设置导航图标
toolbar.setTitle("我是主标题");//设置主标题
toolbar.setSubtitle("我是子标题");//设置子标题
toolbar.setTitleTextColor(Color.BLACK);//设置文本颜色
//toolbar.setOverflowIcon(getResources().getDrawable(R.drawable.ic_overflow));//修改溢出菜单按钮图标
setSupportActionBar(toolbar);//设置工具栏为Toolbar
//设置导航监听事件
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        finish();
    }
});

这些基本属性也可以在layout布局文件添加:

<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme"
toolbar:logo="@mipmap/ic_launcher"
toolbar:title="我是主标题"
toolbar:subtitle="我是子标题"
toolbar:navigationIcon="@drawable/ic_action_finish"/>

注意:使用toolbar:……时,要在根布局声明:xmlns:toolbar="http://schemas.android.com/apk/res-auto"
在这里插入图片描述
在MainActivty中要绑定Toolbar组件,并设置为Actionbar

Toolbar toolbar = findViewById(R.id.toolbar);//绑定ToolBar
setSupportActionBar(toolbar);//设置工具栏为Toolbar

这样一个简单的Toolbar就创建完成。

4、如同Actionbar一样,Toolbar也可以添加选项菜单。方法与Actionbar类似,在MainActivity重写onCreateOptionsMenu(……)和onOptionsItemSelected(……):

@Override
    public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.option_menu,menu);//将自定义的菜单填充进去
		return super.onCreateOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()){
            case R.id.item1:break;
            case R.id.item3: break;
        }
		return super.onOptionsItemSelected(item);
    }

5、如果对溢出菜单弹出列表样式不满也可以自己定义,这里给出一个参考样式,需要在 res/values 目录中的 styles.xml 文件定义:

<!--    设置溢出菜单样式-->
    <style name="ToolbarMenuTheme" parent="Theme.AppCompat.Light">
<!--        设置溢出菜单形状大小位置背景-->
        <item name="actionOverflowMenuStyle">@style/OverflowMenuStyle</item>
<!--        设置溢出菜单的item项目样式-->
        <item name="android:dropDownListViewStyle">@style/MyDropDownListView</item>
<!--        设置溢出菜单的文本样式-->
        <item name="android:itemTextAppearance">@style/OverflowItemText</item>

    </style>
    <!--设置溢出菜单形状大小位置背景 -->
    <style name="OverflowMenuStyle" parent="@style/Widget.AppCompat.Light.PopupMenu.Overflow">
        <!--      把该属性改为false即可使menu位置位于toolbar之下-->
        <item name="overlapAnchor">false</item>
        <!--    dropDownHeight/Width:分别是指定下拉菜单的高度与宽度-->
        <item name="android:dropDownWidth">wrap_content</item>
        <item name="android:dropDownHeight">wrap_content</item>
        <item name="android:paddingRight">5dp</item>
        <!--      dropDownVerticalOffset:同上,不过这个是竖直方向的偏移,这里的话我们设置为4dp,默认值这里是-4dp;-->
        <item name="android:dropDownVerticalOffset">4dp</item>
        <!--      dropDownHorizontalOffset:指定下拉菜单与文本之间的水平间距;-->
        <item name="android:dropDownHorizontalOffset">0dp</item>
        <item name="android:popupBackground">@drawable/toolbar_popupmenu_style</item>
    </style>
    <!-- 设置溢出菜单的item项目样式 -->
    <style name="MyDropDownListView" parent="android:style/Widget.Holo.Light.ListView.DropDown">
        <!-- 设置overflow中的item之间的divider -->
        <item name="android:divider">#B3B0B0</item>
        <item name="android:dividerHeight">3dp</item>
    </style>
    <!--设置溢出菜单的文本样式 -->
    <style name="OverflowItemText" parent="@android:style/Widget.ActionButton.Overflow">
        <item name="android:textColor">#EC1111</item>
        <item name="android:textAppearance">?attr/textAppearanceSmallPopupMenu</item>
    </style>

不要忘记在layout布局的Toolbar组件声明。
在这里插入图片描述
链接:百度网盘下载 提取码:8c2x

发布了33 篇原创文章 · 获赞 11 · 访问量 9255

猜你喜欢

转载自blog.csdn.net/qq_43567345/article/details/104477038
今日推荐