-
-
Notifications
You must be signed in to change notification settings - Fork 842
Picker
xuexiangjys edited this page Apr 26, 2022
·
6 revisions
选择器是Android中常用的控件,常用于时间、图片、地址等信息的选择。
时间选择器,支持自定义时间单位的选择。
- 演示效果
- 使用案例
mDatePicker = new TimePickerBuilder(getContext(), new OnTimeSelectListener() {
@Override
public void onTimeSelected(Date date, View v) {
ToastUtils.toast(DateUtils.date2String(date, DateUtils.yyyyMMdd.get()));
}
})
.setTimeSelectChangeListener(new OnTimeSelectChangeListener() {
@Override
public void onTimeSelectChanged(Date date) {
Log.i("pvTime", "onTimeSelectChanged");
}
})
.setTitleText("日期选择")
.build();
Calendar calendar = Calendar.getInstance();
calendar.setTime(DateUtils.string2Date("2013-07-08 12:32:46", DateUtils.yyyyMMddHHmmss.get()));
mTimePicker = new TimePickerBuilder(getContext(), new OnTimeSelectListener() {
@Override
public void onTimeSelected(Date date, View v) {
ToastUtils.toast(DateUtils.date2String(date, DateUtils.yyyyMMddHHmmss.get()));
}
})
.setTimeSelectChangeListener(new OnTimeSelectChangeListener() {
@Override
public void onTimeSelectChanged(Date date) {
Log.i("pvTime", "onTimeSelectChanged");
}
})
.setType(TimePickerType.ALL)
.setTitleText("时间选择")
.isDialog(true)
.setOutSideCancelable(false)
.setDate(calendar)
.build();
条件选择器,支持自定义条件选择。
- 演示效果
- 使用案例
OptionsPickerView pvOptions = new OptionsPickerBuilder(getContext(), new OnOptionsSelectListener() {
@Override
public void onOptionsSelect(int options1, int options2, int options3, View v) {
//返回的分别是三个级别的选中位置
String tx = options1Items.get(options1).getPickerViewText() + "-" +
options2Items.get(options1).get(options2) + "-" +
options3Items.get(options1).get(options2).get(options3);
ToastUtils.toast(tx);
}
})
.setTitleText("城市选择")
.setDividerColor(Color.BLACK)
.setTextColorCenter(Color.BLACK) //设置选中项文字颜色
.setContentTextSize(20)
.isDialog(isDialog)
.setSelectOptions(defaultSelectOptions[0], defaultSelectOptions[1], defaultSelectOptions[2])
.build();
pvOptions.setPicker(options1Items, options2Items, options3Items);//三级选择器
pvOptions.show();
图片选择器,使用的是第三方的库PhotoPicker,支持单图片和多图片选择。
- 演示效果
- 使用案例
//单图片选择
PhotoPicker.builder()
.setPhotoCount(1)
.start(getContext(), this);
//多图片选择
PhotoPicker.builder()
.setPhotoCount(9)
.setGridColumnCount(4)
.start(getContext(), this);
//支持选择gif
PhotoPicker.builder()
.setShowCamera(true)
.setShowGif(true)
.start(getContext(), this);
- 注意需要增加如下依赖
implementation 'com.github.xuexiangjys:PhotoPicker:1.0.1'
支持选择身高、体重、视力的滑动选择刻度尺
- 演示效果
- 使用案例
<com.xuexiang.xui.widget.picker.RulerView
android:layout_width="match_parent"
android:layout_height="120dp"
android:layout_margin="10dp"
app:rv_firstScale="175"
app:rv_minScale="50"
app:rv_maxScale="230"
app:rv_scaleCount="5"
app:rv_unit="cm"
app:rv_bgColor="#fcfffc"
app:rv_smallScaleColor="@color/colorPrimary"
app:rv_midScaleColor="@color/colorPrimaryDark"
app:rv_largeScaleColor="@color/colorAccent"
app:rv_resultNumColor="#50b586"
app:rv_scaleNumColor="#666666"
app:rv_unitColor="#50b586"
app:rv_unitTextSize="10sp" />
- 属性表: (RulerView)
属性名 | 类型 | 默认值 | 备注 |
---|---|---|---|
rv_rulerHeight | dimension | 50dp | 尺子的高度 |
rv_rulerToResultGap | dimension | 12.5dp | 尺子距离结果的高度 |
rv_scaleGap | dimension | 10dp | 刻度间距 |
rv_scaleLimit | integer | 1 | 相邻2个刻度之间的数量 |
rv_scaleCount | integer | 10 | 刻度数 |
rv_firstScale | float | 50 | 默认选中的刻度 |
rv_maxScale | integer | 100 | 最大刻度 |
rv_minScale | integer | 0 | 最小刻度 |
rv_bgColor | color | #FFFCFFFC | 背景色 |
rv_smallScaleColor | color | #FF999999 | 小刻度的颜色 |
rv_midScaleColor | color | #FF666666 | 中刻度的颜色 |
rv_largeScaleColor | color | #FF50B586 | 大刻度的颜色 |
rv_scaleNumColor | color | #FF333333 | 刻度数的颜色 |
rv_resultNumColor | color | #FF50B586 | 结果字体的颜色 |
rv_unit | string | kg | 单位 |
rv_unitColor | color | #FF50B586 | 单位颜色 |
rv_smallScaleStroke | dimension | 2dp | 小刻度的宽度 |
rv_midScaleStroke | dimension | 3dp | 中刻度的宽度 |
rv_largeScaleStroke | dimension | 5dp | 大刻度的宽度 |
rv_resultNumTextSize | dimension | 20sp | 结果字体大小 |
rv_scaleNumTextSize | dimension | 16sp | 刻度字体大小 |
rv_unitTextSize | dimension | 13sp | 单位字体大小 |
rv_showScaleResult | boolean | true | 是否显示结果值 |
rv_isBgRoundRect | boolean | true | 背景是否圆角 |
rv_roundRadius | dimension | 10dp | 圆角大小 |
滑块选择器,支持双向的范围选择。
- 演示效果
- 使用案例
<com.xuexiang.xui.widget.picker.XRangeSlider
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="10dp" />
<com.xuexiang.xui.widget.picker.XRangeSlider
android:id="@+id/xrs_bubble"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="10dp"
app:xrs_insideRangeLineColor="#0bd97f"
app:xrs_insideRangeLineStrokeWidth="5dp"
app:xrs_isShowBubble="true"
app:xrs_isShowRuler="true"
app:xrs_max="200"
app:xrs_min="50"
app:xrs_numberTextColor="#ffffff"
app:xrs_numberTextSize="15sp"
app:xrs_outsideRangeLineColor="#f0f0f0"
app:xrs_outsideRangeLineStrokeWidth="5dp"
app:xrs_rulerInterval="twenty" />
- 属性表: (XRangeSlider)
属性名 | 类型 | 默认值 | 备注 |
---|---|---|---|
xrs_verticalPadding | dimension | 10dp | 控件的垂直间距 |
xrs_insideRangeLineColor | color | R.attr.colorAccent | 选中范围的线条颜色 |
xrs_outsideRangeLineColor | color | #F0F0F0 | 不在选中范围的线条颜色 |
xrs_insideRangeLineStrokeWidth | dimension | 5dp | 选中范围的线条宽度 |
xrs_outsideRangeLineStrokeWidth | dimension | 5dp | 不在选中范围的线条宽度 |
xrs_min | integer | 0 | 滑块选择的最小值 |
xrs_max | integer | 100 | 滑块选择的最大值 |
xrs_sliderIcon | reference | R.drawable.xui_ic_slider_icon | 滑块的图标 |
xrs_sliderIconFocus | reference | R.drawable.xui_ic_slider_icon | 滑块触摸时的图标 |
xrs_isLineRound | boolean | true | 线条是否有圆角 |
xrs_isShowBubble | boolean | false | 是否显示数字气泡 |
xrs_isFitColor | boolean | true | 是否自适应气泡和数字文字的颜色 |
xrs_bubbleResource | reference | R.drawable.xui_bg_bubble_blue | 气泡的背景资源 |
xrs_numberTextColor | color | R.attr.colorControlNormal | 气泡数字的文字颜色 |
xrs_numberTextSize | dimension | 12sp | 气泡数字的文字大小 |
xrs_numberMarginBottom | dimension | 2dp | 气泡距离底部的距离 |
xrs_isShowRuler | boolean | false | 是否显示刻度尺 |
xrs_rulerColor | color | R.attr.colorControlNormal | 刻度尺的颜色 |
xrs_rulerTextColor | color | R.attr.colorControlNormal | 刻度尺文字的颜色 |
xrs_rulerTextSize | dimension | 12sp | 刻度尺文字的大小 |
xrs_rulerMarginTop | dimension | 4dp | 刻度尺刻度距离顶部的距离 |
xrs_rulerDividerHeight | dimension | 4dp | 刻度尺刻度的高度 |
xrs_rulerTextMarginTop | dimension | 4dp | 刻度尺刻度文字距离上部的距离 |
xrs_rulerInterval | enum | twenty | 刻度尺刻度的间隔 |
滑块选择器,功能类似SeekBar,和XRangeSlider样式统一。
- 演示效果
- 使用案例
<com.xuexiang.xui.widget.picker.XSeekBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="10dp" />
<com.xuexiang.xui.widget.picker.XSeekBar
android:id="@+id/xsb"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="10dp"
app:xsb_insideRangeLineColor="#0bd97f"
app:xsb_insideRangeLineStrokeWidth="5dp"
app:xsb_isShowBubble="true"
app:xsb_isShowRuler="true"
app:xsb_min="10"
app:xsb_numberTextColor="#ffffff"
app:xsb_numberTextSize="15sp"
app:xsb_outsideRangeLineColor="#f0f0f0"
app:xsb_outsideRangeLineStrokeWidth="5dp"
app:xsb_rulerColor="@color/xui_config_color_gray_4" />
- 属性表: (XSeekBar)
属性名 | 类型 | 默认值 | 备注 |
---|---|---|---|
xsb_verticalPadding | dimension | 10dp | 控件的垂直间距 |
xsb_insideRangeLineColor | color | R.attr.colorAccent | 选中范围的线条颜色 |
xsb_outsideRangeLineColor | color | #F0F0F0 | 不在选中范围的线条颜色 |
xsb_insideRangeLineStrokeWidth | dimension | 5dp | 选中范围的线条宽度 |
xsb_outsideRangeLineStrokeWidth | dimension | 5dp | 不在选中范围的线条宽度 |
xsb_min | integer | 0 | 滑块选择的最小值 |
xsb_max | integer | 100 | 滑块选择的最大值 |
xsb_sliderIcon | reference | R.drawable.xui_ic_slider_icon | 滑块的图标 |
xsb_sliderIconFocus | reference | R.drawable.xui_ic_slider_icon | 滑块触摸时的图标 |
xsb_isLineRound | boolean | true | 线条是否有圆角 |
xsb_isShowBubble | boolean | false | 是否显示数字气泡 |
xsb_isShowNumber | boolean | true | 是否显示数字 |
xsb_isFitColor | boolean | true | 是否自适应气泡和数字文字的颜色 |
xsb_bubbleResource | reference | R.drawable.xui_bg_bubble_blue | 气泡的背景资源 |
xsb_numberTextColor | color | R.attr.colorControlNormal | 气泡数字的文字颜色 |
xsb_numberTextSize | dimension | 12sp | 气泡数字的文字大小 |
xsb_numberMarginBottom | dimension | 2dp | 气泡距离底部的距离 |
xsb_isShowRuler | boolean | false | 是否显示刻度尺 |
xsb_rulerColor | color | R.attr.colorControlNormal | 刻度尺的颜色 |
xsb_rulerTextColor | color | R.attr.colorControlNormal | 刻度尺文字的颜色 |
xsb_rulerTextSize | dimension | 12sp | 刻度尺文字的大小 |
xsb_rulerMarginTop | dimension | 4dp | 刻度尺刻度距离顶部的距离 |
xsb_rulerDividerHeight | dimension | 4dp | 刻度尺刻度的高度 |
xsb_rulerTextMarginTop | dimension | 4dp | 刻度尺刻度文字距离上部的距离 |
xsb_rulerInterval | enum | twenty | 刻度尺刻度的间隔 |