TabLayout+ViewPager垂直方向联动

原文链接：https://www.jianshu.com/p/9266e58cc4f5

TabLayout+ViewPager垂直方向联动

注意：这里说的联动，是指点击左侧的TabLayout指示器右侧ViewPager滚动定位到对应模块，而滚动ViewPager区域片段，TabLayout要定位到对应指示Tab。
大部分应用都只实现了点击左侧TabLayout来定位右侧区域片段，而没有实现右侧ViewPager区域滚动来联动左侧TabLayout指示器。

1.垂直点击TabLayout：TabLayout一般都是横向的指示器，所以我们使用VerticalTabLayout来做垂直的TabLayout

implementation 'q.rorbin:VerticalTabLayout:1.2.5'

2.垂直滚动ViewPager：ViewPager一般都是横向滑动，自定义一个VerticalViewPager来交换其X轴和Y轴的运动事件，来做垂直滚动的ViewPager

/**
 * 垂直滑动的ViewPager
 */
public class VerticalViewPager extends ViewPager {
    public VerticalViewPager(Context context) {
        this(context, null);
    }
    public VerticalViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
        //设置viewpage的切换动画,这里设置才能真正实现垂直滑动的viewpager
        setPageTransformer(true, new DefaultTransformer());
    }
    /**
     * 拦截touch事件
     */
    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        boolean intercept = super.onInterceptTouchEvent(swapEvent(ev));
        swapEvent(ev);
        return intercept;
    }
    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        return super.onTouchEvent(swapEvent(ev));
    }
    private MotionEvent swapEvent(MotionEvent event) {
        //获取宽高
        float width = getWidth();
        float height = getHeight();
        //将Y轴的移动距离转变成X轴的移动距离
        float swappedX = (event.getY() / height) * width;
        //将X轴的移动距离转变成Y轴的移动距离
        float swappedY = (event.getX() / width) * height;
        //重设event的位置
        event.setLocation(swappedX, swappedY);
        return event;
    }
}

3.布局:在需要使用的布局文件中横向1:3划分区域：

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white"
        android:orientation="horizontal">
        <q.rorbin.verticaltablayout.VerticalTabLayout
           android:padding="4dp"
            android:id="@+id/tab_layout"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent"
            app:indicator_color="@color/colorAccent"
            app:indicator_corners="50dp"
            app:indicator_gravity="fill"
            app:tab_margin="8dp"
            app:tab_height="32dp"
            app:tab_mode="scrollable" />
        <View style="@style/VerticalLine"/>
<!-- 这里改为自己自定义的VerticalViewPager对应包路径，大家都知道吧-->
        <com.smallcake.custom.VerticalViewPager
            android:background="@color/white"
            android:id="@+id/view_pager"
            android:layout_width="0dp"
            android:layout_weight="3"
            android:layout_height="match_parent" />
    </LinearLayout>

4.使用：首先初始化ViewPager片段数据，然后让TabLayout和ViewPager关联，最后才设置TabLayout的Tab数据项

    /**
     * a.关联TabLayout和ViewPager
     * b.创建TabLayout的数据适配器
     * c.设置TabLayout的数据适配器
     */
    private void bindTabAndPager(List<Classfiy> classfiys){
        tabLayout.setupWithViewPager(initViewPager(classfiys));
        ClassfiyMenuTabAdapter classfiyMenuTabAdapter = 
        new ClassfiyMenuTabAdapter(classfiys);
        tabLayout.setTabAdapter(classfiyMenuTabAdapter);
    }

其中initViewPager(classfiys)为设置ViewPager片段数据：

    /**
     * 初始化ViewPager片段数据
     * Classfiy为分类数据对象，每个人不一样，自己定义
     */
private ViewPager initViewPager(List<Classfiy> classfiys) {
viewPager.setAdapter(new FragmentStatePagerAdapter(getChildFragmentManager()) {
       @Override
       public Fragment getItem(int i) {
            return ClassfiyFragment.newInstance(classfiys.get(i));
       }
       @Override
       public int getCount() {
           return classfiys.size();
       }
       @Override
       public CharSequence getPageTitle(int position) {
           return classfiys.get(position).getMainName();
        }
   });
return viewPager;
}

ClassfiyMenuTabAdapter适配器为：

/**
 * VerticalTabLayout适配器
 */
public class ClassfiyMenuTabAdapter extends SimpleTabAdapter {
    List<Classfiy> menus;
    public ClassfiyMenuTabAdapter(List<Classfiy> menus) {
        this.menus = menus;
    }
    @Override
    public int getCount() {
        return menus.size();
    }
    @Override
    public TabView.TabBadge getBadge(int position) {
        return null;
    }
    @Override
    public TabView.TabIcon getIcon(int position) {
        return  null;
    }
    @Override
    public TabView.TabTitle getTitle(int position) {
        Classfiy classfiy = menus.get(position);
        //自定义Tab选择器的字体大小颜色
        return new QTabView.TabTitle.Builder()
                .setTextColor(0xFFffffff,0xFF2A2323)
                .setTextSize(14)
                .setContent(classfiy.getMainName())
                .build();
    }
    @Override
    public int getBackground(int position) {
        return -1;
    }
}