Android高级模糊技术

668 查看

今天我们来更深入了解一下Android开发上的模糊技术。我读过几篇有关的文章，也在StackOverFlow上看过一些相关教程的帖子，所以我想在这里总结一下学到的东西。

为什么学习这个模糊技术？

现在越来越多的开发者喜欢在自定义控件的时候加上各种模糊背景，看看RomanNurik开发的Muzei或者Yahoo的Weather应用app都非常不错。我非常喜欢他们的设计。

我从Mark Allison的帖子(帖子地址)得到启发，然后写了这篇文章。

这是我们需要完成下图展示的效果：

预备知识

首先描述一下我们需要的文件。我们需要一个主Activity，里面有一个含有多个Fragment的ViewPager，每个Fragment展示一种模糊技术。

这是主Activity的布局文件内容：

; html-script: false ]

<android.support.v4.view.ViewPager

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/pager"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="com.paveldudka.MainActivity" />

这是Fragment的布局文件内容：

; html-script: false ]

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent">

<ImageView

android:id="@+id/picture"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:src="@drawable/picture"

android:scaleType="centerCrop" />

<TextView

android:id="@+id/text"

android:gravity="center_horizontal"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="My super text"

android:textColor="@android:color/white"

android:layout_gravity="center_vertical"

android:textStyle="bold"

android:textSize="48sp" />

<LinearLayout

android:id="@+id/controls"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="#7f000000"

android:orientation="vertical"

android:layout_gravity="bottom"/>

</FrameLayout>

我们只是在布局上放了一个ImageView，然后在中间加一个TextView，还有一些作为效果显示和测试的控件（如 @+id/controls）。

最普遍的模糊技术是这样做的：

从TextView的后一层背景中截取一部分；
进行模糊处理；
把模糊处理后的部分设置为TextView的背景。

Renderscript

那怎么在Android中实现模糊处理呢？最好的答案就是Renderscript。这是一个功能强大的图形处理“引擎”。RenderScript的底层原理就不做介绍了（因为我也不知道），而且这超过了我们这篇文章的范围。

先看下面的代码：

; html-script: false ]

public class RSBlurFragment extends Fragment {

private ImageView image;

private TextView text;

private TextView statusText;

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

View view = inflater.inflate(R.layout.fragment_layout, container, false);

image = (ImageView) view.findViewById(R.id.picture);

text = (TextView) view.findViewById(R.id.text);

statusText = addStatusText((ViewGroup) view.findViewById(R.id.controls));

applyBlur();

return view;

}

private void applyBlur() {

image.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {

@Override

public boolean onPreDraw() {

image.getViewTreeObserver().removeOnPreDrawListener(this);

image.buildDrawingCache();

Bitmap bmp = image.getDrawingCache();

blur(bmp, text);

return true;

}

});

}

@TargetApi(Build.VERSION_CODES.JELLY_BEAN_MR1)

private void blur(Bitmap bkg, View view) {

long startMs = System.currentTimeMillis();

float radius = 20;

Bitmap overlay = Bitmap.createBitmap((int) (view.getMeasuredWidth()),

(int) (view.getMeasuredHeight()), Bitmap.Config.ARGB_8888);

Canvas canvas = new Canvas(overlay);

canvas.translate(-view.getLeft(), -view.getTop());

canvas.drawBitmap(bkg, 0, 0, null);

RenderScript rs = RenderScript.create(getActivity());

Allocation overlayAlloc = Allocation.createFromBitmap(

rs, overlay);

ScriptIntrinsicBlur blur = ScriptIntrinsicBlur.create(

rs, overlayAlloc.getElement());

blur.setInput(overlayAlloc);

blur.setRadius(radius);

blur.forEach(overlayAlloc);

overlayAlloc.copyTo(overlay);

view.setBackground(new BitmapDrawable(

getResources(), overlay));

rs.destroy();

statusText.setText(System.currentTimeMillis() - startMs + "ms");

}

@Override

public String toString() {

return "RenderScript";

}

private TextView addStatusText(ViewGroup container) {

TextView result = new TextView(getActivity());

result.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));

result.setTextColor(0xFFFFFFFF);

container.addView(result);

return result;

}

在Fragment创建的时候，我先载入了布局文件，然后把TextView添加到我在布局文件中定义的LinearLayout中（用来显示模糊效果，进行效果测试），最后对图片做模糊处理。
在applyBlur()函数中我注册了onPreDrawListener()。因为在applyBlur()方法调用的时候界面还没有开始布局，所以我需要实现这个监听器否则不能进行模糊处理。需要等到布局文件全都经过measured、laid out、displayed的时候，才能进行操作。
在onPreDraw()回调函数中，我首先把返回值false改成true。这个很重要，如果返回false的话，刚开始出现的那一帧画面会被跳过，但是我们需要显示这第一帧，所以要返回true。
接着我去掉了里面的回调方法，因为我们不需要监听它的preDraw事件。
然后我们需要从ImageView中获取Bitmap，然后用getDrawingCache()函数创建drawing cache并保存。
最后就是进行模糊处理了，我们接下来会详细讨论这个环节。

需要说明的是，我的代码中在两种情况下考虑不是很周全：

在布局文件改变时不会再自动重新模糊处理。这个问题可以通过注册onGlobalLayoutListener监听器解决，在布局文件改变时重新进行模糊处理就可以了。
这个模糊处理操作是在主线程中进行的。我们知道在实际开发中不会这么做，但是为了方便暂时先这么做了。

现在回到blur()方法：

首先我创建了一个空的bitmap，把背景的一部分复制进去，之后我会对这个bitmap进行模糊处理并设置为TextView的背景。
通过这个bitmap保存Canvas的状态；
在父布局文件中把Canvas移动到TextView的位置；
把ImageView的内容绘到bitmap中；
此时，我们就有了一个和TextView一样大小的bitmap，它包含了ImageView的一部分内容，也就是TextView背后一层布局的内容；
创建一个Renderscript的实例；
把bitmap复制一份到Renderscript需要的数据片中；
创建Renderscript模糊处理的实例；
设置输入，半径范围然后进行模糊处理；
把处理后的结果复制回之前的bitmap中；
好了，我们已经把bitmap惊醒模糊处理了，可以将它设置为TextView背景了；

这是我们处理后的效果：