ToolBar详解

最新推荐文章于 2022-10-10 20:00:00 发布

xuwb123xuwb

最新推荐文章于 2022-10-10 20:00:00 发布

阅读量404

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/xuwb123xuwb/article/details/72916544

Material Design设计专栏收录该内容

3 篇文章

订阅专栏

ToolBar详解

一集成

1 添加v7包 compile 'com.android.support:appcompat-v7:25.3.1'

2 隐藏掉ActionBar 显示ToolBar 更改主题

更改清单文件 appliCation里的 @style/AppTheme 去掉ActionBar

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

item等下详细解释具体控制哪块的颜色

注：ToolBar其实是一个ViewGroup 可以存放子View

为了兼容5.0以下版本引入新命名空间 xmlns:app="http://schemas.android.com/apk/res-auto" 使用app：的属性否则使用android在xml设置的属性添加的控件无效

<FrameLayout
    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="com.example.wbxu.mymaterialdemo.MainActivity">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolBar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        >
        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </android.support.v7.widget.Toolbar>
</FrameLayout>

由于开始去掉ActionBar然后整体使用浅色系主题，，toolBar上的元素会自动使用深色系来与主题颜色分开，，比如下边的标题颜色变黑，，所以单独将Toolbar的主题改为深色系然后单独将toolbar上的menu菜单设置成浅色系即可

android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"

如果不更改toolbar的主题这样显示的ToolBar中的字体是黑色的

二更改toolBar中的颜色先看一张style 主题里的item的控制界面各部分颜色的方法

解释： colorPrimaryDark（状态栏底色）：在风格 (styles) 或是主题 (themes) 里进行设定。

colorPrimary 标题栏【toolbar或者actionbar的颜色】如果是toolbar 在主题里的style里设置再供toolbar的背景色调用如下

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">#2e8abb</item> <!--浅蓝色-->
        <item name="colorPrimaryDark">#3A5FCD</item> <!--深蓝色-->
    </style>
</resources>

android:background="?attr/colorPrimary"

如果是actionBar的话则直接在风格 (styles) 或是主题 (themes) 里进行设定 colorPrimary 参数即可；

navigationBarColor（导航栏底色）：底部导航栏的颜色手机的主键回退键等等

textColorPrimary 指定默认的label自带标题的颜色

还有个colorAccent指定app的悬浮窗的颜色也设置被选中时的颜色

更改toolBar颜色前先在主题里设置颜色供toolbar的 background调用

三 toolBar上的元素添加

     setNavigationIcon 即设定 up button 的图标，因为 Material 的介面，在 Toolbar这里的 up button样式也就有別于过去的 ActionBar 哦。
     setLogo   APP 的图标。
    setTitle   主标题。
   setSubtitle 副标题。
     setOnMenuItemClickListener   设定菜单各按鈕的动作。

使用：

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
// App Logo
toolbar.setLogo(R.drawable.ic_launcher);
// Title
toolbar.setTitle("My Title");
// Sub Title
toolbar.setSubtitle("Sub title");
setSupportActionBar(toolbar);
// Navigation Icon 要設定在 setSupoortActionBar 才有作用
// 否則會出現 back button
toolbar.setNavigationIcon(R.drawable.ab_android);

注意：setNavigationIcon需要放在 setSupportActionBar之后才会生效。

给Up Button 添加点击事件

//要放在setSupportActionBar之后才会生效
        toolbar.setNavigationIcon(R.mipmap.ic_launcher);
        //设置点击事件
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "导航栏click", Toast.LENGTH_SHORT).show();
            }
        });

如果想更改标题的颜色大小子标题的颜色和大小

可以调用setTitleTextColor、setTitleTextAppearance、setSubtitleTextColor、setSubtitleTextAppearance 这些API；

四设置menu

创建menu的资源文件 res/menu/menu_main.xml

<menu 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"
      tools:context=".MainActivity">
  <item android:id="@+id/action_edit"
        android:title="@string/action_edit"
        android:orderInCategory="80"
        android:icon="@drawable/ab_edit"
        app:showAsAction="always" />
  <item android:id="@+id/action_share"
        android:title="@string/action_edit"
        android:orderInCategory="90"
        android:icon="@drawable/ab_share"
        app:showAsAction="ifRoom" />
  <item android:id="@+id/action_settings"
        android:title="@string/action_settings"
        android:orderInCategory="100"
        app:showAsAction="never"/>
</menu>

其中showAsAction 是控制menu的显示位置

always是永远显示在toolBar中 ifRoom是屏幕空间足够的情况下显示在toolBar中不够就显示在菜单中 never一直显示在菜单中

withText：使菜单项和它的图标，菜单文本一起显示。

如果显示在toolbar中只显示图标而显示在菜单中只显示文字

应用菜单布局在main

 //创建菜单的布局
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbar, menu);
        return true;
    }

.监听菜单点击

@Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.one:
                Toast.makeText(this, "第一个按钮", Toast.LENGTH_SHORT).show();
                break;
            case R.id.two:
                Toast.makeText(this, "第二个按钮", Toast.LENGTH_SHORT).show();
                break;
            case R.id.three:
                Toast.makeText(this, "第三个按钮", Toast.LENGTH_SHORT).show();
                break;
        }
        return true;
    }

直接运行点击菜单按钮会遮挡toolbar

在自定义的popupMenu的style里重新设置

<style name="ToolbarPopupTheme" parent="@style/ThemeOverlay.AppCompat.Light">
        <item name="android:colorBackground">#ffff</item>
        <!--新增一个item，用于控制menu弹出的位置-->
        <item name="actionOverflowMenuStyle">@style/OverflowMenuStyle</item>

        <!--新增一个item，用于更改menu菜单的文字颜色和大小-->
        <item name="android:textColor">#000ddd</item>
        <item name="android:textSize">10dp</item>
    </style>

    <style name="OverflowMenuStyle" parent="Widget.AppCompat.Light.PopupMenu.Overflow">
        <item name="overlapAnchor">false</item>  <!--把该属性改为false即可使menu位置位于toolbar之下-->
    </style>

然后重新设置到toolBar的布局中
app:popupTheme="@style/ToolbarPopupTheme"

五不在toolbar里添加view动态更改toolBar的标题

在mainActivity的oncreate的方法里设置title toolbar.setTitle("title"); //给toolBar设置标题内容总会被清单application的label覆盖

解决办法：

 /**
     *  解决在OnCreat里给toolBar设置标题被清单的label覆盖
     */
    @Override
    public void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        //Toolbar 必须在onCreate()之后设置标题文本，否则默认标签将覆盖我们的设置
        if (toolbar != null) {
            toolbar.setTitle("零钱");   //给toolBar设置标题内容
            toolbar.setSubtitle("微信安全支付");//给toolbar设置子标题
        }
    }