圖片輪播控制元件，使用Picasso載入圖片

/**
 * 軌跡球
 * Created by pc20170521 on 2018-01-29.
 */

public class PointBall extends LinearLayout {
    private Context mContext;
    private ArrayList<ImageView> pointViewList = new ArrayList<>();//軌跡球list
    private int pointViewCount = 0;//軌跡球個數
    private int pointViewCunrent = 0
 
;//軌跡球當前位置

    public PointBall(Context context) {
        super(context);
        this.mContext = context;
        initPoint();
    }

    public PointBall(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        this.mContext = context;
        initPoint();
    }

    /****初始化軌跡球佈局**/
 

    private void initPoint() {
        setGravity(Gravity.CENTER_HORIZONTAL);
        pointViewList.clear();
        for (int i = 0; i < pointViewCount; i++) {
            ImageView iv = new ImageView(mContext);
            pointViewList.add(iv);
            iv.setScaleType(ImageView.ScaleType.FIT_XY);//將圖片邊界縮放，以適應檢視邊界時的可選項
 

            if (i == 0){
                Picasso.with(mContext).load(R.mipmap.banner_roller_selected).into(iv);
            }else {
                Picasso.with(mContext).load(R.mipmap.banner_roller_unselected).into(iv);
            }

            LayoutParams params = new LayoutParams(20, 20);
            addView(iv, params);
        }
    }

    /*****初始化軌跡球的個數****/
    public void initPointBallCount(int size){
        if (size >= 0){
            pointViewCount = size;
            initPoint();
        }
    }

    /****更新軌跡球的位置***/
    public void updatePointBallPosition(int position){
        if (position <= pointViewCount - 1){
            Picasso.with(mContext).load(R.mipmap.banner_roller_unselected).into(pointViewList.get(pointViewCunrent));
            pointViewCunrent = position;
            Picasso.with(mContext).load(R.mipmap.banner_roller_selected).into(pointViewList.get(pointViewCunrent));
        }
    }

}

圖片輪播控制元件類ImageFlipper.java

/**
 * 圖片輪播控制元件
 * Created by pc20170521 on 2018-01-29.
 */

public class ImageFlipper extends RelativeLayout implements GestureDetector.OnGestureListener {

    private Context mContext;
    private ViewFlipper viewFlipper;
    public static int intervalTime = 3000;//圖片輪播時間間隔
    private PointBall pointBall;//軌跡球類
    private MyHandler handler;
    private int tatol;//圖片總數
    private GestureDetector mGestureDetector;//手勢

    /****設定圖片的寬高***/
    public static int width = 0;
    public static int height = 0;

    private ImageThread imageThread;

    public ImageFlipper(Context context) {
        super(context);
        this.mContext = context;
    }

    public ImageFlipper(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.mContext = context;
    }

    public ImageFlipper(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.mContext = context;
    }

    /*****
     * 初始化佈局，啟動圖片輪播
     * ids 圖片陣列
     * drawable 預設圖片
     * ****/
    public void init(int []ids, int drawable){
        mGestureDetector = new GestureDetector(this);
        handler = new MyHandler();
        LayoutInflater inflater = LayoutInflater.from(mContext);
        final View view = inflater.inflate(R.layout.flipper, null);
        viewFlipper = (ViewFlipper) view.findViewById(R.id.view_flipper);
        pointBall = (PointBall) view.findViewById(R.id.banner_point);

        try {
            setBanner(ids, drawable);
            if (imageThread == null || imageThread.isInterrupted()){
                imageThread = new ImageThread();
                imageThread.start();
            }
        }catch (Exception e){
            e.printStackTrace();
        }
        addView(view);
    }

    /****
     * 設定圖片迴圈滾動
     * @param ids
     * @param drawable
     */
    private void setBanner(int []ids, int drawable){
        int size = ids.length;
        if (size == 0){
            tatol = 1;
            pointBall.initPointBallCount(tatol);
            final ImageView view = new ImageView(mContext);
            Picasso.with(mContext).load(drawable).into(view);
            addView(view);
        }else {
            tatol = size;
            pointBall.initPointBallCount(tatol);
            for (int i = 0; i < tatol; i++) {
                final ImageView view = new ImageView(mContext);
                view.setLayoutParams(new LayoutParams(width, height));
                Picasso.with(mContext).load(ids[i]).into(view);
                viewFlipper.addView(view);
            }
        }
    }

    /******
     * 設定哪個子檢視將被顯示出來
     * @param whacthChild 將要顯示的子檢視的索引
     */
    private void setDisplayedChild(int whacthChild){
        viewFlipper.setDisplayedChild(whacthChild);
        pointBall.updatePointBallPosition(whacthChild);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        return mGestureDetector.onTouchEvent(event);
    }

    @Override
    public boolean onDown(MotionEvent e) {
        return true;
    }

    @Override
    public void onShowPress(MotionEvent e) {

    }

    @Override
    public boolean onSingleTapUp(MotionEvent e) {
        return true;
    }

    @Override
    public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
        return false;
    }

    @Override
    public void onLongPress(MotionEvent e) {

    }

    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
        int index = viewFlipper.getDisplayedChild();
        if (e1.getX() - e2.getX() > 60){//左滑
            viewFlipper.setInAnimation(AnimationUtils.loadAnimation(mContext, R.anim.push_left_in));
            viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(mContext, R.anim.push_left_out));
            if (index >= tatol -1){
                setDisplayedChild(0);
            }else {
                setDisplayedChild(index + 1);
            }
            return true;
        }else if (e2.getX() - e1.getX() > 60){//右滑
            viewFlipper.setInAnimation(AnimationUtils.loadAnimation(mContext, R.anim.push_right_in));
            viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(mContext, R.anim.push_right_out));
            if (index > 0){
                setDisplayedChild(index -1);
            }else {
                setDisplayedChild(tatol - 1);
            }
            return true;
        }
        return false;
    }

    /***關閉執行緒****/
    public void closeThread(){
        if (imageThread != null){
            imageThread.interrupt();
            imageThread = null;
        }
    }

    /****主執行緒更新UI***/
    private class MyHandler extends Handler{
        public MyHandler(){

        }
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            viewFlipper.setInAnimation(AnimationUtils.loadAnimation(mContext, R.anim.push_left_in));
            viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(mContext, R.anim.push_left_out));
            int currentIndex = msg.getData().getInt("index");
            setDisplayedChild(currentIndex);
        }
    }

    /****t圖片輪播執行緒***/
    class ImageThread extends Thread{
        @Override
        public void run() {
            super.run();
            while (true){
                try {
                    Thread.sleep(intervalTime);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
                int index = viewFlipper.getDisplayedChild() + 1;//獲取將要顯示的子檢視索引
                if (index >= tatol){
                    index = 0;
                }
                Message message = Message.obtain();
                Bundle bundle = new Bundle();
                bundle.putInt("index", index);
                message.setData(bundle);
                handler.sendMessage(message);
            }
        }
    }
}

activity類中使用

private ImageFlipper image_flipper;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        DisplayMetrics dm = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(dm);
        //設定圖片的寬高
        ImageFlipper.width = dm.widthPixels;
        ImageFlipper.height = dm.heightPixels/3;
        //圖片輪播時間間隔
        ImageFlipper.intervalTime = 3000;
        setContentView(R.layout.activity_main);

        image_flipper = (ImageFlipper) findViewById(R.id.image_flipper);

        int []ids = {R.mipmap.banner1, R.mipmap.banner2, R.mipmap.banner3};
        image_flipper.init(ids, R.mipmap.banner4);
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        if (image_flipper != null){
            image_flipper.closeThread();
        }
    }

    //xml
    <com.example.imagecarousel.ImageFlipper
        android:id="@+id/image_flipper"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"/>