备案控制台
开发者社区 物联网 文章 正文

App Inventor 2 打造个性化酷炫的底部导航条

2024-01-05 92
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 虽说 App Inventor 2 是简单的积木式开发手机 App，但是通过众多拓展它也能实现很多酷炫的功能，比如本文介绍的一款酷炫导航条，函数代码块用法超级简单，效果不错。当然还有更复杂更个性化的导航条后续再分享。

导航条效果

image.gif编辑

从零开始完整的视频教程

App Inventor 2 开发酷炫的手机App导航条

image.gif

步骤总结如下

    1. 导入并添加拓展，添加一个水平布局，宽度充满，屏幕底部对齐
    2. 代码块：添加按钮及图标，id从1开始，最后初始化即可
    3. 可以在事件中指定某个Tab选中
    4. 可在属性中设置facetype，定制字体

    注：可以在导航条的切换事件中通过同一屏幕组件的显示和隐藏来完成UI的切换，多屏幕通信较为复杂且导航条必须每个屏幕都要有，因此还是推荐同一屏幕模拟完成多屏操作，更多请参考《构建具有多个屏幕的应用程序》。

    源码下载

    拓展及demo点此下载。

    文章标签：
    搜索推荐
    关键词：
    APP Inventor
    AI2中文网
    目录
    相关文章
    AI2中文网
    |
    8月前
    App Inventor 2 列表选择框（ListPicker）用法示例
    详解App Inventor 2 列表选择框（ListPicker）的用法示例。AppInventor列表选择框,AppInventor2列表选择框,用法示例。
    AI2中文网
    167 0
    App Inventor 2 列表选择框（ListPicker）用法示例
    AI2中文网
    |
    14天前
    |
    人工智能 算法 数据处理
    App Inventor 2 Personal Image Classifier (PIC) 拓展：自行训练AI图像识别模型，开发图像识别分类App
    这里仅仅介绍一下AI图像识别App的实现原理，AI的基础技术细节不在本文讨论范围。通过拓展即可开发出一款完全自行训练AI模型，用于特定识别场景的App了。
    AI2中文网
    69 1
    AI2中文网
    |
    14天前
    |
    Android开发
    App Inventor 2 Activity启动器技巧：如何查看并启动其他App
    Activity启动器（ActivityStarter）如何查看并启动其他App，可以通过解压源码查看，或使用“包名查看器”App查看，不同品牌手机可能略有不同。
    AI2中文网
    93 0
    AI2中文网
    |
    14天前
    |
    物联网 Java 数据安全/隐私保护
    App Inventor 2 低功耗蓝牙(BLE) 硬件接入、数据通信及IO控制
    低功耗蓝牙(BLE)以低功耗、低成本、开发简便逐渐被广泛应用，本文主要介绍一款较为通用、价格低廉的BLE设备从零开始如何利用App Inventor 2开发一款自己专属的手机蓝牙App应用。 本文主要通过一款常见的BLE硬件接入控制，介绍硬件接入App Inventor 2 的通用方法，类似的硬件接入都是大同小异的。
    AI2中文网
    187 1
    AI2中文网
    |
    14天前
    |
    JSON 开发工具 数据格式
    App Inventor 2 接入阿里云短信服务，实现短信验证码功能
    App Inventor 2 接入阿里云短信服务，实现短信验证码功能：发送短信验证码功能一般都是基于短信平台提供的sdk进行调用，这里是基于阿里云短信平台进行的开发。
    AI2中文网
    125 1
    AI2中文网
    |
    8月前
    App Inventor 2 模拟sleep函数
    App Inventor 2 原生没有 sleep 及相关函数，需要模拟实现，经过测试这里给出一个既简单又相对高效率的实现方案，经过测试，该方法有效，能正常 sleep 指定的毫秒数，但是它是阻塞式的，也就是说等待的过程中其他界面操作均无法进行，不过好在CPU消耗并不高，也算是一种不错的实现方式。
    AI2中文网
    140 0
    App Inventor 2 模拟sleep函数
    sunrr
    |
    8月前
    |
    存储 API 开发工具
    将阿里云OpenAPI与App Inventor连接
    将阿里云OpenAPI与App Inventor连接
    sunrr
    380 1
    AI2中文网
    |
    8月前
    |
    JavaScript Unix
    App Inventor 2 实现Ascii码转换（Ascii编码与解码）
    之前有同学问，App Inventor 2 字符及Ascii码如何进行转换，经过调查，其原生的组件和内置块无法完成这个功能，网上也有利用Web客户端组件执行js代码来进行转换，不过逻辑稍复杂效率还不高。这里介绍一个拓展可以非常方便的完成Ascii码的转换，拓展的名字是：AsciiConversion。 此扩展允许用户将 Ascii 代码(列表)转换为相应的文本，也可以将指定的字符转换为相应的 Ascii 代码。
    AI2中文网
    114 0
    AI2中文网
    |
    10月前
    |
    Unix
    App Inventor 2 从.aia项目文件中提取.aix拓展包
    App Inventor 2 如何从.aia项目文件中提取.aix拓展包，详细的操作步骤。
    AI2中文网
    148 0
    App Inventor 2 从.aia项目文件中提取.aix拓展包
    AI2中文网
    |
    11月前
    |
    机器人 语音技术 Android开发
    App Inventor 2 语音交互机器人Robot，使用讯飞语音识别引擎
    App Inventor 2 语音识别及交互App。识别语言指令并控制机器人运动，主要用到语音识别器及文本朗读器组件，语音识别相关开发最佳入门。代码逻辑简单，App交互性及趣味性非常强~
    AI2中文网
    175 0

    物联网

    热门文章

    最新文章

  1. 1
    Java调试那点事
  2. 2
    使用MQTT客户端连接阿里云MQTT服务器
  3. 3
    IoT SaaS加速器——助力阿尔茨海默病人护理
  4. 4
    PostgreSQL "物联网"应用 - 1 实时流式数据处理案例(万亿每天)
  5. 5
    物联网平台实用技巧：调用API获取设备状态
  6. 6
    AIoT设备上云最佳实践集锦【持续更新，建议收藏】
  7. 7
    吃『派』那些事儿——阿里云物联网平台树莓派实战集锦
  8. 8
    阿里云物联网消息透传设备端payLoad设置问题
  9. 9
    塑云科技：性能突破，基于KafKa+OTS+MaxCompute 完成了一次物联网系统技术重构
  10. 10
    旋转门数据压缩算法在PostgreSQL中的实现 - 流式压缩在物联网、监控、传感器等场景的应用
  11. 1
    看我如何让手机秒变扫码枪
    85
  12. 2
    格式化后的SD卡照片还能恢复吗？
    18
  13. 3
    Ubuntu 24.04 LTS系统安装Cockpit-Podman过程步骤
    53
  14. 4
    美国高防云服务器能防御哪些攻击？ - 蓝易云
    44
  15. 5
    外贸网站如何选择服务器
    47
  16. 6
    回顾计算机运行中发生的事情
    68
  17. 7
    关于北斗车联网窘境与现状
    38
  18. 8
    异步编程中你需要知道的 指令、响应，同步原语 和 使用时注意事项
    50
  19. 9
    js用Date对象处理时间
    35
  20. 10
    如何解决电子墨水屏标签的误唤醒和吵醒问题？
    37

    21. 相关课程

    更多
  21. 互联网安全-移动APP漏洞风险与解决方案

    22. 相关电子书

    更多
  22. 女性移动App安全攻防战
  23. 汇聚云计算的生态核能——云市场，云上APP Store
  24. 千万级用户直播App——服务端架构设计和思考

    25. 相关实验场景

    更多
  25. 星轨-钉钉APP分发实训
    26. 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考
    http://www.vxiaotou.com