การทำ Dialog ใน Android Studio เพื่อใช้ทำหน้า Login หรือ Pop-up แจ้งเตือนต่าง ๆ

Mobile Application Developing- Android, iOS, Window Phone สอนเขียนโปรแกรมบนมือถือ ระบบปฏิบัติการต่าง แอนดรอยด์ ไอโอเอส วินโดโฟน สอนเขียนโปรแกรมบนมือถือ

Moderator: mindphp, ผู้ดูแลกระดาน

rangsan
PHP Hero Member
PHP Hero Member
โพสต์: 199
ลงทะเบียนเมื่อ: 30/04/2018 9:44 am

การทำ Dialog ใน Android Studio เพื่อใช้ทำหน้า Login หรือ Pop-up แจ้งเตือนต่าง ๆ

โพสต์โดย rangsan » 01/05/2018 3:48 pm

การทำ Dialog

Dialog หรือก็คือ Pop ที่เอาไว้แสดง Alerts เตือนผู้ใช้งาน หรือ จะให้กรอกข้อมูลอะไรต่าง ๆ ก็ได้ลักษณะของ Dialog จะเป็น Window ขนาดเล็กดังภาพด้านล่าง

ภาพตัวอย่าง Dialog
dialog-image.png
dialog-image.png (29.85 KiB) เปิดดู 138 ครั้ง


Dialog นั้นมีหลายรูปแบบด้วยกันดังนี้
1, Dialog แบบธรรมดา : เป็น Dialog แบบที่มีข้อความและมีปุ่มให้กดแบบธรรมดาทั่วไป

โครงสร้างของ Dialog ธรรมดา
1. Title สำหรับแสดงข้อความ Title
2. Content ส่วนนี้จะไว้แสดงข้อความต่างๆ รวมถึง Custom Layout
3. Button ส่วนนี้จะแสดง Button ของ Dialog

Structure_dialog.png
Structure_dialog.png (13.04 KiB) เปิดดู 138 ครั้ง


2. Dialog แบบ List : Dialog แบบ List นั้นจะคล้ายกับ Dialog แบบธรรมดาต่างกันตรงที่ Dialog แบบ List นั้นจะมีข้อมูล List แสดงพ่วงมาด้วยดังาพด้านลาง

Dialog แบบ List
Dialog_list.png


3. Dialog แบบเลือก Choice เดียว : จะมีลักษณะคล้าย ๆ กับ List เพียงแต่มันจะมี Choice ให้เลือกด้านหลัง

Dialog แบบเลือก Choice เดียว
Dialog_radio.png



ตัวอย่างโค้ดของการทำ Dialog ธรรมดา

โค้ดในส่วนของ mainactivity_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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin">

    <TextView
        android:text="ตัวอย่างการใช้ Dialog แบบง่าย"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/text_title"
        android:textSize="18sp"
        android:textColor="#D74B4C"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="40dp"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/button_open_dialog"
        android:text="Open Dialog"
        android:padding="20dp"
        android:textSize="20sp"
        android:textColor="#FFFFFF"
        android:background="#D74B4C"
        android:layout_centerVertical="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

</RelativeLayout>


โค้ดในส่วน MainActivity.java จะเห็นได้ว่มีการประกาศตัวแปรในส่วนของปุ่ม mButtonDialog

โค้ด: เลือกทั้งหมด

public class MainActivity extends ActionBarActivity {

    private Button mButtonDialog;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
    ...
}


โค้ดต่อมาเป็นในส่วนของภายในเมธอด onCreate() ใช้ Button ที่ประกาศไว้ที่ .xml ไฟล์ จากนั้นรับ Event Listener เมื่อคลิ๊ก ก็ให้ไปเปิด Dialog

โค้ด: เลือกทั้งหมด

mButtonDialog = (Button) findViewById(R.id.button_open_dialog);

mButtonDialog.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {

    }
});


ต่อมาเราจะมาสร้าง Dialog โดยใช้คลาส AlertDialog.Builder

โค้ด: เลือกทั้งหมด

AlertDialog.Builder builder =
        new AlertDialog.Builder(MainActivity.this);
builder.setMessage("รับขนมจีบซาลาเปาเพิ่มมั้ยครับ?");
builder.setPositiveButton("รับ", new DialogInterface.OnClickListener() {
    public void onClick(DialogInterface dialog, int id) {
        Toast.makeText(getApplicationContext(),
                "ขอบคุณครับ", Toast.LENGTH_SHORT).show();
    }
});
builder.setNegativeButton("ไม่รับ", new DialogInterface.OnClickListener() {
    @Override
    public void onClick(DialogInterface dialog, int which) {
        //dialog.dismiss();
    }
});
builder.show();




ผลลัพธ์จากโค้ดทั้งหมด

Finish_dialog.png



อ้างอิง : devahoy.com
It’s never too late to start again.

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 2 และ บุคคลทั่วไป 0 ท่าน