使用ViewPager实现轮播图自动播放

最新推荐文章于 2025-05-08 09:36:14 发布
原创 最新推荐文章于 2025-05-08 09:36:14 发布 · 5.2k 阅读 · 14 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了使用ViewPager组件实现图片轮播及自动播放效果的方法，包括无限循环滑动、图文匹配、指示器联动等关键步骤，并提供了完整的XML布局和Java代码示例。

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

                          使用ViewPager实现轮播图自动播放

     

    通过使用ViewPager实现图片的自动轮播，也可以通过将自动滑动关闭通过手动滑动进行图片的滑动，现在简单分析一下实现的步骤：

1、让图片滑动起来。

2、让图片和文字、指示器对应起来。

3、让轮播器无限循环。

向右无限循环  

                0 -> 4    newPosition = position % 5  

                5 -> 0  

                6 -> 1  

                7 -> 2  

                8 -> 3  

                9 -> 4  

               10 -> 0  

            向左无限循环  

                设置到中间某个位置. 

4、让轮播器自动循环。

具体的实现代码 activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context="com.hz.viewpager.MainActivity">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="160dp" >
        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        </android.support.v4.view.ViewPager>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:padding="5dp"
            android:orientation="vertical"
            android:layout_alignParentBottom="true"
            android:gravity="center_horizontal"
            android:background="#66000000" >

            <TextView
                android:id="@+id/tv_desc"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@android:color/white"
                android:singleLine="true"
                android:text="天王盖地虎, 天王盖地虎, 天王盖地虎, " />

            <LinearLayout
                android:id="@+id/ll_point_container"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:orientation="horizontal"
                ></LinearLayout>
        </LinearLayout>
    </RelativeLayout>
</RelativeLayout>

控制图片上播放的按钮变更色（白色）：shape_bg_point_enable.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <corners android:radius="5dp" />

    <solid android:color="#FFFFFF" />

</shape>

控制图片上播放的按钮变更色（灰色）：shape_bg_point_disable.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >

    <corners android:radius="5dp" />

    <solid android:color="@android:color/darker_gray" />

</shape>

控制选中播放按钮背景的：selector_bg_phont.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="true" android:drawable="@drawable/shape_bg_point_enable"/>
    <item android:state_enabled="false" android:drawable="@drawable/shape_bg_point_disable"/>
</selector>

MainActivity.java

package com.hz.viewpager;

import android.app.Activity;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends Activity implements ViewPager.OnPageChangeListener {
    private ViewPager viewPager;
    private TextView tvDesc;
    private LinearLayout llPointContainer;
    private int[] imageResIds;
    private String[] contentDescs;
    private ArrayList<ImageView> imageViewList;
    private int previousSelectedPosition = 0;
    boolean isRunning = false;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // 初始化布局 View视图
        initViews();

        // Model数据
        initData();

        // Controller 控制器
        initAdapter();

        // 开启轮询
        new Thread(new Runnable() {
            @Override
            public void run() {
                isRunning = true;
                while(isRunning){
                    try {
                        Thread.sleep(2000);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                    runOnUiThread(new Runnable() {
                        @Override
                        public void run() {
                            viewPager.setCurrentItem(viewPager.getCurrentItem()+1);
                        }
                    });
                }
            }
        }).start();
    }


    /**
     * 初始化页面
     */
    private void initViews() {
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        tvDesc = (TextView) findViewById(R.id.tv_desc);
        //viewPager.setOffscreenPageLimit(1);// 左右各保留几个对象
        llPointContainer = (LinearLayout) findViewById(R.id.ll_point_container);
        /*设置滚动监听*/
        viewPager.addOnPageChangeListener(this);
    }

    /**
     * 初始化数据
     */
    private void initData() {
        // 图片资源id数组
        imageResIds = new int[]{R.drawable.a, R.drawable.b, R.drawable.c, R.drawable.d, R.drawable.e};

        // 文本描述
        contentDescs = new String[]{
                "巩俐不低俗，我就不能低俗",
                "扑树又回来啦！再唱经典老歌引万人大合唱",
                "揭秘北京电影如何升级",
                "乐视网TV版大派送",
                "热血屌丝的反杀"
        };
        // 初始化要展示的5个ImageView
        imageViewList=new ArrayList<ImageView>();
        ImageView imageView;
        View pointView;
        LinearLayout.LayoutParams layoutParams;
        for (int i = 0; i < imageResIds.length; i++) {
            // 初始化要显示的图片对象
            imageView = new ImageView(this);
            imageView.setBackgroundResource(imageResIds[i]);
            imageViewList.add(imageView);
            // 加小白点  指示器
            pointView=new View(this);
            pointView.setBackgroundResource(R.drawable.selector_bg_point);
            layoutParams=new LinearLayout.LayoutParams(15,15);
            if(i != 0)
                layoutParams.leftMargin = 10;
            // 设置默认所有都不可用
            pointView.setEnabled(false);
            llPointContainer.addView(pointView,layoutParams);

        }
    }

    /**
     * 初始化适配器
     */
    private void initAdapter() {
        // 设置适配器
        viewPager.setAdapter(new MyAdapter());
        /*初始化页面小白点*/
        llPointContainer.getChildAt(0).setEnabled(true);
        /*初始化页面文字*/
        tvDesc.setText(contentDescs[0]);
        previousSelectedPosition = 0;

        // 默认设置到中间的某个位置
        int pos = Integer.MAX_VALUE / 2 - (Integer.MAX_VALUE / 2 % imageViewList.size());
        // 2147483647 / 2 = 1073741823 - (1073741823 % 5)
        viewPager.setCurrentItem(pos); // 设置到某个位置
    }

    /**
     * 改变状态时调用，状态参数取值说明为：0表示静止、1表示正在滑动、2表示滑动完毕。
     * 在翻页过程中，状态值变化依次为：正在滑动-》滑动完毕—》静止
     * @param position
     */
    @Override
    public void onPageSelected(int position) {
        int newPostion=position % imageViewList.size();
        /*设置文本*/
        tvDesc.setText(contentDescs[newPostion]);
        // 把之前的禁用, 把最新的启用, 更新指示器
        llPointContainer.getChildAt(previousSelectedPosition).setEnabled(false);
        llPointContainer.getChildAt(newPostion).setEnabled(true);

        // 记录之前的位置
        previousSelectedPosition  = newPostion;
    }

    /**
     * 在翻页过程中调用。
     * @param position 当前页面的序号
     * @param positionOffset 当前页面偏移的半分比，取值0到1.
     * @param positionOffsetPixels 当前页面的偏移距离
     */
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
    @Override
    public void onDestroy(){
        super.onDestroy();
        isRunning = false;
    }
    class MyAdapter extends PagerAdapter{

        @Override
        public int getCount() {
            return Integer.MAX_VALUE;
        }
        // 3. 指定复用的判断逻辑, 固定写法
        @Override
        public boolean isViewFromObject(View view, Object object) {
            //System.out.println("isViewFromObject: "+(view == object));
            // 当划到新的条目, 又返回来, view是否可以被复用.
            // 返回判断规则
            return view == object;
        }
        // 1. 返回要显示的条目内容, 创建条目
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            // container: 容器: ViewPager
            // position: 当前要显示条目的位置 0 -> 4

            //newPosition = position % 5
            int newPosition = position % imageViewList.size();

            ImageView imageView = imageViewList.get(newPosition);
            // a. 把View对象添加到container中
            container.addView(imageView);
            // b. 把View对象返回给框架, 适配器
            return imageView; // 必须重写, 否则报异常
        }
        // 2. 销毁条目
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            // object 要销毁的对象
            container.removeView((View)object);
        }
    }
}

 

ViewPager实现自动轮播效果
繁城落叶
04-06 1万+
花了点时间实现了轮播效果，其中借鉴了一篇博客:轮播效果实现,但是这个里面所有的方法实现都写在一个文件中，真是花费了不少的时间来理清作者思路，这个作者写的内容可以直接拿来使用，我只是将其中的实现模块化实现了，但是只是简单的实现了效果，并没有进行具体的封装，所以仅供参考思路。1.抽象SingleFragmentActivity类。参考《Android编程权威指南》中作者的意见，抽象出了一套Fragmen
Android使用ViewPager实现图片轮播系列之二：自动轮播
2401_84123077的博客
04-22 455
总而言之，Android开发行业变化太快，作为技术人员就要保持终生学习的态度，让学习力成为核心竞争力，所谓“活到老学到老”只有不断的学习，不断的提升自己，才能跟紧行业的步伐，才能不被时代所淘汰。在这里我分享一份自己收录整理上述技术体系图相关的几十套腾讯、头条、阿里、美团等公司20年的面试题，把技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节，由于篇幅有限，这里以图片的形式给大家展示一部分。
ViewPager实现图片自动轮播和无限循环（完美流畅）
07-26
详情请参看博客http://blog.csdn.net/qq_20521573/article/details/52037929
Android使用ViewPager实现左右循环滑动及轮播效果
weixin_34025151的博客
11-10 559
ViewPager是一个常用的android组件，不过通常我们使用ViewPager的时候不能实现左右无限循环滑动，在滑到边界的时候会看到一个不能翻页的动画，可能影响用户体验。此外，某些区域性的ViewPager（例如展示广告或者公告之类的ViewPager），可能需要自动轮播的效果，即用户在不用滑动的情况下就能够看到其他页面的信息。为此我查阅了网络上现有的一些关于实现这样效...
ViewPager自动播放功能的实现与优化
最新发布
weixin_32661831的博客
05-08 677
标记点可以是自定义视图，以适应不同的设计风格。
用viewpager实现图片轮播
weixin_34246551的博客
11-21 206
应用中常常遇到图片轮播的需求，这时候就需要用到viewpager这个组件。viewpager是android support v4 中提供的一个组件。viewpager使用需要以下几步骤： 1.在布局文件中添加viewpager组件 1 <android.support.v4.view.ViewPager 2 android:id="@+id/vp_adv" 3 ...
使用ViewPager实现自动轮播
weixin_34221073的博客
07-12 153
很多APP中都实现了类似引导页的自动轮播，不由得想到昨天的引导页上修改一下代码实现轮播。 其实大体上只需要添加一个线程循环执行就可以了。 项目已同步至：https://github.com/nanchen2251/viewpagerDemo 同样的先上图   直接上代码，注释都全的，我想这样更有利于理解。 先改了Adapter package com.example.nanch...
Android Viewpager实现轮播广告图
08-27
在本文中，我们将详细介绍如何使用 Android Viewpager 实现轮播广告图。 Viewpager 的基本使用 Viewpager 是 Android 提供的一个控件，它可以实现页面的滑动切换。 Viewpager 的使用非常简单，只需要在布局文件中...
Android ViewPager实现轮播图效果
08-31
在Android开发中，实现动态轮播图效果通常采用ViewPager组件，它可以提供平滑的左右滑动体验，常用于展示广告、图片轮播等场景。本文将详细介绍如何使用Android的ViewPager和PagerAdapter来创建一个轮播图。 首先，...
Android使用viewpager实现自动无限轮播图
08-27
"Android 使用 ViewPager 实现自动无限轮播图" Android 中的 ViewPager 是一个非常实用的控件，可以用来实现各种类型的滑动效果，而自动无限轮播图正是其中的一种常见应用场景。下面将详细介绍如何使用 ViewPager ...
安卓ViewPager广告轮播图实现无限轮播
10-18
为了让广告轮播图自动播放，我们需要一个定时器（`Timer`）和任务（`TimerTask`）。在`onCreate()`或者`onStart()`中启动定时器，每隔一定时间（如3秒）执行任务，任务的内容是改变ViewPager的当前页。为了实现平滑...
Android使用ViewPager实现自动轮播
01-04
很多APP中都实现了类似引导页的自动轮播，不由得想到昨天的引导页上修改一下代码实现轮播。 其实大体上只需要添加一个线程循环执行就可以了。  项目已同步至：https://github.com/nanchen2251/viewpagerDemo  同样的先上图  直接上代码，注释都全的，我想这样更有利于理解。  先改了Adapter  package com.example.nanchen.taketurnplaydemo; import android.support.v4.view.PagerAdapter; import android.view.View; import andro
ViewPager自动轮播
06-02
ViewPager自动轮播广告、图片，解决滑动冲突，可以设置每个Item展示时间，可以设置轮播方向。原理讲解移步博客：http://blog.csdn.net/yanzhenjie1003/article/details/51327392
ViewPager实现图片轮播
10-04
图片轮播ViewPager实现图片轮播+手势轮播
自动轮播 ViewPager
百里奔跑
10-13 424
1. 概述 github 地址 : https://github.com/luoshenzhi/AutoPlayViewPager 1.1 特点 代码入侵性小, 修改一下类名即可, 不需要更换适配器 通过代码绘制指示器, 没有指示器布局文件和没有指示器资源文件 支持设置 ViewPager 切换时间 可通过 adapter.notifyDataSetChanged() 动态更新数据, 特殊处...
ViewPager 无限轮播自动轮播
ms
10-24 537
ViewPager 无限轮播 ,自动轮播
ViewPager 自动轮播
KWON_QMY的博客
10-15 262
//MainActivity package com.example.viewpager; import java.util.ArrayList; import java.util.List; import android.app.Activity; import android.os.Bundle; import android.os.Handler; import android.os.Mes...
ViewPager实现轮播图无限自动循环技术解析
以Android为例，以下是一段简化版的代码示例，展示了如何实现带Indicator的轮播图自动循环滚动。 ```java ViewPager viewPager = findViewById(R.id.viewPager); // 初始化ViewPager适配器 MyPagerAdapter adapter ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值