AndroidTagGroup布局优化指南：掌握15个自定义属性提升UI体验

AndroidTagGroup布局优化指南：掌握15个自定义属性提升UI体验

【免费下载链接】AndroidTagGroup:four_leaf_clover:A beautiful android tag group widget.项目地址: https://gitcode.com/gh_mirrors/an/AndroidTagGroup

AndroidTagGroup是一款美观的Android标签组控件，通过灵活的自定义属性可以打造出符合应用风格的标签界面。本文将详细介绍15个核心自定义属性的使用方法，帮助开发者快速实现标签布局的个性化优化，提升用户界面体验。

一、基础配置属性

1. 启用追加模式

atg_isAppendMode属性控制标签组是否处于追加模式，允许用户输入新标签。设置为true时将显示输入框，用户可直接添加标签。

<me.gujun.android.taggroup.TagGroup android:layout_width="match_parent" android:layout_height="wrap_content" app:atg_isAppendMode="true"/>

2. 输入框提示文本

当启用追加模式时，atg_inputHint属性用于设置输入框的提示文本，引导用户输入内容。

app:atg_inputHint="添加新标签..."

二、颜色定制属性

3. 标签边框颜色

atg_borderColor属性定义标签的边框颜色，支持十六进制颜色值或资源引用。

app:atg_borderColor="#FF4081"

4. 标签文本颜色

atg_textColor属性设置标签文本的颜色，可与边框颜色形成对比以突出显示。

app:atg_textColor="#333333"

5. 标签背景颜色

atg_backgroundColor属性控制标签的背景颜色，建议使用半透明色值以获得更好的视觉效果。

app:atg_backgroundColor="#E0F7FA"

6. 选中状态颜色集

包括atg_checkedBorderColor、atg_checkedTextColor、atg_checkedMarkerColor和atg_checkedBackgroundColor四个属性，用于定义标签选中状态的外观。

app:atg_checkedBorderColor="#2196F3" app:atg_checkedTextColor="#FFFFFF" app:atg_checkedMarkerColor="#FFFFFF" app:atg_checkedBackgroundColor="#2196F3"

三、尺寸调整属性

7. 边框宽度

atg_borderStrokeWidth属性设置标签边框的宽度，单位可以是dp或px。

app:atg_borderStrokeWidth="1dp"

8. 文本大小

atg_textSize属性定义标签文本的大小，建议使用sp单位以支持系统字体大小调整。

app:atg_textSize="14sp"

9. 间距控制

atg_horizontalSpacing和atg_verticalSpacing属性分别控制标签之间的水平和垂直间距，atg_horizontalPadding和atg_verticalPadding控制标签内部的内边距。

app:atg_horizontalSpacing="8dp" app:atg_verticalSpacing="4dp" app:atg_horizontalPadding="12dp" app:atg_verticalPadding="6dp"

四、交互状态属性

10. 按压背景色

atg_pressedBackgroundColor属性设置标签被按压时的背景颜色，提供视觉反馈。

app:atg_pressedBackgroundColor="#FFEB3B"

11. 追加模式专属样式

atg_dashBorderColor、atg_inputHintColor和atg_inputTextColor三个属性用于定制追加模式下输入框的样式。

app:atg_dashBorderColor="#BDBDBD" app:atg_inputHintColor="#9E9E9E" app:atg_inputTextColor="#212121"

五、完整示例

以下是一个综合使用上述属性的布局示例：

<me.gujun.android.taggroup.TagGroup android:id="@+id/tag_group" android:layout_width="match_parent" android:layout_height="wrap_content" app:atg_isAppendMode="true" app:atg_inputHint="添加标签" app:atg_borderColor="#FF9800" app:atg_textColor="#FF5722" app:atg_backgroundColor="#FFF3E0" app:atg_checkedBorderColor="#4CAF50" app:atg_checkedTextColor="#FFFFFF" app:atg_checkedBackgroundColor="#4CAF50" app:atg_borderStrokeWidth="1dp" app:atg_textSize="14sp" app:atg_horizontalSpacing="8dp" app:atg_verticalSpacing="4dp" app:atg_horizontalPadding="12dp" app:atg_verticalPadding="6dp"/>

六、使用步骤

1. 克隆项目仓库

git clone https://gitcode.com/gh_mirrors/an/AndroidTagGroup

2. 在布局文件中添加TagGroup控件并配置自定义属性

3. 在Activity中初始化标签数据

TagGroup tagGroup = findViewById(R.id.tag_group); tagGroup.setTags(new String[]{"Android", "iOS", "Web", "Flutter"});

通过合理组合使用这些自定义属性，开发者可以轻松创建出美观且交互友好的标签组界面，为应用增添亮点。所有属性定义可查看library/src/main/res/values/attrs.xml文件获取更多细节。

【免费下载链接】AndroidTagGroup:four_leaf_clover:A beautiful android tag group widget.项目地址: https://gitcode.com/gh_mirrors/an/AndroidTagGroup