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());
}
@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);
}
}
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:orientation="horizontal">
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" />
android:background="@color/white"
android:id="@+id/view_pager"
android:layout_width="0dp"
android:layout_weight="3"
android:layout_height="match_parent" />
3.配合
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垂直方向關聯