问题
I am trying to implement a vertical swipeable ViewPager
with stack of cards like appearance.
I am able to achieve VerticalViewPager using ViewPager.PageTransformer
and swapping the touch points.
I am getting following card appearance -
I want to achieve following appearance -
How can I achieve this effect? Thanks in Advance.
回答1:
In order to achieve this vertical View Pager without any library dependency You can follow the steps below :
In your activity_main.xml
<android.support.v4.view.ViewPager android:layout_gravity="center" android:layout_width="match_parent" android:layout_height="600dp" android:id="@+id/viewpager"> </android.support.v4.view.ViewPager>
In your viewpager_contents.xml
You can create the design that you want according to the above picture.
- Create the adapter and model class to hold the data.
4.In MainActivity.java, after setting the adapter and the pageTransformer add the following code.
private class ViewPagerStack implements ViewPager.PageTransformer {
@Override
public void transformPage(View page, float position) {
if (position >= 0) {
page.setScaleX(0.7f - 0.05f * position);
page.setScaleY(0.7f);
page.setTranslationX(-page.getWidth() * position);
page.setTranslationY(30 * position);
}
}
}
For detailed reference you can watch this video: CLICK HERE
Hope you will get the output what you needed!!
回答2:
You could use the SwipeStack library. It does exactly what you want - it is basically a viewgroup that inflates views based on your adapter implementation, placing them one on top of the other.
回答3:
The magic is here https://github.com/yuyakaido/CardStackView. You can easily custom what you want. Happy coding :)
回答4:
none of the above solutions worked for me peroperly. this is my solution :
My PageTransformer class :
class ViewPagerCardTransformer : ViewPager.PageTransformer {
override fun transformPage(page: View, position: Float) {
if (position >= 0) {
page.scaleX = 0.9f - 0.05f * position
page.scaleY = 0.9f
page.alpha = 1f - 0.3f * position
page.translationX = -page.width * position
page.translationY = -30 * position
} else {
page.alpha = 1 + 0.3f * position
page.scaleX = 0.9f + 0.05f * position
page.scaleY = 0.9f
page.translationX = page.width * position
page.translationY = 30 * position
}
}
}
code in my fragment :
val adapter = MyPagerAdapter(pageItems)
viewPager.adapter = adapter
/*below line will increase the number of cards stacked on top of
each other it is set to 1 by default. don't increase it too much as you
will end up with too much view page items in your memory
*/
mDaysViewPager.offscreenPageLimit = 3
viewPager.setPageTransformer(true, ViewPagerCardTransformer())
来源:https://stackoverflow.com/questions/40110483/android-vertical-view-pager-with-card-stack