Android Design Support Library（三）用CoordinatorLayout实现Toolbar隐藏和折叠
此文的代码在 Android Design Support Library（一）用TabLayout实现类似网易选项卡动态滑动效果代码的基础上进行修改，如果你没有看过本系列的第一篇文章最好先看一看。
CoordinatorLayout是Android Design Support Library中比较难的控件，顾名思义，它是用来组织它的子views之间协作的一个父view。CoordinatorLayout默认情况下可理解是一个FrameLayout，它的布局方式默认是一层一层叠上去，在这里我会介绍一下它最常用的两种情况。
1. CoordinatorLayout实现Toolbar隐藏效果
先来看看效果
接下来代码实现，首先仍旧是配置build.gradle：
dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.android.support:appcompat-v7:22.2.0' compile 'com.android.support:design:22.2.0' compile 'com.android.support:recyclerview-v7:22.2.0' compile 'com.android.support:cardview-v7:22.2.0' }
com.android.support:design:22.2.0就是我们需要引入的Android Design Support Library，其次我们还引入了Recyclerview和Cardview,还不了解这两个控件的同学可以看看Android5.x RecyclerView 应用解析和Android5.x CardView 应用解析这两篇文章。
开始上代码，先来看看布局(activity_tab_layout.xml)，最外层我们用CoordinatorLayout 来是做整体的布局，AppBarLayout将Toolbar和TabLayout整合成了一个整体：
<?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:id="@+id/main_content" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_scrollFlags="scroll|enterAlways" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabIndicatorColor="#ADBE107E" app:tabMode="scrollable" /> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> <android.support.design.widget.FloatingActionButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="10dp" android:clickable="true" android:onClick="checkin" android:src="@drawable/ic_discuss" app:layout_anchor="@id/main_content" app:layout_anchorGravity="bottom|right|end" /> </android.support.design.widget.CoordinatorLayout>
能隐藏的关键是 app:layout_scrollFlags=”scroll|enterAlways”这个属性，设置滚动事件，属性里面必须至少启用scroll这个flag，这样这个view才会滚动出屏幕，否则它将一直固定在顶部。
这里我们用到了一个新的控件FloatingActionButton，它也是Design Support Library提供的，你可以把它当作ImageView。它有两个属性需要注意下：
- app:layout_anchor=””表示相对于哪个布局。
- app:layout_anchorGravity=””表示相对于布局的位置。
java代码(CoordinatorLayoutActivity .java)
package com.example.liuwangshu.mooncoordinatorlayout; import android.support.design.widget.Snackbar; import android.support.design.widget.TabLayout; import android.support.v4.app.Fragment; import android.support.v4.view.ViewPager; import android.support.v7.app.ActionBar; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.widget.Toolbar; import android.view.View; import java.util.ArrayList; import java.util.List; public class CoordinatorLayoutActivity extends AppCompatActivity { private ViewPager mViewPager; private TabLayout mTabLayout; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_tab_layout); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); final ActionBar ab = getSupportActionBar(); ab.setDisplayHomeAsUpEnabled(true); mViewPager = (ViewPager) findViewById(R.id.viewpager); initViewPager(); } private void initViewPager() { mTabLayout = (TabLayout) findViewById(R.id.tabs); List<String> titles = new ArrayList<>(); titles.add("精选"); titles.add("体育"); titles.add("巴萨"); titles.add("购物"); titles.add("明星"); titles.add("视频"); titles.add("健康"); titles.add("励志"); titles.add("图文"); titles.add("本地"); titles.add("动漫"); titles.add("搞笑"); titles.add("精选"); for (int i = 0; i < titles.size(); i++) { mTabLayout.addTab(mTabLayout.newTab().setText(titles.get(i))); } List<Fragment> fragments = new ArrayList<>(); for (int i = 0; i < titles.size(); i++) { fragments.add(new ListFragment()); } FragmentAdapter mFragmentAdapteradapter = new FragmentAdapter(getSupportFragmentManager(), fragments, titles); //给ViewPager设置适配器 mViewPager.setAdapter(mFragmentAdapteradapter); //将TabLayout和ViewPager关联起来。 mTabLayout.setupWithViewPager(mViewPager); //给TabLayout设置适配器 mTabLayout.setTabsFromPagerAdapter(mFragmentAdapteradapter); } public void checkin(View view) { Snackbar.make(view, "点击成功", Snackbar.LENGTH_SHORT).show(); } }
我们点击FloatingActionButton时会触发checkin方法，并用Snackbar来弹出一个提示。Snackbar也是Design Support Library的新控件，可以用来替代Toast和部分的Dialog。
其他的代码请参照源码或者Android Design Support Library（一）用TabLayout实现类似网易选项卡动态滑动效果这篇文章的讲解，这里就不赘述了。
2. CoordinatorLayout+CollapsingToolbarLayout实现Toolbar折叠效果
照例先来看看效果(软件bug转成gif动画后效果不大好）：
要实现折叠效果我们需要引入一个新的布局CollapsingToolbarLayout，它作用是提供了一个可以折叠的Toolbar，它继承至FrameLayout，给它设置layout_scrollFlags，它可以控制包含在CollapsingToolbarLayout中的控件比如mageView、Toolbar在响应layout_behavior事件时作出相应的scrollFlags滚动事件。
布局文件(activity_detail.xml)用CollapsingToolbarLayout将ImageView和Toolbar包含起来作为一个可折叠的Toolbar，再用AppBarLayout包裹起来作为一个Appbar的整体，当然，AppBarLayout目前必须是第一个嵌套在CoordinatorLayout里面的子view。
<?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:id="@+id/main_content" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="200dp" android:fitsSystemWindows="true" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:expandedTitleMarginEnd="64dp" app:expandedTitleMarginStart="48dp" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:id="@+id/backdrop" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" android:scaleType="centerCrop" android:src="@drawable/mao" /> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v7.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="match_parent" android:scrollbars="none" app:layout_behavior="@string/appbar_scrolling_view_behavior"/> </android.support.design.widget.CoordinatorLayout>
CollapsingToolbarLayout有几个关键属性需要说明下：
- app:contentScrim=””，用来设置CollapsingToolbarLayout收缩后最顶部的颜色
- app:expandedTitleGravity=”left|bottom”，表示将此CollapsingToolbarLayout完全展开后，title所处的位置，默认是left+ bottom
- app:collapsedTitleGravity=”left”，表示当头部的衬图ImageView消失后，此title将回归到Toolbar的位置，默认是left。
- app:layout_scrollFlags=””,这个属性我们上面讲过用来设置滚动事件，属性里面必须至少启用scroll这个flag，这样这个view才会滚动出屏幕，否则它将一直固定在顶部。这里我们设置的是app:layout_scrollFlags=”scroll|exitUntilCollapsed”这样能实现折叠效果，如果想要隐藏效果我们可以设置app:layout_scrollFlags=”scroll|enterAlways”。
我们需要定义AppBarLayout与滚动视图之间的联系，Design Support Library包含了一个特殊的字符串资源@string/appbar_scrolling_view_behavior，它和AppBarLayout.ScrollingViewBehavior相匹配，用来通知AppBarLayout何时发生了滚动事件，这个behavior需要设置在触发事件的view之上，所以我们应该在RecyclerView或者任意支持嵌套滚动的view比如NestedScrollView上添加app:layout_behavior=”@string/appbar_scrolling_view_behavior这个属性，当然AppBarLayout 中的子view需要设置app:layout_scrollFlags这个属性，否则接收到RecyclerView滚动事件，AppBarLayout 也不会有什么变化。
最后看看java代码(CollapsingToolbarActivity.java)
package com.example.liuwangshu.mooncoordinatorlayout; import android.support.design.widget.CollapsingToolbarLayout; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.widget.DefaultItemAnimator; import android.support.v7.widget.RecyclerView; import android.support.v7.widget.StaggeredGridLayoutManager; import android.support.v7.widget.Toolbar; public class CollapsingToolbarActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_detail); Toolbar toolbar = (Toolbar) this.findViewById(R.id.toolbar); setSupportActionBar(toolbar); CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar); collapsingToolbar.setTitle("哆啦A梦"); RecyclerView mRecyclerView= (RecyclerView) findViewById(R.id.recyclerView); mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(1, StaggeredGridLayoutManager.VERTICAL)); mRecyclerView.setItemAnimator(new DefaultItemAnimator()); mRecyclerView.setAdapter(new RecyclerViewAdapter(CollapsingToolbarActivity.this)); } }
