Android自訂對話方塊實現QQ退出介面

標籤：android   dialog   custom   qqexit   theme   

效果

首先看下qq的,點擊功能表按鈕後點退出就會出現的對話方塊.

從可以看出,該對話方塊有一個圓角,以及標題,提示資訊,兩個按鈕,按鈕顏色是白色,按鈕點擊後背景會變成灰色,正常狀態下對話方塊的背景色是白色.並且除了點擊取消按鈕和返回鍵外,點擊螢幕其他地區該對話方塊不會小時.那麼現在我們來實現一下這個對話方塊.我們實現後的效果如所示

實現

首先編寫我們的背景,背景預設情況下是白色的,並且有一個圓角,使用shape實現

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"       android:shape="rectangle"    >    <corners        android:bottomLeftRadius="15px"        android:bottomRightRadius="15px"        android:topLeftRadius="15px"        android:topRightRadius="15px" />    <solid android:color="@color/dialog_background"/></shape>

然後編寫我們的布局檔案,布局中主要就是兩個TextView,兩個Button,TextView主要用於顯示標題,和提示資訊,標題是置中顯示的,科可以使用gravity和layout_gravity一起實現,Button就是看到的最下方的按鈕,兩個按鈕寬度比重為1:1,這時候可以用layout_weight實現,然後按鈕上方有一條1像素高的灰色的分割線,按鈕之間也有1像素款的灰色的分割線,這個可以使用設定View的寬度和高度,再設定背景色即可,而按鈕還有點擊的效果,這個科一使用selector實現.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"              xmlns:tools="http://schemas.android.com/tools"              android:layout_width="320dp"              android:layout_height="match_parent"              android:layout_gravity="center"              android:orientation="vertical"              tools:context=".MainActivity">    <TextView        android:id="@+id/title"        android:layout_width="wrap_content"        android:layout_height="50dip"        android:layout_gravity="center"        android:gravity="center"        android:text="退出"        android:textColor="@color/dialog_text"        android:textSize="18sp"        android:textStyle="bold"        />    <TextView        android:id="@+id/content"        android:layout_width="wrap_content"        android:layout_height="60sp"        android:paddingLeft="10dip"        android:paddingRight="10dip"        android:gravity="center_vertical"        android:text="您確定要退出嗎?"        android:textColor="@color/dialog_text"        android:textSize="16sp"        />    <View        android:layout_width="match_parent"        android:layout_height="1px"        android:background="@color/dialog_divider"        />    <LinearLayout        android:layout_width="match_parent"        android:layout_height="40dp"        android:layout_alignParentBottom="true">        <Button            android:id="@+id/dialog_cancel"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_weight="1"            android:text="取消"            android:textColor="@color/dialog_btn"            android:background="@drawable/dialog_left_btn_selector"            />        <View            android:layout_width="1px"            android:layout_height="match_parent"            android:background="@color/dialog_divider"            />        <Button            android:id="@+id/dialog_confirm"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_weight="1"            android:text="確定"            android:textColor="@color/dialog_btn"            android:background="@drawable/dialog_right_btn_selector"            />    </LinearLayout></LinearLayout>

我們還要編寫selector檔案,分為兩個,一個是左邊的按鈕的效果,一個是右邊的按鈕的效果,為什麼要用兩個呢,因為這兩個按鈕有一個角是圓角的,而圓角的位置不同,一個是左下角,一個是右下角,所以我們需要兩個這樣的檔案,這裡我們以左邊的為例,右邊的實現效果一樣.
首先編寫正常狀態下的背景shape

<?xml version="1.0" encoding="UTF-8"?><shape    xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="rectangle">    <solid android:color="#FFFFFF"/>    <corners android:bottomLeftRadius="15px"/></shape> 

然後編寫選中狀態或者說獲得焦點時的背景shape

<?xml version="1.0" encoding="UTF-8"?><shape    xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="rectangle">    <solid android:color="#EAEAEA"/>    <corners android:bottomLeftRadius="15px"/></shape> 

最後編寫selector

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_pressed="true" android:drawable="@drawable/dialog_left_btn_pressed"/>    <item android:state_focused="true" android:drawable="@drawable/dialog_left_btn_pressed"/>    <item android:drawable="@drawable/dialog_left_btn"/></selector>

對於右邊按鈕的背景,只要將對應的left改成right即可,這裡也不貼代碼了.

此外,我們還要編寫一個預設的style,我們要去除預設Dialog討厭的標題,完全使用我們自己的布局,以及其他一些設定

    <style name="ExitDialog" parent="@android:style/Theme.Dialog">        <item name="android:windowFrame">@null</item>        <item name="android:windowIsFloating">true</item>        <item name="android:windowIsTranslucent">false</item>        <item name="android:windowNoTitle">true</item>        <item name="android:windowBackground">@drawable/dialog_bg</item>        <item name="android:backgroundDimEnabled">true</item>    </style>

這時候,我們建立一個ExitDialog類繼承Dialog類,在構造方法裡調用我們編寫的style,以及對context對象的賦值,重寫onCreate方法,設定我們的布局

public class ExitDialog extends Dialog {    private Context mContext;    private Button mConfirm;    private Button mCancel;    public ExitDialog(Context context) {        super(context,R.style.ExitDialog);        mContext=context;    }    public ExitDialog(Context context, int theme) {        super(context, theme);        mContext=context;    }    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.layout_dialog);    }}

而我們向讓這個Diaglog點擊對話方塊之外的地區不會消失,我們需要設定setCanceledOnTouchOutside(false).然後呢,我們需要設定點擊事件,點擊確定按鈕會退出應用,點擊取消目前的交談框會消失

@Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.layout_dialog);        //設定為我們的布局        this.setCanceledOnTouchOutside(false);        //設定為點擊對話方塊之外的地區對話方塊不消失        mConfirm= (Button) findViewById(R.id.dialog_confirm);        mCancel= (Button) findViewById(R.id.dialog_cancel);        //設定事件        mConfirm.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                System.exit(0);            }        });        mCancel.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                ExitDialog.this.dismiss();            }        });    }

使用

實現也很簡單,之間將context對象傳入構造一個ExitDialog對象,調用show方法顯示即可

ExitDialog dialog=new ExitDialog(MainActivity.this);dialog.show();

源碼下載

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

Android自訂對話方塊實現QQ退出介面