ViewPager一屏多页面显示两侧无触摸/滑动事件

Posted 2021-09-03 我想月薪过万

传统解决方法

关于ViewPager显示两边的item方法，我们以前使用的方法是 在ViewPager外包一个Layout，

然后设置ViewPager和外面的Layout的clipChildren="false"。

ViewPager再设置layout_marginLeft,layout_marginRIght，以留出空间来显示两边的item.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:clipChildren="false" //不能少
    tools:context=".MainActivity">
 
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/vp_my_viewpager"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_marginLeft="80dp"  //写这个属性的目的是 不能让单个 ViewPager 项占满整个横屏
        android:layout_marginRight="80dp"
        android:clipChildren="false" //不能少
    />
 
</LinearLayout>

弊端

这种方法有个缺点：手指从两边的item滑动时，不能切换page，因为两边的item并不在ViewPager的范围内。

解决方法

<androidx.viewpager.widget.ViewPager
        android:id="@+id/vp_img"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:layout_alignParentBottom="true"
        android:paddingLeft="150dp"    //关键三行代码
        android:paddingRight="150dp"   //关键三行代码
        android:clipToPadding="false"  //关键三行代码
/>

就是把 marginLeft 和 marginRight 换成了 paddingLeft 和 paddingRight，clipChildren换成了clipToPadding。