MaterialDesign设计-ToolBar使用

由于ActionBar（Android 3.0推出）使用起来不太方便，且不易于扩展，于是Google在Android 5.0中封装了ToolBar，用于替换ActionBar，ToolBar具有许多优点，如高度可定制性，灵活性，以及具有Material Design风格等。为了兼容低版本（5.0以下版本）系统，我们需要使用v7包的ToolBar。

使用ToolBar前准备

我们需要在gradle中引用support -v7包

 implementation 'com.android.support:appcompat-v7:27.0.2'

需要将app主题设计为NoActionBar

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

ToolBar常用的一些属性

title	主标题
subtitle	副标题
titleTextColor	主标题颜色
subtitleTextColor	副标题颜色
android:minHeight	ToolBar最小高度
logo	标题前的logo
logoDescription	标题前的logo的描述
navigationIcon	最左侧的菜单
navigationContentDescription	最左侧的菜单的描述
popupTheme	设置最右侧(三个点)弹出的menu对应的主题
titleMarginStart	title距开始位置的距离
titleMarginEnd	title距结束位置的距离
titleMarginTop	title距顶部位置的距离
titleMarginBottom	title距底部位置的距离

下面开始正式的撸码

    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        app:logo="@mipmap/ic_logo"
        app:logoDescription="我是新闻的logo"
        app:navigationIcon="@mipmap/ic_menu"
        app:subtitle="推送你喜欢的"
        app:subtitleTextColor="#FFF"
        app:title="新闻"
        app:titleTextColor="#FFFFFF"/>

然后运行得到的效果

以上是xml中的介绍，使用ToolBar,我们需要在代码中去做一些处理，下面开始详细的讲解。

        //获取到ToolBar的id
        mToolBar = findViewById(R.id.tootbar);
        //设置ToolBar
        setSupportActionBar(mToolBar);
        //设置NavigationIcon的监听事件
        mToolBar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this, "navigationIcon被点击了", Toast.LENGTH_SHORT).show();
            }
        });

现在左边部分的菜单就这样搞定了，很easy吧！我们再来看看右边的菜单

右边部分的菜单需要我们在res下新建menu文件，然后在创建一个菜单文件。

具体步骤是在 res点鼠标键/new/Android resource directory/resource type下拉选择menu 。这里我们直接使用使用menu名字，然后点确认新建一个menu文件夹

然后我们在menu文件夹下右键/New/Menu resource file创建一个菜单文件，这里我们取名字叫main

然后我们开始对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="com.ricky.materialdesign.slidingmenu.drawerlayout.MainActivity">

    <item
        android:id="@+id/to_share"
        android:icon="@mipmap/ic_share"
        android:orderInCategory="100"
        android:title="分享"
        app:showAsAction="ifRoom"/>

    <item
        android:id="@+id/to_collect"
        android:icon="@mipmap/ic_collect"
        android:orderInCategory="100"
        android:title="收藏"
        app:showAsAction="ifRoom"/>

    <item
        android:id="@+id/to_sweep"
        android:icon="@mipmap/ic_sweep"
        android:orderInCategory="100"
        android:title="扫一扫"
        app:showAsAction="ifRoom"/>

    <item
        android:id="@+id/to_find"
        android:icon="@mipmap/ic_find"
        android:orderInCategory="100"
        android:title="发现"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/to_instruction"
        android:icon="@mipmap/ic_instruction"
        android:orderInCategory="100"
        android:title="说明"
        app:showAsAction="ifRoom"/>
</menu>

到这里就可以运行了吗？no,当然没那么快，眼睛尖的朋友可能已经看到了，我们还没有和代码关联呢，我们需要重写两个方法

onCreateOptionsMenu：将main.xml中菜单与我们的ToolBar关联

onOptionsItemSelected：处理添加的菜单点击事件回调，具体代码如下

    private void showToast(String msg) {
        Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
    
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.to_share:
                showToast("您点击了分享");
                break;
            case R.id.to_collect:
                showToast("您点击了收藏");
                break;
            case R.id.to_sweep:
                showToast("您点击了扫一扫");
                break;
            case R.id.to_find:
                showToast("您点击了发现");
                break;
            case R.id.to_instruction:
                showToast("您点击了说明");
                break;
        }
        return true;
    }

运行效果如下

我们发现除了分享和收藏按钮被显示出来外，其他都放到三分点开的弹窗处了，这是为啥呢？这是因为我们在写main.xml的时候，将showAsAction都设置为ifRoom，顾名思义，就是空间足够就展示出来，不够了就放到弹窗里面去，showAsAction所支持设置的属性如下：

ifRoom：空间足够就展示在ToolBar上

always：总是展示在ToolBar上

never：不展示在ToolBar（展示在弹窗中）

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

app:showAsAction="ifRoom"

我们发现最右边三个点的颜色和我们的样式不搭，我们可以修改它的颜色为我们想要的吗？是可以的，我们可以通过在主题中设置

    <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>
        <!--通过这个可以设置ToolBar最右边三个点的颜色-->
        <item name="android:textColorSecondary">#FFFFFF</item>
    </style>

我们还发现，点击最右边三个点的弹窗颜色白底黑字，我们可以修改它的样式吗？答案也是肯定的，记得在属性中列出了一个popupTheme就是设置这个的。

    app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"

就这样我们将其改成黑底白字了，如果我们要改成其他样式，可以自定义一个主题然后引用即可。关于ToolBar的介绍就先到这里，最后附上今天的demo地址

写的时候忘记的内容，在这里补充一下。

鉴于产品经理大多都是苹果控，可能更多效果是参照ios来做的，于是需要ToolBar的标题居中，我们仔细看了一下源码，发现ToolBar是继承ViewGroup的，于是我们第一感觉肯定可以把其当做容器来用。

    <android.support.v7.widget.Toolbar
        android:id="@+id/login_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        app:navigationIcon="@drawable/ic_back_normal">

        <TextView
            android:id="@+id/toolbar_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:singleLine="true"
            android:text="登录"
            android:textColor="#ffffff"
            android:textSize="20sp"/>

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

运行效果如下：

so easy吧，有一点要注意，那就是加进来的标题控件需要添加 android:layout_gravity="center"属性。

MaterialDesign设计-ToolBar使用

猜你喜欢