当前位置：首页 > news >正文

从入门到精通：ThemedToggleButtonGroup配置与自定义教程

news 2026/7/6 17:35:01

从入门到精通：ThemedToggleButtonGroup配置与自定义教程

【免费下载链接】themed-toggle-button-groupCustomisable toggle buttons inside a FlexboxLayout.项目地址: https://gitcode.com/gh_mirrors/th/themed-toggle-button-group

ThemedToggleButtonGroup是一个高度模块化的轻量级Android切换按钮库，基于FlexboxLayout构建，支持单选、多选等多种选择模式，并提供丰富的动画效果和自定义选项。无论是构建简单的标签选择器还是复杂的交互界面，它都能帮助开发者快速实现美观且功能完善的切换按钮组。

快速了解：什么是ThemedToggleButtonGroup？

ThemedToggleButtonGroup是扩展自Google FlexboxLayout的Android组件库，它将灵活的布局系统与精美的切换按钮结合在一起。核心优势包括：

灵活布局：继承FlexboxLayout的全部特性，支持类似CSS Flexbox的布局方式
多种选择模式：支持单选、多选以及限制选择数量的高级模式
丰富动画效果：内置多种选择动画，如圆形揭示、淡入淡出、滑动等
高度自定义：从颜色、形状到图标、文本，几乎所有视觉元素都可定制

图1：ThemedToggleButtonGroup在深色主题下的多种选择模式展示

开始使用：简单三步集成

1. 准备环境

确保你的Android项目满足以下要求：

Android API 14+
Gradle 4.0+

2. 添加依赖

在app模块的build.gradle文件中添加以下依赖：

dependencies { implementation 'nl.bryanderidder:themed-toggle-button-group:1.4.1' }

对于Java项目，还需要添加Kotlin标准库依赖：

implementation 'org.jetbrains.kotlin:kotlin-stdlib:1.6.0'

3. 基础布局实现

在XML布局文件中添加ThemedToggleButtonGroup和ThemedButton：

<nl.bryanderidder.themedtogglebuttongroup.ThemedToggleButtonGroup android:id="@+id/basicToggleGroup" android:layout_width="match_parent" android:layout_height="wrap_content" app:justifyContent="center"> <nl.bryanderidder.themedtogglebuttongroup.ThemedButton android:layout_width="wrap_content" android:layout_height="38dp" app:toggle_text="选项1" /> <nl.bryanderidder.themedtogglebuttongroup.ThemedButton android:layout_width="wrap_content" android:layout_height="38dp" app:toggle_text="选项2" /> <nl.bryanderidder.themedtogglebuttongroup.ThemedButton android:layout_width="wrap_content" android:layout_height="38dp" app:toggle_text="选项3" /> </nl.bryanderidder.themedtogglebuttongroup.ThemedToggleButtonGroup>

核心功能：选择模式详解

单选模式

默认情况下，ThemedToggleButtonGroup使用单选模式，一次只能选择一个按钮：

<nl.bryanderidder.themedtogglebuttongroup.ThemedToggleButtonGroup android:id="@+id/singleSelectGroup" android:layout_width="match_parent" android:layout_height="wrap_content" app:toggle_selectableAmount="1" <!-- 默认值，可以省略 --> app:justifyContent="center"> <!-- 按钮定义 --> </nl.bryanderidder.themedtogglebuttongroup.ThemedToggleButtonGroup>

多选模式

通过设置toggle_selectableAmount属性，可以实现多选功能：

<nl.bryanderidder.themedtogglebuttongroup.ThemedToggleButtonGroup android:id="@+id/multiSelectGroup" android:layout_width="match_parent" android:layout_height="wrap_content" app:toggle_selectableAmount="3" <!-- 最多选择3个 --> app:toggle_requiredAmount="1" <!-- 至少选择1个 --> app:flexWrap="wrap"> <!-- 按钮定义 --> </nl.bryanderidder.themedtogglebuttongroup.ThemedToggleButtonGroup>

图2：标签式多选模式，最多可选择3个标签

代码控制选择

在Kotlin中获取和设置选中状态：

val toggleGroup = findViewById<ThemedToggleButtonGroup>(R.id.multiSelectGroup) // 获取选中的按钮 val selectedButtons = toggleGroup.selectedButtons // 选中特定按钮 toggleGroup.selectButton(btn1) // 带动画选中按钮 toggleGroup.selectButtonWithAnimation(btn2)

视觉定制：打造独特风格

颜色与形状定制

通过XML属性可以轻松定制按钮的视觉外观：

<nl.bryanderidder.themedtogglebuttongroup.ThemedButton android:layout_width="wrap_content" android:layout_height="38dp" app:toggle_text="自定义按钮" app:toggle_btnCornerRadius="19dp" <!-- 圆角半径 --> app:toggle_backgroundColor="#EBEBEB" <!-- 未选中背景色 --> app:toggle_selectedBackgroundColor="#5e6fed" <!-- 选中背景色 --> app:toggle_textColor="#5E5E5E" <!-- 未选中文字色 --> app:toggle_selectedTextColor="#FFFFFF" <!-- 选中文字色 --> app:toggle_borderWidth="2dp" <!-- 边框宽度 --> app:toggle_borderColor="#C6C6C6" <!-- 未选中边框色 --> app:toggle_selectedBorderColor="#5e6fed" <!-- 选中边框色 --> app:toggle_textSize="15sp" <!-- 文字大小 --> app:toggle_textPadding="14dp" /> <!-- 文字内边距 -->

图标与文字组合

支持同时显示图标和文字，并可分别设置选中和未选中状态：

<nl.bryanderidder.themedtogglebuttongroup.ThemedButton android:layout_width="70dp" android:layout_height="70dp" app:toggle_btnCornerRadius="50dp" <!-- 圆形按钮 --> app:toggle_icon="@drawable/ic_mic_off" <!-- 未选中图标 --> app:toggle_selectedIcon="@drawable/ic_mic_on" <!-- 选中图标 --> app:toggle_iconColor="#C6C6C6" <!-- 未选中图标色 --> app:toggle_text="麦克风" <!-- 按钮文字 --> app:toggle_iconGravity="top|center" <!-- 图标位置 --> app:toggle_textGravity="bottom|center" /> <!-- 文字位置 -->

图3：带有图标和文字的组合按钮，选中状态有明显视觉变化

动画效果：提升用户体验

ThemedToggleButtonGroup提供多种内置选择动画，可通过toggle_selectAnimation属性设置：

<nl.bryanderidder.themedtogglebuttongroup.ThemedToggleButtonGroup android:id="@+id/animatedGroup" android:layout_width="match_parent" android:layout_height="wrap_content" app:toggle_selectAnimation="circular_reveal"> <!-- 设置动画类型 --> <!-- 按钮定义 --> </nl.bryanderidder.themedtogglebuttongroup.ThemedToggleButtonGroup>

支持的动画类型包括：

circular_reveal：圆形揭示动画
fade：淡入淡出动画
horizontal_slide：水平滑动动画
vertical_slide：垂直滑动动画
horizontal_window：水平窗口动画
vertical_window：垂直窗口动画

也可以在代码中动态设置动画：

val toggleGroup = findViewById<ThemedToggleButtonGroup>(R.id.animatedGroup) toggleGroup.selectAnimation = SelectAnimation.HORIZONTAL_SLIDE

高级应用：动态添加按钮

在实际开发中，经常需要根据数据动态生成按钮。以下是如何在Kotlin中实现：

// 创建按钮组 val dynamicGroup = ThemedToggleButtonGroup(context).apply { justifyContent = JustifyContent.CENTER toggleSelectableAmount = 2 // 最多选择2个 layoutParams = ViewGroup.LayoutParams( ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT ) } // 添加到父容器 parentView.addView(dynamicGroup) // 动态添加按钮 val options = listOf("选项A", "选项B", "选项C", "选项D") options.forEach { option -> val button = ThemedButton(context).apply { text = option layoutParams = ViewGroup.LayoutParams( ViewGroup.LayoutParams.WRAP_CONTENT, 38.dpToPx() // 需要自行实现dp转px方法 ) setPadding(16.dpToPx(), 0, 16.dpToPx(), 0) } dynamicGroup.addView(button) }

完整的动态添加按钮示例可参考项目中的demo-programmatically-add-buttons模块。

事件监听：响应用户交互

设置选择监听器以处理用户交互：

val toggleGroup = findViewById<ThemedToggleButtonGroup>(R.id.actionGroup) toggleGroup.setOnSelectListener { selectedButton -> // 处理选中事件 Toast.makeText(context, "选中: ${selectedButton.text}", Toast.LENGTH_SHORT).show() }

获取选择状态的其他方法：

// 获取所有选中按钮 val selected = toggleGroup.selectedButtons // 获取所有按钮 val allButtons = toggleGroup.buttons // 获取未选中按钮 val unselected = allButtons.filter { !it.isSelected }

总结

ThemedToggleButtonGroup为Android开发者提供了一个功能丰富、高度可定制的切换按钮解决方案。通过灵活的布局系统、多样的选择模式、精美的动画效果和全面的自定义选项，你可以轻松构建出符合应用风格的交互组件。

无论是简单的选项切换还是复杂的标签选择，ThemedToggleButtonGroup都能满足你的需求。开始使用它来提升你的Android应用的用户界面和交互体验吧！

要获取完整的源代码和更多示例，可以克隆项目仓库：

git clone https://gitcode.com/gh_mirrors/th/themed-toggle-button-group

【免费下载链接】themed-toggle-button-groupCustomisable toggle buttons inside a FlexboxLayout.项目地址: https://gitcode.com/gh_mirrors/th/themed-toggle-button-group

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

查看全文

http://www.jsqmd.com/news/1136076/