Android开发-轮播图的详细实现

实现不添加任何依赖自己实现轮播图，使用ViewPager和布局容器来实现轮播的功能

综合了网上几位博主的文章，这里提供最直接最明了的实现。
实现效果如下，这里只是简单的实现，以后有机会再改进，也欢迎大家来指导我。

1. 万事先改布局呗，activity_main.xml：

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"
    android:layout_height="225dp"
    android:layout_margin="15dp"
    android:orientation="vertical">

    <!--存放图片的ViewPager-->
    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/loopviewpager">
    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="25dp"
        android:layout_gravity="bottom"
        android:orientation="horizontal"
        android:gravity="center_vertical"
        android:background="#33000000">
        <!-- 标题-->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@android:color/white"
            android:layout_marginLeft="10dp"
            android:layout_gravity="left"
            android:id="@+id/loop_dec"/>
        <!-- 小圆点-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/ll_dots_loop"
            android:orientation="horizontal"
            android:gravity="right"
            android:layout_marginRight="10dp"
            android:padding="10dp">
        </LinearLayout>
    </LinearLayout>
</FrameLayout>

这里可以看到我们要用三个ID，用于放图片的viewpager，标题和圆点指示器，这里用一个LinearLayout当做容器来加载圆点指示器。

2. 增加一张轮播图片，两张圆点指示器的png图，这里简单的用了一张图用五次来实现轮播，圆点大家可以用画图工具画一个像素小一点的圆点就行了，最后可以用padding来修正就好。如果还懒得话文末有demo地址自己去下载吧。

在drawable添加dot.xml文件，选中时是白色，未选中是灰色点。

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/white_dot" android:state_enabled="true"/>
    <item android:drawable="@drawable/gray_dot"  android:state_enabled="false"/>

</selector>

向value中新建一个pager_img.xml文件添加几个轮播图id值用来到时候引用监听用户点击动作。

<resources>
    <item name="pager_img1" type="id"></item>
    <item name="pager_img2" type="id"></item>
    <item name="pager_img3" type="id"></item>
    <item name="pager_img4" type="id"></item>
    <item name="pager_img5" type="id"></item>
</resources>

3. 新建LoopViewAdapter类继承PagerAdapter做ViewPager的适配器并重写其中的几个方法

class LoopViewAdapter extends PagerAdapter{

    private ArrayList<ImageView> imageViewList;

    public LoopViewAdapter(ArrayList<ImageView> mImgList){
        imageViewList = mImgList;
    }

    // 1. 返回要显示的条目内容, 创建条目
    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        // container: 容器: ViewPager
        // position: 当前要显示条目的位置 0 -> 4
        //newPosition = position % 5
        int newPosition = position % imageViewList.size();
        ImageView img = imageViewList.get(newPosition);
        // a. 把View对象添加到container中
        container.addView(img);
        // b. 把View对象返回给框架, 适配器
        return img;
    }

    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
        container.removeView((View)object);
    }

    @Override
    public int getCount() {
        return Integer.MAX_VALUE;   //返回一个无限大的值，可以 无限循环!!!!!
    }

    /**
     * 判断是否使用缓存, 如果返回的是true, 使用缓存. 不去调用instantiateItem方法创建一个新的对象
     */
    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object o) {
        return view == o ;
    }
}

注意这个重写的getCount()方法，刚开始在其他博主的文章里这个方法返回的值可能是轮播图的个数，但是我实现的时候却发现不能实现无限轮播，只能轮播一次，最后我将这个值改为一个大的值发现实现了无限轮播，大家也可以试一下，看自己是不是也遇到了同样的问题。

4. 新建pagerOnClickListener类实现View.OnClickListener接口。

public class pagerOnClickListener implements View.OnClickListener{

    Context mContext;
    public pagerOnClickListener(Context mContext){
        this.mContext=mContext;
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.pager_img1:
                Toast.makeText(mContext, "图片1被点击", Toast.LENGTH_SHORT).show();
                break;
            case R.id.pager_img2:
                Toast.makeText(mContext, "图片2被点击", Toast.LENGTH_SHORT).show();
                break;
            case R.id.pager_img3:
                Toast.makeText(mContext, "图片3被点击", Toast.LENGTH_SHORT).show();
                break;
            case R.id.pager_img4:
                Toast.makeText(mContext, "图片4被点击", Toast.LENGTH_SHORT).show();
                break;
            case R.id.pager_img5:
                Toast.makeText(mContext, "图片5被点击", Toast.LENGTH_SHORT).show();
                break;
        }
    }
}

5. 最后修改MainActivity中的代码就好啦

public class MainActivity extends AppCompatActivity {

    private ViewPager viewPager;  //轮播图模块
    private int[] mImg;
    private int[] mImg_id;
    private String[] mDec;
    private ArrayList<ImageView> mImgList;
    private LinearLayout ll_dots_container;
    private TextView loop_dec;
    private int previousSelectedPosition = 0;
    boolean isRunning = false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initLoopView();  //实现轮播图
    }

    private void initLoopView() {
        viewPager = (ViewPager)findViewById(R.id.loopviewpager);
        ll_dots_container = (LinearLayout)findViewById(R.id.ll_dots_loop);
        loop_dec = (TextView)findViewById(R.id.loop_dec);

        // 图片资源id数组
        mImg = new int[]{
                R.drawable.test3,
                R.drawable.test3,
                R.drawable.test3,
                R.drawable.test3,
                R.drawable.test3
        };

        // 文本描述
        mDec = new String[]{
                "Test1",
                "Test2",
                "Test3",
                "Test4",
                "Test5"
        };

        mImg_id = new int[]{
                R.id.pager_img1,
                R.id.pager_img2,
                R.id.pager_img3,
                R.id.pager_img4,
                R.id.pager_img5
        };

        // 初始化要展示的5个ImageView
        mImgList = new ArrayList<ImageView>();
        ImageView imageView;
        View dotView;
        LinearLayout.LayoutParams layoutParams;
        for(int i=0;i<mImg.length;i++){
            //初始化要显示的图片对象
            imageView = new ImageView(this);
            imageView.setBackgroundResource(mImg[i]);
            imageView.setId(mImg_id[i]);
            imageView.setOnClickListener(new pagerOnClickListener(getApplicationContext()));
            mImgList.add(imageView);
            //加引导点
            dotView = new View(this);
            dotView.setBackgroundResource(R.drawable.dot);
            layoutParams = new LinearLayout.LayoutParams(10,10);
            if(i!=0){
                layoutParams.leftMargin=10;
            }
            //设置默认所有都不可用
            dotView.setEnabled(false);
            ll_dots_container.addView(dotView,layoutParams);
        }

        ll_dots_container.getChildAt(0).setEnabled(true);
        loop_dec.setText(mDec[0]);
        previousSelectedPosition=0;
        //设置适配器
        viewPager.setAdapter(new LoopViewAdapter(mImgList));
        // 把ViewPager设置为默认选中Integer.MAX_VALUE / t2，从十几亿次开始轮播图片，达到无限循环目的;
        int m = (Integer.MAX_VALUE / 2) %mImgList.size();
        int currentPosition = Integer.MAX_VALUE / 2 - m;
        viewPager.setCurrentItem(currentPosition);

        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int i, float v, int i1) {

            }

            @Override
            public void onPageSelected(int i) {
                int newPosition = i % mImgList.size();
                loop_dec.setText(mDec[newPosition]);
                ll_dots_container.getChildAt(previousSelectedPosition).setEnabled(false);
                ll_dots_container.getChildAt(newPosition).setEnabled(true);
                previousSelectedPosition = newPosition;
            }

            @Override
            public void onPageScrollStateChanged(int i) {

            }
        });

        // 开启轮询
        new Thread(){
            public void run(){
                isRunning = true;
                while(isRunning){
                    try{
                        Thread.sleep(5000);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                    //下一条
                    runOnUiThread(new Runnable() {
                        @Override
                        public void run() {
                            viewPager.setCurrentItem(viewPager.getCurrentItem()+1);
                        }
                    });
                }
            }
        }.start();

    }
}

最后附上demo源码：https://github.com/GYongJia/LoopViewDemo