欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android ViewPager实现Banner循环播放

程序员文章站 2024-03-06 18:36:26
问题的起源 在项目里,有时候需要实现一个图片轮播的效果,用来展示banner。同时,图片能循环播放,下面还有一排小圆点来指示当前轮播到哪一页了。 如下图: 分...

问题的起源
在项目里,有时候需要实现一个图片轮播的效果,用来展示banner。同时,图片能循环播放,下面还有一排小圆点来指示当前轮播到哪一页了。

如下图:

Android ViewPager实现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 文件夹中放置了几张图片,以演示用

Android ViewPager实现Banner循环播放

开始编码
代码都加上详细注释了,大家可以看看。有不明白的欢迎指出来

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。