一种利用ImageView做轮播的尝试Demo

轮播插件GitHub什么的很多，很多都是用ViewPager来做的。但是我想试试ImageView或者OpenGL来做试试，今天想使用ImageView加X轴的移动来做了一个试试水，下次再用OpenGL做个高性能的的：

 

首先是View文件，做法是使用切牌的方式轮播两张ImageView产生轮播效果，当然大家也可以加一点点东西改成列表图片。一些关于自定义控件的设计思路可以参考源代码中的注释：

package cjz.project.viewgallery;

import android.content.Context;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.ImageView;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by cjz on 2019/4/3.
 */

public class GalleryView extends FrameLayout{
    /**未来扩充为可以添加图片做轮播预留的数组表**/
    private List<String> photoList = new ArrayList<>();
    /**两个ImageView做轮播**/
    private ImageView imageViewA, imageViewB;
    /**宏：触发滑动**/
    private final int IMAGEVIEW_SWEEP = 0;
    /**是否保持轮播**/
    private boolean run = true;
    /**轮播线程**/
    private Loop loop = null;

    /**轮播线程**/
    private class Loop extends Thread{
        @Override
        public void run() {
            super.run();
            while(run){
                try {
                    Thread.sleep(3);
                    handler.sendEmptyMessage(IMAGEVIEW_SWEEP);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
            loop = null;
        }
    }

    /**间接操作UI，匿名内部类覆盖重写一下就够用**/
    private Handler handler = new Handler(){
        private ImageView currentImageView = null;
        private int step = 10;
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            switch (msg.what){
                case IMAGEVIEW_SWEEP:
                    if(currentImageView == null){
                        currentImageView = imageViewA;
                    }
                    /*A、B首尾相连，首尾在到达左边框后互为交换*/
                    if(currentImageView != null){
                        if(currentImageView.getX() + currentImageView.getWidth() <= 0){
                            if(currentImageView == imageViewA){
                                currentImageView = imageViewB;
                                currentImageView.setX(0);
                                imageViewA.setX(currentImageView.getX() + currentImageView.getWidth());
                                //Log.i("使用","使用ImageViewB");
                            } else {
                                currentImageView = imageViewA;
                                currentImageView.setX(0);
                                imageViewB.setX(currentImageView.getX() + currentImageView.getWidth());
                                //Log.i("使用","使用ImageViewA");
                            }
                        }
                        imageViewA.setX(imageViewA.getX() - step);
                        imageViewB.setX(imageViewB.getX() - step);
                    }
                    break;
            }
        }
    };

    public GalleryView(Context context) {
        super(context);
        init(context);
    }

    public GalleryView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    public GalleryView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //需要等View的大小都在onMeasure中确定完毕，才能getWidth等，不然在构造函数那里就调用getWidth根本测不出宽度等数据
        //两个ImageView首尾相接
        imageViewA.setX(0);
        imageViewB.setX(imageViewA.getX() + imageViewA.getWidth());
        startLoop();
        //检测本控件的依附情况
        this.addOnAttachStateChangeListener(new OnAttachStateChangeListener() {

            //重新被依附就启动轮播线程
            @Override
            public void onViewAttachedToWindow(View v) {
                run = true;
                startLoop();
            }

            //脱离依附则关闭循环线程
            @Override
            public void onViewDetachedFromWindow(View v) {
                run = false;
                if(loop != null && loop.isAlive()){
                    try {
                        loop.interrupt();
                    } catch (Exception e){
                        e.printStackTrace();
                    }
                }
            }
        });
    }

    /**轮播触发**/
    private void startLoop(){
        if(loop == null){
            loop = new Loop();
        }
        if(!loop.isAlive()) {
            loop.start();
        }
    }

    /**初始化，加载图像等等**/
    private void init(Context context){
        imageViewA = new ImageView(context);
        imageViewB = new ImageView(context);
        imageViewA.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
        imageViewB.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
        imageViewA.setImageResource(R.mipmap.ic_launcher);
        imageViewB.setImageResource(R.mipmap.ic_launcher_round);
        this.addView(imageViewA);
        this.addView(imageViewB);
    }


    public void addPhoto(String filePath){
        if(filePath != null){
            photoList.add(filePath);
        }
    }


}

然后是调用时的XML文件，大小是可以调节的。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:id="@+id/fl_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="cjz.project.viewgallery.MainActivity">

    <cjz.project.viewgallery.GalleryView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </cjz.project.viewgallery.GalleryView>
</FrameLayout>

 

效果如图：