android使用ViewPager实现轮播效果
发布时间 - 2026-01-11 00:41:27 点击率:次ViewPager:一个可以实现视图左右滑动切换的控件。

ViewPager的基本使用:
ViewPager的视图需要通过PagerAdapter来实现显示。
PagerAdapter的主要方法:
● getCount 视图的数量
● instantiateItem 添加视图
● destroyItem 销毁视图
● isViewFromObject 是否由对象创建视图
ViewPager的常用方法:
setAdapter 设置适配器
addOnPageChangeListener 监听页面切换的状态
setCurrentItem 设置当前页面的索引
实现广告轮播
技术点分析:
1、网络连接
2、JSON解析
3、ViewPager的初始化
4、图片的异步加载
5、圆点指示器的实现
使用selector+shape实现圆点图片
动态创建ImageView添加到集合中,同时添加到布局中
在ViewPager切换事件中,切换圆点状态
6、自动切换效果
使用Handler的post方法,定时执行代码
资源文件:
mydot.xml //创建圆点资源,放在drawable文件下
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <item android:state_enabled="true"> <shape android:shape="oval"> <size android:width="5dp" android:height="5dp"/> <solid android:color="#fff"/> </shape> </item> <item android:state_enabled="false"> <shape android:shape="oval"> <size android:width="5dp" android:height="5dp"/> <solid android:color="#8EE5EE"/> </shape> </item> </selector>
布局文件:
activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" > <ListView android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/lv_list" /> </RelativeLayout>
activity_banner.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" > <android.support.v4.view.ViewPager android:id="@+id/vp_image" android:layout_width="wrap_content" android:layout_height="150dp" android:layout_gravity="center" /> <LinearLayout android:layout_width="match_parent" android:layout_height="40dp" android:id="@+id/layout" android:layout_gravity="bottom" android:gravity="center" android:orientation="horizontal" ></LinearLayout> </FrameLayout>
java代码
ImageLoader.java //该代码是通过URL获取图片资源
package cn.edu.huse.banner_re.util;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.AsyncTask;
import java.io.IOException;
import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.MalformedURLException;
import java.net.URL;
/**
* 图片加载的工具类
* @author xray
*
*/
public class ImageLoader {
/**
* 图片加载完成的回调接口
* 添加URL参数,用于做图片错位判断
*/
public interface OnImageLoadListener{
//完成图片加载
void onImageLoadComplete(String url, Bitmap bitmap);
}
private OnImageLoadListener mListener;
/**
* 启动图片加载任务
* @param urlStr
* @param listener
*/
public void loadImage(String urlStr,OnImageLoadListener listener){
this.mListener = listener;
new ImageLoadTask().execute(urlStr);
}
/**
* 图片加载任务
* @author xray
*
*/
class ImageLoadTask extends AsyncTask<String,Void,ImageLoadTask.UrlAndBitmap>{
@Override
protected UrlAndBitmap doInBackground(String... params) {
try {
//创建URL,指定图片地址
URL url = new URL(params[0]);
//打开连接获得HttpURLConnection对象
HttpURLConnection conn = (HttpURLConnection) url.openConnection();
//获得文件输入流
InputStream stream = conn.getInputStream();
//把输入流转换为图片
Bitmap bmp = BitmapFactory.decodeStream(stream);
//关闭流
stream.close();
return new UrlAndBitmap(params[0],bmp);
} catch (MalformedURLException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
//包装图片地址和图片
class UrlAndBitmap{
String url;
Bitmap bitmap;
public UrlAndBitmap(String url, Bitmap bitmap) {
this.url = url;
this.bitmap = bitmap;
}
}
@Override
protected void onPostExecute(UrlAndBitmap result) {
//进行接口回调
if(mListener != null){
mListener.onImageLoadComplete(result.url,result.bitmap);
}
}
}
}
JSONLoader.java
//读取服务器json
package cn.edu.huse.banner_re.util;
import android.os.AsyncTask;
import java.io.IOException;
import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.MalformedURLException;
import java.net.URL;
/**
* 读取服务器JSON的工具类
* @author xray
*
*/
public class JSONLoader {
public interface OnJSONLoadListener{
void onJSONLoadComplete(String json);
}
private OnJSONLoadListener mListener;
public void loadJSON(String urlStr,OnJSONLoadListener listener){
this.mListener = listener;
new JSONLoadTask().execute(urlStr);
}
class JSONLoadTask extends AsyncTask<String,Void,String>{
@Override
protected String doInBackground(String... params) {
try {
URL url = new URL(params[0]);
HttpURLConnection conn = (HttpURLConnection) url.openConnection();
InputStream inputStream = conn.getInputStream();
byte[] buffer = new byte[1024];
int len = 0;
//StringBuffer 线程安全,性能低 VS StringBuilder 线程不安全,性能高
StringBuilder strB = new StringBuilder();
while((len = inputStream.read(buffer)) != -1){
//将字节码转换为String
String str = new String(buffer,0,len);
strB.append(str);
}
inputStream.close();
return strB.toString();
} catch (MalformedURLException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
@Override
protected void onPostExecute(String result) {
if(mListener != null){
mListener.onJSONLoadComplete(result);
}
}
}
}
MyViewPagerAdapter.java
package cn.edu.huse.banner_re.adapter;
import java.util.List;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
/**
* 图片轮播的适配器
* @author Lenovo
*
*/
public class MyViewPagerAdapter extends PagerAdapter {
private List<ImageView> mData;
public MyViewPagerAdapter(List<ImageView> mData) {
this.mData = mData;
}
//返回视图的数量
@Override
public int getCount() {
return mData.size();
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
//销毁图片
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(mData.get(position));
}
//添加图片
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(mData.get(position));
return mData.get(position);
}
}
MainActivity.java
package cn.edu.huse.banner_re;
import java.util.ArrayList;
import java.util.List;
import org.json.JSONArray;
import org.json.JSONObject;
import android.app.Activity;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.os.Handler;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.RadioButton;
import cn.edu.huse.banner_re.adapter.MyViewPagerAdapter;
import cn.edu.huse.banner_re.util.ImageLoader;
import cn.edu.huse.banner_re.util.ImageLoader.OnImageLoadListener;
import cn.edu.huse.banner_re.util.JSONLoader;
import cn.edu.huse.banner_re.util.JSONLoader.OnJSONLoadListener;
public class MainActivity extends Activity implements OnClickListener{
public static final String URL_GIFT = "http://www.1688wan.com/majax.action?method=getGiftList&pageno=1";
public static final String URL_BASE = "http://www.1688wan.com";
private ListView mLv;
//放置圆点图片的布局
private LinearLayout mLayout;
private ViewPager mPager;
//保存viewpager上图片的集合
private List<ImageView> mImageViews;
//保存圆点图片的集合
private List<ImageView> mDotViews;
//当前图片
private ImageView mDotView;
//当前下标
private int mIndex;
private Handler mHandler = new Handler();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//初始化viewpager
initViewPager();
}
private void initViewPager() {
new JSONLoader().loadJSON(URL_GIFT, new OnJSONLoadListener() {
@Override
public void onJSONLoadComplete(String json) {
//得到图片的地址
List<String> list = josnPare(json);
//初始化主控件
initView();
//将图片显示到viewpager中
initImageViews(list);
//为ViewPager设置适配器
mPager.setAdapter(new MyViewPagerAdapter(mImageViews));
//加载圆点图片
initDot(mImageViews.size());
//实现图片的轮播
mPager.postDelayed(new Runnable() {
@Override
public void run() {
//下标自动++
mIndex++;
//当下标到最后时,就重新来过
if(mIndex >= mImageViews.size()){
mIndex = 0;
}
//设置图片
mPager.setCurrentItem(mIndex);
//重复调用
mHandler.postDelayed(this, 1500);
}
}, 1500);
//添加页码滑动的监听,实现圆点图片的切换
mPager.setOnPageChangeListener(new OnPageChangeListener() {
//页选中后调用
@Override
public void onPageSelected(int arg0) {
//改变原来的圆点图片的状态
mDotView.setEnabled(true);
//更新当前的圆点图片
mDotView = mDotViews.get(arg0);
//将当前选中的圆点设为选中状态
mDotView.setEnabled(false);
//更新下标
mIndex = arg0;
}
//滑动中途调用
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
//页面滑动状态修改
@Override
public void onPageScrollStateChanged(int arg0) {
}
});
}
});
}
/**获取圆点图片函数
* @param count viewpager上图片的数量
*/
private void initDot(int count){
mDotViews = new ArrayList<ImageView>();
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT);
//设置边距
params.setMargins(5, 0, 5, 0);
for(int i = 0; i < count; i++){
ImageView image = new ImageView(this);
//设置圆点图片
image.setImageResource(R.drawable.mydot);
//设置图片的位置,方便后面的取值
image.setTag(i);
//设置监听
image.setOnClickListener(this);
//添加到布局中
mLayout.addView(image, params);
//将圆点图片保存到集合中
mDotViews.add(image);
}
mDotView = mDotViews.get(0);
mDotView.setEnabled(false);
}
/**
*显示图片的函数
*/
private void initImageViews(List<String> list) {
mImageViews = new ArrayList<ImageView>();
for(String str : list){
final ImageView imageView = new ImageView(this);
//设置默认图片
imageView.setImageResource(R.drawable.ic_launcher);
new ImageLoader().loadImage(URL_BASE+str, new OnImageLoadListener() {
@Override
public void onImageLoadComplete(String url, Bitmap bitmap) {
if(bitmap != null){
imageView.setImageBitmap(bitmap);
}
}
});
//将ImageView保存到集合中
mImageViews.add(imageView);
}
}
/**
* JSON解析获取图片的地址
* @param url
* @return
*/
private List<String> josnPare(String url){
List<String> list = new ArrayList<String>();
try {
JSONObject jobj = new JSONObject(url);
JSONArray array = jobj.getJSONArray("ad");
for(int i = 0; i < array.length(); i++){
JSONObject obj = (JSONObject) array.get(i);
list.add(obj.getString("iconurl"));
}
} catch (Exception e) {
e.printStackTrace();
}
return list;
}
/**
* 初始化控件
*/
private void initView() {
//找到控件
mLv = (ListView) findViewById(R.id.lv_list);
View view = LayoutInflater.from(this).inflate(R.layout.activity_banner, null);
mPager = (ViewPager)view.findViewById(R.id.vp_image);
//圆点图片布局
mLayout = (LinearLayout)view.findViewById(R.id.layout);
//模拟数据
List<String> mList = new ArrayList<String>();
for(int i = 0; i < 20; i++){
mList.add("条目--"+i);
}
//创建适配器
ArrayAdapter<String> mAdapter = new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1,
android.R.id.text1,
mList);
//设置头部视图
mLv.addHeaderView(view);
//设置适配器
mLv.setAdapter(mAdapter);
/*//圆点图片布局
mLayout = (LinearLayout)findViewById(R.id.layout);*/
}
/**
* 圆点图片的监听事件
*/
@Override
public void onClick(View arg0) {
//获取该圆点图片的位置
int index = Integer.parseInt(arg0.getTag().toString());
//将viewpager的图片显示成下标为index的图片
mPager.setCurrentItem(index);
//将原来的设置成默认值
mDotView.setEnabled(true);
//保存新的值
mDotView = (ImageView) arg0;
//将新的值改变成false
mDotView.setEnabled(false);
//更新下标
mIndex = index;
}
}
注意:因为这里用到了json解析,需要用到联网操作,一定要写上上网的权限:
运行效果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
# android
# ViewPager
# 轮播
# Android ViewPager撤消左右滑动切换功能实现代码
# Android使用ViewPager实现导航
# Android使用ViewPager加载图片和轮播视频
# android ViewPager实现滑动翻页效果实例代码
# ViewPager判断是向左划还是右划的实例
# 圆点
# 加载
# 回调
# 放在
# 设为
# 可以实现
# 来过
# 来实现
# 转换为
# 写上
# 不安全
# 中途
# 大家多多
# 设置成
# 默认值
# 改变成
# 事件中
# BitmapFactory
# os
# graphics
相关栏目:
【
网站优化151355 】
【
网络推广146373 】
【
网络技术251813 】
【
AI营销90571 】
相关推荐:
黑客如何利用漏洞与弱口令入侵网站服务器?
Win11怎样安装网易有道词典_Win11安装词典教程【步骤】
微信小程序 闭包写法详细介绍
如何在香港服务器上快速搭建免备案网站?
Laravel如何发送系统通知?(Notification渠道示例)
公司网站制作价格怎么算,公司办个官网需要多少钱?
Laravel如何使用Telescope进行调试?(安装和使用教程)
Android GridView 滑动条设置一直显示状态(推荐)
微信小程序 五星评分(包括半颗星评分)实例代码
EditPlus中的正则表达式实战(6)
如何在景安服务器上快速搭建个人网站?
HTML5建模怎么导出为FBX格式_FBX格式兼容性及导出步骤【指南】
如何在 Telegram Web View(iOS)中防止键盘遮挡底部输入框
Laravel怎么发送邮件_Laravel Mail类SMTP配置教程
如何在阿里云ECS服务器部署织梦CMS网站?
如何注册花生壳免费域名并搭建个人网站?
消息称 OpenAI 正研发的神秘硬件设备或为智能笔,富士康代工
Win11怎么关闭专注助手 Win11关闭免打扰模式设置【操作】
Edge浏览器怎么启用睡眠标签页_节省电脑内存占用优化技巧
详解ASP.NET 生成二维码实例(采用ThoughtWorks.QRCode和QrCode.Net两种方式)
Midjourney怎么调整光影效果_Midjourney光影调整方法【指南】
jQuery 常见小例汇总
HTML5空格和margin有啥区别_空格与外边距的使用场景【说明】
微信小程序 wx.uploadFile无法上传解决办法
Win11搜索不到蓝牙耳机怎么办 Win11蓝牙驱动更新修复【详解】
Laravel队列由Redis驱动怎么配置_Laravel Redis队列使用教程
宙斯浏览器视频悬浮窗怎么开启 边看视频边操作其他应用教程
如何用狗爹虚拟主机快速搭建网站?
黑客入侵网站服务器的常见手法有哪些?
国美网站制作流程,国美电器蒸汽鍋怎么用官方网站?
LinuxCD持续部署教程_自动发布与回滚机制
如何在橙子建站中快速调整背景颜色?
JavaScript如何实现错误处理_try...catch如何捕获异常?
打造顶配客厅影院,这份100寸电视推荐名单请查收
Laravel如何记录自定义日志?(Log频道配置)
简历没回改:利用AI润色让你的文字更专业
WEB开发之注册页面验证码倒计时代码的实现
西安市网站制作公司,哪个相亲网站比较好?西安比较好的相亲网站?
香港服务器网站生成指南:免费资源整合与高速稳定配置方案
如何在建站之星网店版论坛获取技术支持?
Laravel Seeder怎么填充数据_Laravel数据库填充器的使用方法与技巧
C++用Dijkstra(迪杰斯特拉)算法求最短路径
千问怎样用提示词获取健康建议_千问健康类提示词注意事项【指南】
专业商城网站制作公司有哪些,pi商城官网是哪个?
潮流网站制作头像软件下载,适合母子的网名有哪些?
如何制作公司的网站链接,公司想做一个网站,一般需要花多少钱?
Mybatis 中的insertOrUpdate操作
Laravel如何使用API Resources格式化JSON响应_Laravel数据资源封装与格式化输出
Laravel定时任务怎么设置_Laravel Crontab调度器配置
Laravel怎么为数据库表字段添加索引以优化查询

