Android使用CollapsingToolbarLayout实现折叠效果

在各种应用中，可能会遇到这样的折叠效果：Toolbar是透明的，有一个背景图片以及大标题，随着页面向上滑动，其标题逐渐缩放到Toolbar上，而背景图片则在滑动到一定程度后变成了Toolbar的颜色。实现这样的效果可以使用Google推出的Design Library库中的CollapsingToolbarLayout控件，它是一个增强型的FrameLayout。

效果图：

使用控件之前，首先添加依赖：

compile 'com.android.support:cardview-v7:24.0.0'  
compile 'com.android.support:design:24.0.0'
compile 'com.android.support:appcompat-v7:24.0.0'

布局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="@+id/activity_main2"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.hongbo.customview_demo.Main2Activity">

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

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:fitsSystemWindows="true">

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar_layout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:collapsedTitleTextAppearance="@style/style_textsize1"
                app:expandedTitleTextAppearance="@style/style_textsize"
                app:contentScrim="#46a8ba"
                app:expandedTitleMarginEnd="10dp"
                app:expandedTitleMarginStart="10dp"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <ImageView
                    android:id="@+id/iv"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    app:layout_collapseMode="parallax"
                    app:layout_collapseParallaxMultiplier="0.5" />

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    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="match_parent"
                android:orientation="vertical">

                <include layout="@layout/card" />

                <include layout="@layout/card" />

                <include layout="@layout/card" />

                <include layout="@layout/card" />

                <include layout="@layout/card" />

                <include layout="@layout/card" />

                <include layout="@layout/card" />

                <include layout="@layout/card" />

            </LinearLayout>
        </android.support.v4.widget.NestedScrollView>
    </android.support.design.widget.CoordinatorLayout>
</RelativeLayout>

public class Main2Activity extends AppCompatActivity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main2);        CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar_layout);        ImageView iv = (ImageView) findViewById(R.id.iv);        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);        setSupportActionBar(toolbar);        toolbar.setNavigationIcon(R.mipmap.caidan);        collapsingToolbarLayout.setTitle("CollapsingToolbarLayout");        collapsingToolbarLayout.setCollapsedTitleTextColor(Color.WHITE);        collapsingToolbarLayout.setExpandedTitleColor(Color.WHITE);        iv.setImageResource(R.mipmap.bg);    }}

  <style name="style_textsize">        <item name="android:textSize">23sp</item>    </style>    <style name="style_textsize1">        <item name="android:textSize">18sp</item>    </style>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <android.support.v7.widget.CardView        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="100dp"        android:layout_margin="5dp"        app:cardElevation="5dp"        app:contentPaddingTop="2dp"        app:contentPaddingBottom="2dp">        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="你们好啊 地球人"            android:textSize="20sp"            android:layout_gravity="center"/>    </android.support.v7.widget.CardView></LinearLayout>

在CollapsingToolbarLayout中：使用了layout_scrollFlags，下面是关于它的属性值：
scroll - 设置滚动
enterAlways - 实现quick return效果, 当向下移动时，立即显示View（比如Toolbar)。
exitUntilCollapsed - 向上滚动时收缩View，但可以固定Toolbar一直在上面。
enterAlwaysCollapsed - 当你的View已经设置minHeight属性又使用此标志时，你的View只能以最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。
其他属性介绍：

contentScrim - 设置当完全CollapsingToolbarLayout折叠(收缩)后的背景颜色。

expandedTitleMarginStart - 设置扩张时候(还没有收缩时)title向左填充的距离。

title:当titleEnable设置为true的时候，在toolbar展开的时候，显示大标题，toolbar收缩时，显示为toolbar上面的小标题。

scrimAnimationDuration：该属性控制toolbar收缩时，颜色变化的动画持续时间。即颜色变为contentScrim所指定的颜色进行的动画所需要的时间。

expandedTitleGravity：指定toolbar展开时，title所在的位置。类似的还有expandedTitleMargin、collapsedTitleGravity这些属性。

collapsedTitleTextAppearance：指定toolbar收缩时，标题字体的样式，类似的还有expandedTitleText

在ImageView控件中使用到的属性：

layout_collapseMode (折叠模式) - 有两个值:

pin：设置为这个模式时，当CollapsingToolbarLayout完全收缩后，Toolbar还可以保留在屏幕上。

parallax：在内容滚动时，CollapsingToolbarLayout中的View（比如ImageView)也可以同时滚动，实现视差滚动效果，通常和layout_collapseParallaxMultiplier(设置视差因子)搭配使用。

layout_collapseParallaxMultiplier(视差因子) - 设置视差滚动因子，值为：0~1。

使用CollapsingToolbarLayout时必须把title设置到CollapsingToolbarLayout上，设置到Toolbar上不会显示。即：mCollapsingToolbarLayout.setTitle(" ");

改变title的字体颜色：

扩张时候的title颜色：mCollapsingToolbarLayout.setExpandedTitleColor();

收缩后在Toolbar上显示时的title的颜色：mCollapsingToolbarLayout.setCollapsedTitleTextColor();

注：CoordinatorLayout功能如此强大，它的神奇之处在于Behavior对象，CoordinatorLayout自己并不控制View，所有的控制权都在Behavior。前面写到了FloatingActionButton.Behavior，AppBarLayout.Behavior, AppBarLayout.ScrollingViewBehavior。 AppBarLayout中有两个Behavior，一个是拿来给它自己用的，另一个是拿来给它的兄弟结点用的。这些Behavior实现了复杂的控制功能。系统的Behavior毕竟有限，我们可以通过自定义的方式来实现自己的Behavior。

通过 CoordinatorLayout.Behavior(YourView.Behavior.class) 来定义自己的Behavior，并在layout 文件中设置 app:layout_behavior=”com.example.app.YourView$Behavior” 来达到效果。

自定义Behavior 需要重写两个方法：

 public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) 

 public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency)

public class RotateBehavior  extends CoordinatorLayout.Behavior<FloatingActionButton> {    private static final String TAG = RotateBehavior.class.getSimpleName();    public RotateBehavior() {    }    public RotateBehavior(Context context, AttributeSet attrs) {        super(context, attrs);    }    @Override    public boolean layoutDependsOn(CoordinatorLayout parent, FloatingActionButton child, View dependency) {        return dependency instanceof Snackbar.SnackbarLayout;    }    @Override    public boolean onDependentViewChanged(CoordinatorLayout parent, FloatingActionButton child, View dependency) {        float translationY = getFabTranslationYForSnackbar(parent, child);        float percentComplete = -translationY / dependency.getHeight();        child.setRotation(-90 * percentComplete);        child.setTranslationY(translationY);        return false;    }    private float getFabTranslationYForSnackbar(CoordinatorLayout parent,                                                FloatingActionButton fab) {        float minOffset = 0;        final List<View> dependencies = parent.getDependencies(fab);        for (int i = 0, z = dependencies.size(); i < z; i++) {            final View view = dependencies.get(i);            if (view instanceof Snackbar.SnackbarLayout && parent.doViewsOverlap(fab, view)) {                minOffset = Math.min(minOffset,                        ViewCompat.getTranslationY(view) - view.getHeight());            }        }        return minOffset;    }}

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/ic_done"
        app:layout_behavior="com.meizu.coordinatorlayoutdemo.RotateBehavior"/>
</android.support.design.widget.CoordinatorLayout>

参考：http://blog.csdn.net/xyz_lmn/article/details/48055919

http://blog.csdn.net/u010687392/article/details/46906657

http://blog.csdn.net/a553181867/article/details/52871424

秒客网

Android使用CollapsingToolbarLayout实现折叠效果

相关文章