带有卡片堆栈的 Android 垂直视图寻呼机答案

【问题标题】：Android Vertical View Pager with card stack带有卡片堆栈的 Android 垂直视图寻呼机
【发布时间】：2017-02-27 20:37:51
【问题描述】：

我正在尝试实现一个垂直可滑动的ViewPager，并带有一堆类似外观的卡片。

我可以使用ViewPager.PageTransformer 实现 VerticalViewPager 并交换接触点。我正在关注卡片外观 -

我想实现以下外观 -

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

【问题讨论】：

您好，您找到解决这个问题的方法了吗？
不，我找不到解决方案。你有什么解决办法吗？
你能写出你的全部代码吗？所以，我们可以试试。
嘿，你已经找到什么了吗？

标签： android android-viewpager android-pagetransformer

【解决方案1】：

为了实现这个垂直的View Pager没有任何库依赖您可以按照以下步骤操作：

在您的 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>

在您的 viewpager_contents.xml

您可以根据上面的方法创建您想要的设计图片。

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

4.在MainActivity.java中，设置adapter和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);
        }
    }
}

如需详细参考，您可以观看此视频： CLICK HERE

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

【讨论】：

【解决方案2】：

上述解决方案都没有对我有用。这是我的解决方案：

我的 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())

【讨论】：

非常感谢您的回答，当用户向左滑动放大和淡出并向右滑动缩小淡入卡时怎么办？

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：