RadioContainer

RadioContainer是RadioButton的容器，在其包裹下的RadioButton保证只有一个被选项。

支持的XML属性

RadioContainer的共有XML属性继承自：DirectionalLayout

创建RadioContainer

在layout目录下的xml文件创建RadioContainer，并在RadioContainer中创建RadioButton。

<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_size="14fp"/>    <!-- 放置多个RadioButton -->    ... </RadioContainer>

图1 RadioContainer效果

设置RadioContainer

• 设置响应RadioContainer状态改变的事件。

  RadioContainer container = (RadioContainer) findComponentById(ResourceTable.Id_radio_container);container.setMarkChangedListener(new RadioContainer.CheckedStateChangedListener() {    @Override    public void onCheckedChanged(RadioContainer radioContainer, int index) {
      }});
  

• 根据索引值设置指定RadioButton为选定状态。

  container.mark(0);
  

• 清除RadioContainer中所有RadioButton的选定状态。

  container.cancelMarks();
  

• 设置RadioButton的布局方向：orientation设置为“horizontal”，表示横向布局；orientation设置为“vertical”，表示纵向布局。默认为纵向布局。

  在xml中设置：

  <RadioContainer    ...    ohos:orientation="horizontal">    ...</RadioContainer>
  

  在Java代码中设置：

  container.setOrientation(Component.HORIZONTAL);
  

  图2 设置布局方向为横向布局效果

场景实例

使用RadioContainer实现单选题的选择效果。

图3 实现单选场景效果

• xml代码示例：

  <?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="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>
  

• Java代码示例：

  通过以下方法，定义RadioButton的背景。

      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;    }
  

  设置RadioButton的背景。

  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());}
  

  设置响应RadioContainer状态改变的事件，显示单选结果。

  Text answer = (Text) findComponentById(ResourceTable.Id_text_checked);radioContainer.setMarkChangedListener((radioContainer1, index) -> {    answer.setText(String.format("[%c]",(char)('A'+index)));});