Meterial Design常见控件的使用（一）：Toolba

作者: bug音音 | 来源:发表于2021-01-07 16:42 被阅读0次

Toolbar 的基本用法

常用的方法

xml中的设置：

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorAccent"
        app:navigationIcon="@drawable/ic_back_white_24dp"
        app:title="标题"
        app:titleTextColor="@color/white">
 </android.support.v7.widget.Toolbar>

如果你不在xml中设置参数的话，代码中的设置:

 Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setTitle("标题");
        toolbar.setTitleTextColor(Color.WHITE);
        toolbar.setNavigationIcon(R.drawable.ic_back_white_24dp);

        //点击左边返回按钮监听事件
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

            }
        });

由于比较简单，效果图这里也不在贴出啦。

全面但包括不太常用的用法

xml中的配置：

<!--   navigationIcon  左边返回箭头图标
       navigationContentDescription 目前还不知道其作用
       titleMarginStart  标题距离(开始)左边的距离
       -->
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorAccent"
        app:logo="@mipmap/ic_launcher"
        app:navigationContentDescription=""
        app:navigationIcon="@drawable/ic_back_white_24dp"
        app:subtitle="子标题"
        app:subtitleTextColor="@color/white"
        app:title="标题"
        app:titleMarginStart="90dp"
        app:titleTextColor="@color/white">

同样如果不在xml中设置参数的话，代码中的设置:
这里就不在贴出代码啦，设置的时候，先敲打出xml配置中的关键单词或首字母，就会自动提示的。大部分在xml有的属性，代码中都可以设置

效果图：

image

注意事项：
1：如果你添加了这行代码 setSupportActionBar(toolbar); 那么 toolbar.setNavigationOnClickListener监听方法，要放到其后面，否则点击事件，监听不到的。如果你用不到ActionBar的一些特性的话，建议setSupportActionBar(toolbar); 这行代码不用添加了。

如果你想修改主标题和子标题的文字大小，你可通过如下方式：
首先定义一个style：

 <!--主标题-->
<style name="ToolbarTitle" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title">
       <item name="android:textColor">#f0f0</item>
        <item name="android:textSize">15sp</item>
    </style>

 <!--子标题-->
<style name="ToolbarSubtitle" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Subtitle">
        <item name="android:textColor">#f0f0</item>
        <item name="android:textSize">10sp</item>
    </style>

然后：

 <!-- app:titleTextAppearance="@style/ToolbarTitle"-->
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorAccent"
        app:logo="@mipmap/ic_launcher"
        app:navigationContentDescription=""
        app:navigationIcon="@drawable/ic_back_white_24dp"
        app:subtitle="子标题"
        app:subtitleTextColor="@color/white"
        app:title="标题"
        app:titleMarginStart="90dp"
        app:titleTextAppearance="@style/ToolbarTitle"
        app:titleTextColor="@color/white">

效果图这里不在贴出了，通过app:titleTextAppearance=”@style/ToolbarTitle”方法的设置，就能修改标题字体的大小，当然文字颜色也可以修改。

到这里，你可能要问了，如果，我想要标题居中，怎么办呢？查看api，toolbar没有使其居中的方法，也就提供了使其距左右，上下边距大小的方法。不过不用担心，这里还是有办法的。看如下代码：

 <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorAccent">

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="标题"
            android:textColor="@color/white"
            android:textSize="22sp" />

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

效果图：

image

注意： 此时 TextView 控件的宽和高都是自适应大小，java 代码中此行代码setSupportActionBar(toolbar);就不要添加了，否则就会显示不正常。如果你非要添加setSupportActionBar(toolbar);这行代码的话，TextView 控件的宽要用match_parent属性。这里再次建议setSupportActionBar(toolbar);这行代码就不要点添加了。
至于它的作用，在此做一下简单的说明吧：
1）在Toolbar这个控件出现之前，其实我们也可以通过 ActionBar actionBar = getSupportActionBar(); 方法获取到acitonbar，（前提你的activity主题theme，是采用的带actionbar的主题，如果你采用这样的主题android:theme="@style/Theme.AppCompat.Light.NoActionBar">拿到的actionBar也是 null,显然是不行的）之后你就可以采用诸如下面的方面来操作actionbar啦。

 ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.setDisplayHomeAsUpEnabled(true);
            actionBar.setDisplayShowTitleEnabled(true);
            actionBar.setTitle("主标题");
               ......
        } else {
            Log.i(TAG, "onCreate: actionBar is null");
        }

但是，原生自带的ActionBar设置的灵活性，还是有限，因此Toolbar 这个控件，也就应运而生啦！此时，有的小伙伴说了，我虽然使用了Toolbar来代替ActionBar，但是我还想使用ActionBar的一些特性怎么办呢？这个时候 setSupportActionBar(toolbar);就发挥其作用啦。添加这行代码，你的toolbar可以说也就具有了ActionBar的相关属性了。好啦，到此setSupportActionBar(toolbar) 的作用也讲完了。如果你还不太明白的话，可以参考一下篇文章：
ActionBar和Toolbar的基础使用

结合menu配置文件的用法。

这里先看一下效果图：

image

首先在menu文件夹中，创建名为 menu.xml 文件（文件名随意的）：

<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="@drawable/ic_search"
        android:title="Search"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_notifications"
        android:icon="@drawable/ic_delete_white_24dp"
        android:title="notifications"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_settings"
        android:icon="@mipmap/ic_launcher"
        android:orderInCategory="100"
        android:title="@string/action_settings"
        app:showAsAction="never" />
</menu>

然后在代码中这样加载该menu文件即可：

 toolbar.inflateMenu(R.menu.menu);

最后运行代码，就是上图的效果。

在这里，app:showAsAction 属性还是很有必要介绍一下滴。
app:showAsAction 有以下三个属性：

ifRoom 表示在屏幕空间足够的情况下显示在Toolbar中，不够的话就显示在菜单中
never 表示永远不显示在Toolbar中，而是一直显示在菜单中
always 表示永远显示在Toolbar中，如果屏幕空间不够则不显示

注意:Toolbar中的action按钮只会显示图标，菜单中的action按钮只会显示文字。

那如果设置了ifRoom 属性之后，既然只显示图标不显示文字，那还设置 android:title=”Search” 文字干嘛呢?如果你设置了之后，虽然不显示，但是你长按相应按钮后，就会吐司相应文字内容的。

细心的你可能发现还有些不足的地方，就是上图的点击菜单选项时，弹出的菜单位置有点太靠上啦，能不能设置呢，还有菜单的背景和文字颜色能不能设置呢？答案当然是可以的！

首先设置好样式：

 <style name="ToolbarPopupTheme" parent="@style/ThemeOverlay.AppCompat.Dark">
         <!--<item name="android:colorBackground">#000000</item>--> <!--这里可以改变菜单的背景色-->
        <item name="actionOverflowMenuStyle">@style/OverflowMenuStyle</item> <!--新增一个item，用于控制menu-->
    </style>

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

然后直接在这里引用就可以了： app:popupTheme=”@style/ToolbarPopupTheme”

 <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorAccent"
        app:popupTheme="@style/ToolbarPopupTheme">

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="标题"
            android:textColor="@color/white"
            android:textSize="22sp" />

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

效果图：

image

与AppBarLayout结合的使用

（1）： app:layout_scrollFlags=”scroll”

xml代码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            android:background="@color/colorAccent"
            app:layout_scrollFlags="scroll"
            app:popupTheme="@style/ToolbarPopupTheme">

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

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/nestedScrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="16dp"
                android:text="@string/large_text" />

        </LinearLayout>

    </android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>

首先注意最外层：包裹了一层 android.support.design.widget.CoordinatorLayout 布局，那CoordinatorLayout 布局是什么的，我们可以理解为它是加强版的FramLayout。然后注意：Toolbar 的新添加的这条属性 app:layout_scrollFlags=”scroll” 。最后看一看效果图：

image

PS：对于 scroll 属性，网上也有说的比较专业的，不过我认为从产生的效果角度去分析的话，那就是：往上滑动就不说了，往下滑动就是当下面的滚动布局滑动到顶端时，标题栏toolbar才会滑出来。该属性实用性一般吧。

（2）：app:layout_scrollFlags=”scroll|enterAlways”

scroll 与 enterAlways 结合产生的效果图如下：

image

PS：我们还是从产生的效果角度去分析的：往下滑动时，，标题栏 toolbar 会优先滑出来，然后滚动布局才开始滑动。就像该单词的意思一样：总是在。也就是只要添加了该属性值，下滑时 toolbar 总是优先滑出来。该属性比较实用。

（3）： app:layout_scrollFlags=”scroll|enterAlways|snap”

在以上基础上，在与 snap 结合所产生的效果图如下：

image

PS：还是从产生的效果角度去分析的：不管是往下或者往上滑动时，，标题栏 toolbar 首先还是和（2）中一样的，不过有个细微的不同，toolbar会根据当前的滚动距离，自动选择是隐藏还是显示。该属性实用性也一般。

（4）： app:layout_scrollFlags=”scroll|enterAlways|exitUntilCollapsed”

scroll 与 enterAlways 与 exitUntilCollapsed 结合所产的效果图如下：

image

注意此时Toolbar的布局有些许改变（改变后的）：

 <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:background="@color/colorAccent"
            android:minHeight="40dp"
            app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed"
            app:popupTheme="@style/ToolbarPopupTheme">

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

我们给Toolbar 设置了一个最小高度 android:minHeight=”40dp”，然后又把正常高度改变了，并随意改成了100dp。

PS：还是从产生的效果角度去分析的：默认toolbar 显示的正常高度值我们设置成的100dp，当我们上滑的时候，高度达到最小高度40dp时，toolbar不在滑动了。该属性感觉实用性不强。

（5）： app:layout_scrollFlags=”scroll|enterAlways|enterAlwaysCollapsed”

scroll 与 enterAlways 与 enterAlwaysCollapsed 结合所产的效果图如下：

image

xml中Toolbar 的布局和（4）还是一样的，不过app:layout_scrollFlags属性，由原来的exitUntilCollapsed改为enterAlwaysCollapsed。

PS：还是从产生的效果角度去分析的：默认toolbar 显示的正常高度值我们设置成的100dp，当我们上滑的时候，toolbar直到完全隐藏时，下面的滚动布局才开始发生滚动；下滑时toolbar会优先滑出设置的最小高度值，然后当滚动布局下滑到顶部时，后面的toolbar部分，才开始完全显示（滑）出来。该属性感觉实用性也不强。

与CollapsingToolbarLayout结合的使用

（1）：先看下效果图：

image

再把代码贴上：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="180dp"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.NoActionBar.AppBarOverlay">

         <!--本次重点关注这里 CollapsingToolbarLayout -->
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll">

            <ImageView
                android:id="@+id/image"
                android:layout_width="match_parent"
                android:layout_height="180dp"
                android:scaleType="centerCrop"
                android:src="@drawable/ic_image"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:navigationIcon="@drawable/ic_back_white_24dp"
                app:popupTheme="@style/AppTheme.NoActionBar.PopupOverlay"
                app:title="标题"
                app:titleTextColor="@color/white">

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

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/text_margin"
            android:text="@string/large_text" />

    </android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>

这里我们重点关注 CollapsingToolbarLayout控件以下的几个属性：

app:contentScrim=”?attr/colorPrimary” 当上滑到toolbar 高度期间直到达到toolbar高度时，给toolbar设置的背景色，以及过渡颜色。当然，这里不仅仅可以设置颜色，也可以设置图片。 如果不设置该属性，标题栏会过渡为以之前的图片为背景。
app:layout_scrollFlags=”scroll” 和介绍 AppBarLayout 时，给Toolbar 设置和配置一样。其效果上图已做展示。
app:expandedTitleGravity=”center_horizontal” 从单词意思可以看出，这是展示后，title的位置。
app:expandedTitleMarginStart=”50dp” 从单词意思可以看出，这是展示后，title 距离开始位置的边距。
app:collapsedTitleGravity=”center” 从单词意思可以看出，这是收缩后，title 位置（测试发现，不好用）。
app:expandedTitleTextAppearance=”@style/transparentText” 展开后标题文字的样式
app:collapsedTitleTextAppearance=”@style/ToolbarTitle” 折叠后标题文字的样式

给 ImageView 控件设置的 app:layout_collapseMode=”parallax” 属性说明：
app:layout_collapseMode有两个参数：

parallax 子View可以选择在当前的布局当时是否以“视差”的方式来跟随滚动。（PS:其实就是让这个View的滚动的速度比其他正常滚动的View速度稍微慢一点）。
pin 测试发现，按照以上的布局，如果你使用pin参数，看效果，和使用parallax 参数，好像没有什么区别。目前个人认为的区别后面在做介绍。

注意事项:

1.上图中背景图，也就是xml中的 ImageView 控件，设置的图片大小，在保证显示正常的情况下，越小越好。太大的话，在展示的时候，会有卡顿的感觉。

下面我们来看一个效果图：

image

如果你发现展开和折叠后的标题字体太小或太大，你可通过如下两个属性设置：

 app:expandedTitleTextAppearance="@style/transparentText" 展开后标题文字的样式  
 app:collapsedTitleTextAppearance="@style/ToolbarTitle" 折叠后标题文字的样式

transparentText （透明）样式：

<style name="transparentText" parent="TextAppearance.AppCompat.Small">
        <item name="android:textColor">#00000000</item>
         <item name="android:textSize">15sp</item>
    </style>

ToolbarTitle样式：

<style name="ToolbarTitle" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title">
       <item name="android:textColor">#f0f0</item>
        <item name="android:textSize">15sp</item>
    </style>

细心的你，会发现我们的状态栏，现在是完全透明的状态。那我们怎么实现呢？那你会说了，那还不简单！
使用下面的代码：

 //透明状态栏效果
        if (Build.VERSION.SDK_INT >= 21) {
            View decorView = getWindow().getDecorView();
            int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
            decorView.setSystemUiVisibility(option);
            getWindow().setStatusBarColor(Color.TRANSPARENT);

        }

不就能实现吗！或者使用第三方透明状态栏设置库。很简单的就能实现了。如果你真正具体操作了，运行代码了。你会发现，是实现不了的。不过你把上述代码中 ImageView 控件的 app:layout_collapseMode 的参数设置为 pin 。如下：
app:layout_collapseMode=”pin” 。此时你在试一下，就能实现上图的效果啦。现在也能说明，parallax 和 pin 的一个区别吧。

app:layout_scrollFlags=”scroll|enterAlways”

那么 app:layout_scrollFlags=”scroll|enterAlways” 效果怎样呢？下面看图说话：

image

PS：这里也不再多说了，原理和介绍 AppBarLayout 时，给Toolbar 设置和配置基本差不多。

app:layout_scrollFlags=”scroll|exitUntilCollapsed”

效果图：

image

app:layout_scrollFlags=”scroll|enterAlways|exitUntilCollapsed”

PS：这里不再贴出效果图啦，聪明的你，相信也能想象出其效果。(不过这样结合的配置，感觉不常用也不太实用。上面贴图的几种效果，还比较实用一些。)

文章写了好几天，才算写的个差不多，如果对你有些帮助的话，给个赞和好评吧！

Meterial Design常见控件的使用（一）：Toolba

Toolbar 的基本用法

常用的方法

全面但包括不太常用的用法

结合menu配置文件的用法。

与AppBarLayout结合的使用

（1）： app:layout_scrollFlags=”scroll”

（2）：app:layout_scrollFlags=”scroll|enterAlways”

（3）： app:layout_scrollFlags=”scroll|enterAlways|snap”

（4）： app:layout_scrollFlags=”scroll|enterAlways|exitUntilCollapsed”

（5）： app:layout_scrollFlags=”scroll|enterAlways|enterAlwaysCollapsed”

与CollapsingToolbarLayout结合的使用

app:layout_scrollFlags=”scroll|enterAlways”

app:layout_scrollFlags=”scroll|exitUntilCollapsed”

app:layout_scrollFlags=”scroll|enterAlways|exitUntilCollapsed”

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读