Android ToolBar使用详解(手把手教你撸代码)

前言

这几天因为偶然看到关于Android 11分区存储的变更,然后博客就耽误了,以前关于toolbar了解过但是没有上手过,因为没有负责到那一块,今天我们来手撸一下关于toolbar的代码以及我遇到的问题,我会给大家一一写清楚,我写的文章是不存在错误或者看不懂的地方,或许有人抬杠,“那么骄傲”?为什么我会说出这句话因为我写的文章都是我自己项目中运用到了,然后遇到了问题,我去解决,进行反复测试,才整理成文章发表出来,而且我发表的文章都不是什么特别深,都是一样可以看明白那种,因为我没有忘记我的初衷,我写文章就是为了让那些和我一样为了几个特别小的问题就去搞了整整一下午或者一天。我经历过才会懂,这篇文章依旧为了刚入门的小白而写,希望能给你们提供帮助。

ToolBar代替原生ActionBar

吐槽了那么长一段话,现在我们来看看我们今天最终要实现的效果。
在这里插入图片描述
这个就是最终的样子,这个效果是在Android 11的真机上,我还在Android 9的真机上也进行了测试。

手撸开始

xml中:
<LinearLayout  
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:toolbar="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent"
    tools:context=".ToolBarActivity">
    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        toolbar:title="Title"
        android:fitsSystemWindows="true"
        app:titleTextColor="@color/colorWhite"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/Theme.ToolBar.ZhiHu"
        android:background="@color/colorPrimary"
       >

    </androidx.appcompat.widget.Toolbar>
    </LinearLayout >

我们来一一讲解 最外层是一个线性布局里面就是Toolbar ——布局层面
我们看这句话xmlns:toolbar="http://schemas.android.com/apk/res-auto"
加上这句话下面的Toolbar属性才可以使用,当然也可以不加这句话直接在代码中设置。——线性布局
继续看Toolbar的属性:仔细看前缀有的是android有的是app也有toobar自身的属性前缀。
toolbar:title="Title"  就是Toolbar的标题

app:subtitle="SubTitle" 这个是Toobar的子标题 上面的效果图我没有加 有需要的可以写上。
这个属性在有的手机上可以有的不可以,如果不可以的话可以继续往下看。

android:fitsSystemWindows="true" 这句话是因为我使用了沉浸式状态栏。
所以这句话需要加上,如果不加的话状态栏会挡住Toolbar。如果不适用沉浸式状态栏可以不加这句话。

app:titleTextColor="@color/colorWhite" 标题字体颜色 这个属性不会让子标题变颜色,子标题需要另外设置。
app:subtitleTextColor="@color/colorWhite" 这个属性是给子标题设置颜色 但是我加上这条属性子标题不会改变字体颜色。
android:theme="@style/Theme.ToolBar.ZhiHu"  主题。一些特殊的属性需要放到主题中更改。 ——Toolbar属性

style中主题设置
 <style name="Theme.ToolBar.ZhiHu" parent="@style/ThemeOverlay.AppCompat.ActionBar">
        <item name="overlapAnchor">false</item> <!--是为了将menu放到三个点的下面-->
        <item name="android:textColorPrimary">@android:color/white</item> <!--三个点的颜色,如果下面不设置子标题颜色那么子标题字体颜色就会是三个点的颜色--> 
        <item name="android:textColorSecondary">@android:color/black</item> <!--子标题字体颜色-->
        <item name="android:textSize">18sp</item> <!--修改字体大小-->
        <item name="android:textColor">@color/colorPrimary</item> <!--menu字体颜色-->
        <item name="actionOverflowButtonStyle">@style/OverflowButtonStyle</item> <!--设置toolbar自带的三个点-->
        <item name="android:itemBackground">@color/colorPrimary</item><!--修改item背景颜色-->
 </style>
           <!--设置toolbar自带的三个点-->
    <style name="OverflowButtonStyle" parent="@android:style/Widget.ActionButton.Overflow">
        <item name="android:src">@mipmap/ddddd</item>
    </style>
这个就是Toolbar运用的主题,关于上面item的用处我也写了注释。
这篇文章所有图片的话都是阿里巴巴矢量库上找的,下载的时候大小可以下载64的,背景颜色看自己爱好。
还有几个需要注意的地方:
 1、如果不自定义三个点 那么自带的三个点颜色是黑色的 上面设置三个点的颜色就可以使用。
    否则自定义三个点之后上面的属性就不再管用,自定义之后就是你找的图片的颜色。
 2、上面属性中修改三个点的颜色,如果下面不设置子标题颜色那么子标题字体颜色就会是三个点的颜色。
    上面也说了有的手机可以直接设置子标题的颜色如果可以的话 修改子标题颜色的item可以不用加。
菜单布局 --menu
<?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/action_search"
        android:icon="@mipmap/seach"
        android:title="搜索"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_notification"
        android:icon="@mipmap/lingdnag"
        android:title="消息"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_settings"
        android:title="哈哈哈"
        app:showAsAction="never" />

    <item
        android:id="@+id/action_about"
        android:title="来来来"
        app:showAsAction="never" />
    <item
        android:id="@+id/action_ddd"
        android:title="滴滴滴"
        app:showAsAction="ifRoom" />
</menu>
前面两个带图片的item就是三个点旁边的两个图片。
app:showAsAction="ifRoom" 可以在toolbar中显示出来 最多两个
app:showAsAction="never"  点击三个点显示在菜单中
Mainactivity
  @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //隐藏系统标题栏
        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_tool_bar);
        /**
         * 沉浸式状态栏
         * 这个是我从其他博客上面找的 我感觉应该不是沉浸式只是透明化了
         * 我一直都没明白 沉浸式状态栏和透明状态栏不同之处。
         * 因为博客上关于沉浸式和透明搞混的很多 弄得我也搞混了。
         * 我也看了鸿洋大神的沉浸式我感觉大神最后的效果好像跟我差不多,但是我感觉大神写的不是沉浸式。
         * 关于这点我也不是很清楚,如果有搞过的小伙伴可以私信我,也可以将一些讲的好的链接发到评论上。
         */
        WindowManager.LayoutParams layoutParams = getWindow().getAttributes();
        layoutParams.flags = (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | layoutParams.flags);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        mImageView = findViewById(R.id.img);
        //当toolbar不连接到系统状态栏时使用这个属性加载资源文件
        //toolbar.inflateMenu(R.menu.zhihu_toolbar_menu);
        //将toolbar连接到系统状态栏
        setSupportActionBar(toolbar);
        toolbar.setNavigationIcon(R.mipmap.mune);//设置导航栏图标
        // toolbar.setLogo(R.mipmap.ic_launcher);//设置app log 一般app只设置一个就可以了 如果你想要的话也可以设置
        
        }


    /*
     * 将toolbar连接到系统状态栏必须调用的方法
     * 注:也可以不用链接系统状态栏就不需要调用这个方法 直接用tool的点击监听
     * */
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        //在return之前加载出toolbar要加载的资源文件
        getMenuInflater().inflate(R.menu.zhihu_toolbar_menu, menu);
        return super.onCreateOptionsMenu(menu);
    }
     //这个方法是菜单的点击监听
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        return super.onOptionsItemSelected(item);
    }

总结:

 这就结束了,是不是很简单,其实我搞的时候心很累,找了无数篇博客五花八门,什么样的都有。
 搞了一天才弄出来这么多的代码。一步步跟着走你就会觉得很简单。
 这个东西比较难的地方在于ui和属性设置,有的属性不可用有的用了没反应。
 炒鸡郁闷的,博客上总有一些误人子弟的文章,希望大家少遇到。
 我上面总结了的属性都是可以用的,都是经过我测试的。
 最终结果也在上面给你们展示了,小伙伴们,下期见!
评论 14 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页

打赏作者

LazyDer

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值