Android 使用ViewPager 做的半吊子的图片轮播-白红宇

Android 使用ViewPager 做的半吊子的图片轮播

阅读量：6067 次

发布时间：2019-06-20

本文共 5800 字，大约阅读时间需要 19 分钟。

Android 使用ViewPager 做的半吊子的图片轮播

效果图

虽然不咋样，但是最起码的功能是实现了,下面我们来一步步的实现它。

界面

下面我们来分析一下界面的构成

整体的布局: 因为我们要做出这种，一层叠加一层的效果，就目前开来只有 FrameLayout 布局能够做出来的。

下面的小点：明显的我们这里用的是RadioButton控件来做的。

黑色的边框: 为了更好的显示图片轮播的区域，我们用 shapexml 文件，为我们的图片轮播添加了一个边框。

ui的主体:因为我们的图片是要进行轮播的，我们这里用了ViewPager作为了该界面的主体。

代码

代码的分析

我们是要可以滑动的，这一点需要用ViewPager来实现，有ViewPager就要有我们自己实现PagerAdapter

我们需要生成在ViewPager上显示的图片，所以我们要通过代码来生成一些ImageView控件。

而且我们需要间隔一定的时间来进行图片的切换。

而且随着图片的自动切换，我们下面的RadioButton也要跟着选中

为了更好的用户体验，我们的RadioButton不能手动的选中

成员变量

private RadioButton rb1, rb2, rb3;private ViewPager imageViewPager;private List
    
      radiobuttionList;// 图片轮播的点的集合private List
     
       drawIdList; //图片id的集合private List
      
        imageViewList; //要在ViewPager上显示的内容private int pageIndex = 0; //viewpagr页面的索引private int countDown = 3; //切换页面的倒计时

一些初始化方法

/** 获取我们需要的view* */private void initFindView() {    rb1 = (RadioButton) this.findViewById(R.id.dot1);    rb2 = (RadioButton) this.findViewById(R.id.dot2);    rb3 = (RadioButton) this.findViewById(R.id.dot3);        imageViewPager = (ViewPager) this.findViewById(R.id.img_cycle_viewpager);}/** 将屏幕上的点整合起来* */private void initDots() {    radiobuttionList = new ArrayList
    
     ();    radiobuttionList.add(rb1);    radiobuttionList.add(rb2);    radiobuttionList.add(rb3);      //使RadioButton不能手动选中    for (RadioButton rb : radiobuttionList) {        rb.setClickable(false);    }}/** 初始化要加载的图片* */private void initImage() {    this.drawIdList = new ArrayList
     
      ();    drawIdList.add(R.drawable.grape);    drawIdList.add(R.drawable.strawberry);    drawIdList.add(R.drawable.watermelon);}/** 初始化ViewPage所需要的ImageView* */private void initImageView() {    imageViewList = new ArrayList
      
       ();    for (int i = 0; i < 3; i++) {        //初始化ImageView的属性        ImageView imageView = new ImageView(this);        //设置ImageView的属性，使ImageView的大小是填充父窗体的        ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(-1, -1);        //让ImageView应用这些属性        imageView.setLayoutParams(lp);        //使ImageView的图像填充        imageView.setScaleType(ImageView.ScaleType.FIT_XY);                this.imageViewList.add(imageView);    }}//在onCrate方法中调用这些初始化@Overrideprotected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);    initFindView();    initDots();    initImage();    initImageView();    //设置ViewPager page改变的监听    this.imageViewPager.addOnPageChangeListener(this);    //为ViewPager设置Adapter    this.imageViewPager.setAdapter(new MyPagerAdapter(this, imageViewList, drawIdList));    //开启线程，一定时间后切换图片    new Thread(this).start();}

PagerAdapter

package com.example.it.studyimagerecycle;import android.content.Context;import android.support.v4.view.PagerAdapter;import android.view.View;import android.view.ViewGroup;import android.widget.ImageView;import com.bumptech.glide.Glide;import java.util.List;public class MyPagerAdapter extends PagerAdapter {    private final Context context; //上下文环境    private final List
    
      imgList; //在ViewPager中显示的集合    private final List
     
       imageViewList; //图片资源Id的集合    public MyPagerAdapter(Context context, List
      
        imageViewList, List
       
         imageIdList) {        this.context = context;        this.imgList = imageIdList;        this.imageViewList = imageViewList;    }    //释放占用的资源    @Override    public void destroyItem(ViewGroup container, int position, Object object) {        container.removeView(this.imageViewList.get(position));    }    //获取可滑动页面的数量    @Override    public int getCount() {        return imageViewList.size();    }    @Override    public boolean isViewFromObject(View view, Object object) {        return view == object;    }    /*    * 实例化item    * */    @Override    public Object instantiateItem(ViewGroup container, int position) {        ImageView imageView = this.imageViewList.get(position);        int id = this.imgList.get(position);        //加载出指定的图片，这里使用Glide这个开源项目，图片压缩        Glide.with(this.context).load(id).into(imageView);        container.addView(imageView);                return imageView;    }}

ViewPager页面改变的事件

因为代码是写在Activity中的，我们要让Activity实现 ViewPager.OnPageChangeListener 接口。

@Overridepublic void onPageScrolled(int position, float positi}/** 页面被选中的时候触发* 我们要在这个页面中处理，当我们手动滑动页面的时候要处理的业务逻辑* */@Overridepublic void onPageSelected(int position) {    //获取应该是选中状态的RadioButton    RadioButton radioButton = radiobuttionList.get(position);    //设置radioButton为选中状态    radioButton.setChecked(true);    //重置倒计时    this.countDown = 3;    //重新设置pageIndex    this.pageIndex = position;}@Overridepublic void onPageScrollStateChanged(int state) {}

子线程更新选中的页面

/** 倒计时进行图片的切换* */@Overridepublic void run() {    //进行图片转换的前提是我们的Activity的资源没有被回收。    while (MainActivity.this.isDestroyed() == false) {        //让线程睡眠一秒，实现倒计时功能        SystemClock.sleep(1000l);        //倒计时减去        countDown--;        //如果倒计时结束那么进行页面的转换        if (countDown == 0) {            //设置该被选中的Page的索引，为原来的所以+1            this.pageIndex++;            //如果是我们的page已经是最后一个了，那么我么的第一个page应该被选中            if (pageIndex == this.radiobuttionList.size())                this.pageIndex = 0;            //更新ui            runOnUiThread(new Runnable() {                @Override                public void run() {                    //设置选中项                    imageViewPager.setCurrentItem(pageIndex);                }            });        }    }}