Android多个toolbar,Android ToolBar几种常见的用法

前言

想必大家对ToolBar以及Material Design有所了解、也一定见过其炫酷的效果。今天咱们就来总结一下集中常见的用法，以便日后工作中使用。

先上几张效果图来提提劲。

通用的ToolBar.png

可以划出屏幕的ToolBar.gif

可以折叠的ToolBar.gif

自定义样式的ToolBar

ToolBar默认的样式是这个样子的，

ToolBar默认样式.png

然而我们常用的是像最上面那张图的样子。也就是左边是返回键、中间是title、右边是文字或者icon。那么我们改怎样用ToolBar实现我们想要的样子呢，很简单直接看下面代码即可：

android:id="@+id/tool_bar"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="@color/colorPrimary"

android:minHeight="?attr/actionBarSize">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="返回"

android:textColor="@android:color/white"

android:textSize="15sp" />

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: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" />

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即可实现效果。

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:layout_width="match_parent"

android:layout_height="wrap_content"

android:fitsSystemWindows="true"

android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

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

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:id="@+id/recyclerview"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_behavior="@string/appbar_scrolling_view_behavior" />

使用总结：

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

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:layout_width="match_parent"

android:layout_height="200dp"

android:fitsSystemWindows="true"

android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:fitsSystemWindows="true"

app:contentScrim="?attr/colorPrimary"

app:layout_scrollFlags="scroll|exitUntilCollapsed">

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_collapseMode="parallax">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:scaleType="centerCrop"

android:src="@mipmap/testimage" />

android:id="@+id/tool_bar"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

android:minHeight="?attr/actionBarSize"

app:layout_collapseMode="pin">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="返回"

android:textColor="@android:color/white"

android:textSize="15sp" />

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:id="@+id/recyclerview"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_behavior="@string/appbar_scrolling_view_behavior" />

使用总结

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"