DatePicker、TimePicker的使用和改變字型樣式及picker大小

阿新 • • 發佈：2018-12-01

DatePicker、TimePicker的使用

DatePicker的使用

1.DatePicker是Android自帶的一個日期選擇期控制元件，能夠實現日期的聯動選擇。使用比較簡單，下面介紹一下簡單的使用以及注意的點。
* 簡單使用
首先在xml 中加入DatePicker的控制元件(用了最新的ConstraintLayout，不熟可以忽略)

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="com.example.test.customtimepick.MainActivity">

    <DatePicker
        android:id="@+id/data" 

        android:calendarViewShown="false"
        android:layout_width="0dp"
        app:layout_constraintHorizontal_weight="1"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf 
="@+id/time"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

在程式碼中，先初始化變數，然後呼叫
init(int year, int monthOfYear, int dayOfMonth, DatePicker.OnDateChangedListener onDateChangedListener)方法初始化日期值並設定日期改變的監聽

calendar = Calendar.getInstance();
year = calendar.get(Calendar.YEAR);
month = calendar.get(Calendar.MONTH)+1;  //注意MONTH從0開始算
day = calendar.get(Calendar.DAY_OF_MONTH);
hour = calendar.get(Calendar.HOUR_OF_DAY);
min = calendar.get(Calendar.MINUTE);
setTitle(year + "-" + month + "-" + day + "  " + hour + ":" + min);

data.init(year,month,day,new DatePicker.OnDateChangedListener() {
    @Override
    public void onDateChanged(DatePicker datePicker, int year1, int month1, int day1) {
        year = year1;
        month = month1+1;
        day = day1;
        setTitle(year + "-" + month + "-" + day + "  " + hour + ":" + min);
    }
});

一個簡單的日期選擇期功能就基本完成了，至於其他的功能參考官方文件有詳細的API說明DatePicker說明

注意事項
DatePicker在android4.4以下和5.0以上的預設呈現形式不太一樣。
在4.4以下預設顯示

5.0以上顯示

DatePicker通常都會和TimePicker一同使用，為了不讓在4.4以下顯示日曆形式佔用太多空間，可以使用屬性android:calendarViewShown=“false”隱藏日曆的顯示，但在5.0以上設定此屬性則不行。(android:spinnersShown是否顯示spinner)
DatePicker的顯示形式有幾種模式，由android:datePickerMode屬性決定，有calendar形式和spinners形式，在4.4以下預設都顯示，在5.0以上預設為calendar模式。在spinners模式下，年份的選擇是以spinner形式選擇的，而在calendar模式下則是通過點選年份以list的形式選擇。
2.TimePicker的使用
TimePicker的使用和DatePicker類似，只是初始化的方式不同

hour = calendar.get(Calendar.HOUR_OF_DAY);
min = calendar.get(Calendar.MINUTE);
time.setOnTimeChangedListener(new TimePicker.OnTimeChangedListener() {
    @Override
    public void onTimeChanged(TimePicker timePicker, int hour1, int min1) {
        hour = hour1;
        min = min1;
        setTitle(year + "-" + month + "-" + day + "  " + hour + ":" + min);
    }
});

改變picker寬度和字型大小顏色

1.改變寬度
DatePicker和TimePicker經常一起使用水平並列排放，由於空間問題一般使用spinners模式，不顯示日曆。但是在豎屏模式的時候，可能寬度還是不夠，而單個picker寬的度沒有相應的屬性可以設定寬度，但因為DatePicker和TimePicker是由一個個numberPicker組成的，所以可以通過在程式碼中改變numberPicker的寬度來達到此目的。

/**
* 調整FrameLayout的大小
* */
private void resizePicker(FrameLayout tp){        //DatePicker和TimePicker繼承自FrameLayout
    List<NumberPicker> npList = findNumberPicker(tp);  //找到組成的NumberPicker
    for(NumberPicker np:npList){
        resizeNumberPicker(np);      //調整每個NumberPicker的寬度
    }
}
 /**
 * 得到viewGroup 裡面的numberpicker元件
 * */
 private List<NumberPicker> findNumberPicker(ViewGroup viewGroup) {
     List<NumberPicker> npList = new ArrayList<NumberPicker>();
     View child = null;
     if(null != viewGroup){
         for(int i=0;i<viewGroup.getChildCount();i++){
             child = viewGroup.getChildAt(i);
             if(child instanceof NumberPicker){
                 npList.add((NumberPicker)child);
             }else if(child instanceof LinearLayout){
                 List<NumberPicker> result = findNumberPicker((ViewGroup) child);
                 if(result.size()>0){
                     return result;
                 }
             }
         }
     }
     return npList;
 }

 /**
  * 調整numberpicker大小
  * */
 private void resizeNumberPicker(NumberPicker np){
     LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(100, ViewGroup.LayoutParams.WRAP_CONTENT);
     params.setMargins(10,5,10,5);
     np.setLayoutParams(params);
 }

呼叫時只需將相應元件傳入

data = (DatePicker)findViewById(R.id.data);
time = (TimePicker)findViewById(R.id.time);
resizePicker(data);
resizePicker(time);

2.改變字型樣式
在style.xml中自定義字型的樣式

<style name="Theme.Picker" parent="Theme.AppCompat.Light">
    <item name="android:editTextStyle">@style/Widget.EditText.White</item>
</style>
<style name="Widget.EditText.White" parent="@android:style/Widget.EditText">
    <item name="android:textSize">20sp</item>
    <item name="android:textColor">#00ff00</item>
</style>

然後在AndroidManifest.xml中對應的activity設定主題為相應的名稱

<activity android:name=".MainActivity"
    android:screenOrientation="landscape"
    android:theme="@style/Theme.Picker"
    >

DatePickerDialog和TimePickerDialog

DatePickerDialog和TimePickerDialog也是一種常見的日期選擇形式，他們以彈框的形式出現，基本的使用如下：

dataDialog = new DatePickerDialog(this, new DatePickerDialog.OnDateSetListener() {
    @Override
    public void onDateSet(DatePicker datePicker, int i, int i1, int i2) {
        year = i; month = i1; day = i2;
        setTitle(year + "-" + month + "-" + day + "  " + hour + ":" + min);
    }
}, year, month, day);
timeDialog = new TimePickerDialog(this, new TimePickerDialog.OnTimeSetListener() {
    @Override
    public void onTimeSet(TimePicker timePicker, int i, int i1) {
        hour = i; min = i1;
        setTitle(year + "-" + month + "-" + day + "  " + hour + ":" + min);
    }
},hour,min,true);

dataDialog.show();
timeDialog.show();

如果想改變彈框裡的樣式可類似DatePicker那樣來實現

resizePicker(dataDialog.getDatePicker());   //改變日期選擇期大小
WindowManager.LayoutParams p = dataDialog.getWindow().getAttributes(); //改變對話方塊大小
p.width = 1000;
p.height = 800;
dataDialog.show();

DatePicker、TimePicker的使用和改變字型樣式及picker大小