您的位置:首頁技術文章
文章詳情頁

Android仿微信通話背景的高斯模糊效果

瀏覽:139日期:2022-06-03 16:45:15

先看下效果圖:

Android仿微信通話背景的高斯模糊效果

仔細觀察上圖,我們可以發現,背景圖以用戶頭像為模板,對其進行了高斯模糊,并把它作為整個頁面的背景色。

關于Android如何快速實現高斯模糊(毛玻璃效果),網上一堆相關介紹, 下面直接給出網上模糊化工具類(已驗證可行):

import android.graphics.Bitmap;/** * 快速模糊化工具 */public class FastBlur { public static Bitmap doBlur(Bitmap sentBitmap, int radius, boolean canReuseInBitmap) {Bitmap bitmap;if (canReuseInBitmap) { bitmap = sentBitmap;} else { bitmap = sentBitmap.copy(sentBitmap.getConfig(), true);}if (radius < 1) { return (null);}int w = bitmap.getWidth();int h = bitmap.getHeight();int[] pix = new int[w * h];bitmap.getPixels(pix, 0, w, 0, 0, w, h);int wm = w - 1;int hm = h - 1;int wh = w * h;int div = radius + radius + 1;int r[] = new int[wh];int g[] = new int[wh];int b[] = new int[wh];int rsum, gsum, bsum, x, y, i, p, yp, yi, yw;int vmin[] = new int[Math.max(w, h)];int divsum = (div + 1) >> 1;divsum *= divsum;int dv[] = new int[256 * divsum];for (i = 0; i < 256 * divsum; i++) { dv[i] = (i / divsum);}yw = yi = 0;int[][] stack = new int[div][3];int stackpointer;int stackstart;int[] sir;int rbs;int r1 = radius + 1;int routsum, goutsum, boutsum;int rinsum, ginsum, binsum;for (y = 0; y < h; y++) { rinsum = ginsum = binsum = routsum = goutsum = boutsum = rsum = gsum = bsum = 0; for (i = -radius; i <= radius; i++) {p = pix[yi + Math.min(wm, Math.max(i, 0))];sir = stack[i + radius];sir[0] = (p & 0xff0000) >> 16;sir[1] = (p & 0x00ff00) >> 8;sir[2] = (p & 0x0000ff);rbs = r1 - Math.abs(i);rsum += sir[0] * rbs;gsum += sir[1] * rbs;bsum += sir[2] * rbs;if (i > 0) { rinsum += sir[0]; ginsum += sir[1]; binsum += sir[2];} else { routsum += sir[0]; goutsum += sir[1]; boutsum += sir[2];} } stackpointer = radius; for (x = 0; x < w; x++) {r[yi] = dv[rsum];g[yi] = dv[gsum];b[yi] = dv[bsum];rsum -= routsum;gsum -= goutsum;bsum -= boutsum;stackstart = stackpointer - radius + div;sir = stack[stackstart % div];routsum -= sir[0];goutsum -= sir[1];boutsum -= sir[2];if (y == 0) { vmin[x] = Math.min(x + radius + 1, wm);}p = pix[yw + vmin[x]];sir[0] = (p & 0xff0000) >> 16;sir[1] = (p & 0x00ff00) >> 8;sir[2] = (p & 0x0000ff);rinsum += sir[0];ginsum += sir[1];binsum += sir[2];rsum += rinsum;gsum += ginsum;bsum += binsum;stackpointer = (stackpointer + 1) % div;sir = stack[(stackpointer) % div];routsum += sir[0];goutsum += sir[1];boutsum += sir[2];rinsum -= sir[0];ginsum -= sir[1];binsum -= sir[2];yi++; } yw += w;}for (x = 0; x < w; x++) { rinsum = ginsum = binsum = routsum = goutsum = boutsum = rsum = gsum = bsum = 0; yp = -radius * w; for (i = -radius; i <= radius; i++) {yi = Math.max(0, yp) + x;sir = stack[i + radius];sir[0] = r[yi];sir[1] = g[yi];sir[2] = b[yi];rbs = r1 - Math.abs(i);rsum += r[yi] * rbs;gsum += g[yi] * rbs;bsum += b[yi] * rbs;if (i > 0) { rinsum += sir[0]; ginsum += sir[1]; binsum += sir[2];} else { routsum += sir[0]; goutsum += sir[1]; boutsum += sir[2];}if (i < hm) { yp += w;} } yi = x; stackpointer = radius; for (y = 0; y < h; y++) {// Preserve alpha channel: ( 0xff000000 & pix[yi] )pix[yi] = (0xff000000 & pix[yi]) | (dv[rsum] << 16) | (dv[gsum] << 8) | dv[bsum];rsum -= routsum;gsum -= goutsum;bsum -= boutsum;stackstart = stackpointer - radius + div;sir = stack[stackstart % div];routsum -= sir[0];goutsum -= sir[1];boutsum -= sir[2];if (x == 0) { vmin[y] = Math.min(y + r1, hm) * w;}p = x + vmin[y];sir[0] = r[p];sir[1] = g[p];sir[2] = b[p];rinsum += sir[0];ginsum += sir[1];binsum += sir[2];rsum += rinsum;gsum += ginsum;bsum += binsum;stackpointer = (stackpointer + 1) % div;sir = stack[stackpointer];routsum += sir[0];goutsum += sir[1];boutsum += sir[2];rinsum -= sir[0];ginsum -= sir[1];binsum -= sir[2];yi += w; }}bitmap.setPixels(pix, 0, w, 0, 0, w, h);return (bitmap); }}

那么,我們使用這個工具類,就可以高仿微信聊天頁面了么?答案是NO。

我們先看下直接使用該工具類能實現的效果:

Android仿微信通話背景的高斯模糊效果

我們可以看出來,通過該工具類,能實現圖片的毛玻璃效果,可是并不理想,因為微信的背景顏色偏暗,而我們模糊化得到的圖片顏色偏淡。效果有些不盡如人意。了解ios的人,或許知道,ios實現高斯模糊有直接的api:UIBlurEffectStyleExtraLight、UIBlurEffectStyleLight 、UIBlurEffectStyleDark,而UIBlurEffectStyleDark就可以直接實現比較暗的毛玻璃效果。那放在android這邊,該如何辦呢?

我這里采用的是“曲線求國”的策略,要想背景色偏暗,我們使用FrameLayout布局,在其中添加一個比較暗的一層View,就可以實現啦。

<?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' android:fitsSystemWindows='true' android:orientation='vertical'> <ImageViewandroid: android:layout_width='match_parent'android:layout_height='match_parent'android:adjustViewBounds='true'android:maxHeight='1500dp'android:maxWidth='1000dp'android:scaleType='centerCrop' /> <ImageViewandroid:layout_width='match_parent'android:layout_height='match_parent'android:background='#90000000' /> <RelativeLayoutandroid: android:layout_width='match_parent'android:layout_height='match_parent'android:fitsSystemWindows='true'android:orientation='vertical'><ImageView android: android:layout_width='100dp' android:layout_height='100dp' android:layout_centerHorizontal='true' android:layout_marginTop='80dp' android:scaleType='fitXY' android:src='http://www.wxshucaidpc.com/bcjs/@mipmap/ic_launcher' /><TextView android: android:layout_width='wrap_content' android:layout_height='wrap_content' android:layout_below='@id/imgUserHead' android:layout_centerHorizontal='true' android:layout_marginTop='30dp' android:gravity='center_horizontal' android:text='靜音' android:textColor='#ffffff' android:textSize='24dp' /></RelativeLayout></FrameLayout>

上面代碼中,可以看到,我們添加了這么一個ImageView:

<ImageViewandroid:layout_width='match_parent'android:layout_height='match_parent'android:background='#90000000' />

如此這般,便是可以實現真正的高仿啦。

最重實現的效果圖如下:

Android仿微信通話背景的高斯模糊效果

源碼地址:

https://github.com/zuiwuyuan/FastBlur_VoiceChat

到這里就結束啦。

以上就是Android仿微信通話背景的高斯模糊效果的詳細內容,更多關于Android 高斯模糊效果的資料請關注好吧啦網其它相關文章!

標簽: 微信
相關文章:
国产综合久久一区二区三区