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

Posted

技术标签:

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

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

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

我想实现以下外观 -

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

【问题讨论】:

您好,您找到解决这个问题的方法了吗? 不,我找不到解决方案。你有什么解决办法吗? 你能写出你的全部代码吗?所以,我们可以试试。 嘿,你已经找到什么了吗? 【参考方案1】:

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

    在您的 activity_main.xml

    <android.support.v4.view.ViewPager
        android:layout_gravity="center"
        android:layout_
        android:layout_
        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。您可以轻松自定义您想要的内容。快乐编码:)

【讨论】:

以上是关于带有卡片堆栈的 Android 垂直视图寻呼机的主要内容,如果未能解决你的问题,请参考以下文章

ViewPager 页面效果

垂直网格视图中的重复卡片

在垂直堆栈视图中具有自动项目大小的水平分页 UICollectionView?

在视图寻呼机 2 中禁用垂直滚动

如何实现android的垂直滑动视图UI

Android10.4 卡片视图