Harmony OS Components

The article directories

• • 1, Text box
  • • 1.1. What is Text?
    • 1.2. When clicking: automatically adjust font size + dynamically increase text
    • 1.3. Horselight effect
    • 1.4 actual combat: a title bar and detailed content interface
  • 2, Button
  • • 2.1. What is a Button?
    • 2.2. Common buttons
    • 2.3 Oval button
    • 2.4 actual combat: UI interface of the dial
  • 3. TextField
  • • 3.1 what is TextField?
    • 3.2. Create text box, set baseline, set bubble
    • 3.3 actual operation: Click the login button, and the user name error will appear, and the state of TextField will be changed
    • 3.4. Common Attributes (XML and Java)
  • 4, Image
  • • 4.1. What is Image?
    • 4.2 Two ways to create an Image:
    • 4.3 Common Attributes
  • 5. TabList and Tab
  • • 5.1 What is a TabList?
    • 5.2. Common TabList properties
    • 5.3 common Tab properties
    • 5.4, actual combat: three tabs switch
  • 6. Picker
  • • 6.1 what is a Picker?
    • 6.2. Simple implementation
    • 6.3, actual combat 1: simple style
    • 6.4. Actual combat 2: More diversified
  • 7. DatePicker
  • • 7.1 What is a DatePicker?
    • 7.2. Simple implementation
    • 7.3 Actual combat Events
    • 7.4. Common Properties
    • 7.5. Actual combat style
  • 8. TimePicker
  • • 8.1. What is a TimePicker?
    • 8.2. Simple implementation
    • 8.3, actual combat: display style
    • 8.4. Common Attributes
  • 9, Switch【 Switch 】
  • • 9.1 What is Switch?
    • 9.2 Simple use
    • 9.3 Common Properties
    • 9.4 actual combat: custom Switch
  • 10, RadioButton
  • • What is a RadioButton?
    • 10.2. Simple use
    • Set the style of RadioButton
  • 11. RadioContainer [Radio button group]
  • • What is RadioContainer?
    • 11.2. Simple use
    • 11.3. Common Attributes
    • 11.4, actual combat: to achieve the effect of choice of single choice
  • 12, check the box
  • • What is a Checkbox?
    • 12.2. Simple implementation
    • 12.3. Set Checkbox
    • 12.4. Actual combat: Realize the effect of selecting multiple topics
    • 12.5. Learn more
  • 【 vertical and horizontal ProgressBar 】
  • • What is a ProgressBar?
    • 13.2. Simple use
    • 13.3. Set ProgressBar
    • 13.4. Learn more
  • 14, RoundProgressBar
  • • 14.1. What is RoundProgressBar?
    • 14.2. Simple use
    • Set the RoundProgressBar style
    • 14.4. Learn more
  • 【 prompt dialog box 】
  • • 15.1. What is ToastDialog?
    • 15.2. Simple and practical
    • 15.3 setting ToastDialog
    • 15.4. Customizing the ToastDialog Component
    • 15.5. Actual Combat: Customize adding multiple views
    • 15.6, more
  • 16. ScrollView
  • • What is a ScrollView?
    • 16.2. Simple and practical
    • 16.3. Set the ScrollView
    • 16.4. Learn more
  • 17, ListContainer
  • • 17.1. What is ListContainer?
    • 17.2. Simple use
    • 17.3. Common Interfaces of ListContainer
    • 17.4. Set the ListContainer style
    • 17.5. Optimize ListContainer performance
    • 17.6, more
  • 18, PageSliderIndicator
  • • 18.1 What is the PageSliderIndicator?
    • 18.2. Simple use
    • 18.3. Common Methods
    • 18.4, more

1, Text box

1.1. What is Text?

1.2. When clicking: automatically adjust font size + dynamically increase text

MainAbilitySlice.java

Text text = (Text) findComponentById(ResourceTable.Id_text);
// Set automatic adjustment rules
text.setAutoFontSizeRule(30.100.1);
// Add one "T" at a time
text.setClickedListener(new Component.ClickedListener() {
    @Override
    public void onClick(Component component) {
        text.setText(text.getText() + "T"); }});Copy the code

ability_main.xml

<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_content">
    <Text
        ohos:id="$+id:text"
        ohos:width="match_parent"
        ohos:height="match_content"
        ohos:text="TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText"
        ohos:text_size="50fp"
        ohos:text_color="#0000FF"
        ohos:italic="true"
        ohos:text_alignment="vertical_center"
        ohos:text_weight="700"
        ohos:text_font="serif"
        ohos:background_element="$graphic:background_text"/>
</DependentLayout>
Copy the code

1.3. Horselight effect

        Text text = (Text) findComponentById(ResourceTable.Id_text);
// Run the lantern effect
        text.setTruncationMode(Text.TruncationMode.AUTO_SCROLLING);
// Always scroll automatically
        text.setAutoScrollingCount(Text.AUTO_SCROLLING_FOREVER);
// Start the running lamp effect
        text.startAutoScrolling();
Copy the code

      
<DependentLayoHut
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_content"
    ohos:background_element="$graphic:color_light_gray_element">
    <Text
        ohos:id="$+id:text"
        ohos:width="75vp"
        ohos:height="match_content"
        ohos:text="TextText"
        ohos:text_size="28fp"
        ohos:text_color="#0000FF"
        ohos:italic="true"
        ohos:text_alignment="vertical_center"
        ohos:text_weight="700"
        ohos:text_font="serif"
        ohos:background_element="$graphic:background_text"/>
</DependentLayoHut>
Copy the code

1.4 actual combat: a title bar and detailed content interface

ability_main.xml

      
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_content"
    ohos:background_element="$graphic:color_light_gray_element">
    <Text
        ohos:id="$+id:text1"
        ohos:width="match_parent"
        ohos:height="match_content"
        ohos:text_size="25fp"
        ohos:top_margin="15vp"
        ohos:left_margin="15vp"
        ohos:right_margin="15vp"
        ohos:background_element="$graphic:background_text"
        ohos:text="Title"
        ohos:text_weight="1000"
        ohos:text_alignment="horizontal_center"/>
    <Text
        ohos:id="$+id:text2"
        ohos:width="match_parent"
        ohos:height="120vp"
        ohos:text_size="25fp"
        ohos:background_element="$graphic:background_text"
        ohos:text="Content"
        ohos:top_margin="15vp"
        ohos:left_margin="15vp"
        ohos:right_margin="15vp"
        ohos:bottom_margin="15vp"
        ohos:text_alignment="center"
        ohos:below="$id:text1"
        ohos:text_font="serif"/>
    <Button
        ohos:id="$+id:button1"
        ohos:width="75vp"
        ohos:height="match_content"
        ohos:text_size="15fp"
        ohos:background_element="$graphic:background_text"
        ohos:text="Previous"
        ohos:right_margin="15vp"
        ohos:bottom_margin="15vp"
        ohos:left_padding="5vp"
        ohos:right_padding="5vp"
        ohos:below="$id:text2"
        ohos:left_of="$id:button2"
        ohos:text_font="serif"/>
    <Button
        ohos:id="$+id:button2"
        ohos:width="75vp"
        ohos:height="match_content"
        ohos:text_size="15fp"
        ohos:background_element="$graphic:background_text"
        ohos:text="Next"
        ohos:right_margin="15vp"
        ohos:bottom_margin="15vp"
        ohos:left_padding="5vp"
        ohos:right_padding="5vp"
        ohos:align_parent_end="true"
        ohos:below="$id:text2"
        ohos:text_font="serif"/>
</DependentLayout>
Copy the code

The following two are custom style files that need to be placed in the Resources /base/graphic directory, creating background_text. XML and color_light_gray_element.xml files

Background_text. XML:

      
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <corners
        ohos:radius="20"/>
    <solid
        ohos:color="# 878787"/>
</shape>
Copy the code

Color_light_gray_element. XML:

      
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <solid
        ohos:color="#EDEDED"/>
</shape>
Copy the code

Text More details

2, Button

2.1. What is a Button?

2.2. Common buttons

<Button
    ohos:width="150vp"
    ohos:height="50vp"
    ohos:text_size="27fp"
    ohos:text="button"
    ohos:background_element="$graphic:color_blue_element"
    ohos:left_margin="15vp"
    ohos:bottom_margin="15vp"
    ohos:right_padding="8vp"
    ohos:left_padding="8vp"
/>
Copy the code

color_blue_element.xml

      
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <solid
        ohos:color="#007CFD"/>
</shape>
Copy the code

2.3 Oval button

<Button
    ohos:width="150vp"
    ohos:height="50vp"
    ohos:text_size="27fp"
    ohos:text="button"
    ohos:background_element="$graphic:oval_button_element"
    ohos:left_margin="15vp"
    ohos:bottom_margin="15vp"
    ohos:right_padding="8vp"
    ohos:left_padding="8vp"
    ohos:element_left="$media:ic_btn_reload"
/>
Copy the code

      
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="oval">
    <solid
        ohos:color="#007CFD"/>
</shape>
Copy the code

2.4 actual combat: UI interface of the dial

      
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_parent"
    ohos:background_element="$graphic:color_light_gray_element"
    ohos:orientation="vertical">
    <Text
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text_size="20fp"
        ohos:text="0123456789"
        ohos:background_element="$graphic:green_text_element"
        ohos:text_alignment="center"
        ohos:layout_alignment="horizontal_center"
    />
    <DirectionalLayout
        ohos:width="match_parent"
        ohos:height="match_content"
        ohos:alignment="horizontal_center"
        ohos:orientation="horizontal"
        ohos:top_margin="5vp"
        ohos:bottom_margin="5vp">
        <Button
            ohos:width="40vp"
            ohos:height="40vp"
            ohos:text_size="15fp"
            ohos:background_element="$graphic:green_circle_button_element"
            ohos:text="1"
            ohos:text_alignment="center"
        />
        <Button
            ohos:width="40vp"
            ohos:height="40vp"
            ohos:text_size="15fp"
            ohos:background_element="$graphic:green_circle_button_element"
            ohos:text="2"
            ohos:left_margin="5vp"
            ohos:right_margin="5vp"
            ohos:text_alignment="center"
        />
        <Button
            ohos:width="40vp"
            ohos:height="40vp"
            ohos:text_size="15fp"
            ohos:background_element="$graphic:green_circle_button_element"
            ohos:text="3"
            ohos:text_alignment="center"
        />
    </DirectionalLayout>
    <DirectionalLayout
        ohos:width="match_parent"
        ohos:height="match_content"
        ohos:alignment="horizontal_center"
        ohos:orientation="horizontal"
        ohos:bottom_margin="5vp">
        <Button
            ohos:width="40vp"
            ohos:height="40vp"
            ohos:text_size="15fp"
            ohos:background_element="$graphic:green_circle_button_element"
            ohos:text="4"
            ohos:text_alignment="center"
        />
        <Button
            ohos:width="40vp"
            ohos:height="40vp"
            ohos:text_size="15fp"
            ohos:left_margin="5vp"
            ohos:right_margin="5vp"
            ohos:background_element="$graphic:green_circle_button_element"
            ohos:text="5"
            ohos:text_alignment="center"
        />
        <Button
            ohos:width="40vp"
            ohos:height="40vp"
            ohos:text_size="15fp"
            ohos:background_element="$graphic:green_circle_button_element"
            ohos:text="6"
            ohos:text_alignment="center"
        />
    </DirectionalLayout>
    <DirectionalLayout
        ohos:width="match_parent"
        ohos:height="match_content"
        ohos:alignment="horizontal_center"
        ohos:orientation="horizontal"
        ohos:bottom_margin="5vp">
        <Button
            ohos:width="40vp"
            ohos:height="40vp"
            ohos:text_size="15fp"
            ohos:background_element="$graphic:green_circle_button_element"
            ohos:text="Seven"
            ohos:text_alignment="center"
        />
        <Button
            ohos:width="40vp"
            ohos:height="40vp"
            ohos:text_size="15fp"
            ohos:left_margin="5vp"
            ohos:right_margin="5vp"
            ohos:background_element="$graphic:green_circle_button_element"
            ohos:text="8"
            ohos:text_alignment="center"
        />
        <Button
            ohos:width="40vp"
            ohos:height="40vp"
            ohos:text_size="15fp"
            ohos:background_element="$graphic:green_circle_button_element"
            ohos:text="9"
            ohos:text_alignment="center"
        />
    </DirectionalLayout>
    <DirectionalLayout
        ohos:width="match_parent"
        ohos:height="match_content"
        ohos:alignment="horizontal_center"
        ohos:orientation="horizontal"
        ohos:bottom_margin="5vp">
        <Button
            ohos:width="40vp"
            ohos:height="40vp"
            ohos:text_size="15fp"
            ohos:background_element="$graphic:green_circle_button_element"
            ohos:text="*"
            ohos:text_alignment="center"
        />
        <Button
            ohos:width="40vp"
            ohos:height="40vp"
            ohos:text_size="15fp"
            ohos:left_margin="5vp"
            ohos:right_margin="5vp"
            ohos:background_element="$graphic:green_circle_button_element"
            ohos:text="0"
            ohos:text_alignment="center"
        />
        <Button
            ohos:width="40vp"
            ohos:height="40vp"
            ohos:text_size="15fp"
            ohos:background_element="$graphic:green_circle_button_element"
            ohos:text="#"
            ohos:text_alignment="center"
        />
    </DirectionalLayout>
    <Button
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text_size="15fp"
        ohos:text="CALL"
        ohos:background_element="$graphic:green_capsule_button_element"
        ohos:bottom_margin="5vp"
        ohos:text_alignment="center"
        ohos:layout_alignment="horizontal_center"
        ohos:left_padding="10vp"
        ohos:right_padding="10vp"
        ohos:top_padding="2vp"
        ohos:bottom_padding="2vp"
    />
</DirectionalLayout>
Copy the code

Color_light_gray_element. XML:

      
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <solid
        ohos:color="#EDEDED"/>
</shape>
Copy the code

      
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <corners
        ohos:radius="20"/>
    <stroke
        ohos:width="2"
        ohos:color="#006E00"/>
    <solid
        ohos:color="#EDEDED"/>
</shape>
Copy the code

      
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="oval">
    <stroke
        ohos:width="5"
        ohos:color="#006E00"/>
    <solid
        ohos:color="#EDEDED"/>
</shape>
Copy the code

      
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <corners
        ohos:radius="100"/>
    <solid
        ohos:color="#006E00"/>
</shape>
Copy the code

Button more details

3. TextField

3.1 what is TextField?

3.2. Create text box, set baseline, set bubble

ability_main.xml

      
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_parent"
    ohos:orientation="vertical">
    <TextField
    ohos:id="$+id:text_field"
    ohos:height="40vp"
    ohos:width="200vp"
    ohos:background_element="$graphic:background_text_field"
    ohos:left_padding="20vp"
    ohos:hint="Enter phone number or email"
    ohos:layout_alignment="horizontal_center"
    ohos:top_margin="60fp"
    ohos:element_cursor_bubble="$graphic:ele_cursor_bubble"
    ohos:basement="# 000099"
    ohos:text_alignment="vertical_center"/>
</DirectionalLayout>
Copy the code

background_text_field.xml

      
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="40"/>
    <solid
        ohos:color="#FFFFFF"/>
</shape>
Copy the code

ele_cursor_bubble.xml

      
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="40"/>
    <solid
        ohos:color="#6699FF"/>
    <stroke
        ohos:color="#0066FF"
        ohos:width="10"/>
</shape>
Copy the code

3.3 actual operation: Click the login button, and the user name error will appear, and the state of TextField will be changed

 		
 			// When you click Login, change the style of the corresponding component
        Button button = (Button) findComponentById(ResourceTable.Id_ensure_button);
        button.setClickedListener((component -> {
        
            Text text = (Text) findComponentById(ResourceTable.Id_error_tip_text);
            // Display the error message Text
            text.setVisibility(Component.VISIBLE);

            TextField textField = (TextField) findComponentById(ResourceTable.Id_name_textField);
            // Display the style of TextField in error state
            ShapeElement errorElement = new ShapeElement(this, ResourceTable.Graphic_background_text_field_error);
            textField.setBackground(errorElement);

            // TextField loses focus
            textField.clearFocus();
        }));
            
Copy the code

      
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_parent"
    ohos:background_element="#FF000000"
    ohos:orientation="vertical">

    <StackLayout
        ohos:top_margin="60vp"
        ohos:width="match_parent"
        ohos:height="match_content"
        ohos:layout_alignment="center">
        <TextField
            ohos:id="$+id:name_textField"
            ohos:width="match_parent"
            ohos:height="match_content"
            ohos:multiple_lines="false"
            ohos:left_padding="24vp"
            ohos:right_padding="24vp"
            ohos:top_padding="8vp"
            ohos:bottom_padding="8vp"
            ohos:min_height="44vp"
            ohos:text_size="18fp"
            ohos:layout_alignment="center"
            ohos:text_alignment="vertical_center"
            ohos:background_element="$graphic:background_text_field"
            ohos:hint="Enter phone number or email" />

        <Text
            ohos:visibility="hide"
            ohos:id="$+id:error_tip_text"
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:top_padding="8vp"
            ohos:bottom_padding="8vp"
            ohos:right_margin="20vp"
            ohos:text="Incorrect account or password"
            ohos:text_size="18fp"
            ohos:text_color="red"
            ohos:layout_alignment="right"/>
    </StackLayout>

    <TextField
        ohos:top_margin="40vp"
        ohos:id="$+id:password_text_field"
        ohos:width="match_parent"
        ohos:height="match_content"
        ohos:multiple_lines="false"
        ohos:left_padding="24vp"
        ohos:right_padding="24vp"
        ohos:top_padding="8vp"
        ohos:bottom_padding="8vp"
        ohos:min_height="44vp"
        ohos:text_size="18fp"
        ohos:layout_alignment="center"
        ohos:text_alignment="vertical_center"
        ohos:background_element="$graphic:background_text_field"
        ohos:hint="Enter password" />

    <Button
        ohos:top_margin="40vp"
        ohos:id="$+id:ensure_button"
        ohos:width="120vp"
        ohos:height="35vp"
        ohos:background_element="$graphic:background_btn"
        ohos:text="Log in"
        ohos:text_size="20fp"
        ohos:layout_alignment="horizontal_center"/>

</DirectionalLayout>
Copy the code

      
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="40"/>
    <solid
        ohos:color="white"/>
    <stroke
        ohos:color="black"
        ohos:width="6"/>
</shape>
Copy the code

      
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="35"/>
    <solid
        ohos:color="white"/>
</shape>
Copy the code

3.4. Common Attributes (XML and Java)

XML attributes

Element_cursor_bubble multiple_lines: Set baseline by basementCopy the code

java

TextField textField = (TextField) findComponentById(ResourceTable.Id_text_field);

// Get the content of the input box
String content = textField.getText();

// Set TextField to unavailable
textField.setEnabled(false);

// Respond to focus changes
textField.setFocusChangedListener((component, isFocused) -> {
    
    if (isFocused) { 
        // Get the focus. }else { 
        // Lose focus. }});Copy the code

TextField for more details

4, Image

4.1. What is Image?

4.2 Two ways to create an Image:

(1) Prepare the work by putting the picture in resources/media/

(2) Method 1: Create Image in XML

   <Image
        ohos:id="$+id:image"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:layout_alignment="center"
        ohos:image_src="$media:haixing"/>
Copy the code

(3) Method 2: Create Image in Java code

// Create the Image object
Image image = new Image(getContext());
// Set image (parameter: resource path)
image.setPixelMap(ResourceTable.Media_plant);
Copy the code

4.3 Common Attributes

ohos:image_src="$media:plant"		
Copy the code

Ohos: scale_x = "0.5" ohos: scale_y = "0.5"Copy the code

ohos:scale_mode="zoom_center"
Copy the code

ohos:clip_alignment="left"
Copy the code

5. TabList and Tab

5.1 What is a TabList?

5.2. Common TabList properties

(1) Set the font color and indicator color of the default state and selected state

<TabList
    .
    ohos:normal_text_color="# 999999"
    ohos:selected_text_color="#FFFFFF"
    ohos:selected_tab_indicator_color="#FFFFFF"
    ohos:selected_tab_indicator_height="2vp"/>
Copy the code

(2) Set the Tab layout

tabList.setTabLength(140 * 3); // Set the width of Tab
tabList.setTabMargin(24 * 3); // Set the spacing between two tabs
Copy the code

(3) Set the fixed mode to false by default. In this mode, the total width of the TabList is the sum of the widths of each Tab. If the width of the TabList is fixed, it can be displayed by sliding the TabList when it is out of the visible area. If set to true, the total width of the TabList will be the same as the visible area, and the width of each Tab will be equally allocated according to the width of the TabList. This mode works with fewer tabs.

tabList.setFixedMode(true);
Copy the code

tabList.setFixedMode(false);
Copy the code

(4) Add a Tab in a location

TabList.Tab tab = tabList.new Tab(getContext());
tab.setText("News");
tab.setMinWidth(64);
tab.setPadding(12.0.12.0);
tabList.addTab(tab, 1); // 1 indicates the position
Copy the code

(5) Responding to changes in focus

tabList.addTabSelectedListener(new TabList.TabSelectedListener() {
    @Override
    public void onSelected(TabList.Tab tab) {
        // Callback when a Tab changes from unselected to selected. }@Override
    public void onUnselected(TabList.Tab tab) {
        // Callback when a Tab changes from selected to unselected. }@Override
    public void onReselected(TabList.Tab tab) {
        // When a Tab is selected and clicked again. }});Copy the code

5.3 common Tab properties

tab.setMinWidth(64);
tab.setPadding(12.0.12.0);
Copy the code

tab.select();
Copy the code

tab.getPosition();
Copy the code

5.4, actual combat: three tabs switch

MainAbilitySlice.java

        TabList tabList = (TabList) findComponentById(ResourceTable.Id_tab_list);
        tabList.setTabLength(140*3);    // Set the width of Tab
        tabList.setTabMargin(24*3);     // Set the spacing between two tabs

        // Add a label
        TabList.Tab tab1 = tabList.new Tab(getContext());
        tab1.setText("Image");
        tabList.addTab(tab1);

        TabList.Tab tab2 = tabList.new Tab(getContext());
        tab2.setText("Video");
        tabList.addTab(tab2);

        TabList.Tab tab3= tabList.new Tab(getContext());
        tab3.setText("Audio");
        tabList.addTab(tab3);
     
        tabList.setFixedMode(true);		// Set fixed mode
Copy the code

ability_main.xml

      
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="black"
    ohos:orientation="vertical">

    <TabList
        ohos:id="$+id:tab_list"
        ohos:top_margin="40vp"
        ohos:tab_margin="24vp"
        ohos:tab_length="140vp"
        ohos:text_size="20fp"
        ohos:height="36vp"
        ohos:width="match_parent"
        ohos:layout_alignment="center"
        ohos:orientation="horizontal"
        ohos:text_alignment="center"
        ohos:normal_text_color="# 999999"
        ohos:selected_text_color="#FFFFFF"
        ohos:selected_tab_indicator_color="#FFFFFF"
        ohos:selected_tab_indicator_height="2vp"/>

</DirectionalLayout>
Copy the code

TabList and Tab for more details

6. Picker

6.1 what is a Picker?

6.2. Simple implementation

• Create the Picker in the 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="16fp"
    ohos:selected_text_size="16fp"/>
Copy the code

• Set the Picker 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

6.3, actual combat 1: simple style

picker.setValueChangedListener((picker1, oldVal, newVal) -> {
    // oldVal: last selected value; NewVal: The most recently selected value
});
Copy the code

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

picker.setDisplayedData(new String[]{"Mon"."Tue"."Wed"."Thu"."Fri"."Sat"."Sun"});
Copy the code

6.4. Actual combat 2: More diversified

(1) Set the text style

      
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="black"
    ohos:orientation="vertical">

    <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="16fp"
        ohos:normal_text_color="#FFA500"
        ohos:selected_text_size="16fp"
        ohos:selected_text_color="#00FFFF"
        />

</DirectionalLayout>
Copy the code

 Picker picker = (Picker) findComponentById(ResourceTable.Id_test_picker);
        picker.setDisplayedData(new String[]{"Mon"."Tue"."Wed"."Thu"."Fri"."Sat"."Sun"});

// Set the text style
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

(2) Sets the upper and lower borders for the selected text

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

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

(3) Set the Picker shader color

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

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

(4) Set the ratio of the selected text margin to the normal text margin in Picker

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

picker.setSelectedNormalTextMarginRatio(5.0 f);
Copy the code

(5) Set the selection wheel mode. This mode determines whether the Picker displays data in a loop.

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

picker.setWheelModeEnabled(true);
Copy the code

Picker for more details

7. DatePicker

7.1 What is a DatePicker?

7.2. Simple implementation

    <DatePicker
        ohos:id="$+id:date_pick"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:text_size="20vp"
        ohos:background_element="#FF98C6F1">
    </DatePicker>
Copy the code

7.3 Actual combat Events

<Text
    ohos:id="$+id:text_date"
    ohos:height="match_content"
    ohos:width="match_parent"
    ohos:hint="date"
    ohos:margin="8vp"
    ohos:padding="4vp"
    ohos:text_size="14fp">
</Text>
Copy the code

DatePicker datePicker = (DatePicker) findComponentById(ResourceTable.Id_date_pick);
Text selectedDate = (Text) findComponentById(ResourceTable.Id_text_date);
datePicker.setValueChangedListener(
        new DatePicker.ValueChangedListener() {
            @Override		// The parameters are in order: instance, year, month and day
            public void onValueChanged(DatePicker datePicker, int year, int monthOfYear, int dayOfMonth) {
                selectedDate.setText(String.format("%02d/%02d/%4d", dayOfMonth, monthOfYear, year)); }});Copy the code

DatePicker datePicker = (DatePicker) findComponentById(ResourceTable.Id_date_pick);
int day = datePicker.getDayOfMonth();
int month = datePicker.getMonth();
int year = datePicker.getYear();
Copy the code

7.4. Common Properties

(1) Set the current date

datePicker.updateDate(2021.8.8);
Copy the code

If you need to select a DatePicker date range requirements, you can set the properties min_date and max_date. The value set is the Unix timestamp corresponding to the date.

• Set minimum date

<DatePicker
    .
    ohos:min_date="1627747200">
</DatePicker>
Copy the code

datePicker.setMinDate(1627747200);
Copy the code

• Set maximum date

<DatePicker
    .
    ohos:max_date="1630339200">
</DatePicker>
Copy the code

datePicker.setMaxDate(1630339200);
Copy the code

(3) Fixed year/month/day EITHER XML or Java can be selected

<DatePicker
    .
    ohos:year_fixed="true">
</DatePicker>
Copy the code

datePicker.setYearFixed(true);
Copy the code

7.5. Actual combat style

<DatePicker
    .
    ohos:normal_text_color="#00FFFF"
    ohos:normal_text_size="20fp">
</DatePicker>
Copy the code

<DatePicker
    .
    ohos:selected_text_color="#00FFFF"
    ohos:selected_text_size="20fp">
</DatePicker>
Copy the code

datePicker.setSelectedTextSize(40);
datePicker.setSelectedTextColor(new Color(Color.getIntColor("#FFA500")));
Copy the code

<DatePicker
    .
    ohos:operated_text_color="#00FFFF">
</DatePicker>
Copy the code

datePicker.setOperatedTextColor(new Color(Color.getIntColor("#00FFFF")));
Copy the code

<DatePicker
    .
    ohos:selected_normal_text_margin_ratio="10">
</DatePicker>
Copy the code

datePicker.setSelectedNormalTextMarginRatio(10.0 f)
Copy the code

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

datePicker.setWheelModeEnabled(true);
Copy the code

<DatePicker
    .
    ohos:top_line_element="#9370DB"
    ohos:bottom_line_element="#9370DB">
</DatePicker>
Copy the code

ShapeElement shape = new ShapeElement();
shape.setShape(ShapeElement.RECTANGLE);
shape.setRgbColor(RgbColor.fromArgbInt(0xFF9370DB));
datePicker.setDisplayedLinesElements(shape,shape);
Copy the code

<DatePicker
    .
    ohos:shader_color="gray">
</DatePicker>
Copy the code

datePicker.setShaderColor(new Color(Color.getIntColor("#00CED1")));
Copy the code

8. TimePicker

8.1. What is a TimePicker?

8.2. Simple implementation

    <TimePicker
        ohos:id="$+id:time_picker"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:normal_text_size="18fp"
        ohos:selected_text_size="26fp"/>
Copy the code

8.3, actual combat: display style

<TimePicker
    .
    ohos:normal_text_color="#007DFF"
    ohos:normal_text_size="20fp"
/>
Copy the code

<TimePicker
    .
    ohos:selected_text_color="#007DFF"
    ohos:selected_text_size="20fp"
/>
Copy the code

<TimePicker
    .
    ohos:operated_text_color="#FF9912"
/>
Copy the code

<TimePicker
    .
    ohos:selected_normal_text_margin_ratio="10"
/>
Copy the code

<TimePicker
    .
    ohos:shader_color="#00BFFF"
/>
Copy the code

<TimePicker
    .
    ohos:bottom_line_element="#00BFFF"
/>
Copy the code

<TimePicker
    .
    ohos:am_pm_order="1"
/>
Copy the code

8.4. Common Attributes

To get the time

TimePicker timePicker = (TimePicker) findComponentById(ResourceTable.Id_time_picker);
int hour = timePicker.getHour();
int minute = timePicker.getMinute();
int second = timePicker.getSecond();
Copy the code

Set a time

timePicker.setHour(19);
timePicker.setMinute(18);
timePicker.setSecond(12);
Copy the code

Response time change event

timePicker.setTimeChangedListener(new TimePicker.TimeChangedListener() {
    @Override
    public void onTimeChanged(TimePicker timePicker, int hour, int minute, int second) {... }});Copy the code

Range selection Settings and more details

9, Switch【 Switch 】

9.1 What is Switch?

9.2 Simple use

    <Switch
        ohos:id="$+id:btn_switch"
        ohos:height="60vp"
        ohos:width="100vp"
        ohos:top_margin="50fp"
        ohos:layout_alignment="center"
        ohos:text_state_off="OFF"
        ohos:text_state_on="ON"
        />
Copy the code

9.3 Common Properties

<Switch
    .
    ohos:text_state_off="OFF"
    ohos:text_state_on="ON"/>
Copy the code

Switch btnSwitch = (Switch) findComponentById(ResourceTable.Id_btn_switch);
btnSwitch.setStateOffText("OFF");
btnSwitch.setStateOnText("ON");
Copy the code

btnSwitch.setCheckedStateChangedListener(new AbsButton.CheckedStateChangedListener() {
    // The callback handles the Switch status change event
    @Override
    public void onCheckedChanged(AbsButton button, boolean isChecked) {}});Copy the code

9.4 actual combat: custom Switch

    <Switch
        ohos:id="$+id:btn_switch"
        ohos:height="60vp"
        ohos:width="100vp"
        ohos:top_margin="50fp"
        ohos:layout_alignment="center"
        ohos:text_state_off="OFF"
        ohos:text_state_on="ON"
        />
Copy the code

    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);


        // Create a shape instance and set the style
        // Turn on the style of the state slider
        ShapeElement elementThumbOn = new ShapeElement();
        elementThumbOn.setShape(ShapeElement.OVAL);
        elementThumbOn.setRgbColor(RgbColor.fromArgbInt(0xFF1E90FF));
        elementThumbOn.setCornerRadius(50);

        // Close the style of the state slider
        ShapeElement elementThumbOff = new ShapeElement();
        elementThumbOff.setShape(ShapeElement.OVAL);
        elementThumbOff.setRgbColor(RgbColor.fromArgbInt(0xFFFFFFFF));
        elementThumbOff.setCornerRadius(50);

        // Track style when enabled
        ShapeElement elementTrackOn = new ShapeElement();
        elementTrackOn.setShape(ShapeElement.RECTANGLE);
        elementTrackOn.setRgbColor(RgbColor.fromArgbInt(0xFF87CEFA));
        elementTrackOn.setCornerRadius(50);
        // Track style with off
        ShapeElement elementTrackOff = new ShapeElement();
        elementTrackOff.setShape(ShapeElement.RECTANGLE);
        elementTrackOff.setRgbColor(RgbColor.fromArgbInt(0xFF808080));
        elementTrackOff.setCornerRadius(50);
        
        Switch btnSwitch = (Switch) findComponentById(ResourceTable.Id_btn_switch);
        btnSwitch.setTrackElement(trackElementInit(elementTrackOn, elementTrackOff));
        btnSwitch.setThumbElement(thumbElementInit(elementThumbOn, elementThumbOff));
    }

	// Set the track style
    private StateElement trackElementInit(ShapeElement on, ShapeElement off){
        StateElement trackElement = new StateElement();
        trackElement.addState(new int[]{ComponentState.COMPONENT_STATE_CHECKED}, on);
        trackElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, off);
        return trackElement;
    }

	// Set the slider style
    private StateElement thumbElementInit(ShapeElement on, ShapeElement off) {
        StateElement thumbElement = new StateElement();
        thumbElement.addState(new int[]{ComponentState.COMPONENT_STATE_CHECKED}, on);
        thumbElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, off);
        return thumbElement;
    }
Copy the code

Switch Learn more

10, RadioButton

What is a RadioButton?

10.2. Simple use

    <RadioButton
        ohos:id="$+id:rb_1"
        ohos:height="40vp"
        ohos:width="match_content"
        ohos:text="A.Learning"
        ohos:margin="30fp"
        ohos:text_size="20fp"/>
Copy the code

Set the style of RadioButton

<RadioButton
    .
    ohos:text_color_on="#00BFFF"
    ohos:text_color_off="# 808080"/>
Copy the code

rBtn.setTextColorOn(new Color(Color.getIntColor("#0066FF")));
rBtn.setTextColorOff(new Color(Color.getIntColor("# 505050")));
Copy the code

11. RadioContainer [Radio button group]

What is RadioContainer?

11.2. Simple use

    <RadioContainer
        ohos:id="$+id:radio_container"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:top_margin="32vp"
        ohos:layout_alignment="horizontal_center">
        <RadioButton
            ohos:id="$+id:radio_button_1"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="A.Learning"
            ohos:text_color_on="#00BFFF"
            ohos:text_color_off="# 808080"
            ohos:text_size="20fp"/>
        <RadioButton
            ohos:id="$+id:radio_button_2"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text_color_on="#00BFFF"
            ohos:text_color_off="# 808080"
            ohos:text="A.Innovation"
            ohos:text_size="20fp"/>
        <RadioButton
            ohos:id="$+id:radio_button_3"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text_color_on="#00BFFF"
            ohos:text_color_off="# 808080"
            ohos:text="A.Benefit"
            ohos:text_size="20fp"/>
        <RadioButton
            ohos:id="$+id:radio_button_4"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="A.Unity"
            ohos:text_color_on="#00BFFF"
            ohos:text_color_off="# 808080"
            ohos:text_size="20fp"/>
    </RadioContainer>
Copy the code

11.3. Common Attributes

RadioContainer container = (RadioContainer) findComponentById(ResourceTable.Id_radio_container);
container.setMarkChangedListener(new RadioContainer.CheckedStateChangedListener() {
    @Override
    public void onCheckedChanged(RadioContainer radioContainer, int index) {
    // You can refer to the following scenario instance code, and implement it yourself. }});Copy the code

container.mark(0);
Copy the code

container.cancelMarks();
Copy the code

<RadioContainer
    .
    ohos:orientation="horizontal">.</RadioContainer>
Copy the code

container.setOrientation(Component.HORIZONTAL);
Copy the code

11.4, actual combat: to achieve the effect of choice of single choice

        RadioContainer radioContainer = (RadioContainer) findComponentById(ResourceTable.Id_radio_container);
        int count = radioContainer.getChildCount();
        // Set the background for each RadioButton
        for (int i = 0; i < count; i++){
            ((RadioButton) radioContainer.getComponentAt(i)).setButtonElement(createStateElement());
        }

        Text answer = (Text) findComponentById(ResourceTable.Id_text_checked);
        radioContainer.setMarkChangedListener((radioContainer1, index) -> {
            Parameter 1: format, parameter 2: ASCLL code value + coordinate = selected value
            answer.setText(String.format("[%c]", (char) ('A'+index)));
        });
Copy the code

      
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="horizontal_center"
    ohos:orientation="vertical"
    ohos:left_padding="32vp">
    <Text
        ohos:height="match_content"
        ohos:width="300vp"
        ohos:top_margin="32vp"
        ohos:text="Question:Which of the following options belong to fruit?"
        ohos:text_size="20fp"
        ohos:layout_alignment="left"
        ohos:multiple_lines="true"/>
    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:orientation="horizontal"
        ohos:top_margin="8vp">
        <Text
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text="Your Answer:"
            ohos:text_size="20fp"/>
        <Text
            ohos:id="$+id:text_checked"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text_size="20fp"
            ohos:left_margin="18vp"
            ohos:text="[]"
            ohos:text_color="#FF3333"/>
    </DirectionalLayout>
    <RadioContainer
        ohos:id="$+id:radio_container"
        ohos:height="match_content"
        ohos:width="200vp"
        ohos:layout_alignment="left"
        ohos:orientation="vertical"
        ohos:top_margin="16vp"
        ohos:left_margin="4vp">
        <RadioButton
            ohos:id="$+id:radio_button_1"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="A.Apple"
            ohos:text_size="20fp"
            ohos:text_color_on="#FF3333"/>
        <RadioButton
            ohos:id="$+id:radio_button_2"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="B.Potato"
            ohos:text_size="20fp"
            ohos:text_color_on="#FF3333"/>
        <RadioButton
            ohos:id="$+id:radio_button_3"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="C.Pumpkin"
            ohos:text_size="20fp"
            ohos:text_color_on="#FF3333"/>
        <RadioButton
            ohos:id="$+id:radio_button_4"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="D.Vegetables"
            ohos:text_size="20fp"
            ohos:text_color_on="#FF3333"/>
    </RadioContainer>
</DirectionalLayout>
Copy the code

To learn more

12, check the box

What is a Checkbox?

12.2. Simple implementation

<Checkbox
    ohos:id="$+id:check_box"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:text="This is a checkbox"
    ohos:text_size="20fp" />
Copy the code

12.3. Set Checkbox

<Checkbox
    .
    ohos:check_element="$graphic:checkbox_check_element" />
Copy the code

      
<state-container xmlns:ohos="http://schemas.huawei.com/res/ohos">
    <item ohos:state="component_state_checked" ohos:element="$graphic:background_checkbox_checked"/>
    <item ohos:state="component_state_empty" ohos:element="$graphic:background_checkbox_empty"/>
</state-container>
Copy the code

      
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <solid
        ohos:color="#00BFC9"/>
</shape>
Copy the code

      
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <solid
        ohos:color="# 000000"/>
</shape>
Copy the code

<Checkbox
    .
    ohos:text_color_on="#00AAEE"
    ohos:text_color_off="# 000000" />
Copy the code

checkbox.setChecked(true);
Copy the code

checkbox.toggle();
Copy the code

// state indicates whether it is selected
checkbox.setCheckedStateChangedListener((component, state) -> {
    // State change logic. });Copy the code

12.4. Actual combat: Realize the effect of selecting multiple topics

public class MainAbilitySlice extends AbilitySlice {
    // Save the selected result
    private Set<String> selectedSet = new HashSet<>();

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        initCheckbox();
    }

    // Initialize the Checkbox
    private void initCheckbox(a) {
        Checkbox checkbox1 = (Checkbox) findComponentById(ResourceTable.Id_check_box_1);
        checkbox1.setButtonElement(elementButtonInit());
        checkbox1.setCheckedStateChangedListener((component, state) -> {
            if (state) {
                selectedSet.add("A");
            } else {
                selectedSet.remove("A");
            }
            showAnswer();
        });
        Checkbox checkbox2 = (Checkbox) findComponentById(ResourceTable.Id_check_box_2);
        checkbox2.setButtonElement(elementButtonInit());
        checkbox2.setCheckedStateChangedListener((component, state) -> {
            if (state) {
                selectedSet.add("B");
            } else {
                selectedSet.remove("B");
            }
            showAnswer();
        });
        Checkbox checkbox3 = (Checkbox) findComponentById(ResourceTable.Id_check_box_3);
        checkbox3.setButtonElement(elementButtonInit());
        checkbox3.setCheckedStateChangedListener((component, state) -> {
            if (state) {
                selectedSet.add("C");
            } else {
                selectedSet.remove("C");
            }
            showAnswer();
        });
        Checkbox checkbox4 = (Checkbox) findComponentById(ResourceTable.Id_check_box_4);
        checkbox4.setButtonElement(elementButtonInit());
        checkbox4.setCheckedStateChangedListener((component, state) -> {
            if (state) {
                selectedSet.add("D");
            } else {
                selectedSet.remove("D");
            }
            showAnswer();
        });
    }

    // Set the Checkbox background
    private StateElement elementButtonInit(a) {
        ShapeElement elementButtonOn = new ShapeElement();
        elementButtonOn.setRgbColor(RgbPalette.RED);
        elementButtonOn.setShape(ShapeElement.OVAL);

        ShapeElement elementButtonOff = new ShapeElement();
        elementButtonOff.setRgbColor(RgbPalette.BLACK);
        elementButtonOff.setShape(ShapeElement.OVAL);

        StateElement checkElement = new StateElement();
        checkElement.addState(new int[]{ComponentState.COMPONENT_STATE_CHECKED}, elementButtonOn);
        checkElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, elementButtonOff);

        return checkElement;
    }

    // Display the result
    private void showAnswer(a) { Text answerText = (Text) findComponentById(ResourceTable.Id_text_answer); String answer = selectedSet.toString(); answerText.setText(answer); }}Copy the code

      
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical"
    ohos:left_padding="40vp"
    ohos:top_padding="40vp">

    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:orientation="horizontal">

        <Text
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text_size="18fp"
            ohos:text="Which of the following are fruits?"/>

        <Text
            ohos:id="$+id:text_answer"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:left_margin="20vp"
            ohos:text_size="20fp"
            ohos:text_color="#FF3333"
            ohos:text="[]" />
    </DirectionalLayout>

    <Checkbox
        ohos:id="$+id:check_box_1"
        ohos:top_margin="40vp"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="A Apples"
        ohos:text_size="20fp"
        ohos:text_color_on="#FF3333"
        ohos:text_color_off="# 000000"/>

    <Checkbox
        ohos:id="$+id:check_box_2"
        ohos:top_margin="40vp"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="B Bananas"
        ohos:text_size="20fp"
        ohos:text_color_on="#FF3333"
        ohos:text_color_off="# 000000"/>

    <Checkbox
        ohos:id="$+id:check_box_3"
        ohos:top_margin="40vp"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="C Strawberries"
        ohos:text_size="20fp"
        ohos:text_color_on="#FF3333"
        ohos:text_color_off="# 000000" />

    <Checkbox
        ohos:id="$+id:check_box_4"
        ohos:top_margin="40vp"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="D Potatoes"
        ohos:text_size="20fp"
        ohos:text_color_on="#FF3333"
        ohos:text_color_off="black" />
</DirectionalLayout>
Copy the code

12.5. Learn more

【 vertical and horizontal ProgressBar 】

What is a ProgressBar?

13.2. Simple use

   <ProgressBar
        ohos:progress_width="10vp"
        ohos:height="60vp"
        ohos:width="200fp"
        ohos:max="100"
        ohos:min="0"
        ohos:progress="60"/>
Copy the code

13.3. Set ProgressBar

    <ProgressBar
        ohos:progress_width="10vp"
        ohos:height="150vp"
        ohos:width="200fp"
        ohos:max="100"
        ohos:orientation="vertical"
        ohos:min="0"
        ohos:progress="60"/>
Copy the code

<ProgressBar
    .
    ohos:progress="60"/>
Copy the code

progressBar.setProgressValue(60);
Copy the code

<ProgressBar
    .
    ohos:max="400"
    ohos:min="0"/>
Copy the code

progressBar.setMaxValue(400);
progressBar.setMinValue(0);
Copy the code

<ProgressBar
    ...
    ohos:progress_element="#FF9900" />
Copy the code

<ProgressBar
    .
    ohos:background_instruct_element="#FFFFFF" />
Copy the code

<ProgressBar
    .
    ohos:divider_lines_enabled="true"
    ohos:divider_lines_number="5" />
Copy the code

progressBar.enableDividerLines(true);
progressBar.setDividerLinesNumber(5);
Copy the code

progressBar.setDividerLineColor(Color.MAGENTA);
Copy the code

<ProgressBar
    .
    ohos:progress_hint_text="20%"
    ohos:progress_hint_text_color="#FFCC99" />
Copy the code

13.4. Learn more

Learn more about ProgressBar

14, RoundProgressBar

14.1. What is RoundProgressBar?

14.2. Simple use

    <RoundProgressBar
        ohos:id="$+id:round_progress_bar"
        ohos:height="200vp"
        ohos:width="200vp"
        ohos:progress_width="10vp"
        ohos:progress="20"
        ohos:progress_color="#47CC47"/>
Copy the code

Set the RoundProgressBar style

    <RoundProgressBar
        ohos:id="$+id:round_progress_bar"
        ohos:height="200vp"
        ohos:width="200vp"
        ohos:progress_width="10vp"
        ohos:start_angle="45"
        ohos:max_angle="270"
        ohos:progress="20"
        ohos:progress_hint_text="Round"
        ohos:progress_hint_text_color="#007DFF"
        ohos:progress_color="#47CC47"/>
Copy the code

14.4. Learn more

RoundProgressBar more

【 prompt dialog box 】

15.1. What is ToastDialog?

15.2. Simple and practical

 Button button = (Button) findComponentById(ResourceTable.Id_btn_dianwo);
        button.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
            // Create a ToastDialog
                new ToastDialog(getContext())
                        .setText("This is a ToastDialog") .show(); }});Copy the code

    <Button
        ohos:id="$+id:btn_dianwo"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:layout_alignment="center"
        ohos:text="点我"
        ohos:margin="40fp"
        ohos:text_size="25fp"
        ohos:background_element="#FF53C3DE"/>
Copy the code

15.3 setting ToastDialog

new ToastDialog(getContext())
    .setText("This is a ToastDialog displayed in the middle")
    .setAlignment(LayoutAlignment.CENTER)
    .show();
Copy the code

15.4. Customizing the ToastDialog Component

New: layout_toast. XML

      
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:orientation="vertical">
    <Text
        ohos:id="$+id:msg_toast"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:left_padding="16vp"
        ohos:right_padding="16vp"
        ohos:top_padding="4vp"
        ohos:bottom_padding="4vp"
        ohos:layout_alignment="center"
        ohos:text_size="16fp"
        ohos:text="This is a ToastDialog for the customized component"
        ohos:background_element="$graphic:background_toast_element"/>
</DirectionalLayout>    
Copy the code

background_toast_element.xml

      
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="30vp"/>
    <solid
        ohos:color="# 66808080"/>
</shape>
Copy the code

Button button = (Button) findComponentById(ResourceTable.Id_btn_dianwo);
        button.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
            // Customize the ToastDialog Component
                DirectionalLayout toastLayout = (DirectionalLayout) LayoutScatter.getInstance(MainAbilitySlice.this)
                        .parse(ResourceTable.Layout_layout_toast, null.false);
                new ToastDialog(getContext())
                        .setContentCustomComponent(toastLayout)
                        .setSize(DirectionalLayout.LayoutConfig.MATCH_CONTENT, DirectionalLayout.LayoutConfig.MATCH_CONTENT)
                        .setAlignment(LayoutAlignment.CENTER)
                        .show();
            }
        });
Copy the code

15.5. Actual Combat: Customize adding multiple views

      
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:orientation="horizontal">

    <Image
        ohos:width="30vp"
        ohos:height="30vp"
        ohos:scale_mode="inside"
        ohos:image_src="$media:icon"/>

    <Text
        ohos:id="$+id:msg_toast"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="$graphic:background_toast_element"
        ohos:bottom_padding="4vp"
        ohos:layout_alignment="vertical_center"
        ohos:left_padding="16vp"
        ohos:right_padding="16vp"
        ohos:text="This is a ToastDialog with An Image"
        ohos:text_size="16fp"
        ohos:top_padding="4vp"/>
</DirectionalLayout>
Copy the code

      
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="30vp"/>
    <solid
        ohos:color="# 66808080"/>
</shape>
Copy the code

        Button button = (Button) findComponentById(ResourceTable.Id_btn_dianwo);
        button.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                DirectionalLayout layout = (DirectionalLayout) LayoutScatter.getInstance(MainAbilitySlice.this)
                        .parse(ResourceTable.Layout_layout_toast_and_image, null.false);
                newToastDialog(getContext()) .setContentCustomComponent(layout) .setSize(DirectionalLayout.LayoutConfig.MATCH_CONTENT, DirectionalLayout.LayoutConfig.MATCH_CONTENT) .setAlignment(LayoutAlignment.CENTER) .show(); }});Copy the code

15.6, more

ToastDialog more

16. ScrollView

What is a ScrollView?

16.2. Simple and practical

 <ScrollView
        ohos:id="$+id:scrollview"
        ohos:height="300vp"
        ohos:width="300vp"
        ohos:background_element="#FFDEAD"
        ohos:top_margin="32vp"
        ohos:bottom_padding="16vp"
        ohos:layout_alignment="horizontal_center">
        <DirectionalLayout
            ohos:height="match_content"
            ohos:width="match_content">
            <Image
                ohos:width="300vp"
                ohos:height="match_content"
                ohos:top_margin="16vp"
                ohos:image_src="$media:Android"/>
            <Image
                ohos:width="300vp"
                ohos:height="match_content"
                ohos:top_margin="16vp"
                ohos:image_src="$media:AI"/>
            <Image
                ohos:width="300vp"
                ohos:height="match_content"
                ohos:top_margin="16vp"
                ohos:image_src="$media:AIOT"/>

            <Image
                ohos:width="300vp"
                ohos:height="match_content"
                ohos:top_margin="16vp"
                ohos:image_src="$media:HarmonyOS"/>

        </DirectionalLayout>
    </ScrollView>
Copy the code

16.3. Set the ScrollView

       ScrollView scrollView = (ScrollView) findComponentById(ResourceTable.Id_scrollview);
        Button btnScroll= (Button) findComponentById(ResourceTable.Id_btnScroll);
        // Scroll smoothly according to the number of pixels
        btnScroll.setClickedListener(component -> {
            scrollView.fluentScrollByY(300);
        });
Copy the code

      
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical"
    ohos:left_padding="40vp"
    ohos:top_padding="40vp">

    <ScrollView
        ohos:id="$+id:scrollview"
        ohos:height="300vp"
        ohos:width="300vp"
        ohos:background_element="#FFDEAD"
        ohos:top_margin="32vp"
        ohos:bottom_padding="16vp"
        ohos:layout_alignment="horizontal_center">
        <DirectionalLayout
            ohos:height="match_content"
            ohos:width="match_content">
            <Image
                ohos:width="300vp"
                ohos:height="match_content"
                ohos:top_margin="16vp"
                ohos:image_src="$media:Android"/>
            <Image
                ohos:width="300vp"
                ohos:height="match_content"
                ohos:top_margin="16vp"
                ohos:image_src="$media:AI"/>
            <Image
                ohos:width="300vp"
                ohos:height="match_content"
                ohos:top_margin="16vp"
                ohos:image_src="$media:AIOT"/>

            <Image
                ohos:width="300vp"
                ohos:height="match_content"
                ohos:top_margin="16vp"
                ohos:image_src="$media:HarmonyOS"/>

        </DirectionalLayout>
    </ScrollView>

    <Button
        ohos:id="$+id:btnScroll"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:background_element="#FFF10B0B"
        ohos:text_size="20vp"
        ohos:text_color="#FFFAF6F6"
        ohos:top_margin="15fp"
        ohos:text="Scroll By Y: 300"/>

</DirectionalLayout>
Copy the code

scrollView.fluentScrollYTo(500);
Copy the code

<ScrollView
    .
    ohos:rebound_effect="true">.</ScrollView>
Copy the code

<ScrollView
    .
    ohos:rebound_effect="true">.</ScrollView>
Copy the code

scrollView.setReboundEffect(true);
Copy the code

<ScrollView
    .
    ohos:match_viewport="true">.</ScrollView>
Copy the code

scrollView.setMatchViewportEnabled(true);
Copy the code

16.4. Learn more

ScrollView more

17, ListContainer

17.1. What is ListContainer?

17.2. Simple use

• ability_main.xml

      
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical"
    ohos:left_padding="40vp"
    ohos:top_padding="40vp">

    <ListContainer
        ohos:id="$+id:list_container"
        ohos:height="200vp"
        ohos:width="300vp"
        ohos:layout_alignment="horizontal_center"/>

</DirectionalLayout>
Copy the code

• Create an XML file (for example, item_sample.xml) in the Layout directory as a sublayout of ListContainer.

      
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_content"
    ohos:width="match_parent"
    ohos:left_margin="16vp"
    ohos:right_margin="16vp"
    ohos:orientation="vertical">
    <Text
        ohos:id="$+id:item_index"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:padding="4vp"
        ohos:text="Item0"
        ohos:text_size="20fp"
        ohos:layout_alignment="center"/>
</DirectionalLayout>
Copy the code

• Create sampleItem.java as the data wrapper class for ListContainer.

public class SampleItem {
    private String name;
    public SampleItem(String name) {
        this.name = name;
    }
    public String getName(a) {
        return name;
    }
    public void setName(String name) {
        this.name = name; }}Copy the code

• Each row of a ListContainer can contain different data, so you need to adapt different data structures so that they can all be added to the ListContainer.
  
  Create sampleItemProvider.java, which inherits from BaseItemProvider. The methods that must be overridden are:
  
  
  
  The following is a code example:

import ohos.aafwk.ability.AbilitySlice;
import ohos.agp.components.*;
import java.util.List;
public class SampleItemProvider extends BaseItemProvider {
    private List<SampleItem> list;
    private AbilitySlice slice;
    public SampleItemProvider(List<SampleItem> list, AbilitySlice slice) {
        this.list = list;
        this.slice = slice;
    }
    @Override
    public int getCount(a) {
        return list == null ? 0 : list.size();
    }
    @Override
    public Object getItem(int position) {
        if(list ! =null && position >= 0 && position < list.size()){
            return list.get(position);
        }
        return null;
    }
    @Override
    public long getItemId(int position) {
        return position;
    }
    @Override
    public Component getComponent(int position, Component convertComponent, ComponentContainer componentContainer) {
        final Component cpt;
        if (convertComponent == null) {
            cpt = LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_item_sample, null.false);
        } else { 
            cpt = convertComponent;
        }
        SampleItem sampleItem = list.get(position);
        Text text = (Text) cpt.findComponentById(ResourceTable.Id_item_index);
        text.setText(sampleItem.getName());
        returncpt; }}Copy the code

• Add the ListContainer data in your Java code and adapt its data structure

public class MainAbilitySlice extends AbilitySlice {

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        initListContainer();
    }

    // Initialize the data
    private void initListContainer(a) {
        ListContainer listContainer = (ListContainer) findComponentById(ResourceTable.Id_list_container);
        List<SampleItem> list = getData();
        SampleItemProvider sampleItemProvider = new SampleItemProvider(list, this);
        listContainer.setItemProvider(sampleItemProvider);
    }
    private ArrayList<SampleItem> getData(a) {
        ArrayList<SampleItem> list = new ArrayList<>();
        for (int i = 0; i <= 30; i++) {
            list.add(new SampleItem("Item" + i));
        }
        return list;
    }

    @Override
    public void onActive(a) {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent); }}Copy the code

17.3. Common Interfaces of ListContainer

listContainer.setItemClickedListener((container, component, position, id) -> {
    SampleItem item = (SampleItem) listContainer.getItemProvider().getItem(position);
    new ToastDialog(this)
            .setText("you clicked:" + item.getName())
            // The Toast is displayed in the middle of the screen
            .setAlignment(LayoutAlignment.CENTER)
            .show();
});
Copy the code

listContainer.setItemLongClickedListener((container, component, position, id) -> {
    SampleItem item = (SampleItem) listContainer.getItemProvider().getItem(position);
    new ToastDialog(this)
            .setText("you long clicked:" + item.getName())
            .setAlignment(LayoutAlignment.CENTER)
            .show();
     return false;
});
Copy the code

17.4. Set the ListContainer style

ListContainer style Settings related interfaces are as follows:

(1) Set the horizontal layout

<ListContainer
    .
    ohos:orientation="horizontal"/>
Copy the code

listContainer.setOrientation(Component.HORIZONTAL);
Copy the code

(2) Custom style implementation: add background color to the sublayout and ListContainer layout

• Sets the start and end offsets for ListContainer

listContainer.setContentOffSet(32.16);
Copy the code

• Add a background color to the root layout of item_sample.xml

<DirectionalLayout
    .
    ohos:background_element="#FAEBD7">.</DirectionalLayout>
Copy the code

• Add a background color to the ListContainer layout file

<ListContainer
    .
    ohos:background_element="#FFDEAD"/>
Copy the code

(3) Set the rebound effect

<ListContainer
    .
    ohos:rebound_effect="true"/>
Copy the code

listContainer.setReboundEffect(true);
Copy the code

• After the springback effect is enabled, you can call the setReboundEffectParams() method to adjust the springback effect.

listContainer.setReboundEffectParams(40.0.6 f.20);
Copy the code

(4) Set the shader color

<ListContainer
    .
    ohos:shader_color="#90EE90"/>
Copy the code

listContainer.setShaderColor(new Color(Color.getIntColor("#90EE90")));
Copy the code

17.5. Optimize ListContainer performance

17.6, more

ListContainer more

18, PageSliderIndicator

18.1 What is the PageSliderIndicator?

18.2. Simple use

🔺 here is in the previous PageSlider component on the new code for implementation, learn or source can refer to: Harmony OS – PageSlider slide page

<PageSliderIndicator
    ohos:id="$+id:indicator"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:padding="8vp"
    ohos:layout_alignment="horizontal_center"
    ohos:top_margin="16vp"
    ohos:background_element="#55FFC0CB"/>
Copy the code

        PageSliderIndicator indicator = (PageSliderIndicator)findComponentById(ResourceTable.Id_indicator);
        ShapeElement normalElement = new ShapeElement();
        normalElement.setRgbColor(RgbColor.fromArgbInt(0xADD8E6));
        normalElement.setAlpha(168);
        normalElement.setShape(ShapeElement.OVAL);
        normalElement.setBounds(0.0.32.32);
        ShapeElement selectedElement = new ShapeElement();
        selectedElement.setRgbColor(RgbColor.fromArgbInt(0x00BFFF));
        selectedElement.setAlpha(168);
        selectedElement.setShape(ShapeElement.OVAL);
        selectedElement.setBounds(0.0.48.48);
        indicator.setItemElement(normalElement, selectedElement);
        indicator.setItemOffset(60);
        indicator.setPageSlider(pageSlider);
Copy the code

18.3. Common Methods

indicator.setPageSlider(pageSlider);
Copy the code

indicator.addOnSelectionChangedListener(new PageSlider.PageChangedListener() {
            @Override
            public void onPageSliding(int i, float v, int i1) {}@Override
            public void onPageSlideStateChanged(int i) {}@Override
            public void onPageChosen(int i) {}});Copy the code

indicator.setSelected(2);
Copy the code

      
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="16px"/>
    <bounds
        ohos:top="0"
        ohos:left="0"
        ohos:right="64px"
        ohos:bottom="32px"/>
    <solid
        ohos:color="#00BFFF"/>
</shape>
Copy the code

      
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="oval">
    <bounds
        ohos:top="0"
        ohos:left="0"
        ohos:right="32px"
        ohos:bottom="32px"/>
    <solid
        ohos:color="#ADD8E6"/>
</shape>
Copy the code

    ShapeElement normalElement = new ShapeElement(this, ResourceTable.Graphic_unselected_page_bg_element);
        ShapeElement selectedElement = new ShapeElement(this, ResourceTable.Graphic_selected_page_bg_element);
        indicator.setItemElement(normalElement, selectedElement);
Copy the code

indicator.setItemOffset(60);
Copy the code

18.4, more

PageSliderIndicator more