Hopefully we’re growing all the time ~

Look here ~

• • • blurkit三方框架
    • • 前期提要
      • 使用方式
      • 完整代碼
    • blurry三方框架
    • • 使用方式
      • 實際使用

blurkit三方框架

記得去年做項目的時候，有涉及到毛玻璃遮罩層的功能，但是因為項目時間太緊，所以放棄了毛玻璃的效果，索性最近有時間就學習記錄一波 ~ 文中細節并沒有去處理，只是用最簡單的方式，實現了我的需求 ~

半成品 - Demo 效果
注 ：個人感覺，更適合整體遮罩層

前期提要

要實現效果可直接跳到使用方式開始看!

關于更具體的詳情，請查看文末的借鑒文章之處 > <~

• 模糊方案

1.Java實現，一般都是采用Stack模糊算法 (親測：頻繁invalidate()，模糊效果消失)
2.RenderScript實現 (親測：頻繁invalidate()，模糊效果消失)
3.Native實現 （未嘗試）
4.OpenCV或者OpenGL實現（未嘗試）

• BlurLayout自定義屬性

注：只用到了blurkit:blk_fps屬性，其他屬性一用就報錯，崩潰的那種，具體問題沒有去排查，因為懶 ~

看別人的博客也存在這樣的問題，原話是這樣的：在blurkit-android的目前的代碼中（包括最新版本），BlurLayout的blk_alpha屬性并不能使用。因為在代碼中存在類型轉換錯誤。英語好的同學可以去提issue

當然他說的是blk_alpha屬性 - - 有機會我在重新嘗試

//每過1000/fps的時間重新繪制一次BlurLayout，blurkit:blk_fps="60"//透明度blurkit:blk_alpha="0.5"//模糊半徑blurkit:blk_blurRadius="15"//BlurLayout的圓角半徑blurkit:blk_cornerRadius="30dp"//縮放大小，是先放大再縮小，所以值太大則有可能OOMblurkit:blk_downscaleFactor="0.12"

• 直接對View及Bitmap進行高斯模糊的使用(測量TextView會崩潰，提示寬高測不到，為0)

//進行BlurKit初始化，在Application中初始化BlurKit.init(this);//通過RenderScript進行高斯模糊并返回一個bitmap，iv1可以是一個View，也可以是一個ViewGroup，25是模糊半徑Bitmap bt=BlurKit.getInstance().blur(iv1, 25);//通過RenderScript進行高斯模糊并返回一個bitmap，傳入的是一個bitmap，25是模糊半徑Bitmap bt=BlurKit.getInstance().blur(bitmap, 25);//通過RenderScript進行高斯模糊并返回一個bitmap，iv1可以是一個View，也可以是一個ViewGroup，25是模糊半徑，2代表縮放比例，如果值太大可能會出現OOMBitmap bt=BlurKit.getInstance().fastBlur(iv1,25,2)

• blurkit-android的毛玻璃實現原理(Me no look)

//在類BlurKit中public Bitmap blur(Bitmap src, int radius) {final Allocation input = Allocation.createFromBitmap(rs, src);final Allocation output = Allocation.createTyped(rs, input.getType());final ScriptIntrinsicBlur script = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs));script.setRadius(radius);script.setInput(input);script.forEach(output);output.copyTo(src);return src;}

使用方式

• bulid.app

注 ：要使用blurkit-android的1.1.1版本（目前最新版本），不要使用1.1.0版本（雖然GitHub上的使用文檔還是1.1.0）
因為使用1.1.1版本時minSdkVersion的值可以是17，而使用1.1.0版本時minSdkVersion的值必須是21

implementation 'io.alterac.blurkit:blurkit:1.1.1'

• xml

<io.alterac.blurkit.BlurLayoutandroid:id="@+id/blurLayout"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_gravity="center"blurkit:blk_fps="0"/>

• Activity、Fragment等使用處

@Overrideprotected void onStart() {super.onStart();blurLayout.startBlur();blurLayout.lockView();}@Overrideprotected void onStop() {super.onStop();blurLayout.pauseBlur();}

完整代碼

• MainActivity

package nkwl.com.glassdemo;import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.widget.TextView; import android.widget.Toast;import io.alterac.blurkit.BlurLayout;public class MainActivity extends AppCompatActivity {private BlurLayout blurLayout;private TextView mStart;private TextView mStop;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mStart = findViewById(R.id.tv_start);mStop = findViewById(R.id.tv_stop);blurLayout = findViewById(R.id.blurLayout);mStart.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Toast.makeText(MainActivity.this, "開始模糊", Toast.LENGTH_LONG).show();blurLayout.setVisibility(View.VISIBLE);}});mStop.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Toast.makeText(MainActivity.this, "停止模糊", Toast.LENGTH_LONG).show();blurLayout.setVisibility(View.GONE);}});}@Overrideprotected void onStart() {super.onStart();blurLayout.startBlur();blurLayout.lockView();}@Overrideprotected void onStop() {super.onStop();blurLayout.pauseBlur();} }

• activity_main

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:blurkit="http://schemas.android.com/apk/res-auto"android:id="@+id/ll_parent"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@mipmap/bg"android:orientation="vertical"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="45dp"android:orientation="horizontal"><TextViewandroid:id="@+id/tv_start"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:text="開始模糊" /><TextViewandroid:id="@+id/tv_stop"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:text="停止模糊" /></LinearLayout><io.alterac.blurkit.BlurLayoutandroid:id="@+id/blurLayout"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_gravity="center"android:visibility="gone"blurkit:blk_fps="0"><TextViewandroid:layout_width="match_parent"android:layout_height="100dp"android:layout_marginTop="266dp"android:background="#fff"android:gravity="center"android:text="開始的開始，我們只是孩子"android:textColor="#f96" /></io.alterac.blurkit.BlurLayout></LinearLayout>

---

blurry三方框架

半成品 - Demo 效果 （模糊效果有點丑 - -）

注 ：個人感覺，更適合單一控件

使用方式

//for ViewGroup 親測無效，可能是個人原因Blurry.with(context).radius(10)//模糊半徑.sampling(8)//縮放大小，先縮小再放大.color(Color.argb(66, 255, 255, 0))//顏色.async()//是否異步.animate(500)//顯示動畫，目前僅支持淡入淡出，默認時間是300毫秒，僅支持傳入控件為ViewGroup.onto(viewGroup);//for viewBlurry.with(context) 親測無效，可能是個人原因.radius(10)//模糊半徑.sampling(8)//縮放大小，先縮小再放大.color(Color.argb(66, 255, 255, 0))//顏色.async()//是否異步.capture(view)//傳入View.into(view);//顯示View//for bitmap 親測有效Blurry.with(context).radius(10)//模糊半徑.sampling(8)//縮放大小，先縮小再放大.color(Color.argb(66, 255, 255, 0))//顏色.async()//是否異步.from(bitmap)//傳入bitmap.into(view);//顯示View

實際使用

注：只實現了第三種使用方法

• build.app

implementation 'jp.wasabeef:blurry:3.0.0'

• MainActivity

package nkwl.com.glassdemo;import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Color; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.widget.ImageView; import android.widget.Toast;import jp.wasabeef.blurry.Blurry;public class MainActivity extends AppCompatActivity {private ImageView mAlineView;private Bitmap bitmap;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mAlineView = findViewById(R.id.tv_aline_view);//本地圖片轉為bitmap進行數據傳入bitmap = BitmapFactory.decodeResource(this.getResources(), R.mipmap.bg);findViewById(R.id.tv_start).setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Toast.makeText(MainActivity.this, "開始模糊", Toast.LENGTH_LONG).show();Blurry.with(MainActivity.this).radius(10)//模糊半徑.sampling(8)//縮放大小，先縮小再放大.color(Color.argb(66, 255, 255, 0))//顏色.async()//是否異步.from(bitmap)//傳入View.into(mAlineView);//顯示View}});findViewById(R.id.tv_stop).setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Toast.makeText(MainActivity.this, "停止模糊", Toast.LENGTH_LONG).show();Blurry.with(MainActivity.this).radius(10)//模糊半徑.sampling(8)//縮放大小，先縮小再放大.color(Color.argb(0, 0, 0, 0))//顏色.async()//是否異步.from(bitmap)//傳入View.into(mAlineView);//顯示View}});} }

• activity_main

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@mipmap/bg"android:orientation="vertical"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="45dp"android:orientation="horizontal"><TextViewandroid:id="@+id/tv_start"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:text="開始模糊" /><TextViewandroid:id="@+id/tv_stop"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:text="停止模糊" /></LinearLayout><ImageViewandroid:id="@+id/tv_aline_view"android:layout_width="match_parent"android:layout_height="100dp"android:layout_marginTop="266dp"android:contentDescription="@null"android:gravity="center"android:scaleType="fitXY"android:src="@drawable/bg"android:visibility="visible" /></LinearLayout>

借鑒文章

• 玉剛說推薦 - 毛玻璃效果在Android的實現
  
• 原作者項目github地址 - blurkit-android

總結

以上是生活随笔為你收集整理的Android进阶之路 - 毛玻璃遮罩层的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。