Android12 ポップアップ ウィンドウの外部および内部ガウスぼかし効果の実装

目次

1. ポップアップ ウィンドウ内でのガウスぼかし効果の実装:

2. ポップアップ ウィンドウの外側にガウスぼかし効果を実装します。

3. ガウスぼかし効果はポップアップ ウィンドウの内側と外側の両方に提供されます。

---

1. ポップアップ ウィンドウ内でのガウスぼかし効果の実装:

効果：

ガウスぼかしプロパティをスタイリッシュに宣言するだけです。

<!--高斯模糊Dialog-->
<style name="BlurDialogTheme" parent="Theme.MaterialComponents.Dialog">
    <item name="android:backgroundDimEnabled">false</item>
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowBackground">@drawable/dialog_bg</item>
    <item name="android:windowBackgroundBlurRadius" tools:ignore="NewApi">30dp</item>
</style>

背景DimEnabledはポップアップウィンドウの暗い色を有効にするかどうかであり、実際の状況に応じて設定できます。

Dialog_bg.xml では、半径と背景の暗さを宣言できます。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
        <solid android:color="#2f000000"/>
        <corners android:radius="20dp"/>
</shape>

ダイアログで使用:

new AlertDialog.Builder(this, R.style.BlurDialogTheme)

2. ポップアップ ウィンドウの外側にガウスぼかし効果を実装します。

実現効果：

オプション 1:

Android12 には、新しいガウスぼかし API があります。

Android 12 では、一般的なグラフィック効果を View に簡単に適用できるようになり、setRenderEffect インターフェイスが View に追加されました。

public void setRenderEffect(@Nullable RenderEffect renderEffect) {
        ...
}

成し遂げる：

そこで、この API を使用して以下を実装します。

View decorView = getWindow().getDecorView();
decorView.setRenderEffect(RenderEffect.createBlurEffect(25F, 25F, Shader.TileMode.CLAMP));
Dialog dialog = new AlertDialog.Builder(this)
                    .setTitle("test dialog")
                    .setMessage("this is message!")
                    .setPositiveButton("关闭",null)
                    .create();
dialog.setOnDismissListener(dialog1 -> {
         decorView.setRenderEffect(null);
});
dialog.show();

Android 12 でなくても実装可能です. 最も外側のビューが必要です. 現在のインターフェイスに表示されているコンテンツのガウスぼかしを取得し、それを背景として外側のビューに設定します. この記事では詳しく説明しません詳細。

実際、スタイルはポップアップ ウィンドウの外側にもガウスぼかし属性を提供します。これは、コードを動的に設定する必要はありません。

オプション II:

スタイリッシュなステートメント:

    <!--高斯模糊Dialog-->
    <style name="BlurDialogTheme" parent="Theme.MaterialComponents.Dialog">
        <item name="android:windowBlurBehindEnabled" tools:ignore="NewApi">true</item>
        <item name="android:windowBlurBehindRadius" tools:ignore="NewApi">10dp</item>
    </style>

次に、ダイアログでそれを使用します。

new AlertDialog.Builder(this, R.style.BlurDialogTheme)

2 つの方法の違いは 1 つあり、スタイル設定を使用した後、背景が動的であればぼかし効果が残りますが、setRenderEffect を使用するとぼかし効果が消えます。

3. ガウスぼかし効果はポップアップ ウィンドウの内側と外側の両方に提供されます。

効果：

dialog_bg.xml：左#2f000000，右#2fffffff

 成し遂げる：

これは上記 2 つの状況を組み合わせたものですが、面倒な場合は、単に style を使用してください。

   <!--高斯模糊Dialog-->
    <style name="BlurDialogTheme" parent="Theme.MaterialComponents.Dialog">
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowBackground">@drawable/dialog_bg</item>
        <item name="android:windowBlurBehindEnabled" tools:ignore="NewApi">true</item>
        <item name="android:windowBlurBehindRadius" tools:ignore="NewApi">10dp</item>
        <item name="android:windowBackgroundBlurRadius" tools:ignore="NewApi">30dp</item>
    </style>