​

Hello, I’m your friend Pongo.

The last original article analyzed the functionality and usage of the Image view Image. This is very useful, if it is a small icon or Button style you can use Text or Button to set the background image for them.

Coder: today you will learn the components of a selector, which as its name implies is multi-option selection.

Student: What is this selector mainly used for?

Code worker: This requires you to imagine, if you want to develop a registration interface, is not the need to choose gender, gender is generally three, male, female, other, this time for user experience, must do pop-up interface to scroll selection.

There are many other scenarios. Pick a time. Pick a place.

Ok, let’s start today’s Picker……

​

Let’s start today’s article, as usual, by saying the following:

1, introduction,

2. Attributes used

3, the actual combat

Introduction to the

The Picker provides a sliding selector that allows the user to select from a predefined range. This feature is generally recommended only when there are more than three options.

As shown below, you can swipe up and down to select the desired information.

​

Attributes used

The Picker’s common XML attribute inherits from DirectionalLayout (linear layout), so it’s important to learn how to layout well, and many unimplementedlayouts can be customized by rewriting.

The main attributes in this article are the ones that are most commonly used:

Normal_text_size =”16fp” // Default font size

Normal_text_color =”#FFA500″ // Default font color

Ohos :selected_text_size=”16fp” // Select font size

Ohos :selected_text_color=”#00FFFF” // Select the font color

Ohos :bottom_line_element=”#40E0D0″ // Select the bottom dividing line color of the item

Ohos :top_line_element=”#40E0D0″ // Top line color of the selected item

// The following two are not commonly used, because the general selector data is generally irregular, need to be customized.

ohos:min_value=”1″

ohos:max_value=”10″

In actual combat

1. Create a project to add Picker

<Picker
    ohos:id="$+id:picker"
    ohos:height="100vp"
    ohos:width="match_content"
    ohos:layout_alignment="horizontal_center"
    ohos:background_element="#E1FFFF"
    ohos:normal_text_size="16fp"
    ohos:selected_text_size="22fp"
    ohos:min_value="100"
    ohos:max_value="120"
    />
Copy the code

​

For better understanding, this is set entirely using configuration properties, so a slider is set to 100-120. Property also simply sets the selected and unselected font sizes.

2. Now we add a time picker to get the time.

​

Layout file:

<? The XML version = "1.0" encoding = "utf-8"? > <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:orientation="vertical"> <Picker ohos:id="$+id:picker" ohos:height="100vp" ohos:width="match_content" ohos:layout_alignment="horizontal_center" ohos:background_element="#E1FFFF" ohos:normal_text_size="16fp" ohos:selected_text_size="22fp" ohos:wheel_mode_enabled="true" ohos:min_value="100" ohos:max_value="120" /> <DirectionalLayout ohos:height="match_content" ohos:width="match_parent" ohos:alignment="center"  ohos:top_margin="50vp" ohos:background_element="#000000" ohos:orientation="horizontal"> <Picker ohos:id="$+id:picker1" ohos:height="match_content" ohos:width="0vp" ohos:weight="1" ohos:layout_alignment="horizontal_center" ohos:background_element="#0000cc" ohos:normal_text_size="16fp" ohos:selected_text_size="25fp" ohos:normal_text_color="#ffffff" ohos:bottom_line_element="#999999" ohos:top_line_element="#999999" ohos:wheel_mode_enabled="true" /> <Picker ohos:id="$+id:picker2" ohos:height="match_content" ohos:width="0vp" ohos:weight="1" ohos:layout_alignment="horizontal_center" ohos:background_element="#0066cc" ohos:normal_text_size="16fp"  ohos:selected_text_size="25fp" ohos:normal_text_color="#ffffff" ohos:selected_text_color="#FF3030" ohos:wheel_mode_enabled="true" /> <Picker ohos:id="$+id:picker3" ohos:height="match_content" ohos:width="0vp" ohos:weight="1" ohos:layout_alignment="horizontal_center" ohos:background_element="#00cccc" ohos:normal_text_size="16fp"  ohos:selected_text_size="25fp" ohos:normal_text_color="#7FFF00" ohos:selected_text_color="#000000" ohos:wheel_mode_enabled="true" /> </DirectionalLayout> </DirectionalLayout>Copy the code

1. Add four selectors to the layout. The first one defaults to a number between 100 and 120. 2, the second selector sets the week and can set the underline 3 above and below, the third selector sets the color 4 of the selected option, and the fourth selector sets the color of the unselected option

Code logic:

package com.example.picker.slice; import com.example.picker.ResourceTable; import ohos.aafwk.ability.AbilitySlice; import ohos.aafwk.content.Intent; import ohos.agp.components.Picker; import java.util.ArrayList; import java.util.List; public class MainAbilitySlice extends AbilitySlice { @Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); Picker picker1 = (Picker)findComponentById(ResourceTable.Id_picker1); Picker1. SetDisplayedData (new String [] {" Monday ", "Tuesday", "on Wednesday", "Thursday", "Friday", "Saturday", "Sunday"}); Picker picker2 = (Picker)findComponentById(ResourceTable.Id_picker2); List<String> shiList =new ArrayList<String>(); for(int i=1; i<=12; I++) {shiList. Add the (I + ""); } String [] shi = shiList.toArray( new String[]{}); picker2.setMaxValue(12); picker2.setDisplayedData(shi); Picker picker3 = (Picker)findComponentById(ResourceTable.Id_picker3); List<String> fenList =new ArrayList<String>(); for(int i=0; i<=59; I++) {fenList. Add the (I + ""); } String [] fen = fenList.toArray( new String[]{}); picker3.setMaxValue(60); picker3.setDisplayedData(fen); } @Override public void onActive() { super.onActive(); } @Override public void onForeground(Intent intent) { super.onForeground(intent); }}Copy the code

SetDisplayedData property. 2. Picker3.setmaxvalue (60). Property sets the content size of the selector’s data.

Old rules code can not be less, otherwise small partners should say I stingy. Source: gitee.com/codegrowth/…

Pay attention to the public number [programmer chat programming], the background reply “Hongmeng”, you can get thousands of hongmeng open source components.

Original is not easy, useful attention. I’ll give you a triple if I help you. Thanks for your support.

Feel good friends, remember to help me like and attention yo, pen xin pen xin ~**

Author: code worker

Have a question please leave a message or private message, you can search wechat: programmer chat programming, pay attention to the public number to get more free learning materials.

​