实现tablayout随着fragment垂直滑动而滑动，并且悬

我先上效果

luzhi.gif

这种效果很明显是用CoordinatorLayout来实现的，悬浮的区域位于AppBarLayout，直接上布局的源码

<?xml version="1.0" encoding="utf-8"?>
 <!--这里自定义了一个CoordinatorLayout是为了实现tableyout中tab图片的显示和隐藏-->
<www.jrexe.com.download_test.Mycoor 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:id="@+id/coord"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ffaa00">
        <!-- title部分-->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:gravity="center"
            android:text="我要保修"
            app:layout_scrollFlags="scroll|exitUntilCollapsed" />
 <!-- 悬浮部分-->
        <android.support.design.widget.TabLayout
            android:id="@+id/tablayout"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_below="@+id/rela"></android.support.design.widget.TabLayout>
    </android.support.design.widget.AppBarLayout>
     <!--放fragment-->

    <RelativeLayout
        android:id="@+id/fragment_rela"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"></RelativeLayout>
</www.jrexe.com.download_test.Mycoor>

自定义了一个CoordinatorLayout是为了通过NestedScrollingParent接口中的一个onNestedScroll来获取滑动的状态从而改变tab中的图片是显示还是隐藏。下面上自定的CoordinatorLayout源码：

import android.content.Context;
import android.support.design.widget.AppBarLayout;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.TabLayout;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

/**
 * Created by Administrator on 2017/7/4 0004.
 */

public class Mycoor extends CoordinatorLayout {
    public String[] strings = {"进行中", "待评价", "已完成", "待报修"};

    public Mycoor(Context context) {
        super(context);
    }

    public Mycoor(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public Mycoor(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    public void onNestedScroll(View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
        super.onNestedScroll(target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed);
        //获取 appBarLayout
        AppBarLayout appBarLayout = (AppBarLayout) getChildAt(0);
        if (dyConsumed > 0) {
        //这种情况是当tablayout悬浮的状态
        //获取 tableLayout
            TabLayout tableLayout = (TabLayout) appBarLayout.getChildAt(1);
            for (int i = 0; i < tableLayout.getTabCount(); i++) {
                TabLayout.Tab tab = tableLayout.getTabAt(i);
                tab.setText(i + "");
                tab.setIcon(R.mipmap.ic_launcher);
            }
        } else if (dyConsumed == 0) {
        //这种情况是当title要出现在屏幕上的时候
            TabLayout tableLayout = (TabLayout) appBarLayout.getChildAt(1);
            for (int i = 0; i < tableLayout.getTabCount(); i++) {
                TabLayout.Tab tab = tableLayout.getTabAt(i);
                tab.setText(strings[i]);
                tab.setIcon(null);
            }
        }
    }
}

activity里面的代码我就不在赘述 就是fragment的切换再加上tablayout的tab设置的代码，到此ui要求的效果已经完成，其实这里面用到NestedScroll的知识，大家可以学习下，确实能实现不少酷炫的效果，比如说视觉差啊等一些通过传统的手势冲突解决方案解决不了的问题都可以用这种方法来搞定，还是比较强大的。