TimePicker trong Android
TimePicker là một ui widget cho phép người sử dụng chọn thời gian trong ngày theo chế độ AM/PM, chọn theo chế độ 24h. Thời gian hiển thị gồm: Giờ, Phút, Giây và theo dạng đồng hồ hiển thị. Nếu chúng ta muốn hiển thị đồng hồ theo dạng dialog thì chúng ta phải sử dụng lớp TimePickerDialog.
android.widget.TimePicker là lớp con của FrameLayout.
TimePicker code trong XML
<TimePicker android:id="@+id/simpleTimePicker" android:layout_width="wrap_content" android:layout_height="wrap_content" android:timePickerMode="spinner"/>
Các phương thức thường dùng của TimePicker
1. setCurrentHour(Integer currentHour): Phương thức này dùng để thiết lập ngày hiện tại cho một TimePicker
Từ API 23 trở về trước thì sử dụng phương thức setCurrentHour(). Còn từ API 23 trở về sau sử dụng phương thức setHour(Integer hour). Trong phương thức này chỉ có một tham số là số nguyên được sử dụng thiết lập giá trị giờ.
Ví dụ sau thiết lập giờ hiện tại là 5.
TimePicker simpleTimePicker=(TimePicker)findViewById(R.id.simpleTimePicker); // initiate a time picker // set the value for current hours simpleTimePicker.setCurrentHour(5); // Trước api 23 simpleTimePicker.setHour(5); // sau api 23 
2. setCurrentMinute(Integer currentMinute): Phương thức này dùng để thiết lập ngày hiện tại cho một TimePicker
Từ API 23 trở về trước thì sử dụng phương thức setCurrentMinute(). Còn từ API 23 trở về sau sử dụng phương thức setMinute(Integer minute). Trong phương thức này chỉ có một tham số là số nguyên được sử dụng thiết lập giá trị phút.
Ví dụ sau thiết lập phút hiện tại là 35.
TimePicker simpleTimePicker=(TimePicker)findViewById(R.id.simpleTimePicker); // initiate a time picker // set the value for current hours simpleTimePicker.setCurrentMinute(35); // Trước api 23 simpleTimePicker.setMinute(35); // sau api 23 3. getCurrentHour(): Phương thức này lấy giờ hiện tại của TimePicker
Từ API 23 trở về trước thì sử dụng phương thức getCurrentHour(). Còn từ API 23 trở về sau sử dụng phương thức getHour(). Phương thức này trả về giá trị số nguyên
Code sau lấy giờ hiện tại của TimePicker
TimePicker simpleTimePicker = (TimePicker)findViewById(R.id.simpleTimePicker); // initiate a time pickerint hours =simpleTimePicker.getCurrentHour(); // Trước api 23 int hours =simpleTimePicker.getHour(); // sau api 23 4. getCurrentMinute(): Phương thức này lấy phút hiện tại của TimePicker
Từ API 23 trở về trước thì sử dụng phương thức getCurrentMinute(). Còn từ API 23 trở về sau sử dụng phương thức getMinute(). Phương thức này trả về giá trị số nguyên
Code sau lấy phút hiện tại của TimePicker
TimePicker simpleTimePicker = (TimePicker)findViewById(R.id.simpleTimePicker); // initiate a time picker int minutes = simpleTimePicker.getCurrentMinute(); // trước api 23 int minutes = simpleTimePicker.getMinute(); // sau api 23 5. setIs24HourView(Boolean is24HourView): Phương thức dùng thiết lập chế độ giờ hiển thì là 24h hay là hiển thị dạng AM/PM. Trong phương thức này thiết lập chế độ true/false. Nếu giá trị true chế độ hiển thị theo 24h, nếu false hiển thị theo chế độ AM/PM
Ví dụ thiết lập chế độ cho một TimePicker
TimePicker simpleTimePicker = (TimePicker)findViewById(R.id.simpleTimePicker); // initiate a time picker simpleTimePicker.setIs24HourView(true); // set 24 hours mode for the time picker 
6. is24HourView(): Phương này kiểm tra xem chế độ hiện tại là 24h hay AM/PM. Phương thức này trả về true nếu nó đang ở chế độ 24h ngược lại false đang ở chế độ AM/PM
Ví dụ sau lấy chế độ hiển thị hiện tại của TimePicker
TimePicker simpleTimePicker = (TimePicker)findViewById(R.id.simpleTimePicker); // initiate a time picker Boolean mode=simpleTimePicker.is24HourView(); // Kiểm tra xem chế độ hiện tại của TimePicker 7. setOnTimeChangedListener(TimePicker.OnTimeChangedListener onTimeChangedListener): Phương thức này thiết lập hàm callback mà chỉ rằng thời gian đã được chỉnh sửa bởi người dùng.
Phương thức onTimeChanged(TimePicker view, int hourOfDay, int minute) lắng nghe sự kiện từ người sử dụng, nó gồm 3 tham số: TimePicker, hourOfDay giờ trong ngày, minute dùng để lấy phút sau khi thay đổi thời gian của TimePicker.
TimePicker simpleTimePicker = (TimePicker)findViewById(R.id.simpleTimePicker); // initiate a time picker simpleTimePicker.setOnTimeChangedListener(new TimePicker.OnTimeChangedListener() { @Override public void onTimeChanged(TimePicker view, int hourOfDay, int minute) { } });
Một số thuộc tính thường dùng của TimePicker
1. android:id: Là thuộc tính duy nhất của TimePicker.
<TimePicker android:id="@+id/simpleTimePicker" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <!-- id of a time picker --> Dựa vào Id ta sẽ lấy được control theo đúng Id này, xem code bên dưới để biết cách lấy control theo Id:
TimePicker simpleTimePicker = (TimePicker)findViewById(R.id.simpleTimePicker); 2. android:timePickerMode: thuộc tính này thường được sử dụng để thiết lập chế độ hiển thị dạng đồng hồ là spinner hay là clock. trước API 21 mặc định chế độ là clock, sau API 21 phải thiết lập chế độ là spinner
<TimePicker android:id="@+id/simpleTimePicker" android:layout_width="wrap_content" android:layout_height="wrap_content" android:timePickerMode="spinner" /> <!-- time picker mode of a time picker --> 
3. android:background: Thuộc tính này thiết lập màu nền hoặc image trong thư mục drawable cho TimePicker.
<TimePicker android:id="@+id/simpleTimePicker" android:layout_width="wrap_content" android:layout_height="wrap_content" android:timePickerMode="spinner" android:background="#F88F00" /> <!-- orange background color for the time picke 
Thiết lập màu nên trong java class
TimePicker simpleTimePicker=(TimePicker)findViewById(R.id.simpleTimePicker); //initiate a time picker simpleTimePicker.setBackgroundColor(Color.YELLOW); //Yellow background color for the background of a time picker 4. android:padding: Thuộc tính này xác định khoảng cách từ đường viền của TimePicker với nội dung nó chứa: left, right, top or bottom. Cũng ví dụ trên bây giờ chúng ta xác định padding=50dp từ mọi phía của TimePicker.
<TimePicker android:id="@+id/simpleTimePicker" android:layout_width="wrap_content" android:layout_height="wrap_content" android:timePickerMode="spinner" android:layout_centerHorizontal="true" android:layout_marginTop="50dp" android:padding="50dp"/> <!-- 20dp padding from all the sides of a time picker 
Ví dụ: Trong ví dụ này chúng ta sẽ làm ứng dụng gồm có một TimePicker và một TextView. Khi người sử dụng tùy chỉnh giờ trên TimePicker chúng ta sẽ lấy giá trị của nó rồi hiển thị trên TextView và Toast. Tiến hành tạo project, vào thư mục res /layout -> activity_main.xml thiết kế giao diện sau:
Bước 1: Tạo một project tên là TimePicker: File->New->Android Application Project điền các thông tin ->Next ->Finish
Bước 2: Mở res -> layout -> xml (hoặc) activity_main.xml và thêm code, chúng ta sẽ tạo các đối tượng SeekBar trong Relative 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" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".MainActivity"> <TimePicker android:id="@+id/simpleTimePicker" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_marginTop="50dp" android:background="#090" android:padding="20dp" android:timePickerMode="spinner" /> <TextView android:id="@+id/time" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:text="Time Is ::" android:textColor="#090" android:textSize="20sp" android:textStyle="bold" /> </RelativeLayout> Bước 3: Mở app -> src ->MainActivity.java
Trong bươc này chúng ta khởi tạo TimePicker và TextView. TextView dùng để hiển thị thời gian của TimePicker. Trong bước này chúng ta thiết lập sự kiện cho TimePicker thông qua sự kiện setOnTimeChangedListener() chúng ta sẽ lấy giá trị thời gian hiện tại của TimePicker sau đó hiển thị ra TextView và Toast.
package hiepsiit.com.timepicker; import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; import android.widget.TextView; import android.widget.TimePicker; import android.widget.Toast; public class MainActivity extends Activity { TextView time; TimePicker simpleTimePicker; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // initiate the view's time = (TextView) findViewById(R.id.time); simpleTimePicker = (TimePicker) findViewById(R.id.simpleTimePicker); simpleTimePicker.setIs24HourView(false); // used to display AM/PM mode // perform set on time changed listener event simpleTimePicker.setOnTimeChangedListener(new TimePicker.OnTimeChangedListener() { @Override public void onTimeChanged(TimePicker view, int hourOfDay, int minute) { // display a toast with changed values of time picker Toast.makeText(getApplicationContext(), hourOfDay + " " + minute, Toast.LENGTH_SHORT).show(); time.setText("Time is :: " + hourOfDay + " : " + minute); // set the current time in text view } }); } } Ứng dụng này được phát triển bởi adt bundle, android 4.2 sử dụng minimum sdk 11 and target sdk 21.
Kết quả khi chạy ứng dụng:
Sau đó Tùy chỉnh trên TimePicker:
Ví dụ hiển thị dạng TimePickerDialog
Trong ví dụ này chúng ta sẽ làm ứng dụng gồm có 1 EditText. Khi người sử dụng click vào EditText sẽ hiển thị TimePicker dạng dialog (hộp thoại). sau đó, sẽ lấy giá trị giờ khi người sử dụng chọn giờ trên TimePicker.Tiến hành tạo project, vào thư mục res /layout -> activity_main.xml thiết kế giao diện sau:
Bước 1: Tạo một project tên là TimePickerDialog: File->New->Android Application Project điền các thông tin ->Next ->Finish
Bước 2: Mở res -> layout -> xml (hoặc) activity_main.xml và thêm code, chúng ta sẽ tạo các đối tượng EditText trong Relative 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" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".MainActivity"> <EditText android:id="@+id/time" android:layout_width="200dp" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:hint="Select Time..." android:textColor="#090" android:textColorHint="#090" android:background="#d4d4d4" android:padding="15dp" android:textSize="20sp" android:textStyle="bold" /> </RelativeLayout> Bước 3: Mở app -> src ->MainActivity.java
Trong bước này chúng ta khỏi tạo cho EditText, thiết lập sự kiện cho EditText. Khi người sử dụng click vào EditText sẽ xuất hiện một Dialog TimePicker để người sử dụng thiết lập thời gian. Cuối cùng thời gian xuất hiện trên EditText
package hiepsiit.com.timepickerdialog; import java.sql.Date; import android.app.Activity; import android.app.TimePickerDialog; import android.app.TimePickerDialog.OnTimeSetListener; import android.os.Bundle; import android.util.Log; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.EditText; import android.widget.TimePicker; import android.widget.Toast; // chú ý import thư viện này import java.util.Calendar; public class MainActivity extends Activity { EditText txtTime; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // initiate the edit text txtTime = (EditText) findViewById(R.id.txtTime); // perform click event listener on edit text txtTime.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub showTimePickerDialog(); } }); } /** * Hàm hiển thị TimePickerDialog */ public void showTimePickerDialog() { Calendar calendar = Calendar.getInstance(); final int hour = calendar.get(Calendar.HOUR_OF_DAY); int minute = calendar.get(Calendar.MINUTE); TimePickerDialog timePickerDialog = new TimePickerDialog(MainActivity.this, new TimePickerDialog.OnTimeSetListener() { @Override public void onTimeSet(TimePicker view, int hourOfDay, int minute) { String s=hourOfDay +":"+minute; int hourTam=hourOfDay; if(hourTam>12) hourTam=hourTam-12; txtTime.setText (hourTam +":"+minute +(hourOfDay>12?" PM":" AM")); //lưu giờ thực vào tag txtTime.setTag(s); } }, hour, minute, true); timePickerDialog.setTitle("Chọn thời gian"); timePickerDialog.show(); } }
Ứng dụng này được phát triển bởi adt bundle, android 4.2 sử dụng minimum sdk 11 and target sdk 21.
Kết quả khi chạy ứng dụng:
Sau đó click vào EditText:
Chọn thời gian trên TimePickerDialog, Click Ok
Cập nhật công nghệ từ Youtube tại link: https://www.youtube.com/channel/UCOxeYcvZPGf-mGLYSl_1LuA/videos
Để tham gia khóa học công nghệ truy cập link: http://thuvien.hocviendaotao.com
Mọi hỗ trợ về công nghệ email: dinhanhtuan68@gmail.com
