热门标签 | HotTags
当前位置:  开发笔记 > Android > 正文

教你快速实现Android动态模糊效果

相信大家都发现了越来越多的App里面使用了模糊效果,比如雅虎天气的界面,虽然我并不知道雅虎天气是怎么做出这种效果的,但是简单的模仿一下的话,还是能做到的。下面一起来学习学习。

前言

雅虎天气的界面上滑的时候背景图片会跟着移动,最重要的是背景图片会根据手指上下移动的距离来进行不同程度的模糊,感觉甚为惊奇,毕竟大家都知道,在Android平台上进行模糊渲染是一个相当耗CPU也相当耗时的操作,一旦处理不好,卡顿是在所难免的。

一般来说,考虑到效率,渲染一张图片最好的方法是使用OpenGL,其次是使用C++/C,使用Java代码是最慢的。但是Android推出RenderScript之后,我们就有了新的选择,测试表明,使用RenderScript的渲染效率和使用C/C++不相上下,但是使用RenderScript却比使用JNI简单地多!同时,Android团队提供了RenderScript的支持库,使得在低版本的Android平台上也能使用。

不过在使用RenderScript之前,对于模糊一张图片,需要注意的是,我们应该尽量不要使用原尺寸分辨率的图片,最好将图片缩小比例,这小渲染的效率要高一些。

动态模糊的实现

如何使用RenderScript来模糊一张图片呢?废话不多说,先上核心代码:

public class BlurBitmap {
 /**
  * 图片缩放比例
  */
 private static final float BITMAP_SCALE = 0.4f;
 /**
  * 最大模糊度(在0.0到25.0之间)
  */
 private static final float BLUR_RADIUS = 25f;
 
 /**
  * 模糊图片的具体方法
  *
  * @param context 上下文对象
  * @param image  需要模糊的图片
  * @return   模糊处理后的图片
  */
 public static Bitmap blur(Context context, Bitmap image) {
  // 计算图片缩小后的长宽
  int width = Math.round(image.getWidth() * BITMAP_SCALE);
  int height = Math.round(image.getHeight() * BITMAP_SCALE);
 
  // 将缩小后的图片做为预渲染的图片。
  Bitmap inputBitmap = Bitmap.createScaledBitmap(image, width, height, false);
  // 创建一张渲染后的输出图片。
  Bitmap outputBitmap = Bitmap.createBitmap(inputBitmap);
 
  // 创建RenderScript内核对象
  RenderScript rs = RenderScript.create(context);
  // 创建一个模糊效果的RenderScript的工具对象
  ScriptIntrinsicBlur blurScript = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs));
 
  // 由于RenderScript并没有使用VM来分配内存,所以需要使用Allocation类来创建和分配内存空间。
  // 创建Allocation对象的时候其实内存是空的,需要使用copyTo()将数据填充进去。
  Allocation tmpIn = Allocation.createFromBitmap(rs, inputBitmap);
  Allocation tmpOut = Allocation.createFromBitmap(rs, outputBitmap);
 
  // 设置渲染的模糊程度, 25f是最大模糊度
  blurScript.setRadius(BLUR_RADIUS);
  // 设置blurScript对象的输入内存
  blurScript.setInput(tmpIn);
  // 将输出数据保存到输出内存中
  blurScript.forEach(tmpOut);
 
  // 将数据填充到Allocation中
  tmpOut.copyTo(outputBitmap);
 
  return outputBitmap;
 }
}

完成上面的代码后,需要在app的gradle文件中添加如下的支持:

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

代码做了简单的注释以帮助理解,如果需要详细了解,可以查阅官方文档

然后,我们可以看一下模糊前和模糊后的效果对比:

将图片模糊后,接下来要考虑的是怎么实现动态模糊效,有一点需要注意的是,即使我们使用了RenderScript这种高效的渲染方式,但是在实际测试中,渲染一张500*700分辨率的PNG格式图片,在我的Pro 6手机上,仍然需要50ms左右的时间,显然如果使用上面的代码进行实时渲染的话,会造成界面严重的卡顿。

既然实时渲染这条路走不通,那么就需要我们另辟蹊径了,我这里可以提供一种方法:先将图片进行最大程度的模糊处理,再将原图放置在模糊后的图片上面,通过不断改变原图的透明度(Alpha值)来实现动态模糊效果。

简单的代码如下:

public class MainActivity extends AppCompatActivity {
 
 /**
  * 原始图片控件
  */
 private ImageView mOriginImg;
 
 /**
  * 模糊后的图片控件
  */
 private ImageView mBluredImage;
 
 /**
  * 进度条SeekBar
  */
 private SeekBar mSeekBar;
 
 /**
  * 显示进度的文字
  */
 private TextView mProgressTv;
 
 /**
  * 透明度
  */
 private int mAlpha;
 
 /**
  * 原始图片
  */
 private Bitmap mTempBitmap;
 
 /**
  * 模糊后的图片
  */
 private Bitmap mFinalBitmap;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
 
  // 初始化视图
  initViews();
 
  // 获取图片
  mTempBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.dayu);
  mFinalBitmap = BlurBitmap.blur(this, mTempBitmap);
 
  // 填充模糊后的图像和原图
  mBluredImage.setImageBitmap(mFinalBitmap);
  mOriginImg.setImageBitmap(mTempBitmap);
 
  // 处理seekbar滑动事件
  setSeekBar();
 }
 
 /**
  * 初始化视图
  */
 private void initViews() {
  mBluredImage = (ImageView) findViewById(R.id.activity_main_blured_img);
  mOriginImg = (ImageView) findViewById(R.id.activity_main_origin_img);
  mSeekBar = (SeekBar) findViewById(R.id.activity_main_seekbar);
  mProgressTv = (TextView) findViewById(R.id.activity_main_progress_tv);
 }
 
 /**
  * 处理seekbar滑动事件
  */
 private void setSeekBar() {
  mSeekBar.setMax(100);
  mSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
   @Override
   public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
    mAlpha = progress;
    mOriginImg.setAlpha((int) (255 - mAlpha * 2.55));
    mProgressTv.setText(String.valueOf(mAlpha));
   }
 
   @Override
   public void onStartTrackingTouch(SeekBar seekBar) {
 
   }
 
   @Override
   public void onStopTrackingTouch(SeekBar seekBar) {
 
   }
  });
 }
}

xml布局文件代码如下:

<&#63;xml version="1.0" encoding="utf-8"&#63;>

 
 
 
 
 
  
 
  
 
 

效果如下:

怎么样?是不是很简单的样子?只需要调用模糊处理方法,并在SeekBar的滑动监听里面调用原图像的setAlpha()方法,来实现动态模糊效果。

你以为这样就完了?不不不,我们的目的并不是这么单纯,哦,不对,并不是这么简单。还记得文章开头的时候说了吗?我们的终极目的是要简单地模仿一下雅虎天气的界面效果。

仿雅虎天气界面

有了上面的基础,就可以很容易地模仿雅虎天气的界面效果。简单来说,在上面制作出的效果基础上,有以下两点需要注意的地方:

需要要监听滑动事件,然后再将背景图片调用setTop()方法,将图片向上平移一段距离。
要向上平移图片,还需要手动增加图片的高度,不然图片向上平移后,底部就会有留白。设置图片高度的核心代码如下:

WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
Display display = wm.getDefaultDisplay();
Point point = new Point();
display.getSize(point);
// 获取到ImageView的高度
int height = point.y;
ViewGroup.LayoutParams params = imageView.getLayoutParams();
params.width = ViewGroup.LayoutParams.MATCH_PARENT;
// 将ImageView的高度增加100
params.height = height + 100;
// 应用更改设置
imageView.requestLayout();

完成上面两点的内容后,基本就可以模仿出雅虎天气的首页了。

结合第一个例子的demo,效果如下:

总结

以上就是本文的全部内容了,实现后的效果是不是很赞呢?感兴趣的朋友快快自己动手操作起来吧,希望本文对大家开发Android能有所帮助。


推荐阅读
  • Android 九宫格布局详解及实现:人人网应用示例
    本文深入探讨了人人网Android应用中独特的九宫格布局设计,解析其背后的GridView实现原理,并提供详细的代码示例。这种布局方式不仅美观大方,而且在现代Android应用中较为少见,值得开发者借鉴。 ... [详细]
  • 优化ListView性能
    本文深入探讨了如何通过多种技术手段优化ListView的性能,包括视图复用、ViewHolder模式、分批加载数据、图片优化及内存管理等。这些方法能够显著提升应用的响应速度和用户体验。 ... [详细]
  • Android LED 数字字体的应用与实现
    本文介绍了一种适用于 Android 应用的 LED 数字字体(digital font),并详细描述了其在 UI 设计中的应用场景及其实现方法。这种字体常用于视频、广告倒计时等场景,能够增强视觉效果。 ... [详细]
  • RecyclerView初步学习(一)
    RecyclerView初步学习(一)ReCyclerView提供了一种插件式的编程模式,除了提供ViewHolder缓存模式,还可以自定义动画,分割符,布局样式,相比于传统的ListVi ... [详细]
  • 本文详细介绍了如何使用PHP检测AJAX请求,通过分析预定义服务器变量来判断请求是否来自XMLHttpRequest。此方法简单实用,适用于各种Web开发场景。 ... [详细]
  • 本文详细介绍了如何在Linux系统上安装和配置Smokeping,以实现对网络链路质量的实时监控。通过详细的步骤和必要的依赖包安装,确保用户能够顺利完成部署并优化其网络性能监控。 ... [详细]
  • 本文探讨了 RESTful API 和传统接口之间的关键差异,解释了为什么 RESTful API 在设计和实现上具有独特的优势。 ... [详细]
  • 本文详细介绍了如何使用Spring Boot进行高效开发,涵盖了配置、实例化容器以及核心注解的使用方法。 ... [详细]
  • 本文详细介绍了Java编程语言中的核心概念和常见面试问题,包括集合类、数据结构、线程处理、Java虚拟机(JVM)、HTTP协议以及Git操作等方面的内容。通过深入分析每个主题,帮助读者更好地理解Java的关键特性和最佳实践。 ... [详细]
  • Python自动化处理:从Word文档提取内容并生成带水印的PDF
    本文介绍如何利用Python实现从特定网站下载Word文档,去除水印并添加自定义水印,最终将文档转换为PDF格式。该方法适用于批量处理和自动化需求。 ... [详细]
  • 在当前众多持久层框架中,MyBatis(前身为iBatis)凭借其轻量级、易用性和对SQL的直接支持,成为许多开发者的首选。本文将详细探讨MyBatis的核心概念、设计理念及其优势。 ... [详细]
  • 将Web服务部署到Tomcat
    本文介绍了如何在JDeveloper 12c中创建一个Java项目,并将其打包为Web服务,然后部署到Tomcat服务器。内容涵盖从项目创建、编写Web服务代码、配置相关XML文件到最终的本地部署和验证。 ... [详细]
  • XNA 3.0 游戏编程:从 XML 文件加载数据
    本文介绍如何在 XNA 3.0 游戏项目中从 XML 文件加载数据。我们将探讨如何将 XML 数据序列化为二进制文件,并通过内容管道加载到游戏中。此外,还会涉及自定义类型读取器和写入器的实现。 ... [详细]
  • 本文介绍如何在 Unity 的 XML 配置文件中,将参数传递给自定义生命周期管理器的构造函数。我们将详细探讨 CustomLifetimeManager 类的实现及其配置方法。 ... [详细]
  • 本文详细介绍了 Java 中 org.apache.xmlbeans.SchemaType 类的 getBaseEnumType() 方法,提供了多个代码示例,并解释了其在不同场景下的使用方法。 ... [详细]
author-avatar
姿葱
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有