# ColorPicker 

**Repository Path**: archermind-ti/colorpicker

## Basic Information

- **Project Name**: ColorPicker 
- **Description**: highly customizable color picker
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2021-06-04
- **Last Updated**: 2025-01-12

## Categories & Tags

**Categories**: harmonyos-selector

**Tags**: None

## README

# ColorPicker

 高度自定义， 且易用的开源颜色选取器。 


#### 功能说明
圆形预设值选择颜色：

![](images/demo5.gif)

  ![](./images/color-picker1.png)

方框形状的预设颜色选择颜色:

  ![](./images/color-picker4.png)

自定义颜色：

  ![](./images/color-picker2.png)

带透明度的颜色选择：

  ![](./images/color-picker3.png)


#### 安装教程

1. 在build.gradle文件中添加依赖
```
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
    implementation 'com.gitee.archermind-ti:colorpicker:1.0.0-beta'
    ......
}
```


#### 使用说明
You can use method of ```ColorPickerDialog.newBuilder()``` to customize the `ColorPickerDialog`:

| method                | arg type      | documentation                                                                         |
|---------------------|-----------|---------------------------------------------------------------------------------------|
| setDialogType      | enum      | "custom" to show the color picker, "preset" to show pre-defined colors                |
| setShowAlphaSlider | boolean   | Show a slider for changing the alpha of a color (adding transparency)                 |
| setColorShape      | enum      | "square" or "circle" for the shape of the color preview                               |
| setPresets    | int[] | An int-array of pre-defined colors to show in the dialog                              |
| setDialogTitle     | reference | The string resource id for the dialog title. By default the title is "Select a Color" |
| setShowColorShades | boolean   | true to show different shades of the selected color                                   |
| setAllowPresets    | boolean   | true to add a button to toggle to the custom color picker                             |
| setAllowCustom     | boolean   | true to add a button to toggle to the presets color picker                            |

You can use the following code to show the dialog.
```
Component c1 = (Component) view1.getComponentParent();
c1.setClickedListener(new Component.ClickedListener() {
  @Override
  public void onClick(Component component) {
    ColorPickerDialog dialog = ColorPickerDialog.newBuilder()
      .setColor(color1)
      .create(getContext());
    dialog.setColorPickerDialogListener(new ColorPickerDialogListener() {
      @Override
      public void onColorSelected(int dialogId, int color) {
        color1 = color;
        view1.setColor(color1);
      }

      @Override
      public void onDialogDismissed(int dialogId) {
      }
    });
    dialog.show();
  }
});
```
For further doumentation about how to use the library, check the [demo](entry) app included in this project.

# 编译说明
在IDE界面， 选择右侧Gradle, 依次选择colorpicker--ohos:release--packageReleaseHar， 就可以在工程目录的colorpicker\build\outputs\har\release找到对应的har文件.

# 未完成项
相比原工程， 目前ohos可能不提供PreferencesScreen对应的类， 因此暂时不提供相应的封装.

# 遗留问题
暂无

#### 版权和许可信息
```
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.
```