Android開發：使用時間選擇器優化用戶輸入體驗

在Android應用程序中，時間輸入對於應用程序用戶來說是很常見的。 傳統的時間輸入方式包括在EditText中手動輸入、使用Spinner或者DatePicker等控件。 這些輸入方式都需要用戶輸入時間的具體細節，如小時，分鐘和AM / PM等。 這種輸入方式不僅需要用戶花費時間輸入，還容易出現輸入錯誤，降低了用戶的使用體驗。 因此，使用時間選擇器可以更方便地優化用戶輸入體驗。

一、時間選擇器的簡介

時間選擇器是許多Android應用程序中常用的控件之一。它使用戶輸入時間變得簡單和直觀。時間選擇器為用戶提供了更好的體驗，同時可以減少輸入錯誤。 時間選擇器允許用戶通過滑動小時、分鐘和AM / PM鐘錶輪來設置時間。 此外，時間選擇器可以設置寬度和高度，以使其適應特定的應用程序布局。

二、使用時間選擇器

在Android Studio中，可以使用DatePickerDialog和TimePickerDialog控件創建時間選擇器。在以下示例中，我們將創建一個簡單的應用程序來演示如何使用時間選擇器。

首先在XML布局文件中添加一個Button和TextView組件，以便用戶可以觸發時間選擇器並顯示所選時間。

    <Button
        android:id="@+id/btn_select_time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="選擇時間" />
        
    <TextView
        android:id="@+id/tv_selected_time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="24sp" />

接下來，在Java代碼中添加以下代碼以顯示時間選擇器。

    Calendar calendar = Calendar.getInstance();
    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 timeString = String.format("%02d:%02d", hourOfDay, minute);
            mSelectedTimeTextView.setText(timeString);
        }
    }, hour, minute, false);
    timePickerDialog.show();

在代碼中，當前時間將用作默認時間，以便用戶可以通過單擊Button輕鬆查看當前時間。當用戶單擊Button時，時間選擇器將以對話框的形式出現，並根據用戶所選的時間設置TextView的文本。

三、其他的使用方式

時間選擇器可以更加自由地應用於多種場景中，如對話框、PopupWindow等。下面我們將演示其中的一種使用方式，來創建一個可以滑動選擇日期和時間的工具條。

首先在XML布局文件中添加一個Toolbar組件。 在該Toolbar中添加一個TextView，用戶選擇完畢的時間將在此顯示。使用TimePicker組件用於選擇小時和分鐘。使用DatePicker組件用於選擇年份和月份。

    <android.support.v7.widget.Toolbar
        android:id="@+id/tool_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:popupTheme="@style/ThemeOverlay.AppCompat.Light" >
    
        <TextView
            android:id="@+id/tv_toolbar_title"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:text="選擇時間"
            android:textColor="@android:color/white"
            android:textSize="20sp" />
    </android.support.v7.widget.Toolbar>
    
    <LinearLayout
        android:id="@+id/time_picker_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/tool_bar"
        android:background="@android:color/white"
        android:orientation="vertical">
    
        <DatePicker
            android:id="@+id/date_picker"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    
        <TimePicker
            android:id="@+id/time_picker"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>

接下來，在Java代碼中，我們需要進行時間選擇器、日期選擇器和工具條標題的初始化：

    private void initToolbar() {
        mToolbar.setTitle("");
        setSupportActionBar(mToolbar);
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.setDisplayHomeAsUpEnabled(true);
            actionBar.setHomeButtonEnabled(true);
            actionBar.setHomeAsUpIndicator(R.drawable.ic_arrow_back_white_24dp);
        }
    }
    
    private void initTimePicker() {
        mTimePicker.setIs24HourView(false);
        mTimePicker.setCurrentHour(8);
        mTimePicker.setCurrentMinute(0);
        mDatePicker.init(mCalendar.get(Calendar.YEAR), mCalendar.get(Calendar.MONTH), mCalendar.get(Calendar.DAY_OF_MONTH), null);
    }

在代碼中，mToolbar、mTimePicker和mDatePicker是在XML布局文件中定義的組件。由於我們需要在應用程序中使用當前時間進行初始化，因此mCalendar是用於表示日曆的Calendar實例。

最後，在Java代碼中，我們需要在Toolbar上顯示啟用關閉按鈕並添加時間選擇器的顯示和引用：

    private void initListeners() {
        mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                onBackPressed();
            }
        });
        mDoneTextView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int year = mDatePicker.getYear();
                int month = mDatePicker.getMonth() + 1;
                int day = mDatePicker.getDayOfMonth();
                int hour = mTimePicker.getCurrentHour();
                int minute = mTimePicker.getCurrentMinute();
                String time = year + "-" + month + "-" + day + " " + hour + ":" + minute;
                Toast.makeText(getApplicationContext(), time, Toast.LENGTH_SHORT).show();
            }
        });
    }

在代碼中，mDoneTextView是用於確認用戶所選時間的UIButton。當用戶單擊該按鈕時，所有當前日期和時間的設置將組合成時間字符串，並通過Toast顯示給用戶。

四、總結

通過使用時間選擇器來優化Android應用程序中的時間輸入體驗，可以大大提高用戶的體驗。在本文中，我們演示了如何使用時間選擇器創建工具條和對話框，以及如何自定義時間選擇器。當然，這只是時間選擇器的基礎使用方法，開發者還可以更靈活的使用時間選擇器。