当前位置： 移动技术网 > 移动技术>移动开发>Android > 简单实现android轮播图

简单实现android轮播图

2019年07月24日  | 移动技术网移动技术  | 我要评论

轮播图是很常用的一个效果 核心功能已经实现 没有什么特殊需求 自己没事研究的 所以封装的不太好 一些地方还比较糙 为想要研究轮播图的同学提供个参考

目前测试图片为mipmap中的图片 没有写从网络加载图片 可自行根据需求在getshowview()方法中修改

1.定时切换

通过handle延时发送通知改变界面 然后在切换viewpage的界面之后 再次发送此延时通知 就ok咯 还可以通过timer定时器实现

2.无限轮播效果

如果我们只是在自动轮播到最后一页 然后进行判断让切换到第一页 这样是可以实现轮播的效果
但是 有两个问题

  • 切换从最后一页切换到第一页的时候有一个很明显的回滚效果 不是我们想要的
  • 当我们手动滑动的时候 在第一页和最后一页的时候 无法继续左右滑动 因为已经没有下一页了

先看张图（偷来的）


不得不说这位兄弟的图p的很形象 简直完美

虽然看到的是三张图 实际上是五张 数据多的时候也按照这种方式添加数据 当view4的时候自动切换到view5时 进行判断让到切换到view2 这样造成的感觉就是最后一张下来是第一张
我们利用viewpage自带的方法切换界面立即切换没有滚动效果 当图片一样的时候是看不出图片变化的
setcurrentitem(int item, boolean smoothscroll)

第二个参数设置false 界面切换的时候无滚动效果 默认true

好啦 接下来看代码

public class bannerviewpager extends framelayout {

  private viewpager viewpager;
  private textview tvtitle;
  private linearlayout indicatorgroup;
  private banneradapter adapter;
  private list<string> titles;//标题集合
  private list imageurls;//图片数据
  private list<view> views;//轮播图显示
  private imageview [] tips;//保存显示的小圆点
  private int count;//保存imageurls的总数
  private int bannertime=2500;//轮播图的间隔时间
  private int currentitem=0;//轮播图的当前选中项
  private long releasetime = 0;//保存触发时手动滑动的时间 进行判断防止滑动之后立即轮播
  private final int start=10;
  private final int stop=20;
  private context context;
  private handler handler;

  private final runnable runnable=new runnable() {
    @override
    public void run() {
      long now=system.currenttimemillis();
      if (now-releasetime>bannertime-500){
        handler.sendemptymessage(start);
      }else{
        handler.sendemptymessage(stop);
      }
    }
  };


  public bannerviewpager(context context) {
    super(context);
  }

  public bannerviewpager(context context, attributeset attrs) {
    super(context, attrs);
    this.context=context;
    titles=new arraylist<>();
    titles.add("标题1");
    titles.add("标题2");
    titles.add("标题3");
    imageurls=new arraylist();
    views=new arraylist<>();
    init(context,attrs);
  }


  private void init(final context context, attributeset attrs){
    view view= layoutinflater.from(context).inflate(r.layout.layout_banner,this);
    viewpager= (viewpager) view.findviewbyid(r.id.banner_view_pager);
    tvtitle= (textview) view.findviewbyid(r.id.banner_title);
    indicatorgroup= (linearlayout) view.findviewbyid(r.id.banner_indicator);
    handler=new handler(){
      @override
      public void handlemessage(message msg) {
        super.handlemessage(msg);
        switch (msg.what){
          case start:
            viewpager.setcurrentitem(currentitem+1);
            handler.removecallbacks(runnable);
            handler.postdelayed(runnable,bannertime);
            break;
          case stop:
            releasetime=0;
            handler.removecallbacks(runnable);
            handler.postdelayed(runnable,bannertime);
            break;
        }
      }
    };
  }

  /**
   * 初始化数据 以及拿到数据后的各种设置
   * 可以是网络地址 也可是项目图片数据
   * @param imageurls
   */
  public void setdata(list<?> imageurls){
    this.imageurls.clear();
    this.count=imageurls.size();
    this.imageurls.add(imageurls.get(count-1));
    this.imageurls.addall(imageurls);
    this.imageurls.add(imageurls.get(0));

    initindicator();
    getshowview();
    setui();
  }

  /**
   * 设置标题
   * @param titles
   */
  public void settitles(list<string> titles){
    this.titles.clear();
    this.titles.addall(titles);
  }
  /**
   * 设置小圆点指示器
   */
  private void initindicator(){
    tips=new imageview[count];
    linearlayout.layoutparams layoutparams = new linearlayout.
        layoutparams(new viewgroup.layoutparams(viewgroup.layoutparams.wrap_content, viewgroup.layoutparams.wrap_content));
    layoutparams.height=10;
    layoutparams.width=10;
    layoutparams.leftmargin = 5;// 设置点点点view的左边距
    layoutparams.rightmargin = 5;// 设置点点点view的右边距
    for (int i=0;i<count;i++){
      imageview imageview=new imageview(context);
      if (i == 0) {
        imageview.setbackgroundresource(r.drawable.shape_circle_red);
      } else {
        imageview.setbackgroundresource(r.drawable.shape_circle_white);
      }

      tips[i] = imageview;
      indicatorgroup.addview(imageview, layoutparams);
    }
  }

  /**
   * 获取显示图片view
   */
  private void getshowview(){
    for (int i=0;i<imageurls.size();i++){
      imageview imageview=new imageview(context);
      imageview.setscaletype(imageview.scaletype.center_crop);
      if (imageurls.get(i) instanceof string){

      }else{
        imageview.setimageresource((integer) imageurls.get(i));
      }
      views.add(imageview);
    }
  }

  /**
   * 设置ui
   */
  private void setui(){
    adapter=new banneradapter();
    viewpager.setadapter(adapter);
    viewpager.addonpagechangelistener(onpagechangelis);
    viewpager.setcurrentitem(1);
    handler.postdelayed(runnable,bannertime);
  }

  /**
   * viewpage改变监听
   */
  private viewpager.onpagechangelistener onpagechangelis=new viewpager.onpagechangelistener() {
    @override
    public void onpagescrolled(int position, float positionoffset, int positionoffsetpixels) {

    }

    @override
    public void onpageselected(int position) {
      //计算当前页的下标
      int max = views.size() - 1;
      int temp = position;
      currentitem = position;
      if (position == 0) {
        currentitem = max - 1;
      } else if (position == max) {
        currentitem = 1;
      }
      temp = currentitem - 1;
      setindicatorandtitle(temp);
    }

    @override
    public void onpagescrollstatechanged(int state) {
      currentitem=viewpager.getcurrentitem();
      switch (state) {
        case 0:
          //log.e("aaa","=====静止状态======");
          if (currentitem == 0) {
            viewpager.setcurrentitem(count, false);
          } else if (currentitem == count + 1) {
            viewpager.setcurrentitem(1, false);
          }
          break;
        case 1:
//        log.e("aaa","=======手动拖拽滑动时调用====");
          releasetime = system.currenttimemillis();
          if (currentitem == count + 1) {
            viewpager.setcurrentitem(1, false);
          } else if (currentitem == 0) {
            viewpager.setcurrentitem(count, false);
          }
          break;
        case 2:
//        log.e("aaa","=======自动滑动时调用====");
          break;
      }
    }
  };


  /**
   * 设置指示器和标题切换
   * @param position
   */
  private void setindicatorandtitle(int position){
    tvtitle.settext(titles.get(position));

    for (int i=0;i<tips.length;i++){
      if (i==position){
        tips[i].setbackgroundresource(r.drawable.shape_circle_red);
      }else{
        tips[i].setbackgroundresource(r.drawable.shape_circle_white);
      }
    }
  }

  /**
   * 适配器
   */
  class banneradapter extends pageradapter{
    @override
    public int getcount() {
      return views.size();
    }

    @override
    public boolean isviewfromobject(view view, object object) {
      return view==object;
    }

    @override
    public object instantiateitem(viewgroup container, int position) {
      container.addview(views.get(position));
      return views.get(position);
    }

    @override
    public void destroyitem(viewgroup container, int position, object object) {
      container.removeview((view) object);
    }
  }
}

activity代码

bannerviewpager banner= (bannerviewpager) findviewbyid(r.id.banner);
    list<integer> imageurl=new arraylist<>();
    imageurl.add(r.mipmap.aiyo);
    imageurl.add(r.mipmap.dipang1);
    imageurl.add(r.mipmap.ic_launcher);
    banner.setdata(imageurl);

最后提供两个github上大神封装好的轮播图

建议不太会的同学先搞清楚基本的逻辑在使用第三方库


https://github.com/bingoogolapple/bgabanner-android

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网