Android自己定義對話方塊實現QQ退出介面

標籤：顏色   ica   java   對話   cli   markdown   vertica   背景色   之間   

效果

首先看下qq的,點擊菜單button後點退出就會出現的對話方塊.

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

實現

首先編寫我們的背景,背景預設情況下是白色的,而且有一個圓角,使用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就是看到的最下方的button,兩個button寬度比重為1:1,這時候能夠用layout_weight實現,然後button上方有一條1像素高的灰色的切割線,button之間也有1像素款的灰色的切割線,這個能夠使用設定View的寬度和高度,再設定背景色就可以,而button還有點擊的效果,這個科一使用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檔案,分為兩個,一個是左邊的button的效果,一個是右邊的button的效果,為什麼要用兩個呢,由於這兩個button有一個角是圓角的,而圓角的位置不同,一個是左下角,一個是右下角,所以我們須要兩個這種檔案,這裡我們以左邊的為例,右邊的實現效果一樣.
首先編寫正常狀態下的背景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>

對於右邊button的背景,僅僅要將相應的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).然後呢,我們須要設定點擊事件,點擊確定button會退出應用,點擊取消目前的交談框會消失

@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();            }        });    }

使用

實現也非常easy,之間將context對象傳入構造一個ExitDialog對象,調用show方法顯示就可以

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

原始碼下載

http://download.csdn.net/detail/sbsujjbcy/8842547

Android自己定義對話方塊實現QQ退出介面