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


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

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

Post Reply
rangsan
PHP Hero Member
PHP Hero Member
Posts: 199
Joined: 30/04/2018 9:44 am

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

Post by rangsan » 01/05/2018 3:48 pm

การทำ Dialog

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

ภาพตัวอย่าง Dialog
การทำ Dialog ใน Android Studio เพื่อใช้ทำหน้า Login หรือ Pop-up แจ้งเตือนต่าง ๆ dialog-image.png
dialog-image.png (29.85 KiB) Viewed 2728 times
Dialog นั้นมีหลายรูปแบบด้วยกันดังนี้
1, Dialog แบบธรรมดา : เป็น Dialog แบบที่มีข้อความและมีปุ่มให้กดแบบธรรมดาทั่วไป

โครงสร้างของ Dialog ธรรมดา
1. Title สำหรับแสดงข้อความ Title
2. Content ส่วนนี้จะไว้แสดงข้อความต่างๆ รวมถึง Custom Layout
3. Button ส่วนนี้จะแสดง Button ของ Dialog
การทำ Dialog ใน Android Studio เพื่อใช้ทำหน้า Login หรือ Pop-up แจ้งเตือนต่าง ๆ Structure_dialog.png
Structure_dialog.png (13.04 KiB) Viewed 2728 times
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

Code: Select all

<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

Code: Select all

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

Code: Select all

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

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

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

Code: Select all

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.

Post Reply

Return to “Mobile Application Developing- Android, iOS”

Users browsing this forum: No registered users and 3 guests