3.9 Component Picker by HarmonyOS

Author: Han Ru

Company: Program Ka (Beijing) Technology Co., LTD

Hong Meng Bus columnist

The Picker provides a sliding selector that allows the user to select from a predefined range.

Supported XML attributes

The Picker’s common XML attribute inherits from: DirectionalLayout

The Picker’s own XML attributes are shown in the following table:

The attribute name Product description The values The values that Use case
element_padding The spacing between the text and the Element Element must be configured through the setElementFormatter interface A float A float type representing spacing dimensions. They can be floating point values, which default to px; It can also be a floating point value with px/ VP /fp units; Float resources can also be referenced. ohos:element_padding=”30″

ohos:element_padding=”16vp”

ohos:element_padding=”$float:padding”
max_value The maximum The integer types You can set integer values directly or refer to an INTEGER resource. ohos:max_value=”10″

ohos:max_value=”$integer:value”
min_value The minimum value The integer types You can set integer values directly or refer to an INTEGER resource. ohos:min_value=”1″

ohos:min_value=”$integer:value”
value The current value The integer types You can set integer values directly or refer to an INTEGER resource. ohos:value=”5″

ohos:value=”$integer:value”
normal_text_color Unselected text color Color type You can set the color value directly or reference the color resource. ohos:normal_text_color=”#A8FFFFFF”

ohos:normal_text_color=”$color:black”
normal_text_size Deselect the selected text size A float A float type representing the font size. They can be floating point values, which default to px; It can also be a floating point value with px/ VP /fp units; Float resources can also be referenced. ohos:normal_text_size=”30″

ohos:normal_text_size=”16fp”

ohos:normal_text_size=”$float:size_value”
selected_text_color The selected text color Color type You can set the color value directly or reference the color resource. ohos:selected_text_color=”#A8FFFFFF”

ohos:selected_text_color=”$color:black”
selected_text_size Size of selected text A float A float type representing the font size. They can be floating point values, which default to px; It can also be a floating point value with px/ VP /fp units; Float resources can also be referenced. ohos:selected_text_size=”30″

ohos:selected_text_size=”16fp”

ohos:selected_text_size=”$float:size_value”
selector_item_num The number of items displayed The integer types You can set integer values directly or refer to an INTEGER resource. ohos:selector_item_num=”10″

ohos:selector_item_num=”$integer:num”
selected_normal_text_margin_ratio Ratio of selected text margins to normal text margins A float Floating-point values can be set directly, or float floating-point resources can be referenced. The value ranges from >0. Ohos: selected_normal_text_margin_ratio = “0.5”

ohos:selected_normal_text_margin_ratio=”$float:ratio”
shader_color Shader color Color type You can set the color value directly or reference the color resource. ohos:shader_color=”#A8FFFFFF”

ohos:shader_color=”$color:black”
top_line_element The top row of the selected item Element type Can directly configure the color value, also can reference color resources or reference media/graphic image resources. ohos:top_line_element=”#FFFFFFFF”

ohos:top_line_element=”
c o l o r : b l a c k ” < b r / > o h o s : t o p l i n e e l e m e n t = ” color:black”<br />ohos:top_line_element=” media:media_src”

ohos:top_line_element=”$graphic:graphic_src”
bottom_line_element The bottom line of the selected item Element type Can directly configure the color value, also can reference color resources or reference media/graphic image resources. ohos:bottom_line_element=”#FFFFFFFF”

ohos:bottom_line_element=”
c o l o r : b l a c k ” < b r / > o h o s : b o t t o m l i n e e l e m e n t = ” color:black”<br />ohos:bottom_line_element=” media:media_src”

ohos:bottom_line_element=”$graphic:graphic_src”
wheel_mode_enabled Select whether the wheel goes around Boolean type You can set true/false directly or refer to a Boolean resource. ohos:wheel_mode_enabled=”true”

ohos:wheel_mode_enabled=”$boolean:true”

Use Picker

Create Picker in XML

<Picker
        ohos:id="$+id:test_picker"
        ohos:height="match_content"
        ohos:width="300vp"
        ohos:background_element="#E1FFFF"
        ohos:layout_alignment="horizontal_center"
        ohos:normal_text_size="18fp"
        ohos:selected_text_size="20fp"/>
Copy the code

Selector created:

In MainAbilitySlice. Java, set the Picker value range

 				Picker picker = (Picker) findComponentById(ResourceTable.Id_test_picker);
        picker.setMinValue(0); // Set the minimum value in the selector
        picker.setMaxValue(6); // Set the maximum value in the selector
Copy the code

Operation effect:

3. Response to selector changes

				picker.setValueChangedListener((picker1, oldVal, newVal) -> {
            // oldVal: the last selected value; NewVal: the latest value selected
            new ToastDialog(getContext())
                    .setText("oldVal:"+oldVal+",newVal:"+newVal)
                    .show();
        });
Copy the code

Here we pop up ToastDialog:

4. Format the Picker’s display

Using the Picker’s setFormatter Formatter method, the user can modify the string displayed in the Picker option to a specific format.

picker.setFormatter(i -> {
    String value;
    switch (i) {
        case 0:
            value = "Mon";
            break;
        case 1:
            value = "Tue";
            break;
        case 2:
            value = "Wed";
            break;
        case 3:
            value = "Thu";
            break;
        case 4:
            value = "Fri";
            break;
        case 5:
            value = "Sat";
            break;
        case 6:
            value = "Sun";
            break;
        default:
            value = "" + i;
    }
    return value;
});
Copy the code

Format selector:

5. Set the string array to display

For components that do not display numbers directly, this method sets a one-to-one correspondence between strings and numbers. The string array length must be equal to the total number of values in the value range. When used, note that this method overrides the picker.setFormatter(Formatter Formatter) method.

In Java code:

				// Sets the array of strings to display, which overrides the picker.setformatter (Formatter Formatter) method.
        picker.setDisplayedData(new String[]{"Monday"."Tuesday"."Wednesday"."Thursday"."Friday"."Saturday"."Sunday"});
Copy the code

Operation effect:

Third, style Settings

1. Text-related attributes

Set the text style in the XML file:

<Picker
    ...
    ohos:normal_text_color="#FFA500"
    ohos:selected_text_color="#00FFFF"/>
Copy the code

Set text styles in Java code:

picker.setNormalTextFont(Font.DEFAULT_BOLD);
picker.setNormalTextSize(40);
picker.setNormalTextColor(new Color(Color.getIntColor("#FFA500")));
picker.setSelectedTextFont(Font.DEFAULT_BOLD);
picker.setSelectedTextSize(40);
picker.setSelectedTextColor(new Color(Color.getIntColor("#00FFFF")));
Copy the code

After setting the style:

2. Set the top and bottom borders of the selected text

Set in XML:

<Picker
    ...
    ohos:bottom_line_element="#40E0D0"
    ohos:top_line_element="#40E0D0"/>
Copy the code

Set this in Java code:

ShapeElement shape = new ShapeElement();
shape.setShape(ShapeElement.RECTANGLE);
shape.setRgbColor(RgbColor.fromArgbInt(0xFF40E0D0));
// Set the top border separately
// picker.setDisplayedLinesTopElement(shape); 
// Set the lower border separately
// picker.setDisplayedLinesBottomElement(shape);
// Set both the upper and lower borders
picker.setDisplayedLinesElements(shape, shape);
Copy the code

Set the top and bottom border styles:

3. Set the ratio of the selected text margin in the Picker to the normal text margin

Set in the XML file:

<Picker
    ...
    ohos:selected_normal_text_margin_ratio="5.0">
</Picker>
Copy the code

Set this in Java code:

picker.setSelectedNormalTextMarginRatio(5.0 f);
Copy the code

The effect after setting the margin:

4. Set the selection wheel mode

This mode is used to determine whether the Picker displays data in a loop.

Set in the XML file:

<Picker
    ...
    ohos:wheel_mode_enabled="true"/>
Copy the code

Set this in Java code:

picker.setWheelModeEnabled(true);
Copy the code

The display after changing the selection wheel mode:

5. Set the Picker’s shader color

Set in the XML file:

<Picker
    ...
    ohos:shader_color="#1E90FF"/>
Copy the code

Set this in Java code:

picker.setShaderColor(new Color(Color.getIntColor("#1E90FF")));
Copy the code

The style after setting the shader color:

More:

1. Community: Hongmeng Bus www.harmonybus.net/

2. HarmonyBus

3, technical exchange QQ group: 714518656

4. Video courses: www.chengxuka.com