VerticalViewPager a vertical scrolling ViewPager
Inherited from ViewPager, it has the same usage as ViewPager, including adapter, listening, but the sliding direction is different. Occasionally, we will find that viewpager wants to slide vertically, but the official doesn't provide a method. We found this on stack overflow, which can perfectly fulfill our requirements. Let's make a record here Maybe we will meet what we have achieved
Dynamic graph from network 
The following is the specific implementation: As shown below, it is actually to use setPageTransformer to change the display effect of each item, plus setOverScrollMode(OVER_SCROLL_NEVER) See the code for details, which can be used directly after copying /** * Created by yukun on 17-12-12. */ public class VerticalViewPager extends ViewPager { public VerticalViewPager(Context context) { super(context); init(); } public VerticalViewPager(Context context, AttributeSet attrs) { super(context, attrs); init(); } private void init() { // The majority of the magic happens here //Set setPageTransformer to achieve vertical sliding setPageTransformer(true, new VerticalPageTransformer()); // The easiest way to get rid of the overscroll drawing that happens on the left and right setOverScrollMode(OVER_SCROLL_NEVER); } private class VerticalPageTransformer implements ViewPager.PageTransformer { @Override public void transformPage(View view, float position) { if (position < -1) { // [-Infinity,-1) // This page is way off-screen to the left. view.setAlpha(0); } else if (position <= 1) { // [-1,1] view.setAlpha(1); // Counteract the default slide transition view.setTranslationX(view.getWidth() * -position); //set Y position to swipe in from top float yPosition = position * view.getHeight(); view.setTranslationY(yPosition); } else { // (1,+Infinity] // This page is way off-screen to the right. view.setAlpha(0); } } } /** * Swaps the X and Y coordinates of your touch event. */ private MotionEvent swapXY(MotionEvent ev) { float width = getWidth(); float height = getHeight(); float newX = (ev.getY() / height) * width; float newY = (ev.getX() / width) * height; ev.setLocation(newX, newY); return ev; } @Override public boolean onInterceptTouchEvent(MotionEvent ev){ boolean intercepted = super.onInterceptTouchEvent(swapXY(ev)); swapXY(ev); // return touch coordinates to original reference frame for any child views return intercepted; } @Override public boolean onTouchEvent(MotionEvent ev) { return super.onTouchEvent(swapXY(ev)); } }It is mainly the following method, which can realize the effects of various item s, including transparency, reduction, etc
private class VerticalPageTransformer implements ViewPager.PageTransformer { @Override public void transformPage(View view, float position) { if (position < -1) { // [-Infinity,-1) // This page is way off-screen to the left. view.setAlpha(0); } else if (position <= 1) { // [-1,1] view.setAlpha(1); // Counteract the default slide transition view.setTranslationX(view.getWidth() * -position); //set Y position to swipe in from top float yPosition = position * view.getHeight(); view.setTranslationY(yPosition); } else { // (1,+Infinity] // This page is way off-screen to the right. view.setAlpha(0); } } }
Here's a zoomed out viewpager animation
The effect is similar to that of the following image, which can deepen the understanding of PageTransformer.
From Jianshu The usage is very simple. Copy directly: <com.yk.myselfview.views.VerticalViewPager android:layout_width="match_parent" android:layout_centerInParent="true" android:id="@+id/vertical_viewpager" android:layout_height="240dp"> </com.yk.myselfview.views.VerticalViewPager>code:
mVerticalViewPager = (VerticalViewPager) findViewById(R.id.vertical_viewpager); //Adapter VerticalViewpagerAdapter verticalViewpagerAdapter=new VerticalViewpagerAdapter(this,mList); mVerticalViewPager.setAdapter(verticalViewpagerAdapter); mVerticalViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { Toast.makeText(VerticalViewPagerActivity.this, "position:"+position, Toast.LENGTH_SHORT).show(); } @Override public void onPageScrollStateChanged(int state) { } });Adapter
/** * Created by yukun on 17-12-12. */ public class VerticalViewpagerAdapter extends PagerAdapter { private Context mContext; private List<Integer> mList; public VerticalViewpagerAdapter(Context mContext, List<Integer> list) { this.mContext = mContext; mList = list; } @Override public int getCount() { return mList.size(); } @Override public boolean isViewFromObject(View view, Object object) { return view==object; } @Override public Object instantiateItem(ViewGroup container, int position) { ImageView imageView=new ImageView(mContext); imageView.setScaleType(ImageView.ScaleType.CENTER_CROP); imageView.setImageResource(mList.get(position)); container.addView(imageView); return imageView; } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView((View)object); } }