การสร้าง Custom Dialog

        เจ้าของบล็อกไม่ขอพูดถึงว่ามันคืออะไรนะ เพราะเป็นพื้นฐานที่สามารถหาอ่านได้ทั่วไป

        โดยปกติแล้ว การใช้ Dialog ที่มีให้ใช้ใน Android มันก็สะดวกอยู่หรอก เพราะสามารถเรียกใช้ได้ง่าย แต่เจ้าของบล็อกเชื่อว่าหลายๆคนต้องการให้ Dialog มีลูกเล่นบ้าง เพราะ Dialog แบบปกติก็มีข้อจำกัดในการตกแต่ง และใส่ลูกเล่น ดังนั้นส่วนใหญ่จึงใช้วิธีการสร้าง Dialog ขึ้นมาเอง โดยเจ้าของบล็อกชอบเรียกว่า Custom Dialog

        ซึ่งการสร้างเจ้า Custom Dialog เนี่ย มีการสร้างที่แตกต่างกันออกไปในแต่ละคนทำ ซึ่งเจ้าของบล็อกก็ใช้วิธีที่สั้น เน้นเข้าใจง่าย เวลาจะหยิบมาใช้ก็เอามาใช้ได้เลย ไม่ต้องยุ่งยาก (เน้นแค่ว่าเจ้าของบล็อกเข้าใจได้ง่ายสุด) สำหรับการสร้าง Custom Dialog จะว่าง่ายๆเลยก็คือ สร้าง Layout ขึ้นมาสำหรับทำ Custom Dialog เมื่อแสดง Dialog ก็ให้แสดง Layout ที่สร้างไว้ ตัวอย่างนี้เจ้าของจะสร้าง Button ขึ้นมาอันนึง เมื่อกดปุ่มก็จะแสดง Dialog จาก layout ที่ชื่อ customdialog.xml มาแสดง โดยโค๊ดทั้งหมดก็จะมีด้วยกันดังนี้

Main.java

package app.akexorcist.customdialog;

import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;
import android.app.Activity;
import android.app.Dialog;

public class Main extends Activity {

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    
        Button btnDialog = (Button)findViewById(R.id.btnDialog);
        btnDialog.setOnClickListener(new OnClickListener() {
            public void onClick (View v) {
                final Dialog dialog = new Dialog(Main.this);
                dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
                dialog.setContentView(R.layout.customdialog);
                dialog.setCancelable(true);
                
                Button button1 = (Button)dialog.findViewById(R.id.button1);
                button1.setOnClickListener(new OnClickListener() {
                    public void onClick(View v) {
                        Toast.makeText(getApplicationContext()
                                , "Close dialog", Toast.LENGTH_SHORT);
                        dialog.cancel();
                    }
                });
                
                TextView textView1 = (TextView)dialog.findViewById(R.id.textView1);
                textView1.setText("Custom Dialog");
                TextView textView2 = (TextView)dialog.findViewById(R.id.textView2);
                textView2.setText("Try it yourself");

                dialog.show();
            }
        });
    }
}

        สำหรับปุ่มก็เหมือนกับการสร้างปุ่มทั่วๆไปน่ะแหละ ที่สร้าง Event Listener ขึ้นมา เป็น onClickListener จากนั้นทำการสร้าง Object ที่ชื่อ dialog ขึ้นมา โดยกำหนดไม่ต้องแสดง Title Bar ด้วยคำสั่ง

dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);

   
        อยากจะปิดหรือเปิด Title Bar ก็แล้วแต่ผู้หลงเข้ามาอ่านเลย ถ้าอยากเปิด Title Bar ด้วยก็เอาคำสั่งนี้ออก แล้วกำหนดให้ใช้ Layout จาก customdialog.xml ด้วยคำสั่ง

dialog.setContentView(R.layout.customdialog);

        สามารถยกเลิกหน้าต่าง dialog ได้ หรือก็คือสามารถกดปุ่ม Back บนแอนดรอยด์เพื่อปิด dialog ได้

dialog.setCancelable(true);

        ทีนี้ก็สร้าง Widget ต่างๆบน customdialog.xml ได้เลย แต่เวลาสร้างจะต้องระบุชื่อ dialog ใน findViewById ด้วย

Button button1 = (Button) dialog.findViewById(R.id.button1);

        ซึ่ง dialog ก็ขึ้นอยู่กับชื่อ Object ของ Dialog ที่สร้างขึ้นมานั่นแหละ ที่เหลือก็กำหนดได้ตามปกติเหมือน Layout ทั่วๆไปเลย จะไปเอา List View หรือ Spinner หรืออะไรมาลงในนี้ก็ตามใจชอบเลย

main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#51cda6" >
    <Button
        android:id="@+id/btnDialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="Dialog" />
</RelativeLayout>

customdialog.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#23d5c6" >
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="30dp"
        android:gravity="center"
        android:orientation="vertical" >
        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="30dp"
            android:textSize="20dp" 
            android:textColor="#232323"
            android:text="TextView" />
        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="30dp"
            android:textSize="20dp" 
            android:textColor="#232323"
            android:text="TextView" />
        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Close" />
    </LinearLayout>
</LinearLayout>

AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="app.akexorcist.customdialog"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="15" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".Main"
            android:label="@string/title_activity_main" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

        สำหรับ customdialog.xml เจ้าของบล็อกแนะนำให้ใช้ LinearLayout แทนที่จะใช้ RelativeLayout อยากรู้ว่าเพราะอะไรก็ไปลองดูละกัน แล้วก็ LinearLayout แนะนำให้ใช้สองชั้นซ้อนกันนะ โดยชั้นนอกให้กำหนดสีพื้นหลัง ส่วนชั้นในกำหนด Margin ซักหน่อย ไม่งั้นตอน dialog แสดงกรอบของ Dialog มันจะชิดกับ Widget พอดี

        พอลองรันโปรแกรมดู ก็จะได้ตามนี้เลย

        เพียงเท่านี้ก็ทำ Dialog ตามใจชอบได้แล้ว