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 到此。。