2

我正在尝试ViewPager使用类似外观的一堆卡片来实现垂直滑动。

我能够使用ViewPager.PageTransformer和交换接触点来实现 VerticalViewPager。我正在关注卡片外观 - 在此处输入图像描述

我想实现以下外观 - 在此处输入图像描述

我怎样才能达到这个效果？提前致谢。

4

4 回答 4

6

为了在没有任何库依赖的情况下实现这个垂直视图分页器， 您可以按照以下步骤操作：

  1. 在你的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. 在您的viewpager_contents.xml

您可以根据上图创建您想要的设计。

  1. 创建适配器和模型类来保存数据。

4.在MainActivity.java中，设置适配器和 pageTransformer 后添加以下代码。

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);
        }
    }
}

如需详细参考，您可以观看此视频： 点击此处

希望你能得到你需要的输出！！

于 2018-01-03T13:55:24.920 回答
1

以上解决方案都不适合我。这是我的解决方案：

我的 PageTransformer 类：

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
    }
  }
}

我的片段中的代码：

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())
于 2019-06-07T08:00:44.930 回答
0

您可以使用SwipeStack 库。它完全符合您的要求 - 它基本上是一个视图组，根据您的适配器实现扩展视图，将它们放在另一个之上。

于 2017-05-12T07:25:59.140 回答
0

魔法就在这里https://github.com/yuyakaido/CardStackView。您可以轻松自定义您想要的内容。快乐编码:)

于 2018-11-05T05:55:59.693 回答