BottomNavigation 拓展
已原生化：本组件已并入 App Inventor 内置组件「导航条」（类型名
Navigator）—— 免导入拓展、接口更简单。新项目请直接用内置版；已导入本拓展的老项目不受影响、可继续使用， 迁移要点见下方从旧版底部导航拓展迁移，内置版的使用示例见导航条指导。
在任意布局容器中（或直接悬浮于屏幕底部）创建一条底部导航栏：标签数量可自由设置（1~10 个）， 背景可以是毛玻璃（把导航栏后面的内容实时模糊后垫在半透明底色下面）， 选中标签下方还有一枚跟随滑动的药丸形指示器。
- .aix 拓展下载：
cn.fun123.BottomNavigation.aix
快速上手
下方示例按内置组件写法展示（拖入即用，没有初始化方法）——调色板短名「BottomNavigation」 如今指向内置版，文档站的块预览也按内置版渲染。仍在本拓展（.aix）上的老项目不受影响： 初始化流程见方法表里的
Initialize，属性与事件照本页各表搭即可。
- 拖一个底部导航条到屏幕（建议放最下方；或开启悬浮模式贴在屏幕底部）；
- 图标、文字用到的图片先上传到项目素材；
- 在
Screen1.初始化里用「设置全部标签」一次性填好图标和文字； - 用「选中标签」事件里的
index决定显示哪一页内容。
when Screen1.Initialize() {
底部导航条1.SetItems(list("home.png", "find.png", "me.png"),
list("首页", "发现", "我的"))
}
when 底部导航条1.ItemSelected(index) {
垂直布局_首页.Visible = (index == 1)
垂直布局_发现.Visible = (index == 2)
垂直布局_我的.Visible = (index == 3)
}
毛玻璃要看到效果，后面得有东西可以模糊。 导航栏放在普通布局里时，它背后只有屏幕底色， 模糊出来就是一块纯色。想要「内容从导航栏下面滑过去」的真·毛玻璃，把悬浮模式打开： 此时导航栏会直接贴在屏幕底部、盖在页面内容之上，页面内容会从它下面穿过去被模糊。
从旧版底部导航拓展迁移
本拓展保留了旧版底部导航拓展的方法与事件形态，迁移时注意三点：
- 旧版的
Initialize（一次传 11 个参数）对应本拓展的InitializeWithOptions； 本拓展的Initialize只需要传布局容器，其余外观走属性设置，更清爽。 - 尺寸单位从像素改成了 dp（图标大小、圆角、阴影、内边距、外边距）， 这样在不同分辨率的手机上大小才一致。旧值直接照搬会偏大，建议用默认值再微调。
- 旧版固定 4 个标签，本拓展由
ItemCount（标签数量） 属性决定，取值 1~10。
属性
- AnimationDuration
- 切换动画与指示器滑动的时长，单位毫秒。默认 320。
- AnimationType
- 标签切换时的图标动画：
none无动画、rotate旋转、fade淡入、scale缩放、bounce弹跳、glass毛玻璃（缩放淡入，配合滑动指示器）。默认glass。 - BackgroundColor
- 导航栏底色。带透明度时（如
&HB3FFFFFF）才能透出后面的毛玻璃效果；设成不透明色等于关掉毛玻璃观感。 - BlurDownscale
- 毛玻璃采样缩放倍数，取值 2~16。数值越大越省性能、越糊。默认 8。仅代码块可设置。
- BlurEnabled
- 是否开启毛玻璃背景（把导航栏后面的内容实时模糊后垫在底色下面）。默认真。
- BlurLive
- 毛玻璃是否逐帧实时刷新。默认假——只在页面滚动、布局变化或调用「刷新毛玻璃」时重新采样， 更省电且绝大多数场景够用；开启后动画、视频背景也能跟上，但会持续占用绘制时间。
- BlurRadius
- 毛玻璃模糊半径，取值 1~25，越大越糊。默认 16。
- CornerRadius
- 导航栏圆角半径，单位 dp。默认 28。
- Elevation
- 导航栏阴影高度，单位 dp（需 Android 5.0 及以上）。默认 8。
- FontSize
- 标签文字大小，单位 sp。默认 12。
- FontTypeface
- 标签文字使用的字体文件（项目素材中的 ttf/otf），留空使用系统默认字体。
- GlassTint
- 覆盖在毛玻璃之上的一层薄色，用来做出玻璃的通透质感。默认
&H33FFFFFF。 - IconSize
- 图标边长，单位 dp。默认 24。
- IndicatorColor
- 指示器颜色，建议使用半透明色以保持玻璃质感。默认
&H4DFFFFFF。 - IndicatorCornerRadius
- 指示器圆角半径，单位 dp。默认 20。
- IndicatorEnabled
- 是否显示跟随选中标签滑动的药丸形指示器。默认真。
- ItemCount
- 标签数量，取值 1~10。默认 4。初始化之后修改会重建导航栏。
- Margin
- 导航栏四周外边距，单位 dp。默认 0。配合圆角可以做出悬浮的胶囊导航栏。
- Overlay
- 悬浮模式。为真时导航栏直接悬浮在屏幕底部、盖在页面内容之上，此时毛玻璃才能真正模糊到页面内容； 为假时导航栏放进「初始化」传入的布局容器里。默认假。
- PaddingVertical
- 导航栏上下内边距，单位 dp。默认 8。
- SelectedColor
- 选中标签的图标与文字颜色。默认
&HFF2196F3。 - SelectedItem
- 当前选中的标签序号，从 1 开始。只读。
- ShowLabels
- 是否显示标签文字。关闭后只显示图标。默认真。
- UnselectedColor
- 未选中标签的图标与文字颜色。默认
&HFF9E9E9E。
动画类型常量（只读）
以下只读属性各自返回一个动画类型名，方便直接接到 AnimationType 上，不用手打字符串：
- None
- 返回文本
none。 - Rotate
- 返回文本
rotate。 - Fade
- 返回文本
fade。 - Scale
- 返回文本
scale。 - Bounce
- 返回文本
bounce。 - Glass
- 返回文本
glass。
事件
- ItemSelected(index)
- 选中某个标签时触发。
index从 1 开始。重复点击当前标签同样会触发（方便做「再点一次回到顶部」）。 - ErrorOccurred(functionName,message)
- 操作失败时触发，例如图标文件不存在、序号越界、导航栏尚未初始化等。
方法
- Initialize(arrangement)
- 在指定的布局容器中创建导航栏，外观由各属性决定。 若「悬浮模式」为真，则忽略该容器、直接悬浮在屏幕底部。
- InitializeWithOptions(arrangement,selectedColor,unselectedColor,iconSize,fontSize,typefacePath,backgroundColor,cornerRadius,elevation,paddingVertical,animationType)
- 一次性传入全部外观参数并创建导航栏，参数形态与旧版底部导航扩展一致，便于老项目迁移。 尺寸单位为 dp（旧版为像素）。标签数量取自「标签数量」属性。
- SetItems(icons,itemLabels)
- 一次性设置全部标签的图标与文字，两个列表长度需一致，标签数量会自动跟随列表长度。 图标可以是素材文件名、本地路径或网络地址。
- SetItem(index,iconPath,label)
- 设置某个标签的图标与文字。
index从 1 开始。 图标可以是素材文件名、本地路径或网络地址，留空表示不改动图标。 - SetSelectedItem(index)
- 选中指定标签并触发「选中标签」事件。
index从 1 开始。 - RefreshBlur()
- 立即重新采样一次背景模糊。当导航栏后面的内容变化而模糊没有跟上时调用。
- Remove()
- 把导航栏从界面上移除。可以之后再次调用「初始化」重新创建。
使用提示
- 图标建议用白色或单色 PNG：选中/未选中颜色是通过着色（ColorFilter）叠上去的，
彩色图标会被染成一片。想保留原色，把选中色和未选中色都设成
&HFFFFFFFF。 - 省电：
BlurLive保持关闭即可，滚动和布局变化会自动重新采样；只有背后是视频、 动画时才需要打开。嫌卡就把BlurDownscale调大（12~16）。 - 不需要毛玻璃时把
BlurEnabled关掉、BackgroundColor设成不透明色， 就是一条普通的圆角导航栏，性能开销为零。 - 播放视频的
VideoPlayer、地图这类由系统单独合成的画面采样不到， 它们下面的毛玻璃会是空白，这是 Android 的限制。
扫码添加客服咨询
