自定義的AlertDialog(shape,selector)

大家在開發的過程中，可能都碰過這樣的問題，系統提供的AlertDialog就是一個矩形的大白框，然後兩個按鈕，一個代表確定，一個代表取消。這樣再調用的過程中，整個界面顯得過於單調，如果應用裏面的界面大多都是鮮豔的顏色，這樣顯得更加醜陋。下面，我將針對這個問題進行詳細的講解。

最重要的工作：
要準備一個xml文件，對話框裏面顯示這個界面；
我在這個裏面主要用到了selector+shape,這個界面就是用這兩個東西做出來的。如果這個東西用的不熟的可以直接看我上幾期的微博android中shape的使用和selector裏面使用shape；

先看一下效果圖吧
彈出對話框

點擊按鈕時

這裏面和我們系統自帶的對話框表面上有什麼不同點呢？
1.整體佈局是圓角矩陣，而系統自帶的是矩形；
2.裏面每個地方的顏色全部由自己來控制，系統的只可以控制裏面的文字；
3.按鈕的位置和點擊效果完全由自己控制。

怎麼實現的呢？
1.準備xml文件
myalertdialog.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!--對話框的有效區域-->
    <RelativeLayout
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_gravity="center_vertical"
        android:id="@+id/relativeLayout"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        <!--下面這個顏色尤爲重要，否則你會發現四個邊角空爲白色（因爲這個大的佈局裏面放圓角矩形，所以會空出來未填充的地方）-->
        android:background="#646464" >
        <!--上方天藍色的頭部（左上角，右上角爲圓角）-->
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:layout_alignParentTop="true"
            <!--shape中定義-->
            android:background="@drawable/topdialog"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true"
            android:gravity="center"
            android:id="@+id/relativeLayout2">


            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="確定嗎？"
                android:textColor="#ffffff"
                android:textSize="30sp"
                android:id="@+id/textView2"
                android:layout_alignParentBottom="true"
                android:layout_centerHorizontal="true" />
        </RelativeLayout>

    <!--下方天放置按鈕的底部（左下角，右下角爲圓角）-->
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/relativeLayout2"
            android:layout_alignLeft="@+id/relativeLayout2"
            android:layout_alignStart="@+id/relativeLayout2"
            <!--shape中定義-->
            android:background="@drawable/write_bg">
    <!--確認按鈕-->
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="確定"
                android:textColor="#7A787D"
                android:textSize="18sp"
                android:id="@+id/button3"
                android:layout_centerVertical="true"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:layout_marginLeft="20dp"
                android:background="@drawable/press_up"/>
    <!--取消按鈕-->
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="取消"
                android:textColor="#7A787D"
                android:textSize="18sp"
                android:id="@+id/button4"
                android:layout_centerVertical="true"
                android:layout_alignParentRight="true"
                android:layout_alignParentEnd="true"
                android:layout_marginRight="20dp"
                android:background="@drawable/press_up"/>
        </RelativeLayout>

    </RelativeLayout>



</RelativeLayout>

頭部藍色
topdialog.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#00ffff"></solid>
    <corners android:topLeftRadius="10dp"
        android:topRightRadius="10dp"/>
    <padding
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp"/>
</shape>

不太清楚可以看android中shape的使用

下面灰色區域
write_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="#D6DADB"></solid>
    <corners android:bottomLeftRadius="10dp"
        android:bottomRightRadius="10dp"/>
    <padding
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp"/>
</shape>

按鈕的控制
press_up.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!--未選中的狀態-->
    <item android:state_selected="false">
        <shape>
            <solid android:color="#ACDCC4"></solid>
            <corners android:radius="10dp" />
            <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
        </shape>
    </item>
<!--選中的狀態-->
    <item android:state_selected="true">
        <shape>
            <solid android:color="#89BD98"></solid>
            <corners android:radius="10dp" />
            <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
        </shape>
    </item>
</selector>

不太清楚可以看selector裏面使用shape；

android代碼：

public class MyAlertDialogActivity extends AppCompatActivity{

    //點擊這個按鈕顯示對話框
    Button btn;
    //對話框中左邊的按鈕
    Button button3;
    //對話框中右邊的按鈕
    Button button4;
    //藍色區域可以手動的進行設置哪些文本
    TextView textView2;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_my_alert_dialog);
        textView2 = (TextView) findViewById(R.id.textView2);

        btn = (Button) findViewById(R.id.button);
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
            //創建一個AlertDialog對話框
                AlertDialog alertDialog = new AlertDialog.Builder(MyAlertDialogActivity.this).create();
                //顯示
                alertDialog.show();
                Window window = alertDialog.getWindow();
                //對話框中顯示的哪一個佈局
                window.setContentView(R.layout.myalertdialog);
                //從該佈局中獲取相應的控件
                button3 = (Button) window.findViewById(R.id.button3);
                //點擊事件
                button3.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        Toast.makeText(MyAlertDialogActivity.this,"1",Toast.LENGTH_SHORT).show();
                        button3.setSelected(true);
                        button4.setSelected(false);
                    }
                });
                button4 = (Button) window.findViewById(R.id.button4);
                button4.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        Toast.makeText(MyAlertDialogActivity.this,"2",Toast.LENGTH_SHORT).show();
                        button3.setSelected(false);
                        button4.setSelected(true);
                    }
                });
            }
        });

    }


}