Android 实现模糊半透明效果的简单实现

转载请注入出处：http://blog.csdn.net/wjilikely/article/details/51699634

如图：在同个布局中实现透明和模糊效果，这个其实并不难。但关键的是实现侧滑出现或者是在某个控件布局需要的时候，设置的属性不能够完全的实现想要的效果。好了，不

多说，看效果图

添加其他布局背景后就变成这种效果了

看完效果，开始贴代码

其实实现起来很简单，就只需要导入v8包，并实现几个方法就OK了

XML布局：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFFFF"
    tools:context=".MainActivity">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipChildren="false">

        <RelativeLayout
            android:background="#FF4081"
            android:id="@+id/blurred_view"
            android:layout_width="600dp"
            android:layout_height="600dp"
            android:layout_gravity="center"
            android:clipChildren="false">

            <ImageView
                android:id="@+id/image0"
                android:layout_width="200dp"
                android:layout_height="200dp"
                android:layout_centerInParent="true"
                android:scaleType="centerCrop"
                android:src="@mipmap/p0"/>

            <ImageView
                android:id="@+id/image1"
                android:layout_width="0dp"
                android:layout_height="200dp"
                android:layout_above="@id/image0"
                android:layout_alignLeft="@id/image0"
                android:scaleType="centerCrop"
                android:src="@mipmap/p9"/>

            <ImageView
                android:id="@+id/image2"
                android:layout_width="0dp"
                android:layout_height="200dp"
                android:layout_alignLeft="@id/image0"
                android:layout_below="@id/image0"
                android:scaleType="centerCrop"
                android:src="@mipmap/p2"/>

            <ImageView
                android:id="@+id/image3"
                android:layout_width="200dp"
                android:layout_height="200dp"
                android:layout_alignTop="@id/image0"
                android:layout_toLeftOf="@id/image0"
                android:scaleType="centerCrop"
                android:src="@mipmap/image04"/>

            <ImageView
                android:id="@+id/image4"
                android:layout_width="200dp"
                android:layout_height="200dp"
                android:layout_alignTop="@id/image0"
                android:layout_toRightOf="@id/image0"
                android:scaleType="centerCrop"
                android:src="@mipmap/p4"/>

            <ImageView
                android:id="@+id/image5"
                android:layout_width="300dp"
                android:layout_height="200dp"
                android:layout_alignLeft="@id/image3"
                android:layout_alignTop="@id/image1"
                android:scaleType="centerCrop"
                android:src="@mipmap/image03"/>

            <ImageView
                android:id="@+id/image6"
                android:layout_width="300dp"
                android:layout_height="200dp"
                android:layout_alignBottom="@id/image2"
                android:layout_alignLeft="@id/image3"
                android:scaleType="centerCrop"
                android:src="@mipmap/image05"/>

            <ImageView
                android:id="@+id/image7"
                android:layout_width="300dp"
                android:layout_height="200dp"
                android:layout_alignRight="@id/image4"
                android:layout_alignTop="@id/image1"
                android:scaleType="centerCrop"
                android:src="@mipmap/image03"/>

            <ImageView
                android:id="@+id/image8"
                android:layout_width="300dp"
                android:layout_height="200dp"
                android:layout_alignRight="@id/image4"
                android:layout_alignTop="@id/image2"
                android:scaleType="centerCrop"
                android:src="@mipmap/image02"/>

        </RelativeLayout>
    </FrameLayout>

    <com.ex.blurdemo.BlurringView
        android:id="@+id/blurring_view"
        android:layout_width="360dp"
        android:layout_height="360dp"
        android:layout_gravity="center"
        app:blurRadius="11"
        app:downsampleFactor="6"
        app:overlayColor="#50FFFFFF"/>


    <TextView
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="模糊半透明效果"/>

</FrameLayout>

app:blurRadius="11"
app:downsampleFactor="6"
app:overlayColor="#50FFFFFF"

这几个属性主要就是用来设置特效的哦！

MainActivity.java

package com.ex.blurdemo;

import android.animation.Animator;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.animation.OvershootInterpolator;
import android.widget.ImageView;

import java.util.Random;

public class MainActivity extends AppCompatActivity {

    private BlurringView mBlurringView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mBlurringView = (BlurringView) findViewById(R.id.blurring_view);
        View blurredView = findViewById(R.id.blurred_view);

        //给出了模糊视图并刷新模糊视图。
        mBlurringView.setBlurredView(blurredView);
        mBlurringView.invalidate();

    }

    private ValueAnimator.AnimatorUpdateListener listener = new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            mBlurringView.invalidate();
        }
    };
}

这只是把模糊和透明的效果实现，实现其他的功能就得自己往里面加东西了！

BlurringView.java

package com.ex.blurdemo;

import android.content.Context;
import android.content.res.Resources;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.renderscript.Allocation;
import android.renderscript.Element;
import android.renderscript.RenderScript;
import android.renderscript.ScriptIntrinsicBlur;
import android.util.AttributeSet;
import android.view.View;

/**
 * A custom view for presenting a dynamically blurred version of another view's content.
 * <p/>
 * Use {@link #setBlurredView(View)} to set up the reference to the view to be blurred.
 * After that, call {@link #invalidate()} to trigger blurring whenever necessary.
 */
public class BlurringView extends View {

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

    public BlurringView(Context context, AttributeSet attrs) {
        super(context, attrs);

        final Resources res = getResources();
        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);

        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);
                }

                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);
        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) {
                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;

}

源码下载