ViewPager显示多个item,Touch事件无死角(不用marginLeft,Right等实现)

最新推荐文章于 2022-05-07 17:42:18 发布

原创最新推荐文章于 2022-05-07 17:42:18 发布 · 置顶 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#android #viewpager #布局

AndroidUI 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用ViewPager显示多个item并解决Touch事件及PageTransformer中position参数偏差的问题。通过设置padding而非margin，并调整PageTransformer中的position值来实现平滑过渡和更好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ViewPager显示多个item, 实现如下效果:
这里写图片描述

常规解决办法:

1.设置ViewPager的marginLeft,Right

<?xml version="1.0" encoding="utf-8"?>
    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_marginLeft="80dp"
        android:layout_marginRight="80dp"
        android:layout_height="220dp" />

2.父级节点设置android:clipChildren=”false”
贴上全部代码:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipChildren="false"
    >

    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_marginLeft="80dp"
        android:layout_marginRight="80dp"
        android:layout_height="220dp" />
</RelativeLayout>

然后就搞定了.

但是!

只有中间那一页能接收Touch事件
在这两块滑动是没有用的
这里写图片描述
显然,做成这样肯定会被测试组吐槽的

改进后的解决办法:
想一想:
为啥不能接收Touch事件呢?
当然就是那个marginLeft,Right啦
虽然左右都有显示,但是那一块已经不属于ViewPager的地盘了,当然也就不能接收Touch事件啦,
既然margin不行,padding是不是可以呢,设置padding的话就没有上述问题啦. 试一试,发现是可以的!

贴上代码:

<?xml version="1.0" encoding="utf-8"?>
    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="220dp"
        android:clipToPadding="false"
        android:paddingLeft="80dp"
        android:paddingRight="80dp"
        />

**注意android:clipToPadding=”false”这个属性, 要不然看不到padding部分的图片了.

重新跑起来,发现没问题啊! 搞定了?
如果用PageTransformer来做些漂亮的效果的话,貌似是没有问题的.

然而这样做的话PageTransformer中

public void transformPage(View view, float position) {
}

position参数是有偏差的

举个栗子:
咱现在用PageTransformer做个3D翻页的效果:
用上述第一种方式,也就是设置margin的方式:效果是酱紫的:
(具体PageTransformer怎么用,请参考其他大神们的讲解)
这里写图片描述
看起来还不错,然而还是存在老问题,两边的不能滑动

那换用padding试试吧:
这里写图片描述
咋回事呢? 咋歪了捏?
滑动ViewPager我发现,页面刚好滑到最左边时,就正了:

也就是说,PageTransformer中的transformPage方法中的position参数偏了..

通过计算也是可以纠正position值的
这里写图片描述
偏差的就是图中左边的部分,只要把这部分占用的百分比补偿到position值中就可以了.

上代码(部分):

ViewPager vp = (ViewPager) findViewById(R.id.vp);
//左边padding部分宽度
int paddingLeft = vp.getPaddingLeft();
//一页的宽度
int imgWidth = vp.getWidth() - paddingLeft*2;
//padding部分所占百分比
float excursion = -(float)paddingLeft/(float)imgWidth;
vp.setPageTransformer(true, new ThreeDPageTransformer(excursion));

贴上ThreeDPageTransformer类部分代码:

public class ThreeDPageTransformer implements ViewPager.PageTransformer {

    private float excursion = 0;

    public ThreeDPageTransformer(float excursion){
        this.excursion = excursion;
    }

    public void transformPage(View view, float position) {
        //纠正
         position = position + excursion;

    }
}