Android UI設計--半透明效果對話框及activity(可做遮罩層)

下面是style的一些屬性及其解釋

    <style name="dialog_translucent" parent="@android:style/Theme.Dialog">
        <item name="android:windowFrame">@null</item><!-- 邊框 -->
        <item name="android:windowIsFloating">true</item><!-- 是否懸浮在activity上 -->
        <item name="android:windowIsTranslucent">false</item><!-- 半透明 -->
        <item name="android:windowNoTitle">true</item><!-- 無標題 -->
        <item name="android:windowBackground">@android:color/transparent</item><!-- 背景透明 -->
        <item name="android:backgroundDimEnabled">false</item><!-- 模糊 -->
        <item name="android:backgroundDimAmount">0.6</item><!-- 灰度 -->
        <item name="android:windowContentOverlay">@null</item><!-- 對話框是否有遮蓋 -->
        <item name="android:windowAnimationStyle">@style/dialog_animation</item><!-- 彈出或者進入時的動畫效果 -->
        <item name="android:colorBackgroundCacheHint">@null</item><!-- 背景緩存顏色 -->
        
    </style>

自定義對話框效果如下

styles.xml

     <style name="popupDialog" parent="@android:style/Theme.Dialog">
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowBackground">@drawable/filled_box</item>
        <item name="android:backgroundDimEnabled">false</item>
        <item name="android:windowIsTranslucent">false</item>
        <item name="android:backgroundDimAmount">0.6</item>
        <item name="android:windowAnimationStyle">@style/dialog_animation</item>
    </style>

filled_box.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="#9000"/>
    <stroke android:width="3dp" color="#ffff8080"/>
    <corners android:radius="30dp"/>
    <padding 
        android:left="10dp"
        android:top="10dp"
        android:right="10dp"
        android:bottom="10dp"/>
</shape>

dialog_animation.xml

    <style name="dialog_animation">
        <item name="android:windowEnterAnimation">@anim/fading_in</item>
        <item name="android:windowExitAnimation">@anim/fading_out</item>
    </style>

在anim目錄下創建fading_in.xml，進入時候的淡入效果

<?xml version="1.0" encoding="utf-8"?>
<set 
    xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha 
        android:duration="500"
        android:fromAlpha="0.1"
        android:toAlpha="1.0"
        />
</set>

fading_out.xml淡出效果

<?xml version="1.0" encoding="utf-8"?>
<set 
    xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha 
        android:duration="500"
        android:fromAlpha="1.0"
        android:toAlpha="0.1"
        />
</set>

showVerify方法，效果如上面圖所示

  private void verifyDialog(String msg)
        {
            final Dialog dialog = new Dialog(MainActivity.this, R.style.popupDialog);
            dialog.setContentView(R.layout.verify_dialog);
            dialog.setCanceledOnTouchOutside(false);
            dialog.setCancelable(false);
            TextView message = (TextView)dialog.getWindow().findViewById(R.id.messageTxt);
            Button okBtn = (Button)dialog.getWindow().findViewById(R.id.dismissBtn);
            message.setText(msg);
            okBtn.setOnClickListener(new OnClickListener() {
                
                @Override
                public void onClick(View v) {
                    if(dialog!=null && dialog.isShowing())
                    {
                        dialog.dismiss();
                    }
                }
            });
            if(dialog!=null && !dialog.isShowing())
            {
                dialog.show();
            }
        }

 如果是想把整個activity做成類似於微博的new feature透明背景樣式，如圖

上面的圖是透明背景，透明顏色可以自己定義

styles.xml

    <style name="activity_translucent">
        <item name="android:windowBackground">@drawable/filled_activity_bg</item>
        <item name="android:backgroundDimEnabled">false</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowIsTranslucent">false</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:windowAnimationStyle">@style/dialog_animation</item>
        <item name="android:colorBackgroundCacheHint">@null</item>
        <item name="android:backgroundDimAmount">0.6</item><!-- 灰度 -->
    </style>

如果想設置的不是純透明，改成灰色透明度的，可以設置windowBackground背景，下面是filled_activity_bg.xml，這樣就是灰色的透明背景，類似於第一張圖片

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="#9000"/>
    <stroke color="#ffff8080"/>
</shape>

如果不做任何灰度處理，效果如上圖，可以設置背景色為透明

    <style name="activity_translucent">
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:backgroundDimEnabled">false</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowIsTranslucent">false</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:windowAnimationStyle">@style/dialog_animation</item>
        <item name="android:colorBackgroundCacheHint">@null</item>
    </style>

顯示activity，代碼如下。可以通過類似的原理制作遮罩層，其他的半透明能效果，例如popup菜單半透明效果等

Dialog dialog = new Dialog(MainActivity.this, R.style.activity_translucent);
                dialog.setContentView(R.layout.transparent_layout);
                dialog.show();