开发台组件转换——滑动选择器

准备工作

1. 在项目的com/kaida/myapplication下新建widget目录，将NumberPickerView.java文件移至widget目录下
2. 将styles.xml和attrs.xml移至res/values下，

一、设定时间/温度

操作示例

开发台新建滑动选择器，配置 绑定数据项功能 为 设定时间"SetTime" （设定温度"SetTemp"类似），如下图

此时开发台配置参数如下：

                    {
                        "control": {
                            "binding_picker_fun": "SetTime",
                            "binding_picker_val": "",
                            "columns": "0;10;20;30;40;50;60;70",
                            "showItemCount": 3,
                            "defaultIndex": 1,
                            "roundBack": true,
                            "font": "ASCLL-6-12",
                            "slidingInertia": false
                        },
                        "uuid": "oPc4s3mhm",
                        "events": {},
                        "iconName": "wk-icon-widget-picker",
                        "style": {
                            "color": "#000000",
                            "itemHight": 43,
                            "height": 130,
                            "width": 150,
                            "top": 0,
                            "rotate": 0,
                            "left": 0
                        },
                        "name": "",
                        "ID": 0,
                        "areaState": false,
                        "isLock": false,
                        "title": "滑动选择器",
                        "component": "brick-picker"
                    }

转换规则

xml文件：

需要在该对应页面的xml布局文件下增加该组件，代码如下：

    <com.kaida.myapplication.widget.NumberPickerView
        android:id="@+id/widget_picker_test"
        android:layout_width="150dp"
        android:layout_height="250dp"
        android:layout_marginTop="80dp"
        android:layout_marginLeft="200dp"
        style="@style/ModePickerView"
        />

其中 id 根据配置文件中该滑动选择器组件的 uuid 命名，例如widget_picker_cucvij124

kt文件：

在该页面的fragment.kt中，onViewCreated方法内，with(binding){ }代码段内，增加如下代码：

            /**
             * 滑动选择器绑定数据项功能为：设定温度/设定时间时：
             */
            widgetPickerSetTime.let {
//                val textList = resources.getStringArray(R.array.model);   //从xml文件中读取字符串数组
                val textList = listOf<String>("5", "10", "15", "20", "25", "30", "35", "40").toTypedArray() //模式名称数组

                it.refreshByNewDisplayedValues(textList)    //设置显示内容：字符串数组
                it.value = 3    //设置初始值索引号：int
                it.setOnValueChangedListener { picker, oldVal, newVal ->
                    run {
                        Log.d(TAG, "newVal = $newVal, text = ${textList[newVal]}")
                        vm.setTime(textList[newVal].toInt())    //设定时间
//                        vm.setTemp(textList[newVal].toInt())    //设定温度
                    }
                }
            }

转换规则下图所示，结合注释文字：

二、设定模式

操作示例

开发台新建滑动选择器，配置 绑定数据项功能 为 设定模式 ，并填写 对应功能值 ，如下图：

此时配置属性如下：

                    {
                        "style": {
                            "color": "#000000",
                            "itemHight": 43,
                            "height": 130,
                            "width": 150,
                            "top": 0,
                            "rotate": 0,
                            "left": 0
                        },
                        "component": "brick-picker",
                        "iconName": "wk-icon-widget-picker",
                        "areaState": false,
                        "control": {
                            "binding_picker_fun": "SetModel",
                            "defaultIndex": 1,
                            "columns": "普通蒸;高温蒸;加湿烤;风扇烤;烘焙烤",
                            "showItemCount": 3,
                            "binding_picker_val": "1;2;2;6;7",
                            "roundBack": true,
                            "font": "ASCLL-6-12",
                            "slidingInertia": false
                        },
                        "name": "",
                        "ID": 0,
                        "events": {},
                        "isLock": false,
                        "title": "滑动选择器",
                        "uuid": "oPc4s3mhm"
                    }

转换规则

xml文件：

同上

kt文件：

在该页面的fragment.kt中，onViewCreated方法内，with(binding){ }代码段内，增加如下代码：

            /**
             * 滑动选择器绑定数据项功能为：设定模式时：
             */
            widgetPickerTest.let {
//                val textList = resources.getStringArray(R.array.model);   //从xml文件中读取字符串数组
                val textList = listOf<String>("普通蒸", "高温蒸", "加湿烤", "风扇烤", "烘焙烤").toTypedArray() //模式名称数组
                val valueList = listOf<Int>(1, 2, 2, 6, 7)  //模式值数组，与上方的模式名称数组一一对应
                it.refreshByNewDisplayedValues(textList)    //设置显示内容：字符串数组
                it.value = 3    //设置初始值索引号：int
                it.setOnValueChangedListener { picker, oldVal, newVal ->
                    run {
                        Log.d(TAG, "new val = $newVal, and text = ${textList[newVal]}")
                        vm.setModel(valueList[newVal])
                    }
                }
            }

转换规则下图所示：