# actual-number-picker

**Repository Path**: HarmonyOS-tpc/actual-number-picker

## Basic Information

- **Project Name**: actual-number-picker
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-09-17
- **Last Updated**: 2023-04-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## Actual Number Picker

## Introduction
Actual Number Picker is an openharmony custom-built component for choosing numbers. It's simple, elegant, fits in a small-height constraint box and it can be completely customized in XML. You can easily swipe it right and left, or click on arrow controls to increase/decrease the current value.

## Usage instructions
First, define the component in your layout file (of course, you don't need to add all the app attributes, I just added them for demo).
```xml
<me.angrybyte.numberpicker.view.ActualNumberPicker
    ohos:id="$+id:actual_picker"
    ohos:height="48vp"
    ohos:width="match_content"
    ohos:background_element="#FFFF3040"
    ohos:horizontal_center="true"
    ohos:top_margin="25vp"
    ohos:bar_color="#FFFFFFFF"
    ohos:bar_width="1vp"
    ohos:bars_count="26"
    ohos:draw_over_controls="true"
    ohos:draw_over_text="false"
    ohos:highlight_color="#FFFF3040"
    ohos:max_value="100"
    ohos:min_value="0"
    ohos:selection_color="#A0FF3040"
    ohos:show_bars="true"
    ohos:show_controls="true"
    ohos:show_fast_controls="true"
    ohos:show_highlight="true"
    ohos:show_text="false"
    ohos:text_color="#FFFFFFFF"
    ohos:text_size="16fp"
    ohos:value="50"/>
```
Then, from Java (your Ability or Fraction), you can easily get the component and attach the listener.
```java
public class DemoAbility extends Ability implements OnValueChangeListener {

    private static final String TAG = DemoAbility.class.getSimpleName();

    private ActualNumberPicker mPicker;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_demo);
        mPicker = (ActualNumberPicker) findComponentById(ResourceTable.Id_actual_picker);
        mPicker.setListener(this);
    }

    @Override
    public void onValueChanged(int oldValue, int newValue) {
        float percent = (float) newValue / (float) (mPicker.getMaxValue() - mPicker.getMinValue());
        LogUtil.debug(TAG, "Currently the picker is at " + percent + " percent.");
    }

}
```
**Note:** onValueChanged() event will always get fired on the UI thread.

Explanation of attributes
-------------------------
Here are some short explanations for the attributes provided by the component. You can leave out any of them, values will get set to default ones.

- `show_bars`: (**boolean**) Whether show the vertical lines or not.
- `bars_count`: (**integer**) How many bars to show. Note that the number may be changed by 1 if symmetry issues occur (*ignored if bars are not visible*).
- `bar_color`: (**color**) Recolors all of the vertical lines to the specified color (*ignored if bars are not visible*).
- `bar_width`: (**dimension**) How wide should each bar be (*ignored if bars are not visible*).
- `draw_over_text`: (**boolean**) Whether to show the bars over the text (*ignored if text or bars are not visible*).
- `draw_over_controls`: (**boolean**) Whether to show the bars over the arrow controls (*ignored if controls or bars are not visible*).

- `show_highlight`: (**boolean**) Whether to show the blurry highlight behind each of the arrow controls (*ignored if controls are not visible*).
- `highlight_color`: (**color**) Recolors the blurry highlight to the specified color (*ignored if controls or highlights are not visible*).

- `show_controls`: (**boolean**) Whether to show the slow arrow controls or not.

- `show_fast_controls`: (**boolean**) Whether to show the fast arrow controls or not.

- `show_text`: (**boolean**) Whether to show the text with the current number value or not.
- `text_size`: (**dimension**) Set the current number value text size (*ignored if text is not shown*).
- `text_color`: (**color**) Recolors the current number value text to the specified color (*ignored if text is not shown*).

- `min_value`: (**integer**) How low can the value numbers go.
- `max_value`: (**integer**) How high can the value numbers go.
- `value`: (**integer**) Set the current value (*must be between `min_value` and `max_value`*).

## Installation instruction
**Method 1:**
Generate the .har package through the library and add the .har package to the libs folder.
Add the following code to the entry gradle:
```
implementation fileTree  (dir: 'libs', include: ['*.jar', '*.har'])
```
**Method 2:**
In project level build.gradle:
```
allprojects{
    repositories{
        mavenCentral()
    }
}
```
Add the following code to the entry gradle:
```
implementation project(path: ': picker)
```