Android ViewPager实现Banner循环播放
程序员文章站
2024-03-06 18:36:26
问题的起源
在项目里,有时候需要实现一个图片轮播的效果,用来展示banner。同时,图片能循环播放,下面还有一排小圆点来指示当前轮播到哪一页了。
如下图:
分...
问题的起源
在项目里,有时候需要实现一个图片轮播的效果,用来展示banner。同时,图片能循环播放,下面还有一排小圆点来指示当前轮播到哪一页了。
如下图:
分析
· 图片的个数是会变化的,同时小圆点的个数也会跟着图片个数变化
· 每一个page的布局是一样的。变化的就是小圆点的个数,所以需要用代码来动态生成小圆点
编码
布局
首先完成 mainactivity 的布局 activity_main.xml
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent" > <!-- viewpager --> <android.support.v4.view.viewpager android:id="@+id/viewpager" android:layout_width="fill_parent" android:layout_height="180dip" /> <linearlayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignbottom="@id/viewpager" android:background="#44000000" android:gravity="center" android:orientation="vertical" android:padding="5dip" > <!-- banner的文字描述 --> <textview android:id="@+id/tv_banner_text_desc" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textcolor="@android:color/white" /> <!-- 小圆点的父控件 --> <linearlayout android:id="@+id/ll_dot_group" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_margintop="5dip" android:gravity="center_horizontal" android:orientation="horizontal" > </linearlayout> </linearlayout> </relativelayout>
因为小圆点共有两种状态,一个是 enable 为 true 的状态,和 enable 为 false 的状态。所以需要为小圆点编写一个 selector 的 xml 配置文件,放在 drawable 文件夹中。这里,为它命名为 dot_bg_selector.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/point_bg_enable" android:state_enabled="true"></item> <item android:drawable="@drawable/point_bg_normal" android:state_enabled="false"></item> </selector>
还需要再写两个 xml 文件,作为小圆点在不同状态下的样式
point_bg_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="0.5dip" /> <solid android:color="#aaffffff" /> </shape>
point_bg_normal.xml
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" > <corners android:radius="0.5dip" /> <solid android:color="#55000000" /> </shape>
准备图片资源
我在 res\drawable-hdpi 文件夹中放置了几张图片,以演示用
开始编码
代码都加上详细注释了,大家可以看看。有不明白的欢迎指出来
package com.owen.adbanner; import java.util.arraylist; import java.util.list; import android.app.activity; import android.os.bundle; import android.os.systemclock; import android.support.v4.view.pageradapter; import android.support.v4.view.viewpager; import android.view.view; import android.view.viewgroup; import android.widget.imageview; import android.widget.linearlayout; import android.widget.toast; import android.widget.linearlayout.layoutparams; import android.widget.textview; /** * viewpager实现banner循环滚动 * * @author owen */ public class mainactivity extends activity { /** viewpager中imageview的容器 */ private list<imageview> imageviewcontainer = null; /** 上一个被选中的小圆点的索引,默认值为0 */ private int predotposition = 0; /** banner文字描述数组 */ private string[] bannertextdescarray = { "巩俐不低俗,我就不能低俗", "朴树又回来了,再唱经典老歌引万人大合唱", "揭秘北京电影如何升级", "乐视网tv版大派送", "热血屌丝的反杀" }; /** banner滚动线程是否销毁的标志,默认不销毁 */ private boolean isstop = false; /** banner的切换下一个page的间隔时间 */ private long scrolltimeoffset = 5000; private viewpager viewpager; /** banner的文字描述显示控件 */ private textview tvbannertextdesc; /** 小圆点的父控件 */ private linearlayout lldotgroup; @override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); initview(); startbannerscrollthread(); } /** * 开启banner滚动线程 */ private void startbannerscrollthread() { new thread(new runnable() { @override public void run() { while (!isstop) { //每个两秒钟发一条消息到主线程,更新viewpager界面 systemclock.sleep(scrolltimeoffset); runonuithread(new runnable() { public void run() { int newindex = viewpager.getcurrentitem() + 1; viewpager.setcurrentitem(newindex); } }); } } }).start(); } @override protected void ondestroy() { // 销毁线程 isstop = true; super.ondestroy(); } private void initview() { viewpager = (viewpager) findviewbyid(r.id.viewpager); lldotgroup = (linearlayout) findviewbyid(r.id.ll_dot_group); tvbannertextdesc = (textview) findviewbyid(r.id.tv_banner_text_desc); imageviewcontainer = new arraylist<imageview>(); int[] imageids = new int[] { r.drawable.a, r.drawable.b, r.drawable.c, r.drawable.d, r.drawable.e, }; imageview imageview = null; view dot = null; layoutparams params = null; for (int id : imageids) { imageview = new imageview(this); imageview.setbackgroundresource(id); imageviewcontainer.add(imageview); // 每循环一次添加一个点到线行布局中 dot = new view(this); dot.setbackgroundresource(r.drawable.dot_bg_selector); params = new layoutparams(5, 5); params.leftmargin = 10; dot.setenabled(false); dot.setlayoutparams(params); lldotgroup.addview(dot); // 向线性布局中添加"点" } viewpager.setadapter(new banneradapter()); viewpager.setonpagechangelistener(new bannerpagechangelistener()); // 选中第一个图片、文字描述 tvbannertextdesc.settext(bannertextdescarray[0]); lldotgroup.getchildat(0).setenabled(true); viewpager.setcurrentitem(0); } /** * viewpager的适配器 */ private class banneradapter extends pageradapter { @override public void destroyitem(viewgroup container, int position, object object) { container.removeview(imageviewcontainer.get(position % imageviewcontainer.size())); } @override public object instantiateitem(viewgroup container, int position) { view view = imageviewcontainer.get(position % imageviewcontainer.size()); // 为每一个page添加点击事件 view.setonclicklistener(new view.onclicklistener() { @override public void onclick(view v) { toast.maketext(mainactivity.this, "page 被点击了", toast.length_short).show(); } }); container.addview(view); return view; } @override public int getcount() { return integer.max_value; } @override public boolean isviewfromobject(view view, object object) { return view == object; } } /** * banner的page切换监听器 */ private class bannerpagechangelistener implements viewpager.onpagechangelistener { @override public void onpagescrollstatechanged(int arg0) { // nothing to do } @override public void onpagescrolled(int arg0, float arg1, int arg2) { // nothing to do } @override public void onpageselected(int position) { // 取余后的索引,得到新的page的索引 int newpositon = position % imageviewcontainer.size(); // 根据索引设置图片的描述 tvbannertextdesc.settext(bannertextdescarray[newpositon]); // 把上一个点设置为被选中 lldotgroup.getchildat(predotposition).setenabled(false); // 根据索引设置那个点被选中 lldotgroup.getchildat(newpositon).setenabled(true); // 新索引赋值给上一个索引的位置 predotposition = newpositon; } } }
参考来源
http://blog.csdn.net/allen315410/article/details/39294343
https://github.com/331637495/bannerdemo
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: ToString()使用方法汇总(c#)
下一篇: asp.net 网页动态查询条件的实现