Android实现图片轮播列表

这个效果在交友app中比较常见，一般作为首页使用，顶部是一个自动轮播的viewpager，下面放一个横向linearlayout，最下面要放一个listview，但是注意这三个部分都支持滑动，应该和固定在顶部的标题栏和底部的操作栏分开，也就是把viewpager和linearlayout以及listview都放在父控件scrollview里面

布局文件代码：

<?xml version="1.0" encoding="utf-8"?>

<linearlayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical">

  <include layout="@layout/title_bar"/>

<scrollview
  android:layout_width="match_parent"
  android:id="@+id/sv"
  android:layout_height="0dp"
  android:layout_weight="1">

<linearlayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:orientation="vertical">

  <android.support.v4.view.viewpager
    android:id="@+id/vp"
    android:layout_width="match_parent"
    android:layout_height="200dp"/>

  <linearlayout
    android:id="@+id/ivs"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_margin="10dp"
    android:orientation="horizontal">

    <imageview
      android:id="@+id/iv1"
      android:layout_weight="1"
      android:layout_marginstart="30dp"
      android:layout_width="60dp"
      android:layout_height="60dp"
      android:src="@drawable/index_icon"/>

    <imageview
      android:id="@+id/iv2"
      android:layout_weight="1"
      android:layout_width="60dp"
      android:layout_height="60dp"
      android:src="@drawable/index_icon"/>

    <imageview
      android:id="@+id/iv3"
      android:layout_weight="1"
      android:layout_width="60dp"
      android:layout_height="60dp"
      android:src="@drawable/index_icon"/>

    <imageview
      android:id="@+id/iv4"
      android:layout_weight="1"
      android:layout_marginend="30dp"
      android:layout_width="60dp"
      android:layout_height="60dp"
      android:src="@drawable/index_icon"/>
  </linearlayout>

  <com.oridway.www.uiframe.utils.listviewforscrollview
    android:id="@+id/lvfsv"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>
</linearlayout>
</scrollview>

  <linearlayout
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:orientation="horizontal">

    <textview
      android:id="@+id/index"
      android:layout_width="60dp"
      android:layout_height="wrap_content"
      android:drawabletop="@drawable/ic_home_black_24dp"
      android:gravity="center"
      android:text="首页"
      android:textcolor="@color/black" />

    <textview
      android:id="@+id/message"
      android:layout_width="60dp"
      android:layout_height="wrap_content"
      android:drawabletop="@drawable/ic_message_black_24dp"
      android:gravity="center"
      android:text="消息"
      android:textcolor="@color/black" />

    <textview
      android:id="@+id/community"
      android:layout_width="60dp"
      android:layout_height="wrap_content"
      android:drawabletop="@drawable/ic_people_black_24dp"
      android:gravity="center"
      android:text="社区"
      android:textcolor="@color/black" />

    <textview
      android:id="@+id/self"
      android:layout_width="60dp"
      android:layout_height="wrap_content"
      android:drawabletop="@drawable/ic_person_black_24dp"
      android:gravity="center"
      android:text="我"
      android:textcolor="@color/black" />
  </linearlayout>
</linearlayout>

主窗口代码：

public class indexactivity extends appcompatactivity implements view.onclicklistener{

  private context mcontext;
  private list<integer> mimagelist;
  private list<candidate> mcandidatelist;
  private viewpageradapter mpageradapter;
  private candidatelistadapter mlistadapter;

  @suppresslint("handlerleak")
  private handler handler = new handler() {

    @override
    public void handlemessage(message msg) {
      //每次将当前的位置加1，也就是向右滑动一次
      vp.setcurrentitem(vp.getcurrentitem() + 1);
      //递归无限循环调用
      handler.sendemptymessagedelayed(0x123, 2000);
    }
  };

  @override
  protected void oncreate(@nullable bundle savedinstancestate) {
    super.oncreate(savedinstancestate);
    setcontentview(r.layout.activity_index);
    butterknife.bind(this);

    initdata();
    initview();
    intlistener();
  }

  //初始化数据源，固定写法 1.实例化容器 2.实例化适配器 3.设置适配器
  private void initdata() {
    mcontext = this;
    mimagelist = new arraylist<>();
    mcandidatelist = new arraylist<>();
    mlistadapter = new candidatelistadapter(mcandidatelist);
    mpageradapter = new viewpageradapter(mimagelist);
    lvfsv.setadapter(mlistadapter);
    vp.setadapter(mpageradapter);

    getlistdata(10);
    getpagerdata();

    //间隔2秒发送一次信息
    handler.sendemptymessagedelayed(0x123, 2000);
  }

  //生成viewpager数据源
  private void getpagerdata() {
    mimagelist.add(r.drawable.bm1);
    mimagelist.add(r.drawable.bm2);
    mimagelist.add(r.drawable.bm3);
    mimagelist.add(r.drawable.bm4);
    mimagelist.add(r.drawable.bm5);
    mimagelist.add(r.drawable.bm6);

    mpageradapter.notifydatasetchanged();
    //初始的位置在正中间
    vp.setcurrentitem(mpageradapter.getcount() / 2);
  }

  //生成listview数据源
  private void getlistdata(int num) {
    for (int i = 0; i < num; i++) {
      candidate candidate = new candidate();
      candidate.setname("姓名:尼尔斯·亨利克·戴维·玻尔");
      candidate.setinfo("职业:学者,物理学家,足球运动员");
      candidate.settrait("成就:哥本哈根学派的创始人,1922年获得诺贝尔物理学奖");
      mcandidatelist.add(candidate);
    }

    mlistadapter.notifydatasetchanged();
  }

  private void initview() {
    tvtitlemiddle.settext("轮播列表");
    //手动设置scrollview的位置
    scrollview.smoothscrollto(0, 0);
  }

  //初始化监听
  private void intlistener() {
    mpageradapter.setmcallback((v, position) -> {
      toast.maketext(mcontext, "position: " + position, toast.length_short).show();
    });

    lvfsv.setonitemclicklistener((parent, view, position, id) -> {
      toast.maketext(mcontext, "position: " + position, toast.length_short).show();
    });

    for (int i = 0; i < 4; i++) {
      ivs.getchildat(i).setonclicklistener(this);
    }
  }

  @override
  public void onclick(view v) {

    switch (v.getid()){
      case r.id.iv1:
      case r.id.iv2:
      case r.id.iv3:
      case r.id.iv4:
        toast.maketext(mcontext, "此处跳转", toast.length_short).show();
    }
  }
}

listview需要覆盖onmeasure方法，代码如下：

public class listviewforscrollview extends listview {
  public listviewforscrollview(context context) {
    super(context);
  }
  public listviewforscrollview(context context, attributeset attrs) {
    super(context, attrs);
  }
  public listviewforscrollview(context context, attributeset attrs,
    int defstyle) {
    super(context, attrs, defstyle);
  }
  @override
  /**
   * 重写该方法，达到使listview适应scrollview的效果
   */
  protected void onmeasure(int widthmeasurespec, int heightmeasurespec) {
    int expandspec = measurespec.makemeasurespec(integer.max_value >> 2,
    measurespec.at_most);
    super.onmeasure(widthmeasurespec, expandspec);
  }
}

viewpager适配器代码：

public class viewpageradapter extends pageradapter implements view.onclicklistener {

  //图片的资源id列表
  private list<integer> mlist;
  private callback mcallback;

  public viewpageradapter(list<integer> mlist) {
    this.mlist = mlist;
  }

  public void setmcallback(callback mcallback) {
    this.mcallback = mcallback;
  }

  public interface callback {
    void onclick(view v, int position);
  }

  @override
  //将适配器中的数据设为无穷大
  public int getcount() {
    return integer.max_value;
  }

  @override
  //固定写法，不覆盖会报错
  public void destroyitem(@nonnull viewgroup container, int position, @nonnull object object) {
    container.removeview((view) object);
  }

  @override
  //固定写法
  public boolean isviewfromobject(@nonnull view view, @nonnull object object) {
    return view == object;
  }

  @nonnull
  @override
  public object instantiateitem(@nonnull viewgroup container, int position) {
    layoutinflater inflater = layoutinflater.from(container.getcontext());
    imageview imageview = (imageview) inflater.inflate(r.layout.item_image_pager, null);

    //将position转换成余数
    int realposition = position % mlist.size();
    imageview.setimageresource(mlist.get(realposition));
    imageview.setonclicklistener(this);
    //tag放跳转需要的数据
    imageview.settag(realposition);
    //将实例加入父控件
    container.addview(imageview);
    return imageview;
  }

  @override
  //使用接口将position回传
  public void onclick(view v) {
    mcallback.onclick(v, (int) v.gettag());
  }
}

大功告成，实现效果如下：

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