学习Android CoordinatorLayout（一）

在支付宝，知乎，网易音乐，简书等一些优秀的APP当拉动页面的时候actionbar（就是头部的那一部分）都能实现从透明变到不透明，而且有的还能实现悬浮的效果，我感觉这些效果都是利用CoordinatorLayout这个新的布局来实现的（如果有别的方法请留言，大家互相学习）。
咱们先实现一个简单的效果就是悬浮某一块：

（一）用过美团，大众点评的用户都知道在付款页面有一个悬浮的效果

[就是这种形式的悬浮]
(http://img.blog.csdn.net/20140103090134593?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGlhYW5taW5n/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
这个效果以前有人用监听scrollview也能实现但是现在有了一种更简单的方法，下面直接上代码：

<?xml version="1.0" encoding="utf-8"?><LinearLayout 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.CoordinatorLayout        android:layout_width="match_parent"        android:layout_height="match_parent">        <android.support.design.widget.AppBarLayout            android:layout_width="match_parent"            android:layout_height="300px">            <ImageView                android:layout_width="match_parent"                android:layout_height="150px"                android:src="@mipmap/ic_launcher"                app:layout_scrollFlags="scroll" />            <TextView                android:layout_width="match_parent"                android:layout_height="100px"                android:gravity="center"                android:text="悬浮部分"                android:textColor="#ffffff"                android:textSize="18sp"                app:layout_scrollFlags="enterAlways" />        </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="测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n" />        </android.support.v4.widget.NestedScrollView>    </android.support.design.widget.CoordinatorLayout></LinearLayout>

Activity里面不需要做任何的东西，只要setContentView这个布局就可以就是这么简单就实现了悬浮的效果这里面悬浮的部分是textview的那一部分。下面简单说一下里面用到的参数:
其实最重要的就是app:layout_scrollFlags，这个有五个值分别是:
scroll：Child View 伴随着滚动事件而滚出或滚进屏幕。注意两点：第一点，如果使用了其他值，必定要使用这个值才能起作用；第二点：如果在这个child View前面的任何其他Child View没有设置这个值，那么这个Child View的设置将失去作用。
app:layout_scrollFlags=”scroll”
enterAlways:快速返回模式。其实就是向下滚动时Scrolling View和Child View之间的滚动优先级问题。对比 scroll 和 scroll | enterAlways 设置，发生向下滚动事件时，前者优先滚动Scrolling View，后者优先滚动Child View，当优先滚动的一方已经全部滚进屏幕之后，另一方才开始滚动。*
app:layout_scrollFlags=”scroll|enterAlways”
enterAlwaysCollapsed:enterAlways的附加值，这里涉及到Child View的高度和最小高度，向下滚动时，Child View先向下滚动最小高度值，然后Scrolling View开始滚动，到达边界时，Child View再向下滚动，直至显示完全。
android:layout_height=”@dimen/dp_200”
android:minHeight=”@dimen/dp_56”
app:layout_scrollFlags=”scroll|enterAlways|enterAlwaysCollapsed”
exitUntilCollapsed：这里也涉及到最小高度。发生向上滚动事件时，Child View向上滚动退出直至最小高度，然后Scrolling View开始滚动。也就是，Child View不会完全退出屏幕。
android:layout_height=”@dimen/dp_200”
android:minHeight=”@dimen/dp_56”
app:layout_scrollFlags=”scroll|exitUntilCollapsed”
snap:就是Child View滚动比例的一个吸附效果。也就是说，Child View不会存在局部显示的情况，滚动Child View的部分高度，当我们松开手指时，Child View要么向上全部滚出屏幕，要么向下全部滚进屏幕，有点类似ViewPager的左右滑动。
app:layout_scrollFlags=”scroll|snap”
这个网址有gif动态图的演示会更直观些。
注意：滑动的view不可以是listview、scrollview必须是recycelview或者是NestedScrollView，因为在listview和scrollview里面没有对layout_behavior进行处理。

（二）把以上那种情况加上下拉刷新

直接上代码:

<?xml version="1.0" encoding="utf-8"?><android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:id="@+id/refresh"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <android.support.design.widget.CoordinatorLayout        android:layout_width="match_parent"        android:layout_height="match_parent">        <android.support.design.widget.AppBarLayout            android:id="@id/appbarlayout"            android:layout_width="match_parent"            android:layout_height="300px">            <ImageView                android:layout_width="match_parent"                android:layout_height="150px"                android:src="@mipmap/ic_launcher"                app:layout_scrollFlags="scroll" />            <TextView                android:layout_width="match_parent"                android:layout_height="100px"                android:gravity="center"                android:text="悬浮部分"                android:textColor="#ffffff"                android:textSize="18sp"                app:layout_scrollFlags="enterAlways" />        </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="测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n测试\n" />        </android.support.v4.widget.NestedScrollView>    </android.support.design.widget.CoordinatorLayout></android.support.v4.widget.SwipeRefreshLayout>

下面是activity的代码:

@Override    protected void onCreate(@Nullable Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.xuanfu);        final SwipeRefreshLayout swipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.refresh);        AppBarLayout appbarlayout = (AppBarLayout) findViewById(R.id.appbarlayout);        //对appbarlayout添加一个位置的监听，来动态控制swipeRefreshLayout能不能使用        appbarlayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {            @Override            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {                if (verticalOffset == 0) {                    swipeRefreshLayout.setEnabled(true);                } else {                    swipeRefreshLayout.setEnabled(false);                }            }        });    }

当verticalOffset==0的时候证明已经滑动到最上面了这时候将下拉刷新激活。

（三）实现类似简书的视觉差效果

<?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:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".MainActivity3">    <android.support.design.widget.AppBarLayout        android:layout_width="match_parent"        android:layout_height="500px"        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:expandedTitleMarginStart="100px"            app:layout_scrollFlags="scroll|exitUntilCollapsed">            <ImageView                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:src="@mipmap/ic_launcher"                app:layout_collapseMode="parallax"                app:layout_collapseParallaxMultiplier="0.2" />            <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.v7.widget.Toolbar>        </android.support.design.widget.CollapsingToolbarLayout>    </android.support.design.widget.AppBarLayout>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical"        app:layout_behavior="@string/appbar_scrolling_view_behavior">        <android.support.v7.widget.RecyclerView            android:id="@+id/recyclerView"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:scrollbars="none" />    </LinearLayout></android.support.design.widget.CoordinatorLayout>

app:layout_collapseMode这是折叠模式有以下取值:
1.pin:在滑动过程中,此自布局会固定在它所在的位置不动,直到CollapsingToolbarLayout全部折叠或者全部展开
2.parallax:视察效果,在滑动过程中,不管上滑还是下滑都会有视察效果,不知道什么事视察效果自己看gif图(layout_collapseParallaxMultiplier视差因子 0~1之间取值,当设置了parallax时可以配合这个属性使用,调节自己想要的视差效果)
3.不设置:跟随NestedScrollView的滑动一起滑动,NestedScrollView滑动多少距离他就会跟着走多少距离
下面是activity里面的代码:

@Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.test);        initDate();        Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);        setSupportActionBar(mToolbar);        getSupportActionBar().setDisplayHomeAsUpEnabled(true);        mToolbar.setNavigationOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                onBackPressed();            }        });        //使用CollapsingToolbarLayout必须把title设置到CollapsingToolbarLayout上，设置到Toolbar上则不会显示        CollapsingToolbarLayout mCollapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar_layout);        mCollapsingToolbarLayout.setTitle("CollapsingToolbarLayout");        //通过CollapsingToolbarLayout修改字体颜色        mCollapsingToolbarLayout.setExpandedTitleColor(Color.WHITE);//设置还没收缩时状态下字体颜色        mCollapsingToolbarLayout.setCollapsedTitleTextColor(Color.GREEN);//设置收缩后Toolbar上字体的颜色    }    private void initDate() {        mRecyclerView = (RecyclerView) this.findViewById(R.id.recyclerView);        mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));        mRecyclerView.setItemAnimator(new DefaultItemAnimator());        List<Integer> datas = new ArrayList<>();        for (int i = 0; i < 100; i++) {            datas.add(i);        }        mRecyclerView.setAdapter(new MyRecyclerViewAdapter(this, datas));    }

当然这里的RecyclerView也可以换成以上用到的NestedScrollView效果是一样的。