Android自定義View(1):對話方塊-Dialog

Dusan_杜小菜發表於2016-05-09

Android系統自帶的對話方塊,在很多android 5.0以下系統的手機上,簡直目不忍視,所以UI設計基本上都需要自定義對話方塊,漂亮的對話方塊五花八門,android如何設計一種簡單的自定義對話方塊呢。

一,Dialog需要注意的問題

android 彈出dialog必須存在所屬的activity,不能憑空產生,所以dialog不能在application類裡面new,必須在activity onCreate之後new。

1,預設的dialog

 public Dialog(Context context) {
        this(context, 0, true);
    }

2,自定義對話方塊樣式的dialog

 public Dialog(Context context, int theme) {
        this(context, theme, true);
    }

二,Dialog例項Java程式碼

簡單的自定義對話方塊

例項程式碼如下:

 public void showDialog() {
        if (dialog!=null&&dialog.isShowing()){
            return;
        }  
        dialog = new Dialog(mContext, R.style.dialog1);
        dialog.setContentView(R.layout.dialog_common);
        Button btn_left = (Button) dialog.findViewById(R.id.btn_left);
        Button btn_right = (Button) dialog.findViewById(R.id.btn_right);
        TextView tv_body_msg = (TextView) dialog.findViewById(R.id.tv_body_msg);
        tv_body_msg.setText(R.string.dialog_msg);
        dialog.setCancelable(true);
        //點選左側按鈕
        btn_left.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //todo 確定
            }
        });
        //點選右鍵
        btn_right.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //todo 取消
            }
        });
        if (!mContext.isFinishing()){
            dialog.show();
        }
    }

三,Dialog樣式

設定對話方塊的邊框,透明度,背景等style風格。

 <!--自定義對話方塊-->
    <style name="dialog1" 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>
        <!--模糊-->
    </style>

四,shape形狀

主要是實現對話方塊的圓角效果,dialog最外側圓角用shape形狀定義。

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <!-- 填充的顏色:這裡設定背景透明 -->
   <!-- <solid android:color="@android:color/transparent" /> -->
    <solid android:color="#FFF" />
    <!-- 邊框的顏色 :不能和視窗背景色一樣-->
    <stroke
        android:width="5dp"
        android:color="#ffffff" />
    <!-- 設定按鈕的四個角為弧形 -->
    <!-- android:radius 弧形的半徑 -->
    <corners android:radius="5dip" />
</shape>

五,對話方塊主體xml佈局

定義title,body text,左右按鈕等。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/dialog_shape_bg"
    android:layout_margin="10dp"
    android:padding="0dp"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="提 示"
        android:textSize="20sp"
        android:textColor="#666666"
        android:layout_marginTop="10dp"
        android:layout_gravity="center" />

    <TextView
        android:id="@+id/tv_body_msg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:minWidth="250dp"
        android:text="@string/dialog_wifi_msg"
        android:textSize="18sp"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        android:textColor="#666666"
        android:layout_marginTop="10dp"
        android:gravity="center" />

    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:layout_marginTop="15dp"
        android:background="#C2C2C2" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="0dp"
        android:orientation="horizontal">
        <Button
            android:id="@+id/btn_left"
            android:layout_width="0dp"
            android:layout_height="40dp"
           style="android:attr/buttonBarButtonStyle"
            android:text="@string/dialog_btn1"
            android:textSize="18sp"
                      android:background="@android:color/transparent"
            android:textColor="#006600"
            android:layout_weight="1"
           />

        <View
            android:layout_width="0.5dip"
            android:layout_height="match_parent"
            android:background="#C2C2C2"            android:layout_gravity="center_horizontal" />

        <Button
            android:id="@+id/btn_right"
            android:layout_width="0dp"
            android:layout_height="40dp"
            style="android:attr/buttonBarButtonStyle"
            android:text="@string/dialog_btn2"
      android:background="@android:color/transparent"
            android:textColor="#006600"
            android:layout_weight="1"
            />
    </LinearLayout>
</LinearLayout>

總結

android自定義對話方塊,主要的差異就是主體的xml佈局,這裡面的view都可以去實現一些事件操作,比如輸入文字,確定,取消之類的。多多實踐,還是很簡單的。
未完待續,杜乾,Dusan,Q 291902259。

相關文章