Android Toolbar、AppBarLayout和CollapsingToolbarLayout类

Toolbar、AppBarLayout和CollapsingToolbarLayout是Android5.0引入，实现多样化的效果。
Toolbar是ActionBar的替代类，可以自由添加子控件。
AppBarLayout类似于LinearLayout，而CollapsingToolbarLayout实现了折叠的效果。

1、Toolbar类

(1) Toolbar控件
低版本可以使用v7兼容包，只需在gradle中加入依赖，而在布局文件中也要加入xmlns:app来引用配置。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
	<android.support.v7.widget.Toolbar
		android:id="@+id/toolbar"
		android:layout_width="match_parent"
		android:layout_height="45dp"
		app:navigationIcon="@drawable/nav_back"
		app:logo="@drawable/nav_user"
		app:title="标题"
		app:titleTextAppearance="@style/titleTextAppearance"
		app:subtitle="副标题"
		app:subtitleTextAppearance="@style/subtitleTextAppearance"
		android:background="#ffff7088">
		<!-- 在Toolbar中自定义控件 -->
		<TextView
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:layout_gravity="center"
			android:text="首页" />
	</android.support.v7.widget.Toolbar>
</LinearLayout>

使用Theme.AppCompat的主题，添加以下配置

<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>

(2) 主要方法

public void setNavigationIcon(@DrawableRes int resId) // 设置导航图标
public void setLogo(@DrawableRes int resId) // 设置logo图标
public void setTitle(@StringRes int resId) // 设置标题
public void setSubtitle(@StringRes int resId) // 设置副标题
public void setNavigationOnClickListener(OnClickListener listener) // 设置导航事件

(3) 设置菜单

// 加入菜单
mToolbar.inflateMenu(R.menu.title_menu);
// 添加菜单监听器
mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
	@Override
	public boolean onMenuItemClick(MenuItem item) {
		Toast.makeText(ToolbarActivity.this, item.getTitle(), Toast.LENGTH_LONG).show();
		return true;
	}
});
// 设置溢出按钮
mToolbar.setOverflowIcon(getResources().getDrawable(R.drawable.item_filter));
// 设置显示溢出按钮
mToolbar.showOverflowMenu();
mToolbar.dismissPopupMenus();

菜单文件

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/menu1"
        android:title="菜单1" />
    <item
        android:id="@+id/menu2"
        android:title="菜单2" />
    <item
        android:id="@+id/menu3"
        android:title="菜单3" />
    <item
        android:id="@+id/menu4"
        android:title="菜单4" />
</menu>

2、AppBarLayout类

AppBarLayout配合Toolbar可以实现不一样的滑动效果。
父容器必须是CoordinatorLayout，在NestedScrollView中设置app:layout_behavior
布局文件

<?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:orientation="vertical">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:minHeight="30dp"
            app:title="标题"
            android:background="#ffff7088"/>
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="250dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <TextView
                android:id="@+id/tv_text1"
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:text="text1"
                android:gravity="center"/>
            <TextView
                android:id="@+id/tv_text2"
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:text="text2"
                android:gravity="center"/>
            <TextView
                android:id="@+id/tv_text3"
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:text="text3"
                android:gravity="center"/>
            <TextView
                android:id="@+id/tv_text4"
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:text="text4"
                android:gravity="center"/>
            <TextView
                android:id="@+id/tv_text5"
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:text="text5"
                android:gravity="center"/>
            <TextView
                android:id="@+id/tv_text6"
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:text="text5"
                android:gravity="center"/>
		</LinearLayout>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

在Toolbar的app:layout_scrollFlags中设置不同参数，会有不同的滑动效果

(1) 不设置，Toolbar在顶部不动，滑动只发生在NestedScrollView内部。

(2) 设置为scroll，Toolbar随着手势一起滑动。

(3) 设置为enterAlways, enterAlways必须和scroll一起使用。在向上滑动时和scroll一样，但向下时，Toolbar先进入屏幕。

(4) 设置为enterAlwaysCollapsed，enterAlwaysCollapsed必须和enterAlways一起使用，且Toolbar设置minHeight。在向

(5) 设置为exitUntilCollapsed，exitUntilCollapsed必须和scroll一起使用，且Toolbar设置minHeight。Toolbar向上滚动最小高度，NestedScrollView才开始滚动。

(6) 设置为snap，snap必须和scroll一起使用。向上滑动一小段距离，Toolbar自动滑出屏幕。向下滑动一段距离，Toolbar自动滑进屏幕。

代码设置

AppBarLayout.LayoutParams params = (AppBarLayout.LayoutParams) mToolbar.getLayoutParams();
// SCROLL_FLAG_SCROLL
// SCROLL_FLAG_ENTER_ALWAYS
// SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED
// SCROLL_FLAG_EXIT_UNTIL_COLLAPSED
// SCROLL_FLAG_SNAP
params.setScrollFlags(AppBarLayout.LayoutParams.SCROLL_xx);

3、CollapsingToolbarLayout类

CollapsingToolbarLayout需要包含Toolbar使用，设置子控件属性

app:layout_collapseMode属性有两种模式
- pin：固定模式，在折叠的时候最后固定在顶端
- parallax：视差模式，在折叠的时候会有个视差折叠的效果。
app:layout_collapseParallaxMultiplier属性设置视差，0.0~1.0

布局文件

<?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:orientation="vertical">
        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="168dp"
            android:minHeight="60dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/switcher4"
                android:scaleType="fitXY"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.1"/>
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="60dp"
                app:title="标题"
                app:navigationIcon="@drawable/nav_back"
                app:layout_collapseMode="pin"/>
        </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">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:text="text1"
                android:gravity="center"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:text="text2"
                android:gravity="center"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:text="text3"
                android:gravity="center"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:text="text4"
                android:gravity="center"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:text="text5"
                android:gravity="center"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:text="text6"
                android:gravity="center"/>
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

CollapsingToolbarLayout设置了layout_scrollFlags属性，Toolbar设置固定模式，在滑动时保持最小高度放置Toolbar，而ImageView显示了折叠效果。

CollapsingToolbarLayout其他属性

app:contentScrim : 指定布局内部未展开时的背景颜色。
app:collapsedTitleTextAppearance : 指定未展开时的标题文字字体。
app:collapsedTitleTextColor : 指定未展开时的标题文字颜色。
app:collapsedTitleGravity : 指定未展开时的标题文字对齐方式。
app:expandedTitleTextAppearance : 指定展开后的标题文字字体。
app:expandedTitleTextColor : 指定展开后的标题文字颜色。
app:expandedTitleGravity : 指定展开后的标题文字对齐方式。
app:expandedTitleMargin : 指定展开后的标题四周间距。

重新设置属性

<android.support.design.widget.CollapsingToolbarLayout
	android:layout_width="match_parent"
	android:layout_height="168dp"
	android:minHeight="60dp"
	app:layout_scrollFlags="scroll|exitUntilCollapsed"
	app:contentScrim="#ffff7088"
	app:collapsedTitleGravity="left"
	app:collapsedTitleTextAppearance="@style/subtitleTextAppearance"
	app:expandedTitleGravity="center"
	app:expandedTitleTextAppearance="@style/titleTextAppearance">
	<ImageView
		android:layout_width="match_parent"
		android:layout_height="match_parent"
		android:src="@drawable/switcher4"
		android:scaleType="fitXY"
		app:layout_collapseMode="parallax"
		app:layout_collapseParallaxMultiplier="0.1"/>
	<android.support.v7.widget.Toolbar
		android:id="@+id/toolbar"
		android:layout_width="match_parent"
		android:layout_height="60dp"
		app:title="标题"
		app:navigationIcon="@drawable/nav_back"
		app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>

参考资料：https://blog.csdn.net/jungle_pig/article/details/52785781
参考资料：https://blog.csdn.net/litengit/article/details/52948574
参考资料：https://blog.csdn.net/aqi00/article/details/56834285

Android Toolbar、AppBarLayout和CollapsingToolbarLayout类

Android Toolbar、AppBarLayout和CollapsingToolbarLayout类

猜你喜欢