CalendarView - Android Widgets Example |
CalendarView - Android Widgets สำหรับ CalendarView เป็น Widget ในกลุ่มของ Date & Time โดย CalendarView ใช้สำหรับ แสดง Calendar ในรูปแบบต่าง ๆ เช่นในรูปแบบของ Table นอกจากนี้ยังประยุกต์ใช้ได้หลากหลายมาก ทั้ง DatePicker หรือการใช้งานในด้านอื่น ๆ
XML Syntax
<CalendarView
android:id="@+id/timePicker1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
Example
ออกแบบหน้าจอ GraphicalLayout ด้วย Widget ตามรูป
activity_main.xml (XML Layout)
<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" >
<CalendarView
android:id="@+id/calendarView1"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
MainActivity.java (Java Code)
package com.myapp;
import android.os.Bundle;
import android.view.Menu;
import android.app.Activity;
public class MainActivity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
}
Screenshot
แสดง Calendar เป็นแบบตาราง
Example 2 การใช้ CalendarView มาเป็นแบบ DatePicker หรือ CalendarPicker
ออกแบบหน้าจอ GraphicalLayout ด้วย Widget ตามรูป
activity_main.xml (XML Layout)
<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" >
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="37dp"
android:text="Select Your Birthday"
android:textAppearance="?android:attr/textAppearanceSmall" />
<EditText
android:id="@+id/editText1"
android:gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/textView1"
android:layout_centerHorizontal="true"
android:layout_marginTop="24dp"
android:ems="10" >
<requestFocus />
</EditText>
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/editText1"
android:layout_centerHorizontal="true"
android:layout_marginTop="41dp"
android:text="Select Date" />
</RelativeLayout>
ในตัวอย่างนี้จะประกอบไปด้วยไฟล์ 2 ตัวคือ
- MainActivity.java (เป็นไฟล์ Activity หลัก)
- myCalendarView.java (เป็นไฟล์ Class สำหรับสร้าง CalendarView มาเป็น DatePicker)
เพิ่มไฟล์ myCalendarView.java โดยไปที่
คลิกวาเลือก New -> Class
ตั้งชื่อ Class ว่า myCalendarView และมีคำสั่งด้วยประกอบคำสั่งดังนี้
myCalendarView.java (Java Code)
package com.myapp;
import android.os.Bundle;
import android.app.Activity;
import android.widget.CalendarView;
import android.content.Intent;
public class myCalendarView extends Activity {
private int mYear;
private int mMonth;
private int mDay;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
CalendarView calendar = new CalendarView(this);
calendar.setOnDateChangeListener(mDateSetListener);
setContentView(calendar);
}
// the callback received when the user "sets" the date in the dialog
private CalendarView.OnDateChangeListener mDateSetListener =
new CalendarView.OnDateChangeListener() {
public void onSelectedDayChange(CalendarView view, int year,
int monthOfYear, int dayOfMonth) {
mYear = year;
mMonth = monthOfYear;
mDay = dayOfMonth;
String selectedDate = new StringBuilder().append(mMonth + 1).append("-").append(mDay).append("-")
.append(mYear).append(" ").toString();
Bundle b = new Bundle();
b.putString("dateSelected", selectedDate);
//Add the set of extended data to the intent and start it
Intent intent = new Intent();
intent.putExtras(b);
setResult(RESULT_OK,intent);
finish();
}
};
}
จากนั้นไปที่ไฟล์ AndroidManifest.xml เพิ่ม Activity ใหม่โดยเพิ่มคำสั่ง
<activity android:name=".myCalendarView" android:theme="@style/AppTheme" />
เพิ่มดังรูป
คำสั่งในไฟล์ Activity หลัก
MainActivity.java (Java Code)
package com.myapp;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.Button;
import android.widget.EditText;
import android.view.View;
import java.util.Calendar;
import android.content.Intent;
public class MainActivity extends Activity {
private EditText editT1;
private Button btn1;
private int mYear;
private int mMonth;
private int mDay;
static final int CALENDAR_VIEW_ID = 1;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// editText1
editT1 = (EditText) findViewById(R.id.editText1);
// button1
btn1 = (Button) findViewById(R.id.button1);
// add a click listener to the button
btn1.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
Intent intent = new Intent(MainActivity.this, myCalendarView.class);
startActivityForResult(intent,CALENDAR_VIEW_ID);
}
});
// get the current date
final Calendar c = Calendar.getInstance();
mYear = c.get(Calendar.YEAR);
mMonth = c.get(Calendar.MONTH);
mDay = c.get(Calendar.DAY_OF_MONTH);
// display the current date
updateCurrentDate();
}
// updates the date we display in the TextView
private void updateCurrentDate() {
editT1.setText(
new StringBuilder()
// Month is 0 based so add 1
.append(mMonth + 1).append("-")
.append(mDay).append("-")
.append(mYear).append(" "));
}
protected void onActivityResult(int requestCode, int resultCode, Intent data)
{
switch(requestCode) {
case CALENDAR_VIEW_ID:
if (resultCode == RESULT_OK) {
Bundle bundle = data.getExtras();
editT1.setText(bundle.getString("dateSelected"));
break;
}
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
}
Screenshot
หน้าแรกจะแสดงวันเวาลาปัจจุบัน เมื่อคลิกที่ Select Date จะปรากฏ DatePicker ของ CalendarView ซึ่งอยู่ใน Class ของ myCalendarView
แสดง CalendarView ของ myCalendarView.java
เมื่อคลิกที่ CalendarView ค่าก็จะถุกส่งมายัง Form หลัก
Property & Method (Others Related) |
|
ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน Source Code 2.0 ของทีมงานไทยครีเอท
|
|
|
By : |
ThaiCreate.Com Team (บทความเป็นลิขสิทธิ์ของเว็บไทยครีเอทห้ามนำเผยแพร่ ณ เว็บไซต์อื่น ๆ) |
|
Score Rating : |
|
|
|
Create/Update Date : |
2012-07-01 16:20:56 /
2012-07-08 08:46:12 |
|
Download : |
No files |
|
Sponsored Links / Related |
|
|
|
|
|
|
|