带有卡片堆栈的 Android 垂直视图寻呼机 [英] Android Vertical View Pager with card stack

查看:17
本文介绍了带有卡片堆栈的 Android 垂直视图寻呼机的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试实现一个垂直可滑动的 ViewPager 与外观类似的卡片堆栈.

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

我想实现以下外观 -

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

解决方案

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

  1. 在您的 activity_main.xml

  2. 在您的 viewpager_contents.xml

<块引用>

您可以根据以上内容创建您想要的设计图片.

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

4.在MainActivity.java中,设置adapter和pageTransformer后添加如下代码.

私有类 ViewPagerStack 实现 ViewPager.PageTransformer {@覆盖public void transformPage(查看页面,浮动位置) {如果(位置>= 0){page.setScaleX(0.7f - 0.05f * 位置);page.setScaleY(0.7f);page.setTranslationX(-page.getWidth() * 位置);page.setTranslationY(30 * 位置);}}}

如需详细参考,您可以观看此视频:点击这里

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

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.

解决方案

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

这篇关于带有卡片堆栈的 Android 垂直视图寻呼机的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆