[Android Dev] :: DatePickerDialog [กล่องตอบโต้สำหรับเลือกวันที่]
ห่างหายกันไปนานเลย ตั้งแต่ที่ผมเรียนวิชานั้นเสร็จก็ไม่ได้กลับมาเขียน Android Tutorial อีกเลย
วันนี้ขอซะหน่อยแล้วกันครับ ^___^
ปกติเรามี DatePicker ให้ใช้เลยบน Android ใช่ไหมครับ ? เราสามารถลากมาใช้ได้เลย
นั่นก็เป็นวิธีนึง แต่ผมจะมานำเสนออีกวิธีนึง ซึ่งจะประหยัดพื้นที่หน้าจอได้มากกว่า
เพราะว่าเราใช้ DatePickerDialog
ลักษณะคือ เราจะมี Button อยู่อันนึง พอ User กดปุ่มนี้
จะแสดง AlertDialog ที่มีลักษณะเป็น DatePicker ขึ้นมาให้เลือกวันที่
พอ User เลือกวันที่เสร็จแล้ว วันที่นั้น ก็จะมาอัพเดทที่ Text ของ Button ครับ
ภาพตัวอย่าง ::
มาเริ่มกันเลยครับ
ส่วนของ UI คงไม่พูดถึงนะครับ ไม่มีอะไรนอกจาก Button อันเดียว กลางจอ
ส่วนคุณจะเอาไปประยุกต์แบบไหน ก็ตามสบายเลยครับ
จากนั้นทำการ Link ปุ่มกับ UI แล้วทำการ setEventListener สำหรับการกดปุ่มให้เรียบร้อย
ใช้ฟังก์ชั่นใน java.util.Calendar ทำการขอวันที่ปัจจุบันมาเก็บให้เรียบร้อย
และเรียกใช้ updateDisplay(); [อยู่ข้างล่าง] เพื่ออัพเดท Text บน Button
นี่ก็ Method updateDisplay(); ครับ ... การทำงานก็ไม่มีอะไร แค่ setText ด้วย String Builder
แต่มีปัญหาคือ เดือนของ DatePicker มันเริ่มที่ 0 ฉะนั้นเราต้อง +1 เพิ่มไปด้วยครับ
(ไม่เข้าใจเหตุผลเหมือนกัน)
Method นี่คือ EventListener ของการกดปุ่มครับ ก็เรียกใช้ showDialog()
ซึ่ง Method นี้จะไปทำการ Override onCreateDialog ให้อีกทีหนึ่ง...
Method แรกจะเป็นการเรียกให้ Dialog นั้นแสดงขึ้นมาหลังจากการกดปุ่ม
ส่วน Method ที่สองจะเป็นการกระทำหลังจากที่กด Set แล้ว
ซึ่งจะทำการ Update Text ของ Button ให้ตรงกับที่ผู้ใช้เลือก...
จบแล้วนะครับ สำหรับ DatePickerDialog
โค้ดก็ไม่ได้เข้าใจอะไรยากมากนะ...
โค้ดนี้ จขบ. ไม่ได้เขียนเองนะครับ ... ต้องการใช้แบบนี้แล้วบังเอิญเจอใน stackoverflow
ต้องขอขอบคุณมา ณ ที่นี้ด้วยครับ ^____^
วันนี้ขอซะหน่อยแล้วกันครับ ^___^
ปกติเรามี DatePicker ให้ใช้เลยบน Android ใช่ไหมครับ ? เราสามารถลากมาใช้ได้เลย
นั่นก็เป็นวิธีนึง แต่ผมจะมานำเสนออีกวิธีนึง ซึ่งจะประหยัดพื้นที่หน้าจอได้มากกว่า
เพราะว่าเราใช้ DatePickerDialog
ลักษณะคือ เราจะมี Button อยู่อันนึง พอ User กดปุ่มนี้
จะแสดง AlertDialog ที่มีลักษณะเป็น DatePicker ขึ้นมาให้เลือกวันที่
พอ User เลือกวันที่เสร็จแล้ว วันที่นั้น ก็จะมาอัพเดทที่ Text ของ Button ครับ
ภาพตัวอย่าง ::
 |
| นี่หน้าจอครับ มีปุ่มอยู่ปุ่มเดียว ถ้าเปิดตัวโปรแกรมมา Text จะอัพเดทเป็นวันที่ปัจจุบันให้ครับ |
 |
| เมื่อกดปุ่มแล้ว ก็จะแสดง DatePicker แบบนี้ครับ จากนั้นพอเลือกเสร็จกด Set แล้ว Text บน Button ก็จะเปลี่ยนเป็นวันที่ที่เลือกไว้ครับ |
ส่วนของ UI คงไม่พูดถึงนะครับ ไม่มีอะไรนอกจาก Button อันเดียว กลางจอ
ส่วนคุณจะเอาไปประยุกต์แบบไหน ก็ตามสบายเลยครับ
 |
| ตามเดิมครับ สิ่งที่ต้องใช้มีเท่านี้ import เข้ามาซะ |
 |
| ต่อไปก็ประกาศตัวแปร ซึ่งประกอบไปด้วยตัวแปรปุ่ม และตัวแปรที่จะเก็บค่าของวันที่ |
จากนั้นทำการ Link ปุ่มกับ UI แล้วทำการ setEventListener สำหรับการกดปุ่มให้เรียบร้อย
ใช้ฟังก์ชั่นใน java.util.Calendar ทำการขอวันที่ปัจจุบันมาเก็บให้เรียบร้อย
และเรียกใช้ updateDisplay(); [อยู่ข้างล่าง] เพื่ออัพเดท Text บน Button
แต่มีปัญหาคือ เดือนของ DatePicker มันเริ่มที่ 0 ฉะนั้นเราต้อง +1 เพิ่มไปด้วยครับ
(ไม่เข้าใจเหตุผลเหมือนกัน)
ซึ่ง Method นี้จะไปทำการ Override onCreateDialog ให้อีกทีหนึ่ง...
Method แรกจะเป็นการเรียกให้ Dialog นั้นแสดงขึ้นมาหลังจากการกดปุ่ม
ส่วน Method ที่สองจะเป็นการกระทำหลังจากที่กด Set แล้ว
ซึ่งจะทำการ Update Text ของ Button ให้ตรงกับที่ผู้ใช้เลือก...
จบแล้วนะครับ สำหรับ DatePickerDialog
โค้ดก็ไม่ได้เข้าใจอะไรยากมากนะ...
โค้ดนี้ จขบ. ไม่ได้เขียนเองนะครับ ... ต้องการใช้แบบนี้แล้วบังเอิญเจอใน stackoverflow
ต้องขอขอบคุณมา ณ ที่นี้ด้วยครับ ^____^
คือวันมันเเสดงเเล้วครับ เเต่ Dialog มันไม่ขึ้นให้ เซ็ตอะ ครับ
ReplyDeleteอันนี้code นะ ครับ
package com.example.tourindy;
import java.util.ArrayList;
import java.util.Calendar;
import android.app.*;
import android.os.Bundle;
import android.view.*;
import android.widget.*;
public class date extends Activity {
//spinner command
private Spinner menu;
private Spinner Click;
//caalendarDialog command
private int mYear;
private int mMonth;
private int mDay;
static final int DATE_DIALOG_ID = 0;
Button chooseDateButton;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.date);
//spinner command
initWidget();
AddItem();
//caalendarDialog command
chooseDateButton = (Button) findViewById(R.id.Button01);
chooseDateButton.setOnClickListener(dateButtonClicked);
final Calendar c = Calendar.getInstance();
mYear = c.get(Calendar.YEAR);
mMonth = c.get(Calendar.MONTH);
mDay = c.get(Calendar.DAY_OF_MONTH);
updateDisplay();
}
//caalendarDialog command
private void updateDisplay() {
this.chooseDateButton.setText(new StringBuilder().append(mDay)
.append("/").append(mMonth + 1).append("/").append(mYear)
.append(" "));
}
private View.OnClickListener dateButtonClicked = new View.OnClickListener() {
@SuppressWarnings("deprecation")
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
showDialog(DATE_DIALOG_ID);
}
};
protected Dialog OnCreateDialog(int id) {
switch (id) {
case DATE_DIALOG_ID:
return new DatePickerDialog(this, mDateSetListener, mYear, mMonth,
mDay);
}
return null;
}
private DatePickerDialog.OnDateSetListener mDateSetListener = new DatePickerDialog.OnDateSetListener() {
@Override
public void onDateSet(DatePicker view, int year, int monthOfYear,
int dayOfMonth) {
// TODO Auto-generated method stub
mYear = year;
mMonth = monthOfYear;
mDay = dayOfMonth;
updateDisplay();
}
};
// spinner command
private void initWidget() {
menu = (Spinner) findViewById(R.id.spinner1);
Click = (Spinner) findViewById(R.id.Spinner01);
}
private void AddItem() {
// Add Menu
ArrayList myList = new ArrayList();
myList.add("Bangkok");
myList.add("Chang Rai");
ArrayAdapter myAdapter = new ArrayAdapter(this,
android.R.layout.simple_spinner_item, myList);
myAdapter
.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
menu.setAdapter(myAdapter);
myAdapter
.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
Click.setAdapter(myAdapter);
}
}