Android 使用CoordinatorLayout实现滚动标题栏效果的实例

概述在MaterialDesign里，CoordinatorLayout通常用来作为顶层视图，来协调处理各个子View之间的动作，从而实现各种动画效果，如Snackbar与FloatingActionButton的配合显示效果，就是以CoordinatorLayout作为根布局来实现

在Material Design里，CoordinatorLayout通常用来作为顶层视图，来协调处理各个子VIEw之间的动作，从而实现各种动画效果，如Snackbar与floatingActionbutton的配合显示效果，就是以CoordinatorLayout作为根布局来实现的

CoordinatorLayout提供Behaviors接口，子VIEw通过实现Behaviors接口来协调和其它VIEw之间的显示效果，可以这么理解：

CoordinatorLayout让其子VIEw之间互相知道彼此的存在，任意一个子VIEw的状态变化会通过Behaviors通知其它子VIEw，CoordinatorLayout就像一个桥梁，连接不同的VIEw，并使用Behavior处理各个子VIEw之间的通信

效果一：

想实现这样的效果挺简单的，主要是在xml布局文件中进行设置

<?xml version="1.0" enCoding="utf-8"?><androID.support.design.Widget.CoordinatorLayout  xmlns:androID="http://schemas.androID.com/apk/res/androID"  androID:layout_wIDth="match_parent"  androID:layout_height="match_parent"  xmlns:app="http://schemas.androID.com/apk/res-auto">  <!--包裹头部VIEw实现滑动效果-->  <androID.support.design.Widget.AppbarLayout    androID:layout_wIDth="match_parent"    androID:layout_height="wrap_content"    androID:theme="@style/themeOverlay.AppCompat">    <!--标题栏-->    <androID.support.v7.Widget.Toolbar      androID:ID="@+ID/tb_toolbar"      androID:layout_wIDth="match_parent"      androID:layout_height="wrap_content"      app:navigationIcon="@androID:drawable/ic_dialog_email"      app:title="Title"      app:layout_scrollFlags="scroll" />    <!--Tab导航栏-->    <androID.support.design.Widget.TabLayout      androID:ID="@+ID/tab_layout"      androID:layout_wIDth="match_parent"      androID:layout_height="wrap_content"      app:tabMode="fixed"      app:layout_scrollFlags="scroll|enteralways"/>  </androID.support.design.Widget.AppbarLayout>  <androID.support.v4.vIEw.VIEwPager    androID:ID="@+ID/vp_tab_pager"    androID:layout_wIDth="match_parent"    androID:layout_height="match_parent"    app:layout_behavior="@string/appbar_scrolling_vIEw_behavior"/></androID.support.design.Widget.CoordinatorLayout>

首先给被AppbarLayout包裹的VIEw添加app:layout_scrollFlags属性，并设置相应的值

• scroll：让该VIEw可以滚动出屏幕

• enteralways：不需要滚动到顶部，只要有向上滚动的事件就显示该VIEw

• enteralwaysCollapsed：定义该VIEw何时进入，如果你定义了一个最小高度minHeight，同时enteralways也定义了，那么该VIEw将会在到达这个最小高度的时候开始慢慢显示，直到滚动组件滚动到顶部时再完全展开

• exitUntilCollapsed：定义该VIEw何时退出，如果你定义了一个最小高度minHeight，那么这个VIEw将在滚动到达这个最小高度时消失

如果不设置layout_scrollFlags属性，那么该VIEw就会固定在屏幕上

enteralwaysCollapsed和exitUntilCollapsed属性主要是在搭配CollapsingToolbarLayout时使用的

注意：布局的时候，AppbarLayout里面滚动的VIEw要放在固定的VIEw上面

然后在CoordinatorLayout布局里放一个可以滚动的VIEw（不支持ListVIEw），这里使用VIEwPager里放置一个RecylerVIEw，为该VIEwPager设置app:layout_behavior属性，这里可直接使用AndroID自带的值

app:layout_behavior=”@string/appbar_scrolling_vIEw_behavior”

设置该值的作用相当于告诉CoordinatorLayout，此VIEw是一个滚动控件，如果该VIEw滚动了，那么设置了layout_scrollFlags属性的控件就可以响应滚动事件了

想实现效果一，总结

使用CoordinatorLayout作为根布局

使用AppbarLayout包裹头部VIEw，并给需要滚动的VIEw设置app:layout_scrollFlags属性

给滑动组件设置app:layout_behavior属性

效果二：

想实现这个效果，需要使用到CollapsingToolbarLayout布局，我们在效果一的基础上更改布局代码

<?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="300dp"    androID:fitsSystemwindows="true"    androID:theme="@style/themeOverlay.AppCompat.Dark.Actionbar">    <androID.support.design.Widget.CollapsingToolbarLayout      androID:ID="@+ID/collapsing_toolbar"      androID:layout_wIDth="match_parent"      androID:layout_height="match_parent"      app:contentScrim="?attr/colorPrimary"      app:expandedTitlemarginEnd="88dp"      app:expandedTitlemarginStart="66dp"      app:layout_scrollFlags="scroll|exitUntilCollapsed">      <!--拉开后显示的背景图片-->      <ImageVIEw        androID:layout_wIDth="match_parent"        androID:layout_height="match_parent"        androID:scaleType="centerCrop"        androID:src="@drawable/bg_image"        app:layout_collapseMode="pin"/>      <!--标题栏-->      <androID.support.v7.Widget.Toolbar        androID:ID="@+ID/tb_toolbar"        androID:layout_wIDth="match_parent"        androID:layout_height="?attr/actionbarSize"        app:layout_collapseMode="pin"        app:navigationIcon="@androID:drawable/ic_dialog_email"        app:title="Title"/>    </androID.support.design.Widget.CollapsingToolbarLayout>  </androID.support.design.Widget.AppbarLayout>  <androID.support.v7.Widget.RecyclerVIEw    androID:ID="@+ID/rv_data"    androID:layout_wIDth="match_parent"    androID:layout_height="match_parent"    app:layout_behavior="@string/appbar_scrolling_vIEw_behavior"/></androID.support.design.Widget.CoordinatorLayout>

一些属性的作用

• Title：设置Toolbar的标题，注意：如果在CollapsingToolbarLayout中指定了Title属性，那么Toolbar中的Title属性将会变得无效

• expandedTitlemarginStart：设置下拉伸缩完成后，Toolbar标题文字左边的margin距离

• expandedTitlemarginEnd：设置下拉伸缩完成后，Toolbar标题文字右边的margin距离

• contentScrim：设置Toolbar折叠到顶部后的背景

• layout_collapseMode：折叠效果，有两个值，pin代表从底部拉出，parallax代表从中间展开

看文字可能不太理解collapseMode的显示效果，两个值的具体显示效果如下：

pin：

parallax：

想实现效果二，总结

首先我们设置一个固定的高度给AppbarLayout

然后给AppbarLayout的子VIEw包裹了一层CollapsingToolbarLayout，并设置CollapsingToolbarLayout的滚动属性为scroll|exitUntilCollapsed

最后再为CollapsingToolbarLayout里的子VIEw设置layout_collapseMode属性，指定其展示效果

以上这篇AndroID 使用CoordinatorLayout实现滚动标题栏效果的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的Android 使用CoordinatorLayout实现滚动标题栏效果的实例全部内容，希望文章能够帮你解决Android 使用CoordinatorLayout实现滚动标题栏效果的实例所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。