顶部伸缩效果
现在要实现这么一个效果，有一个标题栏（或者其他控件），下面是tablayout+viewpager，然后在viewpager里面的内容滑动的时候tab悬浮，有点像微博热搜的界面
向下滑动之前
向下滑动之前
向下滑动之后
向下滑动之后
CoordinatorLayout实现头部布局滑动时隐藏
在5.0之后，Google推出了一系列md控件，其中用的最多的就是CoordinatorLayout，它可以实现很酷炫的粘连效果，伸缩控件，直接上代码：
<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:fitsSystemWindows="true"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/en_title_bg"
app:layout_behavior="包名.FlingBehavior"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<include layout="@layout/fragment_title_common" />
</android.support.design.widget.CollapsingToolbarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.flyco.tablayout.SlidingTabLayout
android:id="@+id/tabLayout"
style="@style/frame_vp_tab"
android:layout_width="match_parent"
android:layout_height="32dp"
android:layout_marginBottom="@dimen/dp_10"
android:layout_marginTop="18dp"></com.flyco.tablayout.SlidingTabLayout>
</LinearLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"></android.support.v4.view.ViewPager>
</android.support.design.widget.CoordinatorLayout>
这个代码应该一看就懂，首先需要用AppBarLayout来包住整个头部布局（包含需要伸缩和悬浮的控件）。CollapsingToolbarLayout中是需要滑动时伸缩的布局，它的外面是需要悬浮在顶部不动的布局。
布局外再加一个Tab切换
如果刚才我们做的那个界面只是一个界面，然后需要在底部在加一个tab来切换呢。布局如下：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<RadioGroup
android:background="@drawable/tab_bottom_bg"
android:id="@+id/radioGroup"
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="horizontal">
<RadioButton
android:drawableTop="@drawable/icon_tab_en"
android:id="@+id/tab_en"
android:checked="true"
style="@style/frame_tab_style"
android:text="RadioButton1" />
<RadioButton
android:drawableTop="@drawable/icon_tab_chinese"
android:id="@+id/tab_chinese"
style="@style/frame_tab_style"
android:text="RadioButton2" />
<RadioButton
android:drawableTop="@drawable/icon_tab_math"
android:id="@+id/tab_math"
style="@style/frame_tab_style"
android:text="RadioButton3" />
</RadioGroup>
</LinearLayout>
在FrameLayout中显示之前写的CoordinatorLayout+Viewpager
需要注意的问题来了
一、底部Tab对应的子fragment
在这种情况下，底部tab对应的fragment的布局都要用CoordinatorLayout作为根布局
二、子fragment的viewpager的fragment的布局
听起来有点绕哈，其实也就是每个tab页面对应的子页面的内容。内容布局必须用支持滑动嵌套的控件，如RecyclerView，NestedScrollView（要作为根布局）
三、如果CoordinatorLayout被嵌套在其它Layout（这个就是坑）
需要去掉
android:fitsSystemWindows="true"
如果你按照我的代码直接复制过去，对这个参数懵懵懂懂，那你运行之后会发现，有的界面是正常的，但是有的上面悬浮的tab的marginTop失效了，而且点击下面的tab切换时，布局会跳动，错乱。
这一切都源于这个fitsSystemWindows。
解决滑动时不流畅的问题
appBarLayout没有获得fling指令导致卡顿，应该是recyclerView在分发fling的时候出现了错误。
新增一个文件，命名FlingBehavior
public final class FlingBehavior extends AppBarLayout.Behavior {
private static final int TOP_CHILD_FLING_THRESHOLD = 3;
private boolean isPositive;
public FlingBehavior() {
}
public FlingBehavior(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
public boolean onNestedFling(CoordinatorLayout coordinatorLayout, AppBarLayout child, View target, float velocityX, float velocityY, boolean consumed) {
if (velocityY > 0 && !isPositive || velocityY < 0 && isPositive) {
velocityY = velocityY * -1;
}
if (target instanceof RecyclerView && velocityY < 0) {
final RecyclerView recyclerView = (RecyclerView) target;
final View firstChild = recyclerView.getChildAt(0);
final int childAdapterPosition = recyclerView.getChildAdapterPosition(firstChild);
consumed = childAdapterPosition > TOP_CHILD_FLING_THRESHOLD;
}
return super.onNestedFling(coordinatorLayout, child, target, velocityX, velocityY, consumed);
}
@Override
public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, AppBarLayout child, View target, int dx, int dy, int[] consumed) {
super.onNestedPreScroll(coordinatorLayout, child, target, dx, dy, consumed);
isPositive = dy > 0;
}
}
将这个文件定义在AppBarLayout的app:layout_behavior标签中
总结
CoordinatorLayout虽然好用，但是遇到问题时却觉得很莫名其妙。一个是如果要用CoordinatorLayout，那跟它平行的界面也要用CoordinatorLayout作为根布局。还有，就是要注意fitsSystemWindows带来的影响。
