web-dev-qa-db-ja.com

下のレイアウトをぼかした透明なぼやけたビュー

透明にしたLinearlayoutがあり、今ではぼかし効果を与える方法を探しているので、その下にあるものがぼやけてしまいます。 Windows 7 Aeroの外観と同じです(スクリーンショットを参照)。

次のようなぼかし効果ができることを知っています。

getWindow().addFlags(WindowManager.LayoutParams.FLAG_BLUR_BEHIND);

ただし、これはダイアログが表示されたときに背景をぼかすようなものにのみ適用されます。

私はほぼ1時間グーグルをしてきましたが、何も見つかりません。誰もこれを行う方法について何か提案がありますか?

ありがとう

Windows 7 Aero effect

37
Jakob

これはしばらくの間私の頭にありましたが、あなたの質問のおかげで実装しました。

これを行うには、ぼかしレイアウトの下にあるレイアウトをビットマップに描画する必要があります。ぼかしアルゴリズムを使用するよりも、そのビットマップをぼかし、最終的にぼかしレイアウトの背景としてぼかしビットマップを描画する必要があります。

幸いなことにAndroidはキャッシュされた描画メカニズムを持っているため、最初の部分は簡単です。下のレイアウトでキャッシュされた描画を有効にし、getDrawingCache()を使用してビットマップを取得できます).

ここで、高速ぼかしアルゴリズムが必要です。私はこれを使用しました https://stackoverflow.com/a/10028267/3133545

ここにあります。

import Android.graphics.Bitmap;
import Android.graphics.Canvas;
import Android.graphics.ColorFilter;
import Android.graphics.Paint;
import Android.graphics.PixelFormat;
import Android.graphics.drawable.Drawable;
import Android.util.Log;
import Android.view.View;

import Java.lang.ref.WeakReference;
import Java.util.InputMismatchException;

/**
 * A drawable that draws the target view as blurred using fast blur
 * <p/>
 * <p/>
 * TODO:we might use setBounds() to draw only part a of the target view
 * <p/>
 * Created by 10uR on 24.5.2014.
 */
public class BlurDrawable extends Drawable {

    private WeakReference<View> targetRef;
    private Bitmap blurred;
    private Paint paint;
    private int radius;


    public BlurDrawable(View target) {
        this(target, 10);
    }

    public BlurDrawable(View target, int radius) {
        this.targetRef = new WeakReference<View>(target);
        setRadius(radius);
        target.setDrawingCacheEnabled(true);
        target.setDrawingCacheQuality(View.DRAWING_CACHE_QUALITY_AUTO);
        Paint = new Paint();
        Paint.setAntiAlias(true);
        Paint.setFilterBitmap(true);
    }

    @Override
    public void draw(Canvas canvas) {
        if (blurred == null) {
            View target = targetRef.get();
            if (target != null) {
                Bitmap bitmap = target.getDrawingCache(true);
                if (bitmap == null) return;
                blurred = fastBlur(bitmap, radius);
            }
        }
        if (blurred != null && !blurred.isRecycled())
            canvas.drawBitmap(blurred, 0, 0, Paint);
    }

    /**
     * Set the bluring radius that will be applied to target view's bitmap
     *
     * @param radius should be 0-100
     */
    public void setRadius(int radius) {
        if (radius < 0 || radius > 100)
            throw new InputMismatchException("Radius must be 0 <= radius <= 100 !");
        this.radius = radius;
        if (blurred != null) {
            blurred.recycle();
            blurred = null;
        }
        invalidateSelf();
    }


    public int getRadius() {
        return radius;
    }

    @Override
    public void setAlpha(int alpha) {
    }


    @Override
    public void setColorFilter(ColorFilter cf) {

    }

    @Override
    public int getOpacity() {
        return PixelFormat.TRANSLUCENT;
    }

    /**
     * from https://stackoverflow.com/a/10028267/3133545
     * <p/>
     * <p/>
     * <p/>
     * Stack Blur v1.0 from
     * http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
     * <p/>
     * Java Author: Mario Klingemann <mario at quasimondo.com>
     * http://incubator.quasimondo.com
     * created Feburary 29, 2004
     * Android port : Yahel Bouaziz <yahel at kayenko.com>
     * http://www.kayenko.com
     * ported april 5th, 2012
     * <p/>
     * This is a compromise between Gaussian Blur and Box blur
     * It creates much better looking blurs than Box Blur, but is
     * 7x faster than my Gaussian Blur implementation.
     * <p/>
     * I called it Stack Blur because this describes best how this
     * filter works internally: it creates a kind of moving stack
     * of colors whilst scanning through the image. Thereby it
     * just has to add one new block of color to the right side
     * of the stack and remove the leftmost color. The remaining
     * colors on the topmost layer of the stack are either added on
     * or reduced by one, depending on if they are on the right or
     * on the left side of the stack.
     * <p/>
     * If you are using this algorithm in your code please add
     * the following line:
     * <p/>
     * Stack Blur Algorithm by Mario Klingemann <[email protected]>
     */
    private static Bitmap fastBlur(Bitmap sentBitmap, int radius) {


        Bitmap 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];
        Log.e("pix", w + " " + h + " " + pix.length);
        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);
    }

}

使用法 :

View beneathView = //the view that beneath blur view
View blurView= //blur View

BlurDrawable blurDrawable = new BlurDrawable(beneathView, radius);

blurView.setBackgroundDrawable(blurDrawable);

そして、私のテストアプリケーションはどのように見えましたか:

test application

このカントーを使用しないことにしました。なぜなら、それはあまりにもハックであり、私がそれが最初にあると思ったほどクールではないからです。

31
Onur

Androidでのリアルタイムのぼかしは、まだハードルです。実行可能なメカニズムのいくつかを包括的に比較します。

StackBlur(モニカーOnurの下のfastBlurによる回答に既にリストされています):

外観(半径20):

enter image description here

BitmapDrawableを生成するために記録された時間(ミリ秒):

_I/(10266): Total time taken: 35
I/(10266): Total time taken: 54
I/(10266): Total time taken: 48
I/(10266): Total time taken: 36
I/(10266): Total time taken: 48
I/(10266): Total time taken: 39
I/(10266): Total time taken: 49
I/(10266): Total time taken: 50
I/(10266): Total time taken: 35
I/(10266): Total time taken: 47
_

平均=>〜44.1 ms => 1秒あたり22のドロウアブル

RenderScript

ScriptIntrinsicBlurは、一貫して高速のぼかしを提供します。サポートライブラリを使用して利用可能なAPI 8以降。

外観(半径20):

enter image description here

BitmapDrawableを生成するために記録された時間(ミリ秒):

_I/(9342): Total time taken: 14
I/(9342): Total time taken: 16
I/(9342): Total time taken: 13
I/(9342): Total time taken: 28
I/(9342): Total time taken: 14
I/(9342): Total time taken: 12
I/(9342): Total time taken: 14
I/(9342): Total time taken: 19
I/(9342): Total time taken: 13
I/(9342): Total time taken: 13
_

平均=>〜15.6 ms => 1秒あたり64個のドロウアブル

RenderScript(半径= 3)+スケーリング(20%)

これはまともな(?)を取得する別の方法ですが、fastぼかしです。ビットマップをそのサイズの一部(たとえば20%)にスケーリングし、縮小版にぼかしアルゴリズムを適用します。それが完了したら、ビットマップを元のサイズにスケーリングします。結果は元のぼかしアルゴリズムを使用するほど良くありませんが、合格です。また、半径の値が高すぎてはいけないことに注意してください。そうしないと、結果のビットマップが識別できなくなります。

それはどのようなものか:

enter image description here

BitmapDrawableを生成するために記録された時間(ミリ秒):

_I/(11631): Total time taken: 5
I/(11631): Total time taken: 19
I/(11631): Total time taken: 3
I/(11631): Total time taken: 7
I/(11631): Total time taken: 7
I/(11631): Total time taken: 5
I/(11631): Total time taken: 7
I/(11631): Total time taken: 17
I/(11631): Total time taken: 5
I/(11631): Total time taken: 4
_

平均=>〜7.9 ms => 1秒あたり126個のドロウアブル

StackBlur(半径= 3)+スケーリング(20%)

上記の#3と同じ概念。サイズを20%に縮小し、スケーリングされたビットマップにstackblurを適用します。

enter image description here

_I/(12690): Total time taken: 4
I/(12690): Total time taken: 20
I/(12690): Total time taken: 4
I/(12690): Total time taken: 4
I/(12690): Total time taken: 5
I/(12690): Total time taken: 5
I/(12690): Total time taken: 4
I/(12690): Total time taken: 21
I/(12690): Total time taken: 3
I/(12690): Total time taken: 4
_

平均=>〜7.4 ms => 1秒あたり135個のドロウアブル

Nex4で実行されたテスト。ビットマップサイズ-200px x 200px

別のヒントbuildDrawingCache()メソッドとgetDrawingCache()メソッド自体は時間がかかります。これに代わる方法は、ぼかしの必要なビューの寸法を使用してビットマップを作成することです:

_Bitmap toDrawOn = Bitmap.createBitmap(viewWidth, viewHeight, Bitmap.Config.ARGB_8888);

// Create a canvas - assign `toDrawOn` as an offscreen bitmap to it
Canvas holdingCanvas = new Canvas(toDrawOn);

// Now, let the view draw itself on this canvas
yourView.draw(holdingCanvas);
_

ビューはtoDrawOnに描画され、好きなように使用できます。

これは、私の経験では、ビューの描画キャッシュを生成してアクセスするよりもはるかに高速です。

上記の4つの方法のいずれかの実装についてサポートが必要な場合は、コメントでお知らせください。

上記のgifは縮小されているなどのことに注意してください。元のスクリーンキャプチャ(mp4)ファイルを表示する場合は、この Link を確認してください。

50
Vikram

ここ は、GDEによる "Renderscriptを使用して画像を効率的にぼかします" Mario Viviani の良い方法です。

コピー/貼り付けは次のとおりです。

画像のぼかしは、多くの開発者が達成する必要のある効果であり、実装するにはある程度の時間と労力が必要になる場合があります。また、多くの画像操作が必要であるため、適切にコーディングされていないと、CPUとメモリの使用量の点で本当に苦痛になります。

Renderscript である、画像をぼかすための迅速かつ効率的な解決策があります。

API 11Honeycomb)以降で利用可能なRenderscriptは、GPUアクセラレーションを利用でき、高性能の3Dレンダリングおよび計算操作を対象としています。 Renderscriptは非常に複雑で明確な製品であり、ネイティブC99言語を使用して詳細な構成とコーディングを可能にし、移植性、パフォーマンス、および使いやすさを実現します。

ただし、 API 17 (4.2.2)Renderscriptは、組み込み関数と呼ばれる明確に定義された操作を実行する組み込み関数を提供します。組み込み関数は、Renderscriptコードを記述することなく、Blur、Blen、Matrix Convolutionなどの操作を実行できる事前に作成されたスクリプトです。

以下は、ぼかしフィルターをビットマップに効率的に簡単に適用するために書いた簡単な方法です。

public Bitmap blurBitmap(Bitmap bitmap) {

    //Let's create an empty bitmap with the same size of the bitmap we want to blur
    Bitmap outBitmap = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Config.ARGB_8888);

    //Instantiate a new Renderscript
    RenderScript rs = RenderScript.create(getApplicationContext());

    //Create an Intrinsic Blur Script using the Renderscript
    ScriptIntrinsicBlur blurScript = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs));

    //Create the in/out Allocations with the Renderscript and the in/out bitmaps
    Allocation allIn = Allocation.createFromBitmap(rs, bitmap);
    Allocation allOut = Allocation.createFromBitmap(rs, outBitmap);

    //Set the radius of the blur
    blurScript.setRadius(25.f);

    //Perform the Renderscript
    blurScript.setInput(allIn);
    blurScript.forEach(allOut);

    //Copy the final bitmap created by the out Allocation to the outBitmap
    allOut.copyTo(outBitmap);

    //recycle the original bitmap
    bitmap.recycle();

    //After finishing everything, we destroy the Renderscript.
    rs.destroy();

    return outBitmap;
}

RenderScript Blurred Image

そして...ぼやけたビットマップ! :-)

前のコードを実行するには、最小限のAPI 17(4.2.2)が必要です。

このメソッドの要点は次のとおりです。 https://Gist.github.com/Mariuxtheone/903c35b4927c0df18cf8

組み込み関数の詳細については、Android Developers Blog: http://Android-developers.blogspot.it/2013/08/renderscript-intrinsics .html

Renderscriptについて詳しく知りたい場合は、次のリンクをご覧ください。 http://Android-developers.blogspot.it/2011/02/introducing-renderscript.htmlhttp: //Android-developers.blogspot.it/2011/03/renderscript.html

14
Assaf Gamliel

レイアウト機能を使用して簡単に実行することはできません。

ここで説明するように、親ビューをキャンバスに描画することをお勧めします。 キャンバスに描画するビューを作成する方法は? 次に、キャンバスをぼかして、このデータを背景またはその一部として使用して前景ビューを描画します。

この効果を有効にしたい場合、非常にリソースを消費する操作になります。少なくともぼかしの結果をキャッシュしてみてください。

0
atok

このライブラリを使用してみてください。ビューを渡すだけで動作します。

https://github.com/kikoso/Android-stackblur

0
Usman Afzal

手順1.背景画像の一部をビットマップで切り取ります。

ステップ2.ビットマップのその部分をぼかします。

ステップ3.ビットマップを背景として設定します。

Javaメソッド

private void applyBlur(final View image, final View layout) {
image.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
        @Override
        public boolean onPreDraw() {
            image.getViewTreeObserver().removeOnPreDrawListener(this);
            image.buildDrawingCache();

            Bitmap bmp = image.getDrawingCache();

            Bitmap overlay = Bitmap.createBitmap((int) (layout.getMeasuredWidth()),
                    (int) (layout.getMeasuredHeight()), Bitmap.Config.ARGB_8888);

            Canvas canvas = new Canvas(overlay);

            canvas.translate(-layout.getLeft(), -layout.getTop());
            canvas.drawBitmap(bmp, 0, 0, null);

            RenderScript rs = RenderScript.create(getActivity());

            Allocation overlayAlloc = Allocation.createFromBitmap(
                    rs, overlay);

            ScriptIntrinsicBlur blur = ScriptIntrinsicBlur.create(
                    rs, overlayAlloc.getElement());

            blur.setInput(overlayAlloc);

            blur.setRadius(20);

            blur.forEach(overlayAlloc);

            overlayAlloc.copyTo(overlay);

            layout.setBackground(new BitmapDrawable(
                    getResources(), overlay));

            rs.destroy();
            return true;
        }
    });
}

...

この関数を呼び出します:

呼び出しメソッド

applyBlur(detail_main_image、titleLayout);

...

// detail_main_imageは、ぼかし部分を表示する必要がある画像です// titleLayoutは、背景ぼかしを設定する必要があるビューです。

0
indrajeet