android實現多圖片放大縮小的切換

chenguang79發表於2017-04-24

  前天在網上看到了http://v.qq.com/vplus/56c7ec6c231bdbafd198c58fb86eb4dc 作者仿QQ的程式碼,看了一下感覺很受啟發。正好,單位在做引導頁的時候,要用到類似的東西,只不過是放大縮小的樣子。好了,下面我們來看一下程式碼。
  

package com.example.cg.scaleimageview.Customs;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.drawable.Drawable;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.widget.ImageView;

import com.example.cg.scaleimageview.R;

/**
 * 自定義控制元件,根據傳入的圖片組,對圖片進行從小到大的顯示
 * 作者:cg
 * 時間:2017/4/24 0024 上午 10:30
 */
public class ScaleImageView extends ImageView {

    private Drawable mDrawable;
    private Handler mHandler;

    private int[] imgSrc = new int[]{R.mipmap.mm1};

    private boolean isEnlarge = true;
    private float scaleNum = 1.0f;                              //圖片初始放大的倍數
    private float scaleMaxNum = 1.2f;                           //圖片最大會被放大多少,預設是1.2倍
    private float scaleValue = 0.002f;                          //圖片每次放大縮小的倍數
    private int num = 1;                                        //當前顯示到第幾個圖

    public ScaleImageView(Context context) {
        this(context,null);
    }

    public ScaleImageView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ScaleImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        TypedArray array = context.getTheme().obtainStyledAttributes(attrs,R.styleable.ScaleImageView,defStyleAttr,0);
        int n = array.getIndexCount();
        for(int i=0;i<n;i++)
        {
            int arr = array.getIndex(i);
            switch (arr)
            {
                case R.styleable.ScaleImageView_isEnlarge:
                    isEnlarge = array.getBoolean(arr,true);
                    break;
                case R.styleable.ScaleImageView_scaleMaxNum:
                    scaleMaxNum = array.getFloat(arr,1.2f);
                    break;
                case R.styleable.ScaleImageView_scaleValue:
                    scaleValue = array.getFloat(arr,0.002f);
                    break;
            }
        }
        array.recycle();

        if(!isEnlarge)
        {
            scaleNum = scaleMaxNum;
        }

        //初始化第一個圖
        mDrawable=getDrawable();
        mHandler=new ScaleImageView.MoveHandler();
        mHandler.sendEmptyMessageDelayed(1, 220L);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        canvas.scale(scaleNum,scaleNum,getMeasuredWidth()/2,getMeasuredHeight()/2);

        mDrawable.draw(canvas);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);

        if(isEnlarge) {
            mDrawable.setBounds(0, 0, getMeasuredWidth(), getMeasuredHeight());
        }else{
            int mCanvasWBgSize = Math.round(getMeasuredWidth() * scaleMaxNum);
            int mCanvashBgSize = Math.round(getMeasuredHeight() * scaleMaxNum);

            int leftRight = (mCanvasWBgSize - getMeasuredWidth())/2;
            int topBottom = (mCanvashBgSize - getMeasuredHeight())/2;

            mDrawable.setBounds(-leftRight,-topBottom,getMeasuredWidth() + leftRight,getMeasuredHeight() + topBottom);
        }

    }

    private class MoveHandler extends Handler{
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);

            /**
             * 此處進行判斷,如果小於最大倍數,就不斷放大,如果大於了最大或等於最大倍數,就進行換圖
             */
            if(isEnlarge) {
                if (scaleNum < scaleMaxNum) {
                    scaleNum += scaleValue;
                    invalidate();
                    mHandler.sendEmptyMessageDelayed(1, 22);
                } else {
                    scaleNum = 1.0f;
                    setImageResource(imgSrc[num % 3]);
                    mDrawable = getDrawable();
                    num++;
                    invalidate();
                    mHandler.sendEmptyMessageDelayed(1, 22);
                }
            }else{

                if(scaleNum >= 0.9) {
                    scaleNum -= 0.002;
                    invalidate();
                    mHandler.sendEmptyMessageDelayed(1, 22);
                }else {
                    scaleNum = scaleMaxNum;

                    //如果圖片只有一個,哪就迴圈此圖片,不用更新
                    if(imgSrc.length!=1) {
                        setImageResource(imgSrc[num % 3]);
                        mDrawable = getDrawable();
                        num++;
                    }

                    invalidate();
                    mHandler.sendEmptyMessageDelayed(1, 22);
                }

            }
        }
    }

    /**
     * 載入圖片列表
     * @param images   圖片列表
     */
    public void setImages(int[] images)
    {
        this.imgSrc = images;
        invalidate();
    }
}

程式碼中我加了詳細的註解。都不難理解。
下載
CSDN下載地址
gitHub下載地址
這裡寫圖片描述

相關文章