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"/> </DirectionalLayout>Copy the codeOhos :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 codeInitialize 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 code1. 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 Optional<PixelMap> 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) { Optional<PixelMap> optional = getPixelMap(context, resId); return optional.map(PixelMapElement::new).orElse(null); }}Copy the codeAfter 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 code1. 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 code1. 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 code1. 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> </DirectionalLayout>Copy the codepackage 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 codeOld 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.