搞事情,實現Instagram對話框背景模糊效果
前言
逛ins的時候,偶然發現,instagram的對話框設計的很有意思,如下圖:
它的dialog的背景竟然是毛玻璃效果的,在我看來真漂亮,恩,對話框和迪麗熱巴都漂亮:joy:。看到這么好的效果,當然就要開始搞事情了,自己動手實現差不多的效果。最終的實現效果如下圖:
分別實現了對話框背景的虛化和手動調節虛化程度。
實現方法對比
最開始想要實現毛玻璃效果時,我是一臉懵逼的,不知道如何下手。幸虧,有萬能的Google。搜索之后發現常見的實現方法有4種,分別是:
- RenderScript
- Java算法
- NDK算法
- openGL
處理一整張圖片這么大計算量的工作,openGL的性能最好,而用java實現肯定是最差的了。而RenderScript和NDK的性能相當,但是你懂得,NDK和openGL我無可奈何,綜合考慮,RenderScript應該是最適合的。
但并不是說RenderScript就是完全沒有問題的:
- 模糊半徑(radius)越大,性能要求越高,模糊半徑不能超過25,所以并不能得到模糊度非常高的圖片。
- ScriptIntrinsicBlur在API 17時才被引入,如果需要在Android 4.2以下的設備上實現,就需要引入RenderScript Support Library,當然,安裝包體積會相應的增大。
RenderScript實現
首先在 app
目錄下 build.gradle
文件中添加如下代碼:
defaultConfig { applicationId quot;io.github.marktony.gaussianblurquot; minSdkVersion 19 targetSdkVersion 25 versionCode 1 versionName quot;1.0quot; renderscriptTargetApi 19 renderscriptSupportModeEnabled true }
RenderScriptIntrinsics提供了一些可以幫助我們快速實現各種圖片處理的操作類,例如, ScriptIntrinsicBlur
,可以簡單高效實現 高斯模糊效果。
package io.github.marktony.gaussianblur; import android.content.Context; import android.graphics.Bitmap; import android.support.annotation.IntRange; import android.support.annotation.NonNull; import android.support.v8.renderscript.Allocation; import android.support.v8.renderscript.Element; import android.support.v8.renderscript.RenderScript; import android.support.v8.renderscript.ScriptIntrinsicBlur; public classRenderScriptGaussianBlur{ private RenderScript renderScript; publicRenderScriptGaussianBlur(@NonNull Context context){ this.renderScript = RenderScript.create(context); } publicBitmapgaussianBlur(@IntRange(from =1, to =25)intradius, Bitmap original){ Allocation input = Allocation.createFromBitmap(renderScript, original); Allocation output = Allocation.createTyped(renderScript, input.getType()); ScriptIntrinsicBlur scriptIntrinsicBlur = ScriptIntrinsicBlur.create(renderScript, Element.U8_4(renderScript)); scriptIntrinsicBlur.setRadius(radius); scriptIntrinsicBlur.setInput(input); scriptIntrinsicBlur.forEach(output); output.copyTo(original); return original; } }
然后就可以直接使用RenderScriptGaussianBlur,愉快地根據SeekBar的值,實現不同程度的模糊了。
package io.github.marktony.gaussianblur; import android.content.DialogInterface; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.support.v7.app.AlertDialog; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.util.Log; import android.view.View; import android.view.Window; import android.view.WindowManager; import android.widget.FrameLayout; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.SeekBar; import android.widget.TextView; public classMainActivityextendsAppCompatActivity{ private ImageView imageView; private ImageView container; private LinearLayout layout; private TextView textViewProgress; private RenderScriptGaussianBlur blur; @Override protectedvoidonCreate(Bundle savedInstanceState){ super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); imageView = (ImageView) findViewById(R.id.imageView); container = (ImageView) findViewById(R.id.container); container.setVisibility(View.GONE); layout = (LinearLayout) findViewById(R.id.layout); layout.setVisibility(View.VISIBLE); SeekBar seekBar = (SeekBar) findViewById(R.id.seekBar); textViewProgress = (TextView) findViewById(R.id.textViewProgress); TextView textViewDialog = (TextView) findViewById(R.id.textViewDialog); blur = new RenderScriptGaussianBlur(MainActivity.this); seekBar.setMax(25); seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() { @Override publicvoidonProgressChanged(SeekBar seekBar,intprogress,booleanfromUser){ textViewProgress.setText(String.valueOf(progress)); } @Override publicvoidonStartTrackingTouch(SeekBar seekBar){ } @Override publicvoidonStopTrackingTouch(SeekBar seekBar){ int radius = seekBar.getProgress(); if (radius lt; 1) { radius = 1; } Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.image); imageView.setImageBitmap(blur.gaussianBlur(radius, bitmap)); } }); textViewDialog.setOnClickListener(new View.OnClickListener() { @Override publicvoidonClick(View v){ container.setVisibility(View.VISIBLE); layout.setDrawingCacheEnabled(true); layout.setDrawingCacheQuality(View.DRAWING_CACHE_QUALITY_LOW); Bitmap bitmap = layout.getDrawingCache(); container.setImageBitmap(blur.gaussianBlur(25, bitmap)); layout.setVisibility(View.INVISIBLE); AlertDialog dialog = new AlertDialog.Builder(MainActivity.this).create(); dialog.setTitle(quot;Titlequot;); dialog.setMessage(quot;Messagequot;); dialog.setButton(DialogInterface.BUTTON_POSITIVE, quot;OKquot;, new DialogInterface.OnClickListener() { @Override publicvoidonClick(DialogInterface dialog,intwhich){ dialog.dismiss(); } }); dialog.setButton(DialogInterface.BUTTON_NEGATIVE, quot;Cancelquot;, new DialogInterface.OnClickListener() { @Override publicvoidonClick(DialogInterface dialog,intwhich){ } }); dialog.setOnCancelListener(new DialogInterface.OnCancelListener() { @Override publicvoidonCancel(DialogInterface dialog){ } }); dialog.setOnCancelListener(new DialogInterface.OnCancelListener() { @Override publicvoidonCancel(DialogInterface dialog){ container.setVisibility(View.GONE); layout.setVisibility(View.VISIBLE); } }); dialog.show(); } }); } }
在代碼里做了一些view的可見性的操作,比較簡單,相信你能看懂的。和instagram中dialog的實現有一點不同的是,我沒有截取整個頁面的bitmap,只是截取了actionbar下的內容,如果一定要實現一樣的效果,調整一下頁面的布局就可以了。這里不多說了。
是不是很簡單呢?
輪子
除了RenderScript外,還有一些優秀的輪子:
- 500px-android-blur
- Blurry
- android-stackblur
- FastBlur :Java算法實現
BlurTestAndroid 對不同類庫的實現方式、采取的算法和所耗費的時間做了統計和比較,你也可以下載它的demo app,自行測試。
示例代碼在這里: GaussianBlur
Tags: RenderScript Bitmap
文章來源:https://marktony.github.io/2017/01/12/使用RenderScri