Android中实现iOS中的毛玻璃效果

最新推荐文章于 2024-03-03 08:21:41 发布

qq_20118885

最新推荐文章于 2024-03-03 08:21:41 发布

阅读量493

点赞数

分类专栏：安卓文章标签： android

安卓专栏收录该内容

1 篇文章 0 订阅

订阅专栏

为了实现毛玻璃效果，我们需要一组compute kernels（.rs文件中编写），及一组用于控制renderScript相关的 Javaapi(.rs文件自动生成为 Java类)。由于 compute kernels的编写需要一定的学习成本，从 JELLY_BEAN_MR1开始，Androied内置了一些 compute kernels用于常用的操作，其中就包括了 Gaussian blur。

下面，通过实操来讲解一下RenderScript来实现高斯模糊，最终实现效果（讲文字背景进行模糊处理）：

实现代码:

<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"></head><body><textarea style="width:99%;height:99%">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, true);
            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(SecondActivity.this);

    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("cost " + (System.currentTimeMillis() - startMs) +
 "ms");
}</textarea></body></html>

布局如下：

<?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/splash"
        android:scaleType="centerCrop" />

    <TextView
        android:id="@+id/text"
        android:gravity="center_horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Gaussian Blur"
        android:textColor="@android:color/black"
        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>

qq_20118885

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Android中实现iOS中的毛玻璃效果

为了实现毛玻璃效果，我们需要一组compute kernels（.rs文件中编写），及一组用于控制renderScript相关的Javaapi(.rs文件自动生成为Java类)。由于compute kernels的编写需要一定的学习成本，从JELLY_BEAN_MR1开始，Androied内置了一些compute kernels用于常用的操作，其中就包括了Gaussian blur。
复制链接

扫一扫