項(xiàng)目需要做一個(gè)半透明的高斯模糊，用來(lái)覆蓋下面的布局，樣式類似下面這種
image.png
所以第一時(shí)間想到了高斯模糊來(lái)做。
半透明的高斯模糊其實(shí)不難實(shí)現(xiàn)，只需要知道android.support.v8.renderscript這個(gè)包基本上就可以實(shí)現(xiàn)了。
使用之前可以先看看 http://www.itdecent.cn/p/dd0a339e288e
public class BlurringView extends android.support.v7.widget.AppCompatImageView {
public BlurringView(Context context) {
this(context, null);
}
public BlurringView(Context context, AttributeSet attrs) {
super(context, attrs);
final Resources res = getResources();
//模糊半徑 值越大，性能要求越高，模糊半徑不能超過(guò)25
final int defaultBlurRadius = res.getInteger(R.integer.default_blur_radius);
//采集樣式
final int defaultDownsampleFactor = res.getInteger(R.integer.default_downsample_factor);
//覆蓋顏色
final int defaultOverlayColor = res.getColor(R.color.default_overlay_color);
//初始化RenderScript
initializeRenderScript(context);
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.PxBlurringView);
setBlurRadius(a.getInt(R.styleable.PxBlurringView_blurRadius, defaultBlurRadius));
setDownsampleFactor(a.getInt(R.styleable.PxBlurringView_downsampleFactor,
defaultDownsampleFactor));
setOverlayColor(a.getColor(R.styleable.PxBlurringView_overlayColor, defaultOverlayColor));
a.recycle();
}
public void setBlurredView(View blurredView) {
mBlurredView = blurredView;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (mBlurredView != null) {
if (prepare()) {
// If the background of the blurred view is a color drawable, we use it to clear
// the blurring canvas, which ensures that edges of the child views are blurred
// as well; otherwise we clear the blurring canvas with a transparent color.
if (mBlurredView.getBackground() != null && mBlurredView.getBackground() instanceof ColorDrawable) {
mBitmapToBlur.eraseColor(((ColorDrawable) mBlurredView.getBackground()).getColor());
} else {
mBitmapToBlur.eraseColor(Color.TRANSPARENT);
}
//將需要被模糊的布局畫成bitmap
mBlurredView.draw(mBlurringCanvas);
blur();
canvas.save();
canvas.translate(mBlurredView.getX() - getX(), mBlurredView.getY() - getY());
canvas.scale(mDownsampleFactor, mDownsampleFactor);
canvas.drawBitmap(mBlurredBitmap, 0, 0, null);
canvas.restore();
}
canvas.drawColor(mOverlayColor);
}
}
public void setBlurRadius(int radius) {
mBlurScript.setRadius(radius);
}
public void setDownsampleFactor(int factor) {
if (factor <= 0) {
throw new IllegalArgumentException("Downsample factor must be greater than 0.");
}
if (mDownsampleFactor != factor) {
mDownsampleFactor = factor;
mDownsampleFactorChanged = true;
}
}
public void setOverlayColor(int color) {
mOverlayColor = color;
}
private void initializeRenderScript(Context context) {
mRenderScript = RenderScript.create(context);
//映射腳本內(nèi)核，
mBlurScript = ScriptIntrinsicBlur.create(mRenderScript, Element.U8_4(mRenderScript));
}
protected boolean prepare() {
final int width = mBlurredView.getWidth();
final int height = mBlurredView.getHeight();
if (mBlurringCanvas == null || mDownsampleFactorChanged
|| mBlurredViewWidth != width || mBlurredViewHeight != height) {
mDownsampleFactorChanged = false;
mBlurredViewWidth = width;
mBlurredViewHeight = height;
int scaledWidth = width / mDownsampleFactor;
int scaledHeight = height / mDownsampleFactor;
// The following manipulation is to avoid some RenderScript artifacts at the edge.
scaledWidth = scaledWidth - scaledWidth % 4 + 4;
scaledHeight = scaledHeight - scaledHeight % 4 + 4;
if (mBlurredBitmap == null
|| mBlurredBitmap.getWidth() != scaledWidth
|| mBlurredBitmap.getHeight() != scaledHeight) {
//創(chuàng)建模糊的蒙板
mBitmapToBlur = Bitmap.createBitmap(scaledWidth, scaledHeight,
Bitmap.Config.ARGB_8888);
if (mBitmapToBlur == null) {
return false;
}
mBlurredBitmap = Bitmap.createBitmap(scaledWidth, scaledHeight,
Bitmap.Config.ARGB_8888);
if (mBlurredBitmap == null) {
return false;
}
}
mBlurringCanvas = new Canvas(mBitmapToBlur);
mBlurringCanvas.scale(1f / mDownsampleFactor, 1f / mDownsampleFactor);
mBlurInput = Allocation.createFromBitmap(mRenderScript, mBitmapToBlur,
Allocation.MipmapControl.MIPMAP_NONE, Allocation.USAGE_SCRIPT);
mBlurOutput = Allocation.createTyped(mRenderScript, mBlurInput.getType());
}
return true;
}
/**
* 制作模糊樣式
*/
protected void blur() {
mBlurInput.copyFrom(mBitmapToBlur);
mBlurScript.setInput(mBlurInput);
mBlurScript.forEach(mBlurOutput);
mBlurOutput.copyTo(mBlurredBitmap);
}
@Override
protected void onDetachedFromWindow() {
super.onDetachedFromWindow();
if (mRenderScript != null) {
mRenderScript.destroy();
}
}
private int mDownsampleFactor;
private int mOverlayColor;
private View mBlurredView;
private int mBlurredViewWidth, mBlurredViewHeight;
private boolean mDownsampleFactorChanged;
private Bitmap mBitmapToBlur, mBlurredBitmap;
private Canvas mBlurringCanvas;
private RenderScript mRenderScript;
private ScriptIntrinsicBlur mBlurScript;
private Allocation mBlurInput, mBlurOutput;
}
一些屬性的代碼就不貼了。
就是兩個(gè)Bitmap，將一層半透明的覆蓋在上面就行了。這里有兩個(gè)小問(wèn)題
1.在低版本和某些特定的機(jī)型里面是沒(méi)有RenderScript以及相關(guān)的so文件的。所以這里我們需要將相應(yīng)的so文件導(dǎo)入
image.png
以及設(shè)置支持的SO庫(kù)架構(gòu)
image.png
- 被模糊的布局里面有Glide加載圖片的時(shí)候，圖片并不能正確加載。
原因是在異步操作的時(shí)候，Glide圖片還未加載完成的時(shí)候，圖片模糊已經(jīng)完成了，導(dǎo)致看不到布局里面的圖片完成樣式。所以需要先完成Glide的圖片加載。
RoundedCornersTransform transform3 = new RoundedCornersTransform(itemView.getContext(), DensityUtil.dip2px(6));
transform3.setNeedCorner(true, true, true, true);
RequestOptions options = new RequestOptions().transform(transform3).placeholder(R.drawable.img_bitmap_holder_gray);
Glide.with(itemView.getContext())
.asBitmap()
.load(R.drawable.bg_opacity_mask)
.apply(options)
.listener(new RequestListener<Bitmap>() {
@Override
public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<Bitmap> target, boolean isFirstResource) {
binding.bvGaussian.setBlurRadius(2);
binding.bvGaussian.setBlurredView(binding.llContent);
binding.bvGaussian.invalidate();
binding.tvRewardGuass.setText(bean.getBuyerCommision());
return false;
}
@Override
public boolean onResourceReady(Bitmap resource, Object model, Target<Bitmap> target, DataSource dataSource, boolean isFirstResource) {
binding.bvGaussian.setBlurRadius(2);
binding.bvGaussian.setBlurredView(binding.llContent);
binding.bvGaussian.invalidate();
binding.tvRewardGuass.setText(bean.getBuyerCommision());
return false;
}
})
.into(binding.ivGaussian);
