垂直的VerticalViewPager

原文链接：https://www.jianshu.com/p/433842d2a403
1.修改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;
    }
}

其中的DefaultTransformer

public class DefaultTransformer implements ViewPager.PageTransformer {

    public static final String TAG = "simple";

    @Override
    public void transformPage(View view, float position) {

        float alpha = 0;
        if (0 <= position && position <= 1) {
            alpha = 1 - position;
        } else if (-1 < position && position < 0) {
            alpha = position + 1;
        }
        view.setAlpha(alpha);
        float transX = view.getWidth() * -position;
        view.setTranslationX(transX);
        float transY = position * view.getHeight();
        view.setTranslationY(transY);
    }
}

参考：https://blog.csdn.net/qq_21793463/article/details/52184864
2.布局文件很简单

 <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"/>
        <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>

3.配合VerticalTabLayout可以实现，点击左侧一级分类，右侧二三级滚动到对应页面。而且右侧二三级分类可以滑动来联动左侧一级分类。现在很多都只能通过点击左侧菜单项来切换右侧二三级分类，而我们要实现的是：左侧一级分类点击可以切换右侧二三级分类，且右侧可以一直滑动所有的二三级分类并联动左侧菜单指示器。他们之间的联动和普通的TabLayout和ViewPager方式一样。

tabLayout.setTabAdapter(viewPager);

这里要主要的坑一：一定要重写适配器中的getPageTitle方法，不然左侧的菜单文字无法显示，

viewPager.setAdapter(new FragmentStatePagerAdapter(getChildFragmentManager()) {
            @Override
            public Fragment getItem(int i) {
                return ClassfiyFragment.newInstance(classfiys.get(i));
            }
            @Override
            public int getCount() {
                return 14;
            }
            @Override
            public CharSequence getPageTitle(int position) {
                return classfiys.get(position).getMainName();
            }
        });

这里要主要的坑二：tabLayout设置适配器一定要在它和ViewPager设置联动之后，不然TabLayout设置的样式无效

tabLayout.setupWithViewPager(viewPager);
tabLayout.setTabAdapter(classfiyMenuTabAdapter);

最后的三级联动效果：

三级分类

如果觉得右侧滑动卡顿不流程，又无法接收这样的效果，可以看看这篇文章，对此效果的优化：
TabLayout+ViewPager垂直方向联动

最后编辑于：2020.05.04 11:02:28