Android实现轮播图片效果

本文实例为大家分享了android实现轮播图片效果的具体代码，供大家参考，具体内容如下

一、原理

首先，将这些要轮播的图片和一些文本分别放置在不同的数据集合中，程序启动的时候默认显示一组图片和文本数据，然后启动一个定时器，每隔一段时间便替换掉显示的图片和文本数据，同时加入一些动画效果，已达到轮播的特效。同时，我们也要实现手指滑动图片达到轮播的效果。

二、实现

1、程序启动界面mainactivity

public class mainactivity extends appcompatactivity implements imagebannerframlayout.framlayoutlisenner{
  private imagebannerframlayout mgroup;
  private int[] ids = new int[] {
      r.drawable.i1,//图片资源1
      r.drawable.i2,//图片资源2
  };
  @override
  protected void oncreate(bundle savedinstancestate) {
    super.oncreate(savedinstancestate);
    setcontentview(r.layout.activity_main);
    //计算当前手机宽度
    displaymetrics displaymetrics = new displaymetrics();
    getwindowmanager().getdefaultdisplay().getmetrics(displaymetrics);
    int width = displaymetrics.widthpixels;
    mgroup = (imagebannerframlayout) findviewbyid(r.id.image_group);
    mgroup.setlisenner(this);
    list<bitmap> list = new arraylist<>();
    for (int i = 0; i < ids.length; i++) {
      bitmap bitmap = bitmapfactory.decoderesource(getresources(),ids[i]);
      list.add(bitmap);
    }
    mgroup.addbitmaps(list);
  }
 
  @override
  public void chickimageindex(int pos) {
    toast.maketext(this,"索引值 = " + pos,toast.length_short).show();
  }
}

2、新建包view下面新建两个类

1）新建imagebarnnerviewgroup类继承自viewgroup

public class imagebarnnerviewgroup extends viewgroup {
  private int children;//我们view group的子视图总个数
  private int childwidth;//子视图的宽度
  private int childheight;//子视图的高度
 
  private int x;//此时的x的值代表的是第一次按下的位置的横坐标，每一次移动过的过程中 移动之前的位置横坐标
  private int index = 0;//代表名为每张图片的索引
  private scroller scroller;
 
  /**
   * 利用一个单击变量开关进行判断，离开屏幕的一瞬间判断用户的操作是点击
   */
  private boolean isclick;//true的时候点击事件，false的时候不是点击事件
  private imagebarnnerlister lister;
 
  private imagebarnnerviewgrouplisnner barnnerviewgrouplisnner;
 
  public imagebarnnerlister getlister() {
    return lister;
  }
 
  public void setlister(imagebarnnerlister lister) {
    this.lister = lister;
  }
 
  public imagebarnnerviewgrouplisnner getbarnnerviewgrouplisnner() {
    return barnnerviewgrouplisnner;
  }
  public void setbarnnerviewgrouplisnner(imagebarnnerviewgrouplisnner barnnerviewgrouplisnner) {
    this.barnnerviewgrouplisnner = barnnerviewgrouplisnner;
  }
  public interface imagebarnnerlister {
    void chickimageindex(int pos);//pos代表的是我们当前的图片的具体索引值
  }
  /**
   * 实现轮播图底部圆点切换效果
   * 自定义一个继承自fragmenlayou布局，利用fragmelayout布局特性
   */
  
  //自动轮播
  private boolean isauto = true;//默认情况下开启轮播
  private timer timer = new timer();
  private timertask timertask;
  
  @suppresslint("handlerleak")
  private android.os.handler autohandler = new android.os.handler() {
    @override
    public void handlemessage(message msg) {
      switch (msg.what) {
        case 0://我们需要图片的自动轮播
          if (++index >= children) {//如果是最后一张图片，从第一张开始
            index = 0;
          }
          scrollto(childwidth * index,0);
          barnnerviewgrouplisnner.selectimage(index);
          break;
        default:
      }
    }
  };
 
  private void startauto() {
    isauto = true;
 
  }
 
  private void stopauto() {
    isauto = false;
  }
 
  /**
   * 采用timer，timertask，handler三者结合的方式来实现自动轮播
   */
 
  public imagebarnnerviewgroup(context context) {
    super(context);
    initobj();
  }
 
  public imagebarnnerviewgroup(context context, attributeset attrs) {
    super(context, attrs);
    initobj();
  }
 
  public imagebarnnerviewgroup(context context, attributeset attrs, int defstyleattr, int defstyleres) {
    super(context, attrs, defstyleattr, defstyleres);
    initobj();
  }
 
 
  private void initobj() {
    scroller = new scroller(getcontext());
 
    timertask = new timertask() {
      @override
      public void run() {
        if (isauto) {//开启轮播图
          autohandler.sendemptymessage(0);
        }
      }
    };
    timer.schedule(timertask,100,3000);
  }
 
  @override
  public void computescroll() {
    super.computescroll();
    if (scroller.computescrolloffset()) {
      scrollto(scroller.getcurrx(),0);
      invalidate();//重绘
    }
  }
 
  @override
  protected void onmeasure(int widthmeasurespec, int heightmeasurespec) {
    super.onmeasure(widthmeasurespec, heightmeasurespec);
    //1.求出子视图的个数
    children = getchildcount();//我们可以知道自试图的个数
    if (0 == children)
    {
      setmeasureddimension(0,0);
    } else {
      measurechildren(widthmeasurespec, heightmeasurespec);
      //此时我们以第一个子视图=为基准，也就是说我们的view group
      view view = getchildat(0);
      childwidth = view.getmeasuredwidth();
      childheight = view.getmeasuredheight();
      int width = view.getmeasuredwidth() * children;
      setmeasureddimension(width,childheight);
    }
    //2.测量子视图的宽度和高度
    //3.根据子视图的狂赌和高度，求出该viewgroup的宽度和高度
  }
 
  @override
  public boolean onintercepttouchevent(motionevent ev) {
    return super.onintercepttouchevent(ev);
  }
  /**
   * 用两种方式来实现轮播图的手动轮播
   * 1，利用scrollto，scrollby 完成轮播图的手动轮播
   * 1，利用scroller 对象完成轮播图的手动效果
   * @param event
   * @return
   */
 
  @override
  public boolean ontouchevent(motionevent event) {
    switch (event.getaction()) {
      case motionevent.action_down://表示用户按下的一瞬间
        stopauto();//停止图片轮播
        if (!scroller.isfinished()) {
          scroller.abortanimation();
        }
        isclick = true;
        x=(int)event.getx();
        break;
      case motionevent.action_move://表示用户按下之后在屏幕上移动的过程
        int movex = (int) event.getx();
        int distance = movex - x;
        scrollby(-distance,0);
        x = movex;
        isclick = false;
        break;
      case motionevent.action_up://标识的是用户抬起的一瞬间
        int scrollx = getscrollx();
        index = (scrollx + childwidth / 2) / childwidth;
        if (index < 0) {  //已经滑动到了最左边
          index = 0;
        } else if (index > children - 1) {//说明已经滑动到了最右边
          index = children - 1;
        }
 
        if (isclick) { //点击事件
          lister.chickimageindex(index);
        } else {
          int dx = index * childwidth - scrollx;
          scroller.startscroll(scrollx,0,dx,0);
          postinvalidate();
          barnnerviewgrouplisnner.selectimage(index);
        }
        startauto();//开启图片轮播
        break;
      default:
    }
    return true;
    //返回true的目的是告诉该view group容器的父view 我们已经处理好了该事件
  }
 
  @override
  protected void onlayout(boolean b, int i, int i1, int i2, int i3) {
    if (b) {
      int lefrmargin = 0;
      for (int j = 0; j < children; j++) {
        view view = getchildat(j);
        view.layout(lefrmargin,0,lefrmargin + childwidth,childheight);
        lefrmargin += childwidth;
      }
    }
  }
 
  public interface imagebarnnerviewgrouplisnner{
    void selectimage(int index);
  }
}

2）新建imagebannerframlayout类继承自framelayout实现两个接口

public class imagebannerframlayout extends framelayout implements imagebarnnerviewgroup.imagebarnnerviewgrouplisnner,imagebarnnerviewgroup.imagebarnnerlister{
 
  private imagebarnnerviewgroup imagebarnnerviewgroup;
  private linearlayout linearlayout;
 
  private framlayoutlisenner lisenner;
 
  public framlayoutlisenner getlisenner() {
    return lisenner;
  }
 
  public void setlisenner(framlayoutlisenner lisenner) {
    this.lisenner = lisenner;
  }
 
  public imagebannerframlayout(@nonnull context context) {
    super(context);
    initimagebarnnerviewgroup();
    initdotlinearlayout();
  }
 
 
 
  public imagebannerframlayout(@nonnull context context, @nullable attributeset attrs) {
    super(context, attrs);
    initimagebarnnerviewgroup();
    initdotlinearlayout();
  }
 
  public imagebannerframlayout(@nonnull context context, @nullable attributeset attrs, int defstyleattr) {
    super(context, attrs, defstyleattr);
    initimagebarnnerviewgroup();
    initdotlinearlayout();
  }
 
  public void addbitmaps(list<bitmap> list) {
    for (int i = 0; i < list.size(); i++) {
      bitmap bitmap = list.get(i);
      addbitmaptoimagebarnnerviewgroup(bitmap);
      adddottolinearlayout();
    }
  }
 
  private void adddottolinearlayout() {
    imageview iv = new imageview(getcontext());
    linearlayout.layoutparams layoutparams = new linearlayout.layoutparams
        (linearlayout.layoutparams.wrap_content,linearlayout.layoutparams.match_parent);
    layoutparams.setmargins(5,5,5,5);
    iv.setlayoutparams(layoutparams);
    iv.setimageresource(r.drawable.dot_normal);
    linearlayout.addview(iv);
  }
 
  private void addbitmaptoimagebarnnerviewgroup(bitmap bitmap) {
    imageview imageview = new imageview(getcontext());
    imageview.setscaletype(imageview.scaletype.center_crop);
    imageview.setlayoutparams(new viewgroup.layoutparams(viewgroup.layoutparams.wrap_content,viewgroup.layoutparams.wrap_content));
    imageview.setimagebitmap(bitmap);
    imagebarnnerviewgroup.addview(imageview);
  }
 
  //初始化自定义图片轮播功能核心类
  private void initimagebarnnerviewgroup() {
    imagebarnnerviewgroup = new imagebarnnerviewgroup(getcontext());
    framelayout.layoutparams layoutparams = new framelayout.layoutparams
        (framelayout.layoutparams.match_parent, framelayout.layoutparams.match_parent);
    imagebarnnerviewgroup.setlayoutparams(layoutparams);
    imagebarnnerviewgroup.setbarnnerviewgrouplisnner(this);//将linsnner传递给framlayout
    imagebarnnerviewgroup.setlister(this);
    addview(imagebarnnerviewgroup);
  }
 
  //初始化底部圆点布局
  private void initdotlinearlayout() {
    linearlayout = new linearlayout(getcontext());
    framelayout.layoutparams layoutparams = new framelayout.layoutparams
        (framelayout.layoutparams.match_parent, 40);
    linearlayout.setlayoutparams(layoutparams);
    linearlayout.setorientation(linearlayout.horizontal);
    linearlayout.setgravity(gravity.center);
 
    linearlayout.setbackgroundcolor(color.red);
    addview(linearlayout);
 
    framelayout.layoutparams layoutparams1 = (layoutparams) linearlayout.getlayoutparams();
    layoutparams.gravity = gravity.bottom;
    linearlayout.setlayoutparams(layoutparams1);
    if (build.version.sdk_int >= build.version_codes.honeycomb) {
      linearlayout.setalpha(0.5f);
    } else {
      linearlayout.getbackground().setalpha(100);
    }
  }
 
 
  @override
  public void selectimage(int index) {
    int count = linearlayout.getchildcount();
    for (int i = 0;i < count; i++) {
      imageview iv = (imageview) linearlayout.getchildat(i);
      if (i == index) {
        iv.setimageresource(r.drawable.dot_select);
      } else {
        iv.setimageresource(r.drawable.dot_normal);
      }
    }
  }
 
  @override
  public void chickimageindex(int pos) {
    lisenner.chickimageindex(pos);
  }
 
  public interface framlayoutlisenner{
    void chickimageindex(int pos);
  }
}

3、程序布局页面activity_main

<?xml version="1.0" encoding="utf-8"?>
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context=".mainactivity">
  <com.example.tony.imagegroup.view.imagebannerframlayout
    android:id="@+id/image_group"
    android:layout_width="match_parent"
    android:layout_height="200dp">
  </com.example.tony.imagegroup.view.imagebannerframlayout>
</relativelayout>

4、新建两个drawable资源文件dot_normal.xml和dot_select.xml，实现轮播图底部小圆点

不同的是前者颜色为白色后者为黑色

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="oval">
  <solid android:color="@android:color/white"/>
  <size android:height="10dp"
    android:width="10dp"/>
</shape>

三、运行结果

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