Android ネイティブを使用してすりガラス効果の写真を作成する

ぼかし効果としても知られるすりガラス効果は、多くの現代アプリケーションで人気のある視覚効果です。Android では、さまざまな方法でこの効果を実現できます。この記事では、Android のネイティブ Bitmap クラスと RenderScript を使用してすりガラス効果を実現する方法を説明します。

1. 準備

まず、アプリケーションに RenderScript サポートが追加されていることを確認する必要があります。`build.gradle` ファイルに次のコードを追加します。

gradle
android {
    defaultConfig {
        renderscriptTargetApi 21
        renderscriptSupportModeEnabled true
    }
}

2.すりガラス効果機能の作成

以下は、RenderScript を使用してすりガラス効果を作成する関数です。

java
import android.content.Context;
import android.graphics.Bitmap;
import android.support.v8.renderscript.*;

public class BlurBuilder {
    private static final float BITMAP_SCALE = 0.4f;
    private static final float BLUR_RADIUS = 7.5f;

    public static Bitmap blur(Context context, Bitmap image) {
        int width = Math.round(image.getWidth() * BITMAP_SCALE);
        int height = Math.round(image.getHeight() * BITMAP_SCALE);

        Bitmap inputBitmap = Bitmap.createScaledBitmap(image, width, height, false);
        Bitmap outputBitmap = Bitmap.createBitmap(inputBitmap);

        RenderScript rs = RenderScript.create(context);
        ScriptIntrinsicBlur theIntrinsic = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs));
        Allocation tmpIn = Allocation.createFromBitmap(rs, inputBitmap);
        Allocation tmpOut = Allocation.createFromBitmap(rs, outputBitmap);
        theIntrinsic.setRadius(BLUR_RADIUS);
        theIntrinsic.setInput(tmpIn);
        theIntrinsic.forEach(tmpOut);
        tmpOut.copyTo(outputBitmap);

        return outputBitmap;
    }
}

3. 機能を利用する

これで、上記の関数を呼び出すだけで、ビットマップ画像にすりガラス効果を追加できます。

java
Bitmap originalBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.your_image);
Bitmap blurredBitmap = BlurBuilder.blur(this, originalBitmap);
imageView.setImageBitmap(blurredBitmap);

---

このようにして、Android アプリにすりガラス効果を簡単に追加できます。「BLUR_RADIUS」を調整すると、さまざまなレベルのぼかしを実現できることに注意してください。「BITMAP_SCALE」を調整して画像処理の速度と品質を変更することもできます。

4.カルーセルの背景に曇りガラスの背景を追加します

  @NonNull
    private View getImageViewWithBlurredBackground(String url, final int position) {
        FrameLayout frameLayout = new FrameLayout(getContext());

        // Blurred ImageView
        ImageView blurredImageView = new ImageView(getContext());
        blurredImageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        Glide.with(getContext())
                .asBitmap()
                .load(url)
                .apply(new RequestOptions().priority(Priority.LOW))
                .into(new CustomTarget<Bitmap>() {
                    @Override
                    public void onResourceReady(@NonNull Bitmap resource, @Nullable Transition<? super Bitmap> transition) {
                        Bitmap blurredBitmap = blurBitmap(resource, getContext());
                        blurredImageView.setImageBitmap(blurredBitmap);
                    }

                    @Override
                    public void onLoadCleared(@Nullable Drawable placeholder) {
                    }
                });

        frameLayout.addView(blurredImageView, new FrameLayout.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));

        // Original ImageView
        ImageView imageView = new ImageView(getContext());
        imageView.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if (onBannerItemClickListener != null) {
                    onBannerItemClickListener.onItemClick(position);
                }
            }
        });
        imageView.setScaleType(ImageView.ScaleType.CENTER);

        RequestOptions options = new RequestOptions()
                .fitCenter()
                .placeholder(defaultImage)
                .priority(Priority.HIGH);

        if (defaultImage != 0) {
            Glide.with(getContext()).load(url).apply(options).transition(withCrossFade()).into(imageView);
        } else {
            Glide.with(getContext()).load(url).apply(options).into(imageView);
        }

        frameLayout.addView(imageView, new FrameLayout.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));

        return frameLayout;
    }

最終結果を見てください。