Moment For Technology

HongMeng application development | radio button (RadioButton) and radio container (RadioContainer) function and usage

Posted on Aug. 7, 2022, 3:19 a.m. by Melissa Wong
Category: The front end Tag: The front end HongMeng OS

Guide language: everybody is good, I am your friend friend friend elder brother, developed for so long is not found the strong place of hongmeng, a lot of people on the net say hongmeng is Android cover shell, as a technical person must not listen to others without basis nonsense, I also advise those who say this kind of words, know more about it.

The last original article used several components to realize the login interface of Zhihu. It's also a summary and experiment with the components we've studied. Today we continue with the basics and talk about radio buttons and check boxes.

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

1, Introduction 2, used properties 3, combat 4, style Settings

Introduction to the

A RadioButton is a RadioButton that allows the user to select an option within a group. Radio buttons in the same group are mutually exclusive.

RadioButton features:

1.RadioButton is a circular single box; 2.RadioContainer is a container that can hold multiple RadioButtons. 3. There can be multiple RadioButton controls in a RadioContainer, but only one of them can be selected at the same time.

4. Each RadioButton has a default icon and text

Attributes used

The common XML attribute of RadioButton inherits from: Text as does the other components

The properties of RadioButton are shown in the following table:

Attribute is very few, use also very simple, more practice hand line oh.

In actual combat

1. Create a project

2. Basic radio button style

? 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:alignment="center" ohos:background_element="#999999" ohos:orientation="vertical" RadioButton ohos:id="$+id:rb_1" oHOs :height="match_content" ohos:width="match_content" ohos:text=" 1" ohos:text_size="20fp"/ RadioButton ohos:id="$+id:rb_2" ohos:height="match_content" ohos:width="match_content" Ohos :text=" operation 2" ohos:text_size="20fp"/ /DirectionalLayoutCopy the code

Ohos :text=" Operation 2" oHOs :text=" operation 2"

The style is set

1. Set the background properties

RadioButton rb_1 = (RadioButton) findComponentById(ResourceTable.Id_rb_1);
rb_1.setButtonElement(setSelect());
Copy the code

Initialize the component and set the background properties.

Public StateElement setSelect() {StateElement StateElement = new StateElement(); public StateElement setSelect() {StateElement StateElement = new StateElement(); stateElement.addState(new int[]{ComponentState.COMPONENT_STATE_CHECKED}, RadioButtonUtil.getPixelMapDrawable(getContext(), ResourceTable.Media_radioselect)); stateElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, RadioButtonUtil.getPixelMapDrawable(getContext(), ResourceTable.Media_radionormal)); return stateElement; }Copy the code

1. Create a StateElement object and set the property addState to add the state style

2. Image Settings are added in the tool class

package com.example.radiobutton.slice; import ohos.agp.components.element.PixelMapElement; import ohos.app.Context; import ohos.global.resource.*; import ohos.media.image.ImageSource; import ohos.media.image.PixelMap; import java.io.IOException; import java.util.Optional; public class RadioButtonUtil { private RadioButtonUtil() { } public static String getPathById(Context context, int id) { String path = ""; if (context == null) { return path; } ResourceManager manager = context.getResourceManager(); if (manager == null) { return path; } try { path = manager.getMediaPath(id); } catch (IOException | NotExistException | WrongTypeException e) { return path; } return path; } public static OptionalPixelMap getPixelMap(Context context, int id) { String path = getPathById(context, id); if (path == null || path.length() = 0) { return Optional.empty(); } RawFileEntry assetManager = context.getResourceManager().getRawFileEntry(path); ImageSource.SourceOptions options = new ImageSource.SourceOptions(); options.formatHint = "image/png"; ImageSource.DecodingOptions decodingOptions = new ImageSource.DecodingOptions(); try { Resource asset = assetManager.openRawFile(); ImageSource source = ImageSource.create(asset, options); return Optional.ofNullable(source.createPixelmap(decodingOptions)); } catch (IOException e) { return Optional.empty(); } } public static PixelMapElement getPixelMapDrawable(Context context, int resId) { OptionalPixelMap optional = getPixelMap(context, resId); return optional.map(PixelMapElement::new).orElse(null); }}Copy the code

After adding styles you can set various effects, so you get to the point where you're incredibly powerful and much easier to use than Android.

Effect:

A radio button has two states: checked and unchecked. Have you ever wondered how multiple radio buttons are put together? Let's talk about RadioContainer, which is a RadioButton container that holds multiple RadioButtons.

Introduction and properties of RadioContainer

A RadioContainer is a container for a RadioButton, and the RadioButton wrapped around it is guaranteed to have only one option.

Supported XML attributes

The common XML attribute of RadioContainer is inherited from DirectionalLayout

Actual combat and use

In the layout XML files in the directory (resources/base/layout/ability_main. XML) create RadioContainer, and create in the RadioContainer RadioButton. Layout style:

RadioContainer
        ohos:id="$+id:radio_container"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:top_margin="30vp"
        ohos:layout_alignment="horizontal_center"
        RadioButton
            ohos:id="$+id:radio_button_1"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="RadioButton 1"
            ohos:text_size="14fp"/
        RadioButton
            ohos:id="$+id:radio_button_2"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="RadioButton 2"
            ohos:text_size="14fp"/
        RadioButton
            ohos:id="$+id:radio_button_3"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="RadioButton 3"
            ohos:text_size="14fp"/
    /RadioContainer
Copy the code

1. Three radio buttons are added to the RadioContainer. 2. Only one button can be selected at the same time. 3, oHOs :orientation="horizontal" attribute sets the display style of buttons in the container, including vertical and horizontal.

Uniform style Settings

RadioContainer radioContainer = (RadioContainer) findComponentById(ResourceTable.Id_radio_container);
int count = radioContainer.getChildCount();
for (int i = 0; i  count; i++){
    ((RadioButton) radioContainer.getComponentAt(i)).setButtonElement(createStateElement());
}
Copy the code

1. Initialize the container, get the number of subclasses, and iterate over the subclasses to set the background style.

private StateElement createStateElement() {
    ShapeElement elementButtonOn = new ShapeElement();
    elementButtonOn.setRgbColor(RgbPalette.RED);
    elementButtonOn.setShape(ShapeElement.OVAL);

    ShapeElement elementButtonOff = new ShapeElement();
    elementButtonOff.setRgbColor(RgbPalette.WHITE);
    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;
}
Copy the code

1. Set the background style and create two shapeElements, one before and one after the click. 2. Set the addState color to addState

Full effect

Complete code:

? 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:alignment="center" ohos:background_element="#999999" ohos:orientation="vertical" RadioButton ohos:id="$+id:rb_1" oHOs :height="match_content" ohos:width="match_content" ohos:text=" 1" ohos:text_size="20fp"/ RadioButton ohos:id="$+id:rb_2" ohos:height="match_content" ohos:width="match_content" Ohos :text_size="20fp"/ RadioContainer oHOs :id="$+id:radio_container" ohos:height="match_content" ohos:width="match_content" ohos:top_margin="30vp" ohos:orientation="horizontal" ohos:layout_alignment="horizontal_center" RadioButton ohos:id="$+id:radio_button_1" ohos:height="40vp" ohos:width="match_content" ohos:text="RadioButton 1" ohos:text_size="14fp"/ RadioButton ohos:id="$+id:radio_button_2" ohos:height="40vp" ohos:width="match_content" ohos:text="RadioButton 2" ohos:text_size="14fp"/ RadioButton ohos:id="$+id:radio_button_3" ohos:height="40vp" ohos:width="match_content" ohos:text="RadioButton 3" ohos:text_size="14fp"/ /RadioContainer /DirectionalLayoutCopy the code

package com.example.radiobutton.slice; import com.example.radiobutton.ResourceTable; import ohos.aafwk.ability.AbilitySlice; import ohos.aafwk.content.Intent; import ohos.agp.colors.RgbPalette; import ohos.agp.components.Component; import ohos.agp.components.ComponentState; import ohos.agp.components.RadioButton; import ohos.agp.components.RadioContainer; import ohos.agp.components.element.PixelMapElement; import ohos.agp.components.element.ShapeElement; import ohos.agp.components.element.StateElement; import ohos.app.Context; import ohos.global.resource.RawFileEntry; import ohos.global.resource.Resource; import ohos.media.image.ImageSource; import ohos.media.image.PixelMap; import java.util.Optional; public class MainAbilitySlice extends AbilitySlice { private RadioButton rb_1; @Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); rb_1 = (RadioButton) findComponentById(ResourceTable.Id_rb_1); rb_1.setButtonElement(setSelect()); rb_1.setClickedListener(rb_1OnClickListener); RadioContainer radioContainer = (RadioContainer) findComponentById(ResourceTable.Id_radio_container); int count = radioContainer.getChildCount(); for (int i = 0; i  count; i++){ ((RadioButton) radioContainer.getComponentAt(i)).setButtonElement(createStateElement()); } } private StateElement createStateElement() { ShapeElement elementButtonOn = new ShapeElement(); elementButtonOn.setRgbColor(RgbPalette.RED); elementButtonOn.setShape(ShapeElement.OVAL); ShapeElement elementButtonOff = new ShapeElement(); elementButtonOff.setRgbColor(RgbPalette.WHITE); 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; Public StateElement setSelect() {StateElement StateElement = new StateElement(); public StateElement setSelect() {StateElement StateElement = new StateElement(); stateElement.addState(new int[]{ComponentState.COMPONENT_STATE_CHECKED}, RadioButtonUtil.getPixelMapDrawable(getContext(), ResourceTable.Media_radioselect)); stateElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, RadioButtonUtil.getPixelMapDrawable(getContext(), ResourceTable.Media_radionormal)); return stateElement; } private final Component.ClickedListener rb_1OnClickListener = new RadioButton.ClickedListener() { @Override public void onClick(Component component) { if (rb_1.isChecked()) { } else { } } }; @Override public void onActive() { super.onActive(); } @Override public void onForeground(Intent intent) { super.onForeground(intent); }}Copy the code

Old rules code can not be less, otherwise small partners should say I stingy. Code link: 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.

Search
About
mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.