Hướng dẫn sử dụng Android TimePicker

Xem thêm các chuyên mục:

Các hướng dẫn lập trình Android

Android TimePicker
Ví dụ TimePicker

1- Android TimePicker

Android TimePicker là một thành phần cho phép người dùng chọn một thời gian (time) bao gồm giờ và phút.

TimePicker có 2 chế độ với giao diện khác nhau:

Clock
Spinner

Clock Mode

Chế độ Clock (Clock mode) là mặc định của TimePicker, tại chế độ này người dùng có thể lựa chọn thời gian một cách trực quan giống như họ đang điều chỉnh thời gian cho một chiếc đồng hồ (Clock). Ngoài ra người dùng cũng có một lựa chọn khác đó là sử dụng bàn phím để nhập giá trị cho giờ và phút.

TimePicker (Clock Mode)

<TimePicker
    android:id="@+id/timePicker"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:timePickerMode="clock" />

TimePicker timePicker = (TimePicker) this.findViewById(R.id.timePicker);
timePicker.setIs24HourView(true); // 24H Mode.

Spinner Mode

Trong chế độ Spinner (Spinner mode), một TimePicker bao gồm 2 hoặc 3 Spinner. Trong đó Spinner đầu tiên cho phép người dùng lựa chọn giờ, Spinner thứ 2 cho phép lựa chọn phút, và Spinner thứ 3 để lựa chọn AM hoặc PM.

TimePicker trong chế độ Spinner & AM_PM bao gồm 3 Spinner, người dùng lựa chọn giờ trong Spinner đầu tiên với các giá trị từ 1 đến 12. Chọn phút trong Spinner thứ hai với các giá trị từ 0 đến 59, và chọn AM/PM tại spinner thứ ba.

TimePicker (Spinner Mode)

<TimePicker
    android:id="@+id/timePicker"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:timePickerMode="spinner" />

TimePicker trong chế độ Spinner & 24H bao gồm 2 Spinner, người dùng lựa chọn giờ trong Spinner đầu tiên với các giá trị từ 0 đến 23, và phút trong Spinner thứ hai với giá trị từ 0 đến 59.

TimePicker timePicker = (TimePicker) this.findViewById(R.id.timePicker);
timePicker.setIs24HourView(true); // 24H Mode.

Android TimePickerDialog

Android DatePicker

Android DatePickerDialog

Android Chronometer

Android TextClock

2- Ví dụ TimePicker

Xem trước ví dụ:

Trên Android Studio tạo mới một project:

File > New > New Project > Empty Activity
- Name: TimePickerExample
- Package name: org.o7planning.timepickerexample
- Language: Java

Giao diện của ứng dụng:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TimePicker
        android:id="@+id/timePicker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:timePickerMode="clock"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView_time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="HH:mm"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/timePicker" />

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.java

package org.o7planning.timepickerexample;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.TextView;
import android.widget.TimePicker;

public class MainActivity extends AppCompatActivity {

    private TimePicker timePicker;
    private TextView textViewTime;

    // Change this value and run the application again.
    private boolean is24HView = true;

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

        this.textViewTime = (TextView) this.findViewById(R.id.textView_time);
        this.timePicker = (TimePicker) this.findViewById(R.id.timePicker);
        this.timePicker.setIs24HourView(this.is24HView);

        this.timePicker.setOnTimeChangedListener(new TimePicker.OnTimeChangedListener() {
            @Override
            public void onTimeChanged(TimePicker view, int hourOfDay, int minute) {
                textViewTime.setText(hourOfDay + ":" + minute);
            }
        });
    }

}

Xem thêm các chuyên mục:

Các hướng dẫn lập trình Android