解決android下超長圖片顯示不全出現空白的問題

　　本人有一個笑話類的app，里面可以看笑話段子、搞笑圖片和搞笑視頻。內容大多來自於互聯網，最近發現，抓到不少超長的圖片，在打開大圖預覽時，上面的部分顯示正常，滑動到下面的時候，全是空白；效果如下：

　　 　　

 

　　百度了一下，答案是硬件加速導致的openglRender大小限制引起的，具體原理這里不贅述，百度有很多，有興趣了解的可以搜下。這里只關注解決方法，一是關閉硬件加速就可以，但會導致界面有卡頓現象，作為一個有追求的碼農，果斷放棄這個；第二個方案就是在拿到圖片后，根據當前顯示位置和當前縮放比例從圖片中剪切合適的部分顯示到屏幕中。

　　 今天主要講下第二種方案的實現邏輯，文末會有源碼提供，已封裝為一個擴展LargeImageView組件，可直接替換系統ImageView。

　　還是一貫的原則，主要講解思想和邏輯，盡量用簡單易懂的語言講清楚，希望讀者能夠看完之后自己實現一套出來，如果不太關心這些，也可以直接跳到文末下載代碼。

一、背景

　　超長圖片顯示不全，底部顯示空白，無法正確瀏覽圖片。

二、目的

　　繼承實現一個新的LargeImageView組件，支持顯示超長圖片，支持觸摸上下左右滑動，支持雙指縮放，支持雙擊放大/還原。

三、實現

 　　現在我們來一步一步實現LargeImageView組件。

　　1. 首先新建一個類，繼承自ImageView，並且設置縮放類型為ScaleType.FIT_XY

public class LargeImageView extends ImageView {
    public LargeImageView(Context context)
    {
        this(context, null);
    }

    public LargeImageView(Context context, AttributeSet attrs)
    {
        super(context, attrs);
        this.setScaleType(ScaleType.FIT_XY);
    }
}

 　　2. 重載所有設置圖片源的方法，將得到圖片信息以Bitmap保存，后面備用

public class LargeImageView extends ImageView {
    private Bitmap mBitmap;

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

    public LargeImageView(Context context, AttributeSet attrs)
    {
        super(context, attrs);
        this.setScaleType(ScaleType.FIT_XY);
    }

    @Override
    public void setImageBitmap(Bitmap bmp) {
        mBitmap = bmp;
        super.setImageBitmap(bmp);
    }

    @Override
    public void setImageDrawable(Drawable drawable) {
        mBitmap = getBitmapFromDrawable(drawable);
        super.setImageDrawable(drawable);
    }

    @Override
    public void setImageResource(int resId) {
        super.setImageResource(resId);
        mBitmap = getBitmapFromDrawable(getDrawable());
    }

    @Override
    public void setImageURI(Uri uri)     {
        super.setImageURI(uri);
        mBitmap = getBitmapFromDrawable(getDrawable());
    }
}

 　　3. 重載onDraw方法，根據縮放比例和滾動位置進行切圖繪制

@Override
protected void onDraw(Canvas canvas) {
    if (!mIsDrawing) {
        mIsDrawing = true;

        //組件的寬度和高度，即圖片顯示區域的大小
        int width = getWidth();
        int height = getHeight();

        if (mBitmap == null || width <= 0 || height <= 0) {
            return;
        }

        //創建一個和顯示區域大小相同的位圖
        Bitmap bmp = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
        Canvas bmpCanvas = new Canvas(bmp);

        try {
            //計算切圖的寬度、高度
            int srcWidth = getRealSrcWidth();
            int srcHeight = getRealSrcHeight();

            //計算切圖的X、Y坐標
            int srcOffsetX = mOffsetX;
            int srcOffsetY = mOffsetY;
            if (srcOffsetY + srcHeight > mBitmap.getHeight()) {
                srcOffsetY = mBitmap.getHeight() - srcHeight;
            }

            //計算目標顯示區域繪制的寬度、高度
            int desWidth = getRealDesWidth();
            int desHeight = getRealDesHeight();

            //計算目標顯示區域繪制的X、Y坐標
            int desOffsetX = Math.max(0, (width - desWidth) / 2);
            int desOffsetY = 0;
            if (desHeight < height) {
                desOffsetY = Math.max(0, (height - desHeight) / 2);
            }

            //繪制切圖圖片背景，切圖大小小於顯示區域時需要
            if (mDrawScale < 1 || desHeight < height) {
                Paint fillPaint = new Paint();
                fillPaint.setColor(Color.BLACK);
                bmpCanvas.drawRect(0, 0, width, height, fillPaint);
            }

            //繪制切圖圖片
            bmpCanvas.drawBitmap(mBitmap,
                    new Rect(srcOffsetX, srcOffsetY, srcOffsetX + srcWidth, srcOffsetY + srcHeight),
                    new Rect(desOffsetX, desOffsetY, desOffsetX + desWidth, desOffsetY + desHeight),
                    null);

            //將切圖圖片繪制到畫布
            canvas.drawBitmap(bmp,
                    new Rect(0, 0, bmp.getWidth(), bmp.getHeight()),
                    new Rect(0, 0, width, height),
                    null);

            //銷毀切圖圖片，重要
            bmp.recycle();
        }
        catch (Exception exp) {
        }
        finally {
            mIsDrawing = false;
        }
    }
}

　　4. 增加手勢檢測GestureDetector，處理滾動（onScroll）和雙擊處理（onDoubleTap）

GestureDetector.SimpleOnGestureListener simpleOnGestureListener = new GestureDetector.SimpleOnGestureListener() {
    @Override
    public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
        if (!mIsScaling) {
            int width = getWidth();
            int height = getHeight();

            if (mBitmap != null && width > 0 && height > 0) {
                boolean needInvalidate = false;

                //計算原圖的寬、高，需要考慮縮放比例
                int srcWidth = getRealSrcWidth();
                int srcHeight = getRealSrcHeight();

                //計算滾動的X坐標
                if (srcWidth < mBitmap.getWidth()) {
                    int oldOffsetX = mOffsetX;
                    oldOffsetX += distanceX;
                    if (oldOffsetX < 0) {
                        oldOffsetX = 0;
                    }
                    if (oldOffsetX + srcWidth > mBitmap.getWidth()) {
                        oldOffsetX = mBitmap.getWidth() - srcWidth;
                    }
                    if (mOffsetX != oldOffsetX) {
                        mOffsetX = oldOffsetX;
                        needInvalidate = true;
                    }
                }

                //計算滾動的Y坐標
                if (srcHeight < mBitmap.getHeight()) {
                    int oldOffsetY = mOffsetY;
                    oldOffsetY += distanceY;
                    if (oldOffsetY < 0) {
                        oldOffsetY = 0;
                    }
                    if (oldOffsetY + srcHeight > mBitmap.getHeight()) {
                        oldOffsetY = mBitmap.getHeight() - srcHeight;
                    }
                    if (mOffsetY != oldOffsetY) {
                        mOffsetY = oldOffsetY;
                        needInvalidate = true;
                    }
                }

                //重新繪制
                if (needInvalidate) {
                    invalidate();
                }
            }
        }

        return super.onScroll(e1, e2, distanceX, distanceY);
    }

    @Override
    public boolean onDoubleTap(MotionEvent e) {
        //處理雙擊事件，放大或還原
        if (mDrawScale != 1) {
            scale(1);
            mScale = 1;
        } else {
            scale(2);
            mScale = 2;
        }

        return super.onDoubleTap(e);
    }
};

　　5. 增加縮放手勢檢測ScaleGestureDetector，處理縮放事件

ScaleGestureDetector.SimpleOnScaleGestureListener simpleOnScaleGestureListener = new ScaleGestureDetector.SimpleOnScaleGestureListener() {
    @Override
    public boolean onScale(ScaleGestureDetector detector) {
        if (mIsScaling) {
            //計算縮放比例
            float currSpan = detector.getCurrentSpan();
            float prevSpan = detector.getPreviousSpan();
            mScaleFactor = currSpan / prevSpan;

            float currScale = mScale * mScaleFactor;

            //按新的縮放比例進行縮放
            scale(currScale);
        }

        return super.onScale(detector);
    }

    @Override
    public void onScaleEnd(ScaleGestureDetector detector) {
        super.onScaleEnd(detector);

        //重新計算縮放比例，別做結束縮放前的最后一次縮放
        mScale = mScale * mScaleFactor;
        if (mScale < 1) {
            mScale = 1;
        }
        scale(mScale);

        //恢復縮放標機
        mIsScaling = false;
    }

    @Override
    public boolean onScaleBegin(ScaleGestureDetector detector) {
        //開始縮放，打標記
        mIsScaling = true;
        return super.onScaleBegin(detector);
    }
};

 

　　至此，我們的目的功能都已實現，有些細節實現，有興趣的朋友可以下載代碼了解。

四、用法

　　LargeImageView組件繼承自ImageView，可以完全替代ImageView，使用方法相同。

<com.puerlink.imagepreview.LargeImageView
    android:id="@+id/image_scale_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

</com.puerlink.imagepreview.LargeImageView>

五、最終效果

 

六、未實現功能

　　1. 滾動onFling事件未處理

　　2. 細節優化和繪制性能

七、源代碼

　　Git源碼地址
　　開源不易，謝謝Star：)

 

　　如有錯誤，歡迎指正！