最近在做一个将HTML中的<img>标签中的图片获取出来并由ImageView去显示的需求。在使用Glide去加载图片的过程中发现Glide只提供了CenterCrop,FitCenter以及CenterInside这三个属性设置图片的显示效果

而我的需求是ImageView的宽高是已知的,所以要将其中显示的图片拉伸到铺满这个ImageView。我一开始的做法是将这个ImageView的scaleType设置成fitXY来拉伸图片,测试时发现在图片比较大的时候系统会抛出OOM的异常。
在网上看到了一篇类似问题的文章点我跳转
我们目前项目中经常会加载一些比较高清的大分辨率图片,所以我准备自定义一个ImageView当glide将图片以设置好的宽高加载出来以后在由ImageView显示的过程中来获取出这个bitmap修改其宽高为所需的宽高
- 新建并初始化相关工具
private void init() {
matrix = new Matrix();
paint = new Paint();
srcR = new Rect();
dstR = new RectF();
deviceR = new RectF();
}
- 获取当前ImageView 的宽高(已在创建ImageView的时候设置为固定的值)
int w = getWidth();
int h = getHeight();
if (w == 0 || h == 0) {
return;
}
- 在onDraw方法中获取出当前图片的drawable并转化为bitmap
Drawable drawable = getDrawable();
if (drawable == null) {
return;
}
if (!(drawable instanceof BitmapDrawable)) {
return;
}
Bitmap b = ((BitmapDrawable) drawable).getBitmap();
if (null == b) {
return;
}
- 根据bitmap的额宽高和view的宽高计算缩放比例
// 获得图片的宽高
int width = b.getWidth();
int height = b.getHeight();
Log.e(TAG, " image w=" + width + " h=" + height);
// 计算缩放比例
float scaleWidth = (w * 1f) / (width * 1f);
float scaleHeight = (h * 1f) / (height * 1f);
// 取得想要缩放的matrix参数
matrix.postScale(scaleWidth, scaleHeight);
- 使用canvas画出bitmap
boolean transformed = !matrix.rectStaysRect();
if (transformed) {
paint.setAntiAlias(true);
}
srcR.set(0, 0, width, height);
dstR.set(0, 0, width, height);
canvas.concat(matrix);
paint.setFilterBitmap(true);
canvas.drawBitmap(b, srcR, dstR, paint);
- 完整代码
package com.ad.show.gui.CustomView;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.support.v7.widget.AppCompatImageView;
import android.util.AttributeSet;
/**
* author Li Peng on 2019/4/23.
*/
public class FillImageView extends AppCompatImageView {
private String TAG = FillImageView.class.getSimpleName();
private Matrix matrix;
private Paint paint;
private Rect srcR;
private RectF dstR;
RectF deviceR;
public FillImageView(Context context) {
super(context);
init();
}
public FillImageView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public FillImageView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
matrix = new Matrix();
paint = new Paint();
srcR = new Rect();
dstR = new RectF();
deviceR = new RectF();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
@Override
protected void onDraw(Canvas canvas) {
//TODO 还原matrix中的缩放比例
matrix.reset();
Drawable drawable = getDrawable();
if (drawable == null) {
return;
}
int w = getWidth();
int h = getHeight();
if (w == 0 || h == 0) {
return;
}
if (!(drawable instanceof BitmapDrawable)) {
return;
}
Bitmap b = ((BitmapDrawable) drawable).getBitmap();
if (null == b) {
return;
}
// 获得图片的宽高
int width = b.getWidth();
int height = b.getHeight();
// 计算缩放比例
float scaleWidth = (w * 1f) / (width * 1f);
float scaleHeight = (h * 1f) / (height * 1f);
// 取得想要缩放的matrix参数
matrix.postScale(scaleWidth, scaleHeight);
boolean transformed = !matrix.rectStaysRect();
if (transformed) {
paint.setAntiAlias(true);
}
srcR.set(0, 0, width, height);
dstR.set(0, 0, width, height);
canvas.concat(matrix);
paint.setFilterBitmap(true);
canvas.drawBitmap(b, srcR, dstR, paint);
}
}
最后想吐槽一下WebView,我之所以要这么大费周章的将图片从html中拿出来用Android本地去播放,就是因为在WebView长时间循环播放图片的过程中占用内存大而且会在长时间播放时出现了内存泄漏导致OOM,而且不透明过程不可控。将图片移到Android本地播放后,占用内存小了差不多50%而且过程可控。
本文介绍如何自定义一个ImageView以解决在使用Glide加载图片时,图片无法填充满固定尺寸的ImageView的问题。由于初始使用fitXY会导致OOM异常,作者通过获取ImageView的固定宽高,在onDraw方法中计算缩放比例,动态调整Bitmap大小,有效避免了内存溢出,并对比了使用WebView和原生Android播放图片的优缺点。

3726

被折叠的 条评论
为什么被折叠?



