android 高级之旅 （七） CoordinatorLayout 的基本用法

先看效果图

实现这个效果主要是看布局文件：如下代码

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="org.sang.a8_3coordinatorlayout.MainActivity">

    <!--
    CoordinatorLayout内部整体上分为两大块：
    1.AppBarLayout
    2.一个滚动控件（目前支持NestedScrollView/RecyclerView）
    -->
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar_layout"
        android:layout_width="match_parent"
        android:layout_height="180dp">

        <!--
        CollapsingToolbarLayout 是一个可折叠控件
        app:layout_scrollFlags 表示头布局的折叠策略，一共有五种取值：
        1.scroll 表示当底部滑动控件开始滑动时，头部跟着滑动
        2.enterAlways 表示一旦底部滑动控件向下滑动时，就露头
        3.enterAlwaysCollapsed 当底部滑动控件见顶的时候，头部向下滑动
        4.exitUntilCollapsed表示头部折叠到最小高度时就不再折叠（最小高度指Toolbar的高度）
        5.snap 当手指松开后，头部会就近折叠


        app:contentScrim="@color/colorPrimary" 设置ToolBar的颜色
        app:title="test2" 设置头布局的title
        -->
        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="180dp"
            app:collapsedTitleGravity="right"
            app:contentScrim="@color/colorPrimary"
            app:expandedTitleGravity="right|bottom"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed|exitUntilCollapsed|snap"
            app:paddingEnd="24dp"
            app:title="test2">

            <!--
            app:layout_collapseMode="parallax" 表示ImageView的折叠策略
            app:layout_collapseParallaxMultiplier="" 表示视觉乘数，取值0～1
            0表示ImageView头部折叠
            1表示ImageView底部折叠
            越靠近0，头部折叠越快

            app:layout_collapseMode="pin" 表示折叠完成后，最终停靠在头部的控件
            -->
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/p9"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7"/>

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

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/text"/>
    </android.support.v4.widget.NestedScrollView>
    <!--
    app:layout_anchor="" 表示FAB停靠时的参考控件
    app:layout_anchorGravity="right|bottom" 表示FAB在参考控件的哪个位置
    -->
    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@android:drawable/ic_input_add"
        app:fabSize="normal"
        app:layout_anchorGravity="right|bottom"
        app:layout_anchor="@id/appbar_layout"/>
</android.support.design.widget.CoordinatorLayout>

代码中 注释已经写得比较清楚了，主要包括 CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout、Toolbar、NestedScrollView、FloatingActionButton等几个控件的嵌套和属性的设置。

记得在values的styles.xml文件中

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

MainActivity 中就两行代码搞定：

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

    }
}

ok 到此。。