底部Tab+FrameLayout嵌套CoordinatorLayout+Viewpager切换时布局错乱

顶部伸缩效果

现在要实现这么一个效果，有一个标题栏（或者其他控件），下面是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带来的影响。