使用MD中控件实现APP页面折叠

APP页面折叠效果，我们先看下效果图，再来分析：

效果图中的操作是比较简单，但是实现起来确实异常的麻烦，我画了一个布局（xml）分析图，我们一起看看：

我们的功能主要是通过MD(Materail Design)实现的，具体的请参考：

http://baike.baidu.com/link?url=KmdUsXOpsnsAiQWeLW--LMF5E9KNWuWj3Gne7XfhjzEL2Eg_JEIbF90WROQ6QozzEI6MynjkGHKAnX2o01sJ-DW00WOJu5C_Y9xjxIt1ZtC 

http://www.cnblogs.com/mercuryli/p/5614904.html

http://www.uisdc.com/comprehensive-material-design-note  进行了解。

了解了MD后，我们分析下效果图APP的折叠效果的实现，其主要的还是在xml布局中实现的，结合我们所花的图和xml 文件， 我们来分析下布局：

<?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:orientation="vertical">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbarlayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/colltoolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:minHeight="48dp"
            app:collapsedTitleTextAppearance="@style/TextAppearance.AppCompat.Title"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="160dp"
                android:layout_marginTop="48dp"
                app:layout_collapseMode="parallax">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <ImageView
                        android:id="@+id/iv_background"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:scaleType="centerCrop" />

                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="#44000000"
                        android:scaleType="fitXY" />

                    <jh.zyqj.zz.jianghu.view.CircleImageView
                        android:id="@+id/civ_head"
                        android:layout_width="70dp"
                        android:layout_height="70dp"
                        android:layout_alignParentTop="true"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="15dp"
                        android:src="@drawable/default_head" />

                    <TextView
                        android:id="@+id/tv_factory_name"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/civ_head"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="6dp"
                        android:text="@string/default_text"
                        android:textColor="@color/white"
                        android:textSize="18dp" />
                </RelativeLayout>

                <RelativeLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom"
                    android:layout_marginBottom="3dp">

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentLeft="true"
                        android:layout_centerVertical="true"
                        android:layout_gravity="center"
                        android:layout_marginLeft="15dp"
                        android:orientation="vertical">

                        <LinearLayout
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:orientation="horizontal">

                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:text="服务态度:"
                                android:textColor="@color/white"
                                android:textSize="12dp" />

                            <TextView
                                android:id="@+id/tv_service_attitude"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_marginLeft="5dp"
                                android:text="0.00:"
                                android:textColor="@color/color_bg_selected"
                                android:textSize="12dp" />

                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_marginLeft="5dp"
                                android:text="分"
                                android:textColor="@color/white"
                                android:textSize="12dp" />
                        </LinearLayout>


                        <LinearLayout
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="2dp"
                            android:gravity="center"
                            android:orientation="horizontal">

                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:text="工作速度:"
                                android:textColor="@color/white"
                                android:textSize="12dp" />

                            <TextView
                                android:id="@+id/tv_work_speed"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_marginLeft="5dp"
                                android:text="0.00:"
                                android:textColor="@color/color_bg_selected"
                                android:textSize="12dp" />

                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_marginLeft="5dp"
                                android:text="分"
                                android:textColor="@color/white"
                                android:textSize="12dp" />
                        </LinearLayout>


                        <LinearLayout
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="2dp"
                            android:gravity="center"
                            android:orientation="horizontal">

                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:text="完成质量:"
                                android:textColor="@color/white"
                                android:textSize="12dp" />

                            <TextView
                                android:id="@+id/tv_quality"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_marginLeft="5dp"
                                android:text="0.00:"
                                android:textColor="@color/color_bg_selected"
                                android:textSize="12dp" />

                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_marginLeft="5dp"
                                android:text="分"
                                android:textColor="@color/white"
                                android:textSize="12dp" />
                        </LinearLayout>
                    </LinearLayout>
                </RelativeLayout>

                <RelativeLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom"
                    android:layout_marginBottom="10dp">

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentRight="true"
                        android:layout_centerVertical="true"
                        android:layout_gravity="center"

                        android:layout_marginRight="15dp"
                        android:orientation="horizontal">

                        <RelativeLayout
                            android:id="@+id/rl_collect"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:background="@drawable/shape_factory_detail"
                            android:orientation="horizontal">

                            <ImageView
                                android:id="@+id/iv_heart"
                                android:layout_width="14dp"
                                android:layout_height="14dp"
                                android:layout_centerVertical="true"
                                android:layout_marginLeft="3dp" />

                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_centerVertical="true"
                                android:layout_toRightOf="@id/iv_heart"
                                android:text="收藏"
                                android:textColor="@color/white"
                                android:textSize="13sp" />
                        </RelativeLayout>

                        <RelativeLayout
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:layout_marginLeft="7dp"
                            android:background="@drawable/shape_factory_detail"
                            android:orientation="horizontal">

                            <TextView
                                android:id="@+id/tv_employ_factory"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_centerVertical="true"
                                android:gravity="center"
                                android:text="雇佣他"
                                android:textColor="@color/white"
                                android:textSize="13sp" />
                        </RelativeLayout>
                    </LinearLayout>
                </RelativeLayout>
            </FrameLayout>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolBar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/titlebar_bg"
                android:minHeight="48dp"
                android:orientation="vertical"
                app:contentInsetStart="0dp"
                app:layout_collapseMode="pin">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"
                        android:layout_gravity="center"
                        android:text="工厂详情"
                        android:textColor="@color/white"
                        android:textSize="18sp" />

                    <ImageView
                        android:id="@+id/ib_back"
                        android:layout_width="45dp"
                        android:layout_height="48dp"
                        android:layout_marginLeft="5dp"
                        android:padding="15dp"
                        android:scaleType="centerInside"
                        android:src="@drawable/back" />
                </RelativeLayout>

            </android.support.v7.widget.Toolbar>


        </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>



    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <RadioGroup
            android:id="@+id/rg_factory"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:orientation="horizontal">

            <RadioButton
                android:id="@+id/rb_store_home"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:button="@null"
                android:drawableBottom="@drawable/sl_line_white_red"
                android:drawablePadding="5dp"
                android:drawableTop="@drawable/case_home_selector"
                android:gravity="center"
                android:text="店铺首页"
                android:textColor="@color/sl_col_orange_black"
                android:textSize="13dp" />

            <RadioButton
                android:id="@+id/rb_all_goods"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:button="@null"
                android:drawableBottom="@drawable/sl_line_white_red"
                android:drawablePadding="5dp"
                android:drawableTop="@drawable/case_all_product_selector"
                android:gravity="center"
                android:text="所有商品"
                android:textColor="@color/sl_col_orange_black"
                android:textSize="13dp" />

            <RadioButton
                android:id="@+id/rb_service"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:button="@null"
                android:drawableBottom="@drawable/sl_line_white_red"
                android:drawablePadding="5dp"
                android:drawableTop="@drawable/case_made_service_selector"
                android:gravity="center"
                android:text="定制服务"
                android:textColor="@color/sl_col_orange_black"
                android:textSize="13dp" />

            <RadioButton
                android:id="@+id/rb_nice_case"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:button="@null"
                android:drawableBottom="@drawable/sl_line_white_red"
                android:drawablePadding="5dp"
                android:drawableTop="@drawable/case_quality_selector"
                android:gravity="center"
                android:text="优质案例"
                android:textColor="@color/sl_col_orange_black"
                android:textSize="13dp" />

        </RadioGroup>

        <FrameLayout
            android:id="@+id/layout_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/tv_f3"></FrameLayout>
    </LinearLayout>

</android.support.design.widget.CoordinatorLayout>

1.CoordinatorLayout  :顾名思义，这个控件的目的就是协调它里面View的行为,实现了多种Material Design中提到的滚动效果。

参考：https://www.aswifter.com/2015/11/12/mastering-coordinator/?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io

  http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0717/3196.html

2.AppBarLayout是一种支持响应滚动手势的app bar布局（比如工具栏滚出或滚入屏幕）

3.CollapsingToolbarLayout则是专门用来实现子布局内不同元素响应滚动细节的布局。

与AppBarLayout组合的滚动布局（Recyclerview、NestedScrollView等）需要设置app:layout_behavior="@string/appbar_scrolling_view_behavior"（上面代码中NestedScrollView控件所设置的）。没有设置的话，AppBarLayout将不会响应滚动布局的滚动事件。

CollapsingToolbarLayout和ScrollView一起使用会有滑动bug，注意要使用NestedScrollView来替代ScrollView。

AppBarLayout的子布局有5种滚动标识(就是上面代码CollapsingToolbarLayout中配置的app:layout_scrollFlags属性)：

   1 .scroll:将此布局和滚动时间关联。这个标识要设置在其他标识之前，没有这个标识则布局不会滚动且其他标识设置无效。
   2. enterAlways:任何向下滚动操作都会使此布局可见。这个标识通常被称为“快速返回”模式。
   3.enterAlwaysCollapsed：假设你定义了一个最小高度（minHeight）同时enterAlways也定义了，那么view将在到达这个最小高度的时候开始显示，并且从这个时候开始慢慢展开，当滚动到顶部的时候展开完。
   4.exitUntilCollapsed：当你定义了一个minHeight，此布局将在滚动到达这个最小高度的时候折叠。
   5.snap:当一个滚动事件结束，如果视图是部分可见的，那么它将被滚动到收缩或展开。例如，如果视图只有底部25%显示，它将折叠。相反，如果它的底部75%可见，那么它将完全展开。

CollapsingToolbarLayout可以通过app:contentScrim设置折叠时工具栏布局的颜色，通过app:statusBarScrim设置折叠时状态栏的颜色。默认contentScrim是colorPrimary的色值，statusBarScrim是colorPrimaryDark的色值。这个后面会用到。

CollapsingToolbarLayout的子布局有3种折叠模式（Toolbar中设置的app:layout_collapseMode）

    1.off：这个是默认属性，布局将正常显示，没有折叠的行为。
    2.pin：CollapsingToolbarLayout折叠后，此布局将固定在顶部。
    3. parallax：CollapsingToolbarLayout折叠时，此布局也会有视差折叠效果。

当CollapsingToolbarLayout的子布局设置了parallax模式时，我们还可以通过app:layout_collapseParallaxMultiplier设置视差滚动因子，值为：0~1。

FloatingActionButton这个控件通过app:layout_anchor这个设置锚定在了AppBarLayout下方。FloatingActionButton源码中有一个Behavior方法，当AppBarLayout收缩时，FloatingActionButton就会跟着做出相应变化。

参考：http://www.jianshu.com/p/06c0ae8d9a96

其实MD 中的控件，有好多都是彼此结合这是用的，谁也离不开谁，我们要了解一个控件的用法，势必也要了解其他的用法，关于MD的用法实在有很多，想了解的可以仔细研究下。最后看一下朋友的文章，也是对这个布局的理解：http://blog.csdn.net/sinat_26710701/article/details/69397374