移动端UI设计越来越流行的高斯模糊（Gaussian blur）和毛玻璃效果（磨砂效果），如何使用Android RenderScript简单实现？

Posted 2020-08-28

高斯模糊（Gaussian blur）和毛玻璃效果（亦称磨砂效果），近两年在移动端的UI设计上越来越流行，特别是ios手机上出现的较多，iOS系统也提供了相应的API帮助开发人员分分钟实现这两个效果。而android系统则经历了一个漫长的探索过程，对图片的处理，从Java算法到NDK方式实现等，各种摸索层出不穷。

值得欣慰的是，Google终于在API 11中引入了 RenderScript ，一个强大的图片处理框架，帮助Android开发人员专注于图片处理算法而不是API的调度工作。使用RenderScript进行图片处理，还需要了解 RenderScript Intrinsics ，一些可以帮助RenderScript快速实现各种图片处理的操作类。比如 ScriptIntrinsicBlur ，可以简单高效地帮助我们实现高斯模糊效果：

public Bitmap blurBitmap(Bitmap bitmap){
		
	//Let‘s create an empty bitmap with the same size of the bitmap we want to blur
	Bitmap outBitmap = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Config.ARGB_8888);
		
	//Instantiate a new Renderscript
	RenderScript rs = RenderScript.create(getApplicationContext());
		
	//Create an Intrinsic Blur Script using the Renderscript
	ScriptIntrinsicBlur blurScript = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs));
		
	//Create the Allocations (in/out) with the Renderscript and the in/out bitmaps
	Allocation allIn = Allocation.createFromBitmap(rs, bitmap);
	Allocation allOut = Allocation.createFromBitmap(rs, outBitmap);
		
	//Set the radius of the blur: 0 < radius <= 25
	blurScript.setRadius(25.0f);
		
	//Perform the Renderscript
	blurScript.setInput(allIn);
	blurScript.forEach(allOut);
		
	//Copy the final bitmap created by the out Allocation to the outBitmap
	allOut.copyTo(outBitmap);
		
	//recycle the original bitmap
	bitmap.recycle();
		
	//After finishing everything, we destroy the Renderscript.
	rs.destroy();
		
	return outBitmap;	
		
}

通过设置模糊半径（radius）的大小来控制图片的清晰度，简短的几行代码轻松实现图片的高斯模糊处理，我们看一下radius等于最大值25时的图片模糊效果：

原图效果：

高斯模糊：

注意：ScriptIntrinsicBlur的相关方法只支持API 17及以上版本的系统，为了兼容旧版本，Google供了support.v8包，在使用RenderScript和Intrinsics类时，引入v8包中的相关类即可：

import android.support.v8.renderscript.Allocation;
import android.support.v8.renderscript.Element;
import android.support.v8.renderscript.RenderScript;
import android.support.v8.renderscript.ScriptIntrinsicBlur;

同时，在 app/build.gradle 文件的 defaultConfig 配置中，添加如下两行内容即可：

defaultConfig {
	......
	renderscriptTargetApi 19
	renderscriptSupportModeEnabled  true
}

在设计上巧妙地运用高斯模糊往往能达到出乎意料的体验效果，比如大神 daimajia 就利用RenderScript和 NineOldAndroids 做了一个比较有创意的UI交互，开源库为： AndroidViewHover ，效果如下，感兴趣的同学可以一探究竟：

写在最后：FOR Freedom | 知识就应该被开放的获取，看看外边的世界，以及IT这一行，少不了去Google查资料，最后，安利一个V——PN代理。一枝红杏 VPN，去Google查资料是绝对首选，连接速度快，使用也方便。我买的是99￥一年的，通过这个链接（http://my.yizhihongxing.com/aff.php?aff=2509）注册后输上会员中心得优惠码，平摊下来，每月才7块钱，特实惠。

本文标签： Android高斯模糊(毛玻璃/磨砂)移动端UI设计RenderScriptScriptIntrinsicBlur

转自 SUN‘S BLOG - 专注互联网知识，分享互联网精神！

原文地址 ： 《移动端UI设计越来越流行的高斯模糊（Gaussian blur）和毛玻璃效果（磨砂效果），如何使用Android RenderScript简单实现？》

相关阅读:《Aaron Swartz – 互联网天才开挂的人生历程：每时每刻都问自己，现在这世界有什么最重要的事是我能参与去做的？》
相关阅读:《网站环境apache + php + mysql 的XAMPP，如何实现一个服务器上配置多个网站？》

相关阅读:《什么是工程师文化？各位工程师是为什么活的？作为一个IT或互联网公司为什么要工程师文化?》

相关阅读: 对程序员有用：2017最新能上Google的hosts文件下载及总结网友遇到的各种hosts问题解决方法及配置详解

相关阅读: 《春节将至，又到了评绩效拿年终奖的时候！程序员绩效KPI 这个弥久历史谜题该怎么算呢？》

相关BLOG：SUN’S BLOG - 专注互联网知识，分享互联网精神！去看看：www.whosmall.com