在Android裡開啟Dialog

在Android裡開啟Dialog

前言

  在之前的這篇"在Android實現多個按鍵同時按壓"有提及要做一個輸入Console命令的視窗，該篇說到了開啟子視窗的方法，這篇來實作UI的部分，在此做個紀錄。

內容

  Android並沒有視窗UI，而"Dialog"的功能可以做出像在Windows開子視窗，所以本篇會使用Dialog來實現，在找資料的過程中，還找到了也可以做出類似效果的"AlertDialog"，所以方法並不是只有一種，有機會再來說明"AlertDialog"。

  開啟一個"Empty activity"的專案，接著要新增一個"Layout"，具體的操作如下圖

在layout資料夾新增xml

在layout資料夾點擊右鍵後，依據上圖的操作新增xml，接著會看到下圖

新增layout的設定視窗

看到新增layout的設定視窗後，更改layout的名稱，本篇使用"sub_dialog"，可以自己命名，但要注意不能有大寫的文字。新增完後開啟該xml檔，依據下圖操作

修改layout的內容

依據上圖開啟layout的文字模式，輸入以下xml

<?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:orientation="vertical">

    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="Name" />

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Close" />

</LinearLayout>

這個xml會規劃一個輸入的text與一個關閉的按鈕。

  接著在activity的layout新增一個按鈕，用來開啟Dialog，操作如下圖

新增開啟Dialog的按鈕

按鈕增加完後，接著在Activity裡開啟，範例碼如下

package com.hosee.hellodialog;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.app.Dialog;
import android.util.Log;
import android.widget.EditText;

public class MainActivity extends AppCompatActivity {
    Dialog subDialog;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Button btnOpenDialog = (Button)findViewById( R.id.button2);
        btnOpenDialog.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                subDialog=new Dialog(MainActivity.this);
                subDialog.setTitle("Title");
                subDialog.setCancelable(false);
                subDialog.setContentView(R.layout.sub_dialog);

                Button btnClose=(Button)subDialog.findViewById(R.id.button);
                btnClose.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        EditText editText=(EditText)subDialog.findViewById(R.id.editText);
                        Log.i("HelloDialog","Input:"+editText.getText() );
                        subDialog.cancel();
                    }
                });
                subDialog.show();
            }
        });
    }
}

範例碼有關於View的ID可能會與範例碼的ID不同請依據layout的命名來修改。在"btnOpenDialog"就是Activity用來開啟Dialog的按鈕，為它設定"Click"事件，在"Click"事件中，會看到開啟Dialog的過程，setTitle()可以設定Title的顯示名稱，似乎不能省略，setCancelable()設為false表示當使用者點擊Dialog是窗外的範圍時"不會"關閉Dialog，接著會看使用"subDialog"來執行findViewById()，而不是直接用activity的findViewById()，這裡要注意!然後設定關閉按鈕的Click"事件，這裡會再關閉前列印輸入text的內容後執行"subDialog.cancel()"，這道命令會真正的關閉Dialog，在將事件都設定完後可以看到"subDialog.show()"，這道命令會開啟Dialog，完成的結果如下圖

執行結果

參考資料

Open a custom dialog after click a button Android

相關文章

在Android實現多個按鍵同時按壓