APP下载

从头开始学App Inventor(六)

2023-02-21

电脑报 2023年6期
关键词:管理器列表按钮

我们这款背单词App的特点是使用个性化的单词本,会用到文件管理器组件调用外部文件及二维列表的知识,借此掌握CSV文件和列表之间的转换技巧。

一、功能及界面设计

App名称“背单词”,背景图用张黑板图片,从上到下的按键有单词、释义、发音、下一个。

点击“单词”切换单词的显示与隐藏。点击“释义”切换释义的显示与隐藏。点击“发音”可以再念读一遍,也可以勾选“读释义”的复选框,读中文解释(需手机语音库支持)。

初始状态下单词和释义都隐藏,可以直接用听写的方式来背单词,再通过点击显示需要的内容。点击“下一个”随机切换单词库中的任意单词。

二、组件设计

准备一张竖屏的黑板图片作为背景,一个正方形的图标。按后文的方法准备一份英语单词文本english.csv。

新建项目取名“english”,将2个图片和english.csv上传进素材。并根据图1设计组件。

1.组件Screen,命名Screen1,背景图片为background.png,图标icon.png,屏幕方向锁定竖屏,标题“背单词”。

2.使用5个水平布局依次垂直排列,高和宽充满,背景颜色透明,通过水平居中,设置垂直居下或者居上,让各个按钮和标签处于合适的位置。

3.需要4个按钮,均为圆角按钮,根据重要程度设定不同的字体颜色、粗细和大小,由于需要用于触发相应事件,勾选“显示交互效果”。

按鈕“单词”,点击切换单词的显示与隐藏,文本“单词:”。

按钮“释义”,点击切换释义的显示与隐藏,文本“释义:”。

按钮“发音”,点击后会再次读出单词或释义(由复选框控制),文本“发音”。

按钮“下一个”,用于切换到词库的下一个单词,文本“下一个”。

4.标签2个,标签“标签_单词”用于显示单词具体内容,位于按钮单词右边,文本“study”。标签“标签_释义”,放置释义内容,位于按钮释义的右边,文本“学习”。

5.复选框1个,用于选择是念读单词还是释义,文本“念读释义”。

6.文件管理器,打开英语单词表文件。使用文本语音转换器,把文字转换成声音(图1)。

三、单词表的转换和读取

1.单词表的转换

我们常见的表格是Excel格式的,想要在AppInventor中使用表格可以将其转存成CSV格式。CSV格式的文件其实是由逗号作为分隔符的文本文件,可以用记事本打开。由于通过Excel另存的CSV格式文件默认编码为ANSI,这种编码在AppInventor中打开会出现中文乱码,因此需要先在Excel中整理好表格,第一列中文,第二列放对应英文。然后保存为CSV文件(图2)。

通过记事本打开这个CSV文件,然后另存为UTF-8编码格式。最后修改后缀将english.txt改为english.csv(图3)。

2.单词表的导入

将english.csv上传到素材,当屏幕初始化时,调用文件管理器读取文件。文件名要把目录地址一并加上“/AppInventor/assets/english.csv”。这样设置是因为在AppInventor开发网站上传的所有素材文件,在模拟运行时都是放在手机的“/AppInventor/assets/”目录中。当通过手机运行APK文件时,不妨先通过Al伴侣APP进行连接后再运行,这样能确保在“/AppInventor/assets/”录中存在english.csv文件,否则会因没有装载文件而不能正常运行(图4)。

然后,初始化全局变量单词列表,当文件管理器获得文本时,将CSV转列表。这时外部的文件已经转换为内部的列表了(图5)。

CSV文件实际上是被转换为了一个二维列表,即CSV文件中的每一行先转换成一个列表,该行的每一列元素转变为该列表中的一个列表项。比如,文件管理器读取english.csv文件,将它转换为单词列表,该单词列表的列表项又是列表,由两项组成,第一项是释义,第二项是对应单词,列表内容示意如图6。

3.单词表的使用

当点击“下一个”按钮时,从单词列表中随机取出一个单词。这里可以设一个局部变量“随机单词”,从单词列表中随机取出一个单词;然后分别取出它的第一项给标签释义,第二项给标签单词;再判断复选框是否被选中,如果选中,念读中文释义,否则念读英文单词。具体代码模块如图7。

4.随机产生下一个单词

如图所示有两种产生随机单词的方法(图8)。

四、其他逻辑设计

本App的难点就是CSV文件的使用和随机单词的抽取。下面是其他几个按钮的逻辑设计,比较简单了。

1.显示/隐藏单词

点击“单词”按钮时,可以显示或隐藏单词。只需取标签原来的显示状态的相反状态即可(图9)。

2.显示/隐藏释义

点击“释义”按钮时,可以显示或隐藏释义,用逻辑“非”即可(图10)。

3.发音功能

点击“发音”按钮时,首先判断复选框的选中状态,从而判断念读中文释义还是英语单词,然后发音,点击一次,念读一遍(图11)。

五、调试和改进

由于使用了中英文语音,其中中文语音需要在手机上安装相关的引擎。一般手机上会默认安装中文语音引擎。如果无法在手机上发出中文语音,可以在应用商店中搜索并安装“讯飞语音+”。安装后在手机中点“设置→高级设置→语言和输入法→文字转语音(TTS)输出→讯飞语音+”(以华为手机为例)就可以了。

如果程序顺利运行,那么还有什么可以改进的?做一些个性化的完善吧,如增加单词次数统计,显示背了多少个单词;增加计时功能,统计花了多少时间等。

源代码和单词表可以关注“壹零社”公众号下载。

猜你喜欢

管理器列表按钮
当你面前有个按钮
学习运用列表法
应急状态启动磁盘管理器
扩列吧
Windows文件缓冲处理技术概述
死循环
列表画树状图各有所长
内心不能碰的按钮
高集成度2.5A备份电源管理器简化锂离子电池备份系统
不含3-圈的1-平面图的列表边染色与列表全染色