# ToggleButtonGroup

**Repository Path**: baijuncheng-open-source/ToggleButtonGroup

## Basic Information

- **Project Name**: ToggleButtonGroup
- **Description**: 一组简易的单选和多选按钮工具
- **Primary Language**: Java
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-04-13
- **Last Updated**: 2021-09-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ToggleButtonGroup

一个切换按钮的容器，支持多个/单个选择和按钮自定义。


## Gradle

```
dependencies {
   implementation ‘com.gitee.baijuncheng-open-source:ToggleButtonGroup:1.0.1’
}
```


## SingleSelectToggleGroup

<div align="center">
  <img src="images/single.gif" height="75" />
</div>

您可以创建一组带有“SingleSelectToggleGroup”的单选择切换按钮。

```xml
<com.nex3z.togglebuttongroup.SingleSelectToggleGroup
        ohos:id="$+id:group_choices"
        ohos:width="match_parent"
        ohos:height="match_content"
        app:tbgCheckedButton="$+id:choice_a">

        <com.nex3z.togglebuttongroup.button.CircularToggle
            ohos:id="$+id:choice_a"
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:text="A"/>

        <com.nex3z.togglebuttongroup.button.CircularToggle
            ohos:id="$+id:choice_b"
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:text="B"/>

        <com.nex3z.togglebuttongroup.button.CircularToggle
            ohos:id="$+id:choice_c"
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:text="C"/>

        <com.nex3z.togglebuttongroup.button.CircularToggle
            ohos:id="$+id:choice_d"
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:text="D"/>

    </com.nex3z.togglebuttongroup.SingleSelectToggleGroup>
```


## MultiSelectToggleGroup

<div align="center">
  <img src="images/multi.gif" height="75" />
</div>

您可以使用“MultiSelectToggleGroup”创建一组多选切换按钮。

```xml
<com.nex3z.togglebuttongroup.MultiSelectToggleGroup
        ohos:id="$+id:group_weekdays"
        ohos:width="match_parent"
        ohos:height="match_content"
        app:tbgChildSpacing="auto">

        <com.nex3z.togglebuttongroup.button.CircularToggle
            ohos:id="$+id:sun"
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:text="S"/>

        <com.nex3z.togglebuttongroup.button.CircularToggle
            ohos:id="$+id:mon"
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:text="M"/>

        <com.nex3z.togglebuttongroup.button.CircularToggle
            ohos:id="$+id:tue"
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:text="T"/>

        <com.nex3z.togglebuttongroup.button.CircularToggle
            ohos:id="$+id:wed"
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:text="W"/>

        <com.nex3z.togglebuttongroup.button.CircularToggle
            ohos:id="$+id:thu"
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:text="T"/>

        <com.nex3z.togglebuttongroup.button.CircularToggle
            ohos:id="$+id:fri"
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:text="F"/>

        <com.nex3z.togglebuttongroup.button.CircularToggle
            ohos:id="$+id:sat"
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:text="S"/>

    </com.nex3z.togglebuttongroup.MultiSelectToggleGroup>

</com.nex3z.togglebuttongroup.MultiSelectToggleGroup>
```


## 流向下一行的按钮

<div align="center">
  <img src="images/tags.gif"/>
</div>

```xml
<com.nex3z.togglebuttongroup.MultiSelectToggleGroup
        ohos:id="$+id:group_dummy"
        ohos:width="match_parent"
        ohos:height="match_content"
        ohos:top_margin="16vp"
        app:tbgChildSpacing="auto"
        app:tbgFlow="true"
        app:tbgRtl="true"
        app:tbgChildSpacingForLastRow="align"
        app:tbgRowSpacing="auto">

    </com.nex3z.togglebuttongroup.MultiSelectToggleGroup>
```

当“tbgFlow”属性设置为“true”时，当当前行中没有足够的空间时，允许按钮流到下一行。将“tbgchildspace”设置为“auto”时，按钮将均匀地放置在每行中。


## Listeners

对于“SingleSelectToggleGroup”，使用“OnCheckedChangeListener”侦听选中按钮的更改。使用“getCheckedId（）`获取选中按钮的id。

```java
SingleSelectToggleGroup single = (SingleSelectToggleGroup) findComponentById(ResourceTable.Id_group_choices);
        single.setOnCheckedChangeListener((group, checkedId) -> {
            LogUtil.i("onCheckedChanged(): checkedId = " + checkedId);
        });
```

对于“MultiSelectToggleGroup”，使用“OnCheckedStateChangeListener”通知组中的任何更改。使用“getcheckedds（）`获取所有选中按钮的ID。

```java
MultiSelectToggleGroup multi = (MultiSelectToggleGroup) findComponentById(ResourceTable.Id_group_weekdays);
        multi.setOnCheckedChangeListener((group, checkedId, isChecked) -> {
            LogUtil.i("onCheckedStateChanged(): group.getCheckedIds() = " + group.getCheckedIds());
        });
```

## Custom Button

<div align="center">
  <img src="images/cards.gif"/>
</div>

您可以通过二种方式实现自定义切换按钮,

- 实现[`ToggleButton`][ToggleButton] 接口

如果选择实现 [`ToggleButton`](https://gitee.com/baijuncheng-open-source/ToggleButtonGroup/blob/master/ToggleButtonGroup/src/main/java/com/nex3z/togglebuttongroup/button/ToggleButton.java), 除了[`Checkable`](https://gitee.com/baijuncheng-open-source/ToggleButtonGroup/blob/master/ToggleButtonGroup/src/main/java/com/nex3z/togglebuttongroup/button/Checkable.java) 接口, 还需要实现一个 `setOnCheckedChangeListener()`, 该接口允许[`ToggleButtonGroup`](https://gitee.com/baijuncheng-open-source/ToggleButtonGroup/blob/master/ToggleButtonGroup/src/main/java/com/nex3z/togglebuttongroup/ToggleButtonGroup.java) 来侦听任何已检查状态的更改. 您需要处理按钮上的单击事件并正确切换其选中状态，因为 [`ToggleButtonGroup`](https://gitee.com/baijuncheng-open-source/ToggleButtonGroup/blob/master/ToggleButtonGroup/src/main/java/com/nex3z/togglebuttongroup/ToggleButtonGroup.java)在单击按钮时不会切换按钮。示例中的. [`CustomToggleButton`](https://gitee.com/baijuncheng-open-source/ToggleButtonGroup/blob/master/sample/src/main/java/com/nex3z/togglebuttongroup/sample/button/CustomToggleButton.java)是一个简单的切换按钮，实现 [`ToggleButton`](https://gitee.com/baijuncheng-open-source/ToggleButtonGroup/blob/master/ToggleButtonGroup/src/main/java/com/nex3z/togglebuttongroup/button/ToggleButton.java).

- 或者, 继承[`CompoundToggleButton`](https://gitee.com/baijuncheng-open-source/ToggleButtonGroup/blob/master/ToggleButtonGroup/src/main/java/com/nex3z/togglebuttongroup/button/CompoundToggleButton.java) 类.

[`CompoundToggleButton`](https://gitee.com/baijuncheng-open-source/ToggleButtonGroup/blob/master/ToggleButtonGroup/src/main/java/com/nex3z/togglebuttongroup/button/CompoundToggleButton.java) 实现[`ToggleButton`](https://gitee.com/baijuncheng-open-source/ToggleButtonGroup/blob/master/ToggleButtonGroup/src/main/java/com/nex3z/togglebuttongroup/button/ToggleButton.java) 并在单击时切换其选中状态. 您所需要做的就是为选中和未选中状态设计外观。示例中的  [`CustomCompoundToggleButton`](https://gitee.com/baijuncheng-open-source/ToggleButtonGroup/blob/master/sample/src/main/java/com/nex3z/togglebuttongroup/sample/button/CustomCompoundToggleButton.java) 扩展了 [`CompoundToggleButton`](https://gitee.com/baijuncheng-open-source/ToggleButtonGroup/blob/master/ToggleButtonGroup/src/main/java/com/nex3z/togglebuttongroup/button/CompoundToggleButton.java) 

更多详情请查看 [sample](https://gitee.com/baijuncheng-open-source/ToggleButtonGroup/tree/master/sample).




## Licence

```
Copyright 2018 nex3z

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
```