TabLayout 拓展：多模式 Tab 导航组件

• TabLayout 拓展
• 快速使用
  • 顶部 Tab（最常用）
  • 电商分类布局
  • 属性
  • 事件
  • 方法

« 返回首页

TabLayout 已内置为原生组件「滑动分页」，归入界面布局：顶部标签（带角标）、左侧分类都保留，并能左右滑动切换；底部导航请用内置的导航条。新项目无需导入拓展。

TabLayout 拓展

多模式 Tab 导航组件，提供 4 种布局模式：

• top：顶部水平 Tab + 指示器（最常见）
• bottom：底部导航栏（类似微信底部）
• left：左侧垂直分类（左右分栏）
• category：电商风格分类（左侧分类列表 + 右侧内容区 + 分割线）

支持外部布局引用和内置容器两种内容管理方式，颜色、字号、指示器等均可自定义。

• .aix 拓展下载：

cn.fun123.TabLayout.aix

快速使用

顶部 Tab（最常用）

1. 设计器中拖入 TabLayout，设置 Width = Fill parent，Height = Fill parent
2. 创建多个 VerticalArrangement 作为各 Tab 的内容面板
3. 在 Screen 初始化事件中调用：

TabLayout1.AddTab("首页", VerticalArrangement1)
TabLayout1.AddTab("发现", VerticalArrangement2)
TabLayout1.AddTab("我的", VerticalArrangement3)

电商分类布局

1. 设置 TabMode = category，Width = Fill parent，Height = Fill parent
2. 使用 AddTabWithContainer 创建带内置容器的 Tab
3. 动态向容器添加内容

TabLayout1.AddTabWithContainer("手机数码")
TabLayout1.AddTabWithContainer("家用电器")
TabLayout1.AddTabWithContainer("服饰鞋包")

属性

TabMode

Tab 模式：top（顶部Tab）、bottom（底部导航）、left（左侧分类）、category（电商分类）。默认 top。

ActiveColor

选中项的颜色。默认蓝色 &HFF2196F3。

InactiveColor

未选中项的颜色。默认灰色 &HFF999999。

BackgroundColor

Tab 栏背景颜色。默认白色 &HFFFFFFFF。

IndicatorColor

指示器颜色（top 模式有效）。默认蓝色 &HFF2196F3。

IndicatorHeight

指示器高度（dp）。默认 3。

TextSize

Tab 文字大小（sp）。默认 14。

ShowIndicator

是否显示指示器。默认 True。

CategoryWidth

左侧分类宽度（dp，left/category 模式有效）。默认 100。

ItemHeight

每个 Tab 项高度（dp）。默认 48。

SelectedTab（只读）

当前选中的 Tab 索引（从 0 开始）。

TabCount（只读）

Tab 总数。

事件

TabChanged(index, title)

Tab 切换时触发，返回新 Tab 的索引和标题。

方法

AddTab(title, contentPanel)

添加 Tab 并绑定外部内容面板（VerticalArrangement 等）。切换 Tab 时自动显示/隐藏面板。

AddTabWithContainer(title)

添加 Tab 并创建内置容器，可通过 GetContainer 获取引用后动态添加子组件。

RemoveTab(index)

移除指定索引的 Tab（从 0 开始）。

SelectTab(index)

切换到指定索引的 Tab（从 0 开始）。

SetTabTitle(index, title)

修改指定索引 Tab 的标题。

SetTabBadge(index, text)

设置角标文字，如未读数 "3" 或红点 "·"。

ClearBadge(index)

清除指定 Tab 的角标。

GetContainer(index)

获取指定 Tab 的内置容器引用（仅对 AddTabWithContainer 创建的 Tab 有效）。

GetTabCount()

获取 Tab 总数。

GetSelectedTab()

获取当前选中的 Tab 索引。