如何在TV中展示一張長長的圖片，考慮到內存問題，肯定不能把圖片一次性加載到內存中，這個時候就要用到BitmapRegionDecoder，借助這個類可以實現只截取圖片中需要的區域生成Bitmap來展示。BitmapRegionDecoder是實現這個UI控件的基礎，接下來的實現過程都是圍繞它來完成的。
最終效果演示：
VerticalScrollImageView.gif
-
BitmapRegionDecoder的基礎用法
BitmapRegionDecoder是通過newInstance方法來實例化的。
public static BitmapRegionDecoder newInstance(InputStream is,
boolean isShareable) throws IOException {
if (is instanceof AssetManager.AssetInputStream) {
return nativeNewInstance(
((AssetManager.AssetInputStream) is).getNativeAsset(),
isShareable);
} else {
// pass some temp storage down to the native code. 1024 is made up,
// but should be large enough to avoid too many small calls back
// into is.read(...).
byte [] tempStorage = new byte[16 * 1024];
return nativeNewInstance(is, tempStorage, isShareable);
}
}
還有與之類似的幾個多態
public static BitmapRegionDecoder newInstance(FileDescriptor fd, boolean isShareable)
public static BitmapRegionDecoder newInstance(String pathName, boolean isShareable)
public static BitmapRegionDecoder newInstance(byte[] data,int offset, int length, boolean isShareable)
根據你的需求可選擇具體使用哪個方法來實例化BitmapRegionDecoder
截取部分區域生成Bitmap的方法
/**
* Decodes a rectangle region in the image specified by rect.
*
* @param rect The rectangle that specified the region to be decode.
* @param options null-ok; Options that control downsampling.
* inPurgeable is not supported.
* @return The decoded bitmap, or null if the image data could not be
* decoded.
*/
public Bitmap decodeRegion(Rect rect, BitmapFactory.Options options) {
synchronized (mNativeLock) {
checkRecycled("decodeRegion called on recycled region decoder");
if (rect.right <= 0 || rect.bottom <= 0 || rect.left >= getWidth()
|| rect.top >= getHeight())
throw new IllegalArgumentException("rectangle is outside the image");
return nativeDecodeRegion(mNativeBitmapRegionDecoder, rect.left, rect.top,
rect.right - rect.left, rect.bottom - rect.top, options);
}
}
兩個參數，rect是截取圖片的目標區域，options可用配置生成的Bitmap
- 長圖片展示控件代碼實現
新建一個控件類VerticalScrollImageView繼承自View,覆寫其onDraw方法，在此方法中實現繪制圖片
@Override
protected void onDraw(Canvas canvas) {
Log.e(getClass().getSimpleName(), "draw start " + getWidth() + " " + getHeight());
canvas.save();
int sr = canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG);
Paint paint = new Paint();
paint.setAntiAlias(true);
if (bitmapRegionDecoder != null) {
int targetHeight = viewHeight2ImageHeight(getHeight());//根據控件的高度獲取需要在原始圖片上截取的高度
Log.e(getClass().getSimpleName(), "targetHeight " + targetHeight);
Log.e(getClass().getSimpleName(), "draw resource "
+ " " + imgWidth + " " + imgHeight
+ " " + mTargetY + " " + targetHeight);
imgBitmap = null;
if (imgHeight - mTargetY >= targetHeight) {//剩余區域大于 當前控件高度
imgBitmap = bitmapRegionDecoder.decodeRegion(new Rect(0, mTargetY
, imgWidth, mTargetY + targetHeight)
, scaleOptions);
} else {//剩余區域小于 當前控件高度
imgBitmap = bitmapRegionDecoder.decodeRegion(new Rect(0, imgHeight - targetHeight
, imgWidth, imgHeight)
, scaleOptions);
}
if (imgBitmap != null) {
//繪制需要展示的圖片
canvas.drawBitmap(imgBitmap
, new Rect(0, 0, imgBitmap.getWidth(), imgBitmap.getHeight())
, new Rect(0, 0, getWidth(), getHeight())
, paint);
}
imgBitmap = null;
holderBitmap = null;
} else {
if (holderBitmap != null) {//繪制占位圖
canvas.drawBitmap(holderBitmap
, new Rect(0, 0, holderBitmap.getWidth(), holderBitmap.getHeight())
, new Rect(0, 0, getWidth(), getHeight())
, paint);
}
}
canvas.restoreToCount(sr);
canvas.restore();
Log.e(getClass().getSimpleName(), "draw end");
}
最最關鍵的代碼就是這里了。如果要實現圖片的滑動效果，只需要一個簡單的屬性動畫來逐漸修改mTargetY的值即可
/**
* targetY 為滾動的目標位置
*/
private void startScroll(int targetY) {
targetY = Math.max(0, Math.min(targetY, imgHeight - viewHeight2ImageHeight(getHeight())));
ValueAnimator valueAnimator = ValueAnimator.ofInt(mTargetY, targetY);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mTargetY = (int) animation.getAnimatedValue();
invalidate();
}
});
valueAnimator.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
isScrolling = true;
}
@Override
public void onAnimationEnd(Animator animation) {
isScrolling = false;
}
@Override
public void onAnimationCancel(Animator animation) {
isScrolling = false;
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
valueAnimator.setInterpolator(new LinearInterpolator());
valueAnimator.setDuration(250);
valueAnimator.start();
}
再接著只需要監聽遙控器的按鍵,完成滑動即可
private void init() {
//響應遙控器事件
setOnKeyListener(new OnKeyListener() {
@Override
public boolean onKey(View v, int keyCode, KeyEvent event) {
scrollDistance = scrollDistance <= 0 ? getHeight() : scrollDistance;
if (event.getAction() == KeyEvent.ACTION_DOWN && !isScrolling) {
switch (event.getKeyCode()) {
case KeyEvent.KEYCODE_DPAD_UP:
scrollBy(0 - viewHeight2ImageHeight(scrollDistance));
break;
case KeyEvent.KEYCODE_DPAD_DOWN:
scrollBy(viewHeight2ImageHeight(scrollDistance));
break;
}
}
return false;
}
});
//響應空鼠拖拽（手指也可以）
setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
// Log.e(TAG, " touch down");
startY = event.getRawY();
mStartTargetY = mTargetY;
break;
case MotionEvent.ACTION_MOVE:
float currentY = event.getRawY();
mTargetY = mStartTargetY + (int) (viewHeight2ImageHeight((int) (startY - currentY)) * 1f);
mTargetY = Math.max(0, Math.min(mTargetY, imgHeight - viewHeight2ImageHeight(getHeight())));
// Log.e(TAG, " touch move " + mTargetY);
invalidate();
break;
case MotionEvent.ACTION_UP:
// Log.e(TAG, " touch up");
startY = -1;
break;
}
return true;
}
});
}
/**
* 滑動到具體的位置
* @param targetY
*/
private void scrollTo(int targetY) {
startScroll(targetY);
}
/**
* 設置相對于當前，繼續滑動的距離。小于0 向上滑動，大于0向下滑動
* @param distance
*/
private void scrollBy(int distance) {
startScroll(mTargetY + distance);
}
/**
* 設置每次滑動的距離
* @param scrollDistance
*/
public void setScrollDistance(int scrollDistance) {
this.scrollDistance = scrollDistance;
}
完整代碼
package com.hpplay.happyott.view;
import android.animation.Animator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.BitmapRegionDecoder;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.KeyEvent;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.LinearInterpolator;
import java.io.File;
import java.io.InputStream;
/**
* Created by DON on 2017/6/19.
*/
public class VerticalScrollImageView extends View {
private String TAG = getClass().getSimpleName();
private int mTargetY = 0;
private int scrollDistance = 0;
private int imgWidth = 0, imgHeight = 0;
private Bitmap imgBitmap = null;
private Bitmap holderBitmap;
private BitmapRegionDecoder bitmapRegionDecoder;
private boolean isScrolling = false;
private float startY = -1;
private int mStartTargetY = -1;
private BitmapFactory.Options scaleOptions = new BitmapFactory.Options();
public VerticalScrollImageView(Context context) {
super(context);
init();
}
public VerticalScrollImageView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
public VerticalScrollImageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
//相應遙控器事件
setOnKeyListener(new OnKeyListener() {
@Override
public boolean onKey(View v, int keyCode, KeyEvent event) {
scrollDistance = scrollDistance <= 0 ? getHeight() : scrollDistance;
if (event.getAction() == KeyEvent.ACTION_DOWN && !isScrolling) {
switch (event.getKeyCode()) {
case KeyEvent.KEYCODE_DPAD_UP:
scrollBy(0 - viewHeight2ImageHeight(scrollDistance));
break;
case KeyEvent.KEYCODE_DPAD_DOWN:
scrollBy(viewHeight2ImageHeight(scrollDistance));
break;
}
}
return false;
}
});
//響應空鼠拖拽（手指也可以）
setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
// Log.e(TAG, " touch down");
startY = event.getRawY();
mStartTargetY = mTargetY;
break;
case MotionEvent.ACTION_MOVE:
float currentY = event.getRawY();
mTargetY = mStartTargetY + (int) (viewHeight2ImageHeight((int) (startY - currentY)) * 1f);
mTargetY = Math.max(0, Math.min(mTargetY, imgHeight - viewHeight2ImageHeight(getHeight())));
// Log.e(TAG, " touch move " + mTargetY);
invalidate();
break;
case MotionEvent.ACTION_UP:
// Log.e(TAG, " touch up");
startY = -1;
break;
}
return true;
}
});
}
private void startScroll(int targetY) {
targetY = Math.max(0, Math.min(targetY, imgHeight - viewHeight2ImageHeight(getHeight())));
ValueAnimator valueAnimator = ValueAnimator.ofInt(mTargetY, targetY);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mTargetY = (int) animation.getAnimatedValue();
invalidate();
}
});
valueAnimator.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
isScrolling = true;
}
@Override
public void onAnimationEnd(Animator animation) {
isScrolling = false;
}
@Override
public void onAnimationCancel(Animator animation) {
isScrolling = false;
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
valueAnimator.setInterpolator(new LinearInterpolator());
valueAnimator.setDuration(250);
valueAnimator.start();
}
/**
* 根據InputStream 生成 BitmapRegionDecoder
* @param imgStream
*/
public void setImageStream(InputStream imgStream) {
try {
BitmapFactory.Options options = new BitmapFactory.Options();
options.inJustDecodeBounds = true;
BitmapFactory.decodeStream(imgStream, new Rect(0, 0, 0, 0), options);
imgWidth = options.outWidth;
imgHeight = options.outHeight;
//尋找最佳的縮放比例
int viewHeight2ImageHeight = viewHeight2ImageHeight(getHeight());
int scale = getScaleValue(imgWidth, viewHeight2ImageHeight, 1);
scaleOptions.inSampleSize = scale;
} catch (Exception e) {
e.printStackTrace();
}
try {
bitmapRegionDecoder = BitmapRegionDecoder.newInstance(imgStream, false);
} catch (Exception e) {
e.printStackTrace();
}
}
/**
* 根據圖片文件 生成 BitmapRegionDecoder
* @param imgFile
*/
public void setImageFile(File imgFile) {
try {
BitmapFactory.Options options = new BitmapFactory.Options();
options.inJustDecodeBounds = true;
BitmapFactory.decodeFile(imgFile.getAbsolutePath(), options);
imgWidth = options.outWidth;
imgHeight = options.outHeight;
//尋找最佳的縮放比例
int viewHeight2ImageHeight = viewHeight2ImageHeight(getHeight());
int scale = getScaleValue(imgWidth, viewHeight2ImageHeight, 1);
scaleOptions.inSampleSize = scale;
} catch (Exception e) {
e.printStackTrace();
}
try {
bitmapRegionDecoder = BitmapRegionDecoder.newInstance(imgFile.getAbsolutePath(), false);
} catch (Exception e) {
e.printStackTrace();
}
}
private int getScaleValue(int imgWidth, int imgHeight, int scaleValue) {
long memory = Runtime.getRuntime().maxMemory() / 4;
if (memory > 0) {
if (imgWidth * imgHeight * 4 > memory) {
scaleValue += 1;
return getScaleValue(imgWidth, imgHeight, scaleValue);
}
}
return scaleValue;
}
/**
* 根據圖片Id 生成 BitmapRegionDecoder
* @param resourceId
*/
public void setImageResource(int resourceId) {
InputStream imgStream = getResources().openRawResource(resourceId);
setImageStream(imgStream);
}
/**
* 設置占位圖
* @param holderId
*/
public void setPlaceHolder(int holderId) {
holderBitmap = BitmapFactory.decodeResource(getResources(), holderId);
}
/**
* 滑動到具體的位置
* @param targetY
*/
private void scrollTo(int targetY) {
startScroll(targetY);
}
/**
* 設置相對于當前，繼續滑動的距離。小于0 向上滑動，大于0向下滑動
* @param distance
*/
private void scrollBy(int distance) {
startScroll(mTargetY + distance);
}
/**
* 設置每次滑動的距離
* @param scrollDistance
*/
public void setScrollDistance(int scrollDistance) {
this.scrollDistance = scrollDistance;
}
@Override
protected void onDraw(Canvas canvas) {
Log.e(getClass().getSimpleName(), "draw start " + getWidth() + " " + getHeight());
canvas.save();
int sr = canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG);
Paint paint = new Paint();
paint.setAntiAlias(true);
if (bitmapRegionDecoder != null) {
int targetHeight = viewHeight2ImageHeight(getHeight());//根據控件的高度獲取需要在原始圖片上截取的高度
Log.e(getClass().getSimpleName(), "targetHeight " + targetHeight);
Log.e(getClass().getSimpleName(), "draw resource "
+ " " + imgWidth + " " + imgHeight
+ " " + mTargetY + " " + targetHeight);
imgBitmap = null;
if (imgHeight - mTargetY >= targetHeight) {//剩余區域大于 當前控件高度
imgBitmap = bitmapRegionDecoder.decodeRegion(new Rect(0, mTargetY
, imgWidth, mTargetY + targetHeight)
, scaleOptions);
} else {//剩余區域小于 當前控件高度
imgBitmap = bitmapRegionDecoder.decodeRegion(new Rect(0, imgHeight - targetHeight
, imgWidth, imgHeight)
, scaleOptions);
}
if (imgBitmap != null) {
//繪制需要展示的圖片
canvas.drawBitmap(imgBitmap
, new Rect(0, 0, imgBitmap.getWidth(), imgBitmap.getHeight())
, new Rect(0, 0, getWidth(), getHeight())
, paint);
}
imgBitmap = null;
holderBitmap = null;
} else {
if (holderBitmap != null) {//繪制占位圖
canvas.drawBitmap(holderBitmap
, new Rect(0, 0, holderBitmap.getWidth(), holderBitmap.getHeight())
, new Rect(0, 0, getWidth(), getHeight())
, paint);
}
}
canvas.restoreToCount(sr);
canvas.restore();
Log.e(getClass().getSimpleName(), "draw end");
}
/**
* 圖片高度轉為相對于控件的高度
* @param imgHeight
* @return
*/
private int imageHeight2ViewHeight(int imgHeight) {
if (this.imgHeight <= 0) {
return 0;
}
return (int) (imgHeight / ((float) getWidth() / imgWidth * imgHeight) * getHeight());
}
/**
* 控件高度轉為相對于圖片高度
* @param viewHeight
* @return
*/
private int viewHeight2ImageHeight(int viewHeight) {
if (getHeight() <= 0) {
return 0;
}
return (int) (viewHeight / ((float) getWidth() / imgWidth * imgHeight) * imgHeight);
}
@Override
protected void onDetachedFromWindow() {
super.onDetachedFromWindow();
imgBitmap = null;
holderBitmap = null;
System.gc();
}
}
畢其功于一類，做到簡單好用，不依賴其他文件
- 用法
布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.hpplay.happyott.view.VerticalScrollImageView
android:id="@+id/scrollImageView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
VerticalScrollImageView mImageView = (VerticalScrollImageView) view.findViewById(R.id.scrollImageView);
mImageView.setScrollDistance((int) ((float) Utils.getScreenHeight(getActivity()) / 3 * 2));
mImageView.setFocusable(true);
mImageView.setFocusableInTouchMode(true);
mImageView.requestFocus();
Glide.with(getActivity())
.load(mImgUrl)
.downloadOnly(new SimpleTarget<File>() {
@Override
public void onResourceReady(File resource, GlideAnimation<? super File> glideAnimation) {
mImageView.setImageFile(resource);
}
@Override
public void onLoadFailed(Exception e, Drawable errorDrawable) {
super.onLoadFailed(e, errorDrawable);
}
});
