ViewPager一屏显示多个页面

最新推荐文章于 2026-05-26 11:14:19 发布
原创 最新推荐文章于 2026-05-26 11:14:19 发布 · 9.4k 阅读 · 17 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
普通

当前文章被收录于：

普通
23 篇文章 0 人学习
订阅专栏 查看详情

使用ViewPager一般我们只需要一屏只显示一个页面，例如引导页、轮播图等。但它如何能一屏显示多个页面呢？其实很简单就是在控件的父布局或根布局添加clipChildren=false属性即可。

android:clipChildren属性：是否限制子控件在其范围内显示，也就是说当子控件超出父控件规定大小时，超出部分是否显示，clipChildren默认值为true。 也就是不允许超出绘制

效果图

这里写图片描述

示例代码

1：布局文件

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    android:gravity="center">

    <RelativeLayout
        android:id="@+id/root"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        android:clipChildren="false"
        android:gravity="center">

        <com.cn.lyz.viewpagegallery.viewpage_all_response.ViewPagerAllResponse
            android:id="@+id/vp"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_centerHorizontal="true"
            android:clipChildren="false"/>

    </RelativeLayout>

</RelativeLayout>

2：设置切换动画

public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
    public static final float MIN_SCALE = 0.8f;//原图片缩小0.8倍
    private static final float MIN_ALPHA = 0.6f;//透明度

    public void transformPage(View page, float position) {
        if (position < -1) {//[-Infinity,-1)左边显示出半个的page
            page.setAlpha(MIN_ALPHA);//设置page的透明度
            page.setScaleX(MIN_SCALE);
            page.setScaleY(MIN_SCALE);
        } else if (position <= 1) {
            if (position < 0) {//(0,-1] 第一页向左移动
                if (position < -0.2f)//最大缩小到0.8倍
                    position = -0.2f;
                page.setAlpha(1f + position*2);
                page.setScaleY(1f + position);
                page.setScaleX(1f + position);
            } else {//[1,0] 第二页向左移动 成currentItem
                if (position > 0.2)
                    position = 0.2f;
                page.setAlpha(1f -position*2);
                page.setScaleY(1f - position);
                page.setScaleX(1f - position);
            }
        } else {//(1,+Infinity]右边显示出半个的page
            page.setAlpha(MIN_ALPHA);
            page.setScaleX(MIN_SCALE);
            page.setScaleY(MIN_SCALE);
        }
    }
}

postion主要分为

  1. [-Infinity,-1)
  2. [-1,1]
  3. (1,+Infinity]

第一个对应左边显示一点的page，第二个对应中间显示的page，第三个对应右边显示一点的page。
第一个和第三个只需要设置最小值就可以。
第二个还需要细分为(0,-1]和[1,0]

由第一页滑动到第二页来说：
页1的position变化为：从0到-1
页2的position变化为：从1到0

由于Scale缩放倍数是0.8，所以在页面滑动时对position做了一些限制，使其不超过0.8
由于ALPHA透明倍数是0.6，所以在[-1,1]之间需要乘以2，否则透明度过度会很突兀

3：自定义Viewpager

捕获viewpager的父控件的触摸事件，并传递给viewpager,用于全屏滑动

mRoot.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                return mVp.dispatchTouchEvent(event);
            }
        });
public class ViewPagerAllResponse extends ViewPager {
    private final static float DISTANCE = 10;//默认距离
    private float downX;
    private float downY;
    private float upX;
    private float upY;

    public ViewPagerAllResponse(Context context) {
        this(context, null);
    }

    public ViewPagerAllResponse(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        if (ev.getAction() == MotionEvent.ACTION_DOWN) {
            downX = ev.getX();
            downY = ev.getY();
        } else if (ev.getAction() == MotionEvent.ACTION_UP) {
            upX = ev.getX();
            upY = ev.getY();
            //滑动时进入
            if (Math.abs(upX - downX) > DISTANCE || Math.abs(upY - downY) > DISTANCE) {
                return super.dispatchTouchEvent(ev);
            }
            //点击时进入
            View view = clickPageOnScreen(ev);
            if (view != null) {
                int index = (Integer) view.getTag();
                if (getCurrentItem() != index) {
                    setCurrentItem(index);
                    return true;
                }
            } else {
                return true;
            }
        }
        return super.dispatchTouchEvent(ev);
    }

    /**
     * 是否点击到两边的View
     * 点到View则返回该View,否则返回null
     */
    private View clickPageOnScreen(MotionEvent ev) {
        int childCount = getChildCount();
        int currentIndex = getCurrentItem();
        int[] location = new int[2];
        float x = ev.getRawX();

        for (int i = 0; i < childCount; i++) {
            View v = getChildAt(i);
            int position = (Integer) v.getTag();
            v.getLocationOnScreen(location);
            int minX = location[0];
            int maxX = location[0] + v.getWidth();

            if (position < currentIndex) {
                //maxX-view宽度*View缩放了宽度的一半
                maxX -= v.getWidth() * (1 - ZoomOutPageTransformer.MIN_SCALE) * 0.5;
                minX -= v.getWidth() * (1 - ZoomOutPageTransformer.MIN_SCALE) * 0.5;
            }

            if ((x > minX && x < maxX)) {
                return v;
            }
        }
        return null;
    }

    /**
     * 解决当手指在第1页左边空白区域上下滑动时，不让page的点击事件触发
     */
    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                downY = ev.getY();
                break;
            case MotionEvent.ACTION_UP:
                upY = ev.getY();
                if (Math.abs(upY - downY) > DISTANCE) {
                    return true;//拦截事件 传递给自己的onTouchEvent处理
                }
                break;
            default:
                break;
        }
        return super.onInterceptTouchEvent(ev);
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                downY = ev.getY();
                break;
            case MotionEvent.ACTION_UP:
                upY = ev.getY();
                if (Math.abs(upY - downY) > DISTANCE) {
                    return super.onTouchEvent(ev);//不消费事件，事件继续往上传递
                }
                break;
            default:
                break;
        }
        return super.onTouchEvent(ev);
    }
}
  1. 复写dispatchTouchEvent、onInterceptTouchEvent、onTouchEvent方法，解决在两侧page页上下滑动时，响应点击事件，即阻止了page的点击事件触发
  2. 复写dispatchTouchEvent方法，在其clickPageOnScreen方法内判断是否为中间page的点击事件，如果是则响应点击事件，否则则只设置setCurrentItem(index)使其跳到中间

4：Activity中设置

ViewpagerAdapter adapter = new ViewpagerAdapter(this, mVp, list);
mVp.setAdapter(adapter);
//设置缓存数为展示的数目
mVp.setOffscreenPageLimit(list.size());
//设置切换动画
mVp.setPageTransformer(true, new ZoomOutPageTransformer());
//设置Page间间距
mVp.setPageMargin(0);

注意
不设置setPageMargin大小两个page页也是有间距的
间距大小=page原大小*（1-缩放倍数）/2
如图
这里写图片描述

总结

其实效果实现起来并不难，只要理解了clipChildren属性的作用，再自定义一个PageTransformer过渡动画，ViewPager的各种效果也就不难实现了。

当然了，如果你不想用clipChildren属性，或者说使用继承PagerAdapter的方式定义布局不方便，则可以使用Viewpager添加Fragment方式来实现。效果图和上面一样就不再放了，所有实现方式再源码中都有，感兴趣可以戳源码下载。

源码下载
Demo下载

标签
#Viewpage长廊 #动画 #一屏显示多个页面 #android
viewpager 实现一屏幕多页循环滚动
10-27
viewpager 实现一屏幕多页循环滚动，自动滚动非常流畅，手动滑动也处理的很好，很久之前的 ，估计现在也没人用
banner::fire::fire:ViewPager，ViewPager2无限轮播功能。自定义Indicator，支持一屏三页，支持仿魅族banner效果。极其简单的使用方式
05-10
Android轮播控件 全新升级，基于ViewPager2实现无限轮播功能。可以自定义indicator，需自定义实现 Indicator 接口，内置了的IndicatorView，支持五种动画切换。支持传入RecyclerView.Adapter 即可实现无限轮播，支持任何ReyclerView.Apdater框架，集成使用请参考Demo。 支持自动轮播 支持一屏三页 支持自定义Indicator 支持自定义view 支持垂直滚动 支持任意RecyclerView.adapter 目前就4个类，良好的代码封装，更多请参考代码实现。 ViewPager2是androidx中的 还在使用support请使用ViewPager版本(持续维护...) 效果图 点击下载 体验 基本使用的功能，请下载apk体验更流畅 描述 普通样式 两边缩放 一屏三页 IndicatorView Indicato
ViewPage实现一屏多页面显示（进阶版）
我想月薪过万的博客
08-09 3618
相关文章 Android自定义轮播效果 ViewPager一屏多页面显示两侧无触摸/滑动事件 效果展示 实现思路 最难的写的是transformPage 这里面的一段逻辑。我总结为如下几点： 第一步：中间 哪张 的 position 属于哪个范围把所有值打印出来观察获得 第二步：根据 观察 结果把区间分好 第三步：相邻区间保证连贯性 注意：这里一次性打印多少个 page 是由页面一次显示多少 imageView 决定的 代码示例 MainActivity.java pa..
别再乱拖了！CREO 6.0零件装配移动与旋转的保姆级避坑指南（附角度偏移实战）
最新发布
weixin_30338497的博客
05-26 757
本文提供CREO 6.0零件装配中移动与旋转操作的详细避坑指南，重点解析约束系统、基准选择及角度偏移等核心技巧。通过实战案例和步骤分解，帮助用户避免常见操作失误，提升装配效率。特别针对角度偏移问题给出五步精确定位法，适合CREO初学者和进阶用户参考。
一起Talk Android吧（第三百七十九回：让ViewPager一屏幕显示三页）
talk_8的专栏
08-27 1753
本章回中主要介绍ViewPager一屏显示三页的概念以及实现一屏三页的方法，同时配有具体的代码和运行效果。
ViewPager系列之ViewPager一屏显示多个子页面，这里才是原创
热门推荐
JM_beizi的专栏
05-02 3万+
ViewPager一屏显示多个子页面，常见的有两种形式：1、当前展示的页面右侧显示一部分下个页面的内容2、当前页面居中，左右两边分别显示上一个页面、下一个页面第。 ViewPager 一页显示多个实现代码 ViewPager 显示多个子页面
RecycleView、ViewPager2的使用
shuo277的博客
08-01 2044
RecyclerView是一个强大的滑动组件，与经典的ListView相比，同样拥有item回收复用的功能，这一点从它的名字Recyclerview即回收view也可以看出。 RecyclerView 支持 线性布局、网格布局、瀑布流布局 三种，而且同时还能够控制横向还是纵向滚动。 ViewPager2 是基于 RecyclerView 实现的，自然继承了 RecyclerView 的众多优点，并且针对 ViewPager 存在的问题做了优化。.........
ViewPager一屏显示多个子页面
大漠-孤烟
05-01 7402
多页面滑动切换的时候，有时我们想在一个屏幕上同时显示多个子页面，用于提示用户此处是有多个页面的，平时我们用ViewPger的时候，大多数情况都是一屏幕只显示一个子页面，但是偶尔有时候我们的开发要应付UI设计和项目的很多不同需求。废话不多说，下面我们看看ViewPager同事显示多个子页面的具体实现。 先上图，效果如下：     要实现这个效果，我们要用到ViewPager的一个属性clip
Android中使用ViewPager实现一屏多页面的功能
tangzhide的博客
08-01 3325
效果图【录制后使用扣扣秀视频制作的gif，看见水印请别见怪】：实现的主要注意点【关于view pager的使用就忽略了】1、 Adapter需要重写函数—— @Override public float getPageWidth(int position)；2、clipChildren属性的使用—-决定了一屏三页还是一屏两页，三页的就比如爱奇艺的横向滑动的左右两边有相互接
巧用ViewPager 打造不一样的广告轮播切换效果
wy819的博客
05-09 393
转载请标明出处： http://blog.csdn.net/lmj623565791/article/details/51339751； 本文出自:【张鸿洋的博客】 一、概述 如果大家关注了我的微信公众号的话，一定知道我在5月6号的时候推送了一篇文章，文章名为Android超高仿QQ附近的人搜索展示（一），通过该文可以利用ViewPager实现单页显示多个Item且能够添加一些炫
Fragment嵌套ViewPager,ViewPager中子页面Fragment使用
yaonga的专栏
01-25 1899
一、概述 记录自己使用Fragment中嵌套ViewPager,ViewPager子页面也是Fragment的过程，子页面Fragment内容是图片+视频。 二、效果图 图片 视频 三、ViewPager一屏显示多个页面 要点 1. 增加布局属性android:clipChildren=”false”,指在子View进行绘制时不要去裁切它们的显示范围 2. 设置View
ViewPage实现一屏多页面显示（进阶版），android高级面试题库
wq221aas的博客
01-23 525
import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.LinearLayout; import androidx.annotation.NonNull; import androidx.viewpager.widget.PagerA
Android：ViewPager2制作一个一屏多Item的轮播图
Dacaiji_的博客
04-18 6192
具体思路是利用clipToPadding属性和clipChildren属性 给ViewPager2设置一个内边距padding，添加clipToPadding属性，然后设置clipChildren，让父布局不要限制子View，设置padding后，padding部分的滑动事件不会被内部的RecyclerView收到，所以这里setOnTounchListener，直接交给rv。 viewPager2 = ViewPager2(context).also { it.setPadd
教你最简单的实现ViewPager一屏显示多页的内容
Dreamer__YY的博客
04-10 5419
前言 以前在使用viewpager的时候都是结合fragment和tablayout使用，也会当做banner来使用，但这些都是一些基本使用，很少涉及到动效或者其他。不过前段时间项目中有个需求是顶部一个轮播图，但是这个轮播图要在当前页能看到前后两页的部分内容，咋一看，jing到我了，这咋整，好像有点迷，一下子感觉好难啊。相信很多童鞋一开始接触的时候都有跟我一样的想法，但其实不然，只要你接着读下去...
ViewPager2
codeSong的博客
06-25 917
包含标签的。
Android：ViewPager2
weixin_51109304的博客
07-01 3529
ViewPager2内部使用RecyclerView实现，并提供了增强功能。
千变万化的viewpager
李炎的博客
06-02 538
 http://blog.csdn.net/lmj623565791/article/details/51339751； 本文出自:【张鸿洋的博客】 一、概述 如果大家关注了我的微信公众号的话，一定知道我在5月6号的时候推送了一篇文章，文章名为Android超高仿QQ附近的人搜索展示（一），通过该文可以利用ViewPager实现单页显示多个Item且能够添加一些炫酷的动画效果。我当
最新干货！使用ViewPager2
布里啾啾提不哩多的博客
08-27 3735
ViewPager2简介 距离ViewPager2正式版的发布已经一年多了，目前ViewPager早已停止更新，官方鼓励使用ViewPager2替代。ViewPager2底层基于RecyclerView实现，因此可以获得RecyclerView带来的诸多收益： 抛弃传统的PagerAdapter，统一了Adapter的API。 通过LinearLayoutManager可以实现类似抖音的纵向滑动。 支持DiffUtil，可以实现局部刷新。 支持RTL（right-to-left），对于一些有
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值