前言
想必大家对ToolBar以及Material Design有所了解、也一定见过其炫酷的效果。今天咱们就来总结一下集中常见的用法，以便日后工作中使用。
先上几张效果图来提提劲。
通用的ToolBar.png
可以划出屏幕的ToolBar.gif
可以折叠的ToolBar.gif
自定义样式的ToolBar
ToolBar默认的样式是这个样子的，
ToolBar默认样式.png
然而我们常用的是像最上面那张图的样子。也就是左边是返回键、中间是title、右边是文字或者icon。那么我们改怎样用ToolBar实现我们想要的样子呢，很简单直接看下面代码即可：
<android.support.v7.widget.Toolbar
android:id="@+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:minHeight="?attr/actionBarSize">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="返回"
android:textColor="@android:color/white"
android:textSize="15sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="标题"
android:textColor="@android:color/white"
android:textSize="15sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginRight="20dp"
android:text="右侧按钮"
android:textColor="@android:color/white"
android:textSize="15sp" />
</android.support.v7.widget.Toolbar>
Ok,就是这么简单。就是把ToolBar当作一个容器来用，实际上它就是一个容易，因为Toolbar是继承自ViewGroup的。这里我们需要关注一个属性， android:layout_gravity="right"，该参数可以控制ToolBar子View的位置。
可以划出屏幕的ToolBar
可以划出屏幕的ToolBar.gif
要达到这种效果，我们就要用到Material Design的东西了，这里我们需要用到android.support.design.widget.CoordinatorLayout和android.support.design.widget.AppBarLayout以及ToolBar。
如果在使用这些控件时报错，那么多半是因为没有导包。我们需要在build.gradle里面写compile 'com.android.support:design:25.3.1'。
接下来就开始写代码了，代码很简单 我们只需要用xml即可实现效果。
<android.support.design.widget.CoordinatorLayout 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.chx.toolbardemo.Test2Activity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="@+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="标题"
android:textColor="@android:color/white"
android:textSize="15sp" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
使用总结：
1.CoordinatorLayout 作为最外层容器，其内部需要一个AppBarLayout和一个可以滚动的控件，这里我用的是RecyclerView
2.RecyclerView设置app:layout_behavior="@string/appbar_scrolling_view_behavior"（必须）
3.AppBarLayout里面放入ToolBar,并且给ToolBar设置 app:layout_scrollFlags="scroll|enterAlways"。
这样我们就实现了想要的效果。
这里只是总结一下可划出屏幕的ToolBar是怎样实现的。至于为什么这样能够实现，以及其他参数的效果是怎样的，那就需要大家主动去探索了，写个demo试一试。
可折叠的ToolBar
可以折叠的ToolBar.gif
这种效果也是比较炫酷，比较常见的。当然我们可以用自定义view的方式来实现。不过我们用Material Design只需要在布局文件中配置就可以实现。这里我们需要用到android.support.design.widget.CoordinatorLayout、android.support.design.widget.AppBarLayout、android.support.design.widget.CollapsingToolbarLayout以及ToolBar
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.chx.toolbardemo.Test3Activity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="parallax">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@mipmap/testimage" />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="@+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="返回"
android:textColor="@android:color/white"
android:textSize="15sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginRight="20dp"
android:text="右侧按钮"
android:textColor="@android:color/white"
android:textSize="15sp" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
使用总结
1.CoordinatorLayout 作为最外层容器，子view还是AppBarLayout与一个可滚动的控件，这里用RecyclerView
2.需要在AppBarLayout中套一层CollapsingToolbarLayout，然后再在其中放一个ToolBar与RelativeLayout。ToolBar不用解释，RelativeLayout则是用于背景布局，对应上图的背景图片。
3.Recycle'rview 配置参数app:layout_behavior="@string/appbar_scrolling_view_behavior"
4.CollapsingToolbarLayout配置参数app:layout_scrollFlags="scroll|exitUntilCollapsed"
网友评论