鸿蒙开源组件——滚轮选择器

jacksky

发布于 2021-8-19 11:47

浏览

0收藏

WheelPicker

项目介绍

项目名称：WheelPicker
所属系列：openharmony的第三方组件适配移植
功能：自定义 View 实现滑动流畅、功能齐全、用法简单、高度自定义的 WheelView，并在 WheelView 基础之上封装了常用的日期选择器（包括年、月、日 WheelView）、选项选择器
项目移植状态：已完成,3D弯曲效果暂不支持
调用差异：无
开发版本：sdk6，DevEco Studio2.2 Beta1
基线版本：Release w1.0.7_p1.0.9

效果演示

安装教程

1.在项目根目录下的build.gradle文件中，

 allprojects {
    repositories {
        maven {
            url 'https://s01.oss.sonatype.org/content/repositories/releases/'
        }
    }
 }1.
2.
3.
4.
5.
6.
7.

2.在entry模块的build.gradle文件中，

 dependencies {
    implementation('com.gitee.chinasoft_ohos:WheelPicker-wheelview:1.0.0')
    implementation('com.gitee.chinasoft_ohos:WheelPicker-Picker:1.0.0')
    ......
 }1.
2.
3.
4.
5.

在sdk6，DevEco Studio2.2 Beta1下项目可直接运行如无法运行，删除项目.gradle,.idea,build,gradle,build.gradle文件，并依据自己的版本创建新项目，将新项目的对应文件复制到根目录下

使用说明

WheelView

布局文件定义，提供控件：WheelView

<com.zyyoona7.wheel.WheelView
        ohos:id="@+id/wheelview"
        ohos:layout_width="wrap_content"
        ohos:layout_height="wrap_content"/>1.
2.
3.
4.

2、在 AbilitySlice 中，这样配置

//泛型为数据类型
    final WheelView<Integer> wheelView = findViewById(R.id.wheelview);
    //初始化数据
    List<Integer> list = new ArrayList<>(1);
    for (int i = 0; i < 20; i++) {
        list.add(i);
    }
    //设置数据
    wheelView.setData(list);

    //尽请使用各种方法
    wheelView.setTextSize(24f,true);
    //more...1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

.进阶用法（Advanced Usage）

问：我已经有了创建好的实体怎么办？

答：好办~

我已城市列表为例（其他实体同理）

我的城市列表实体是这样的：

public class CityEntity implements IWheelEntity, Serializable {

    //国家
    public static final String LEVEL_COUNTRY = "country";
    //省
    public static final String LEVEL_PROVINCE = "province";
    //市
    public static final String LEVEL_CITY = "city";
    //区
    public static final String LEVEL_DISTRICT = "district";

    private String citycode;
    private String adcode;
    private String name;
    private String center;
    private String level;
    private List<CityEntity> districts;

    public String getCitycode() {
        return citycode;
    }

    public void setCitycode(String citycode) {
        this.citycode = citycode;
    }

    public String getAdcode() {
        return adcode;
    }

    public void setAdcode(String adcode) {
        this.adcode = adcode;
    }

    public String getName() {
        return name == null ? "" : name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getCenter() {
        return center;
    }

    public void setCenter(String center) {
        this.center = center;
    }

    public String getLevel() {
        return level;
    }

    public void setLevel(String level) {
        this.level = level;
    }

    public List<CityEntity> getDistricts() {
        return districts == null ? new ArrayList<CityEntity>(1) : districts;
    }

    public void setDistricts(List<CityEntity> districts) {
        this.districts = districts;
    }

    @Override
    public String toString() {
        return "CityEntity{" +
                "citycode='" + citycode + '\'' +
                ", adcode='" + adcode + '\'' +
                ", name='" + name + '\'' +
                ", center='" + center + '\'' +
                ", level='" + level + '\'' +
                ", districts=" + districts +
                '}';
    }

    /**
     * 重点：重写此方法，返回 WheelView 显示的文字
     * @return
     */
    @Override
    public String getWheelText() {
        return name == null ? "" : name;
    }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.

注意，我的 CityEntity 中多实现了一个 IWheelEntity 接口，这个接口是在 WheelView 库中定义好的，实现之后在 getWheelText() 方法返回你想在 WheelView 中展示的字段就大功告成了。

MainActivity WheelView 相关代码：

  WheelView<CityEntity> cityWv=findViewById(R.id.wv_city);
    //解析城市列表
    List<CityEntity> cityData= ParseHelper.parseTwoLevelCityList(this);
    cityWv.setData(cityData);1.
2.
3.
4.

如果条件都不满足的话会默认执行 toString() 方法，所以理论上也可以在实体的 toString() 方法返回你想展示的字段，但是不推荐，毕竟 toString() 方法以我个人的习惯都是输出 CityEntity 那种的信息~你也可能输出别的信息。

PickerView Usage

DatePickerView Usage

在布局文件中：

<com.zyyoona7.picker.DatePickerViewEx
            ohos:height="match_content"
            ohos:width="match_parent"
            />1.
2.
3.
4.

代码中：

        //展示年月日
        setPickerDisplay(mYear, isDisplayYear);
        setPickerDisplay(mMonth, isDisplayMonth);
        setPickerDisplay(mDay, isDisplayDay);

        // 设置选中颜色
        setPickTextColor(mYear, mSelectedColorYear, mNormalColorYear);
        setPickTextColor(mMonth, mSelectedColorMonth, mNormalColorMonth);
        setPickTextColor(mDay, mSelectedColorDay, mNormalColorDay);1.
2.
3.
4.
5.
6.
7.
8.
9.

OptionsPickerView

在布局文件中：

<com.zyyoona7.picker.CityPicker
        ohos:id="$+id:picker_city"
        ohos:height="160vp"
        ohos:width="match_parent"
        ohos:bottom_padding="10vp"
        ohos:start_margin="10vp"
        ohos:top_margin="5vp"
        ohos:background_element="#FFD9D5D5"
        app:select_background="false"
        app:isshow_shadow="true"
        app:issound="true"
        >
    </com.zyyoona7.picker.CityPicker>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

代码中：

        pickerCity = (CityPicker) findComponentById(ResourceTable.Id_picker_city);
        pickerCity.setOnePickerValue(sign);
        pickerCity.setTwoPickerValue(sign2);
        pickerCity.setThreePickerValue(sign3);1.
2.
3.
4.

自定义属性 WheelPicker

名称	类型	说明
is_display_year	boolean	显示年份
is_display_month	boolean	显示月份
is_display_day	boolean	显示天
is_display_text	boolean	显示文字
selected_text_color_year	color	选中年份颜色
selected_text_color_month	color	选中月份颜色
selected_text_color_day	color	选中天颜色
normal_text_color_year	color	未选中年份颜色
normal_text_color_month	color	未选中月份颜色
normal_text_color_day	color	未选中天颜色
spacing	int	间距

测试信息

CodeCheck代码测试无异常

CloudTest代码测试无异常

病毒安全检测通过

当前版本demo功能与原组件基本无差异

版本迭代

1.0.0

版权和许可信息

    Copyright 2018 zyyoona7
    
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at
    
        http://www.apache.org/licenses/LICENSE-2.0
    
    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.