我要评论在很多电商网页及app上都有自动切换的商品的推广快，感觉体验挺不错的，正好今天学习使用viewpager，因此也实现了一个功能类似的demo。
下面是其中的两个截图：
实现一个自动播放功能的viewpager，要做的主要有以下的几个部分：
实现一个viewpageradapter，用于为viewpager提供展示内容（例如上面的两张小猫图片）
public class viewpageradapter extends pageradapter {
private list<view> mdata;
public viewpageradapter(list<view> mdata) {
this.mdata = mdata;
}
@override
public int getcount() {
return mdata.size();
}
@override
public boolean isviewfromobject(view arg0, object arg1) {
return arg0 == arg1;
}
@override
public object instantiateitem(viewgroup container, int position) {
view v = mdata.get(position);
container.addview(v);
return v;
}
@override
public void destroyitem(viewgroup container, int position, object object) {
// super.destroyitem(container, position, object);
container.removeview(mdata.get(position));
}
}
实现一个onpagechangelistener，这样在页面切换后可以提示当前页面所在的位置（例如上图中，左下角的3个圆点，红色表示当前页面）
private class viewpagechangelistener implements onpagechangelistener {
@override
public void onpagescrollstatechanged(int arg0) {
}
@override
public void onpagescrolled(int arg0, float arg1, int arg2) {
}
//监听页面改变事件来改变viewindicator中的指示图片
@override
public void onpageselected(int arg0) {
int len = viewindicator.getchildcount();
for(int i = 0; i < len; ++i)
viewindicator.getchildat(i).setbackgroundresource(r.drawable.tip_normal);
viewindicator.getchildat(arg0).setbackgroundresource(r.drawable.tip_select);
}
}
实现一个handler，用于在一定的时间间隔后修改ui（将当前显示的图片切换到下一个）
private handler mhandler = new handler() {
public void handlemessage(android.os.message msg) {
switch(msg.what) {
case 1:
int totalcount = pagers.size();//autochangeviewpager.getchildcount();
int currentitem = autochangeviewpager.getcurrentitem();
int toitem = currentitem + 1 == totalcount ? 0 : currentitem + 1;
log.i(tag, "totalcount: " + totalcount + " currentitem: " + currentitem + " toitem: " + toitem);
autochangeviewpager.setcurrentitem(toitem, true);
//每两秒钟发送一个message，用于切换viewpager中的图片
this.sendemptymessagedelayed(1, 2000);
}
}
};
上面这3段就是主要的代码，除此之外，还需要在onresume()中发送一个起始message以及在onstop()中停止viewpager页面的自动切换等内容。
完整的代码如下：
public class mainactivity extends activity {
private static final string tag = mainactivity.class.getsimplename();
private viewpager autochangeviewpager;
//用来指示当前显示图片所在位置
private linearlayout viewindicator;
//包含要在viewpager中显示的图片
private list<view> pagers;
@override
protected void oncreate(bundle savedinstancestate) {
super.oncreate(savedinstancestate);
setcontentview(r.layout.activity_main);
autochangeviewpager = (viewpager) findviewbyid(r.id.autovp);
viewindicator = (linearlayout) findviewbyid(r.id.vpindicator);
initadapter();
//监听页面改变事件来改变viewindicator中的指示图片
autochangeviewpager.setonpagechangelistener(new viewpagechangelistener());
}
private void initadapter() {
//即将在viewpager中展示的图片资源
int[] imgs = {r.drawable.i1, r.drawable.i2, r.drawable.i3};
//init pagers;
pagers = new arraylist<view>();
linearlayout.layoutparams img_params = new layoutparams(
layoutparams.match_parent, layoutparams.match_parent
);
for(int i = 0; i < imgs.length; ++i) {
imageview iv = new imageview(this);
iv.setbackgroundresource(imgs[i]);
iv.setlayoutparams(img_params);
final int index = i;
iv.setonclicklistener(new onclicklistener() {
//当viewpager中的图片被点击后，跳转到新的activity
@override
public void onclick(view v) {
intent i = new intent(mainactivity.this, invokedactivity.class);
i.putextra("name", "cat " + index);
mainactivity.this.startactivity(i);
}
});
pagers.add(iv);
}
autochangeviewpager.setadapter(new viewpageradapter(pagers));
//init indicator
linearlayout.layoutparams ind_params = new layoutparams(
layoutparams.wrap_content, layoutparams.wrap_content
);
for(int i = 0; i < imgs.length; ++i) {
imageview iv = new imageview(this);
if(i == 0)
iv.setbackgroundresource(r.drawable.tip_select);
else
iv.setbackgroundresource(r.drawable.tip_normal);
iv.setlayoutparams(ind_params);
viewindicator.addview(iv);
}
}
@override
protected void onresume() {
super.onresume();
//activity启动两秒钟后，发送一个message，用来将viewpager中的图片切换到下一个
mhandler.sendemptymessagedelayed(1, 2000);
}
@override
protected void onstop() {
super.onstop();
//停止viewpager中图片的自动切换
mhandler.removemessages(1);
}
public class viewpageradapter extends pageradapter {
private list<view> mdata;
public viewpageradapter(list<view> mdata) {
this.mdata = mdata;
}
@override
public int getcount() {
return mdata.size();
}
@override
public boolean isviewfromobject(view arg0, object arg1) {
return arg0 == arg1;
}
@override
public object instantiateitem(viewgroup container, int position) {
view v = mdata.get(position);
container.addview(v);
return v;
}
@override
public void destroyitem(viewgroup container, int position, object object) {
// super.destroyitem(container, position, object);
container.removeview(mdata.get(position));
}
}
private class viewpagechangelistener implements onpagechangelistener {
@override
public void onpagescrollstatechanged(int arg0) {
}
@override
public void onpagescrolled(int arg0, float arg1, int arg2) {
}
//监听页面改变事件来改变viewindicator中的指示图片
@override
public void onpageselected(int arg0) {
int len = viewindicator.getchildcount();
for(int i = 0; i < len; ++i)
viewindicator.getchildat(i).setbackgroundresource(r.drawable.tip_normal);
viewindicator.getchildat(arg0).setbackgroundresource(r.drawable.tip_select);
}
}
private handler mhandler = new handler() {
public void handlemessage(android.os.message msg) {
switch(msg.what) {
case 1:
int totalcount = pagers.size();//autochangeviewpager.getchildcount();
int currentitem = autochangeviewpager.getcurrentitem();
int toitem = currentitem + 1 == totalcount ? 0 : currentitem + 1;
log.i(tag, "totalcount: " + totalcount + " currentitem: " + currentitem + " toitem: " + toitem);
autochangeviewpager.setcurrentitem(toitem, true);
//每两秒钟发送一个message，用于切换viewpager中的图片
this.sendemptymessagedelayed(1, 2000);
}
}
};
}
布局文件如下：（上面代码中的invokedactivity非常简单，此处就省略了）
<framelayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.view.viewpager
android:id="@+id/autovp"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<linearlayout
android:id="@+id/vpindicator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="horizontal" />
</framelayout>
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论