鴻蒙OS應用開發之——Java UI框架-常用元件DatePicker
阿新 • • 發佈：2021-01-07
一 概述
- DatePicker的使用
- DatePicker樣式設定
二 DatePicker的使用
2.1 在XML中建立DatePicker
佈局檔案
<?xml version="1.0" encoding="utf-8"?> <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:orientation="vertical"> <DatePicker ohos:id="$+id:date_pick" ohos:height="match_content" ohos:width="300vp"> </DatePicker> </DirectionalLayout>
效果圖
2.2 獲取當前選擇日期，日/月/年，DatePicker預設選擇當前日期
// 獲取DatePicker例項
DatePicker datePicker = (DatePicker) findComponentById(ResourceTable.Id_date_pick);
int day = datePicker.getDayOfMonth();
int month = datePicker.getMonth();
int year = datePicker.getYear();
2.3 響應日期改變事件
佈局檔案
<?xml version="1.0" encoding="utf-8"?> <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:orientation="vertical"> <DatePicker ohos:id="$+id:date_pick" ohos:height="match_content" ohos:width="300vp"> </DatePicker> <Text ohos:id="$+id:text_date" ohos:height="match_content" ohos:width="match_parent" ohos:hint="date" ohos:margin="8vp" ohos:padding="4vp" ohos:text_size="14fp"> </Text> </DirectionalLayout>
在Java程式碼中響應日期改變事件
Text selectedDate = (Text) findComponentById(ResourceTable.Id_text_date); datePicker.setValueChangedListener( new DatePicker.ValueChangedListener() { @Override public void onValueChanged(DatePicker datePicker, int year, int monthOfYear, int dayOfMonth) { selectedDate.setText(dayOfMonth+"/"+monthOfYear+"/"+year); } } );
日期改變響應效果
2.4 設定當前日期
datePicker.updateDate(2021, 8, 8);
2.5 設定日期的範圍
如需對DatePicker的日期選擇範圍有要求，可以設定屬性min_date和max_date。設定的值為日期對應的Unix時間戳
2.5.1 設定最小日期
在xml設定
<DatePicker
...
ohos:min_date="1627747200">
</DatePicker>
在程式碼中設定
datePicker.setMinDate(1627747200);
設定最小日期為2021/08/01
2.5.2 設定最大日期
在XML中設定
<DatePicker
...
ohos:max_date="1630339200">
</DatePicker>
在程式碼中設定
datePicker.setMaxDate(1630339200);
設定最大日期為2021/08/31
2.6 固定年/月/日
固定年/月/日
| 屬性 | 描述 |
|---|---|
| year_fixed | 年份固定，預設false |
| month_fixed | 月份固定，預設false |
| day_fixed | 日期固定，預設false |
在XML中設定
<DatePicker
...
ohos:year_fixed="true">
</DatePicker>
在程式碼中設定
datePicker.setYearFixed(true);
三 樣式設定
3.1 文字相關屬性
| 屬性 | Java方法 | 描述 |
|---|---|---|
| normal_text_color | setNormalTextColor(int color) | 待選項的字型顏色 |
| normal_text_size | setNormalTextSize(int size) | 待選項的字型大小 |
| operated_text_color | setOperatedTextColor(int color) | 操作項的字型顏色 |
| operated_text_background | setOperatedTextBackground(Element element) | 操作項的文字背景 |
| selected_text_color | setSelectedTextColor(int color) | 已選項的字型顏色 |
| selected_text_size | setSelectedTextSize(int size) | 已選項的字型大小 |
| selected_text_background | setSelectedTextBackground(Element element) | 已選項的文字背景 |
3.1.1 設定待選項的字型大小和顏色
在XML中設定
<DatePicker
...
ohos:normal_text_color="#00FFFF"
ohos:normal_text_size="20fp">
</DatePicker>
效果圖
3.1.2 設定已選項的字型大小和顏色
在XML中設定
<DatePicker
...
ohos:selected_text_color="#00FFFF"
ohos:selected_text_size="20fp">
</DatePicker>
在程式碼中設定
datePicker.setSelectedTextSize(40);
datePicker.setSelectedTextColor(new Color(Color.getIntColor("#FFA500")));
效果圖
3.1.3 設定操作項的字型顏色
在XML中設定
<DatePicker
...
ohos:operated_text_color="#00FFFF">
</DatePicker>
在程式碼中設定
datePicker.setOperatedTextColor(new Color(Color.getIntColor("#00FFFF")));
效果圖
3.2 設定DatePicker中所選文字邊距與普通文字邊距的比例
在XML中設定
<DatePicker
...
ohos:selected_normal_text_margin_ratio="10">
</DatePicker>
在程式碼中設定
datePicker.setSelectedNormalTextMarginRatio(10.0f)
效果圖
3.3 設定滾輪繞行
在XML中設定：
<DatePicker
...
ohos:wheel_mode_enabled="true">
</DatePicker>
在程式碼中設定
datePicker.setWheelModeEnabled(true);
效果圖
3.4 設定選中日期的上下邊框
在XML中設定
<DatePicker
...
ohos:top_line_element="#9370DB"
ohos:bottom_line_element="#9370DB">
</DatePicker>
在程式碼中設定
ShapeElement shape = new ShapeElement();
shape.setShape(ShapeElement.RECTANGLE);
shape.setRgbColor(RgbColor.fromArgbInt(0xFF9370DB));
datePicker.setDisplayedLinesElements(shape,shape);
效果圖
3.5 設定著色器顏色
在XML中設定
<DatePicker
...
ohos:shader_color="gray">
</DatePicker>
在程式碼中設定
datePicker.setShaderColor(new Color(Color.getIntColor("#00CED1")));
效果圖
