使用ViewPager实现轮播图自动播放
2024-05-16 06:41:52
使用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"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="160dp" ><android.support.v4.view.ViewPagerandroid:id="@+id/viewpager"android:layout_width="match_parent"android:layout_height="match_parent"></android.support.v4.view.ViewPager><LinearLayoutandroid: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" ><TextViewandroid:id="@+id/tv_desc"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textColor="@android:color/white"android:singleLine="true"android:text="天王盖地虎, 天王盖地虎, 天王盖地虎, " /><LinearLayoutandroid: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;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);// 初始化布局 View视图initViews();// Model数据initData();// Controller 控制器initAdapter();// 开启轮询new Thread(new Runnable() {@Overridepublic void run() {isRunning = true;while(isRunning){try {Thread.sleep(2000);} catch (InterruptedException e) {e.printStackTrace();}runOnUiThread(new Runnable() {@Overridepublic 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个ImageViewimageViewList=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*/@Overridepublic 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 当前页面的偏移距离*/@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}@Overridepublic void onPageScrollStateChanged(int state) {}@Overridepublic void onDestroy(){super.onDestroy();isRunning = false;}class MyAdapter extends PagerAdapter{@Overridepublic int getCount() {return Integer.MAX_VALUE;}// 3. 指定复用的判断逻辑, 固定写法@Overridepublic boolean isViewFromObject(View view, Object object) {//System.out.println("isViewFromObject: "+(view == object));// 当划到新的条目, 又返回来, view是否可以被复用.// 返回判断规则return view == object;}// 1. 返回要显示的条目内容, 创建条目@Overridepublic Object instantiateItem(ViewGroup container, int position) {// container: 容器: ViewPager// position: 当前要显示条目的位置 0 -> 4//newPosition = position % 5int newPosition = position % imageViewList.size();ImageView imageView = imageViewList.get(newPosition);// a. 把View对象添加到container中container.addView(imageView);// b. 把View对象返回给框架, 适配器return imageView; // 必须重写, 否则报异常}// 2. 销毁条目@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {// object 要销毁的对象container.removeView((View)object);}}
}
使用ViewPager实现轮播图自动播放相关推荐
- 【前端学习-16】【day06】WebAPI编程/动画函数封装/回调函数/轮播图/自动播放/节流阀/返回顶部/筋斗云/触屏事件/触屏事件对象/
新增动画前进后退效果 案例:轮播图 1.显示隐藏功能 2.动态生成小圆圈 3.排他思想 4.开始滚动 5.右侧按钮 6.克隆第一张图片 7.小圆圈跟着右侧按钮变化 8.序号和点击的要统一 9.左侧代码 ...
- js轮播图自动播放和手动控制
html文件 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
- JQuery实现圆点轮播图自动播放
用jquery实现轮播图 实现之后的效果 实现思路 1,每次只显示一张图片其他的图片隐藏起来 2,每一次轮播 相应位置的小圆点跟着变色 3,鼠标移入小圆点时显示相应的图片 源代码 <!DOCTY ...
- html菜鸟教程轮播图自动播放,如何实现轮播图？
1.背景介绍 轮播图,是由网页banner进化而来,通常放在屏幕最显眼的位置,以大图显示.随着互联网的发展,网页中需要推广的信息越来越多,宣传信息都欲占据黄金位置,最后相互妥协,轮播图应运而生.总而言 ...
- bootstrap轮播图自动播放响应式箭头居中
转载于:https://www.cnblogs.com/yuanyuan-1994/p/8586979.html
- java轮播图_RxJava 实现ViewPager的轮播图
前言 在App中实现一个轮播图已经是很多产品的标配了,很多人都会想到使用ViewPager + Handler来完成轮播图的效果.但是在RxJava快速发展的情况下,已经可以使用RxJava来代替Ha ...
- 轮播图自动滚动 无缝连接 js
轮播图自动滚动 无缝连接 <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
- html 图片轮播渐变,js轮播图自动切换和css做页面自动渐变
js轮播图自动切换和css页面自动渐变 效果如下: 可以去jq官网学习:http://www.jq22.com/ 部分代码如下: *{margin: 0; padding: 0;} p{text-al ...
- bootstrap轮播图 原点变为方块_JS实现无缝切换轮播图(自动+手动)
一.背景 说起轮播图,大家应该都不陌生,各大购物网站和面试题里都能看到它的身影. 实现上也并不困难,而写这篇文章是想整理一下自己心血来潮写的代码,以及实现过程中的一些思考,大家也可以顺便复习巩固一下. ...
最新文章
- 腾讯优图吴永坚：迈向深度学习，我们面临模型训练与推荐的双重考验
- 扩增子分析解读4去嵌合体,非细菌序列,生成代表性序列和OTU表
- python装饰器原理-python 中的装饰器及其原理
- Redis学习笔记（11）——Redis缓存集群方案
- 不平等博弈问题学习记录（三）（对于超实数在博弈下左大右小以及多堆情况的扩充）
- rxjs pipe和filter组合的一个实际例子的单步调试
- Acwing 217. 绿豆蛙的归宿
- pycharm中更新pip版本的问题
- PostgreSQL中UUID的完整指南
- Linux基础之命令练习Day4-fdisk，mkfs，mlabel，mount，umount，mkswap，swapon，dd，top，free，ps，kill，rpm，yum，make...
- 耿丹16-1第一次作业
- Spring Boot_打造企业级微信点餐系统_汇总贴
- 风控建模基础笔记（一）
- 【足式机器人--躯干状态估计】（8）躯干状态估计（位置、姿态、速度）代码解析
- 手机射频功放指标介绍
- iOS开发捷径学习(一)
- MTK USB软件框架
- Android Support Library介绍
- 鼓励与信任让人变得强大
- 利用Java处理图片，更换背景