android使用ViewPager实现轮播效果
程序员文章站
2023-01-21 09:49:32
viewpager：一个可以实现视图左右滑动切换的控件。
viewpager的基本使用：
viewpager的视图需要通过pageradapter来实现显示。...
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编程实现类似天气预报图文字幕垂直滚动效果的方法
-
Android编程实现使用Intent传输包含自定义类的ArrayList示例
-
TextView使用SpannableString设置复合文本 SpannableString实现TextView的链接效果
-
Android编程使用加速度传感器实现摇一摇功能及优化的方法详解
-
Android编程实现仿优酷圆盘旋转菜单效果的方法详解【附demo源码下载】
-
Android利用ViewPager实现滑动广告板实例源码
-
IOS实现图片轮播无限循环效果
-
iOS实现图片轮播效果
-
Android实现消息提醒小红点效果
-
Vue 使用 Mint UI 实现左滑删除效果CellSwipe