做App的时候,80%的时间花在界面上,但很多人只知道拖个按钮、放个标签就完事了。今天扒一遍App Inventor 2用户界面组件里那些容易被忽略的细节,每个都能直接提升你的App质感。
Screen组件里有三个颜色属性,大部分人从来没碰过:
三色搭配好,你的App立刻从"学生作业"变成"正式产品"。参考Android Material设计规范,主色占界面60%,提示色30%,交互色10%。
大多数人用按钮只绑定"被点击"事件。实际上Button有6种事件:
事件 | 触发时机 |
|---|---|
被点击 | 按下并松开 |
被慢点击 | 长按住按钮 |
被按压 | 手指按下瞬间 |
被松开 | 手指离开瞬间 |
获得焦点 | 光标移到按钮上 |
失去焦点 | 光标从按钮移开 |
用"被按压"+"被松开"可以实现类似微信语音按钮的效果——按下开始录音,松开停止。
Label有个HTML格式属性,勾选后文本就会按HTML渲染。这意味着你可以:
<b> 加粗、<i> 斜体、<u> 下划线<font color="red"> 改变局部文字颜色<br> 换行、<small> 缩小字号一个Label组件就能实现富文本混排,省去放多个Label拼接的麻烦。
按钮、标签、复选框等组件都有字体属性,默认只有default/serif/sans serif/monospace四种。但其实你可以:
.ttf 字体文件到项目资源你的App立刻有了专属字体。做儿童教育类App用圆体字,做商务类App用黑体,质感完全不同。
ListPicker有个显示搜索框(ShowFilterBar)属性,设置为真之后,弹出的列表顶部会出现一个搜索框。
这意味着:当你有几十甚至上百个选项时,用户不需要滚动查找,直接输入关键词就能过滤。比ListView更适合"选择"场景,因为选完自动收起,不占屏幕空间。
App Inventor 2提供了两种进度条:
注意:线性进度条的进度模式需要把Screen主题设为"设备默认"等非Classic主题才能生效,这是个坑了不少人的隐藏限制。
Image不只是显示静态图片,它有个动画形式属性:
可以做类似跑马灯的效果。另外旋转角度属性可以在设备上旋转图片(设计视图不显示旋转效果,真机才看得到)。
做多屏App时,屏幕之间传值是个痛点。Screen有个关闭其他屏幕时(其他屏幕名称, 返回结果) 事件:
这比用全局变量传值优雅得多。
Screen1的屏幕大小属性默认是"响应式",此时布局会根据设备实际分辨率自动适配。如果你发现App在不同手机上布局错位,检查这个属性是否被改成了"固定大小"。
配合宽度百分比和高度百分比属性(所有UI组件都有),可以让按钮、标签等按比例缩放,而不是写死像素值。
Notifier不只是简单的弹窗提示。它可以:
结合Notifier可以做登录确认、危险操作二次确认等交互,不需要额外切屏幕。
组件 | 最容易被忽略的属性/事件 |
|---|---|
Screen | AccentColor、关闭其他屏幕时、屏幕大小 |
Button | 被按压/被松开事件、形状(圆形/椭圆)、自定义.ttf字体 |
Label | HTML格式、文本对齐 |
Image | 动画形式、旋转角度、缩放模式(比例/自动) |
ListPicker | 显示搜索框、项背景色/文本色 |
LinearProgress | 进度模式需非Classic主题 |
CircularProgress | 仅控制显示/隐藏,不可设比例 |
Notifier | 多种对话框模式 |
Screen1 | 响应式设计、屏幕方向(横屏/竖屏/传感器) |
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。