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

NickOrville 发布于1年前

顶部伸缩效果

现在要实现这么一个效果,有一个标题栏(或者其他控件),下面是tablayout+viewpager,然后在viewpager里面的内容滑动的时候tab悬浮,有点像微博热搜的界面

向下滑动之前

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

向下滑动之前

向下滑动之后

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

向下滑动之后

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页面对应的子页面的内容。内容布局必须用支持滑动嵌套的控件,如 RecyclerViewNestedScrollView (要作为根布局)

三、如果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;
    }
}

将这个文件定义在 AppBarLayoutapp:layout_behavior 标签中

总结

CoordinatorLayout虽然好用,但是遇到问题时却觉得很莫名其妙。一个是如果要用CoordinatorLayout,那跟它平行的界面也要用CoordinatorLayout作为根布局。还有,就是要注意 fitsSystemWindows 带来的影响。

查看原文: 底部Tab+FrameLayout嵌套CoordinatorLayout+Viewpager切换时布局错乱

  • whitegoose
  • greenswan