Android Vertical View Pager with card stack

不羁的心 提交于 2020-02-23 06:13:32

问题


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 :

  1. 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>
    

  2. In your viewpager_contents.xml

You can create the design that you want according to the above picture.

  1. 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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!