• 新浪微博:
  • 微信 :
按键精灵电脑版
立即下载

软件版本:2014.05
软件大小:21.6M
更新时间:07-04

按键精灵安卓版
立即下载

软件版本:3.3.0
软件大小:62.5M
更新时间:5-24

按键精灵iOS版
立即下载

软件版本:1.3.3
软件大小:29.2M
更新时间:06-14

按键精灵Mac版
立即下载

软件版本:1.1.0
软件大小:12.3M
更新时间:12-29

快捷导航

登录 后使用快捷导航
没有帐号? 注册

登录 注册
发新话题 回复该主题

[按键精灵手机版2.5基础教程] 5.友好的交互----UI界面 [复制链接]

1#

按键精灵手机版2.5基础教程


5.友好的交互----UI界面



如果一个脚本只有一个功能,那么当我们功能一多的时候就要准备好多脚本,维护更新起来更是麻烦,那么我们需要在一个脚本中做出多个功能,并提供用户自主选择的界面。来看看按键精灵安卓版为我们提供了哪一些常用的UI界面控件。(下图中,点击界面即可进入),点击上面的控件名称,即可自动生成对应的控件,我们只需要修改属性的内容就可以了!



1. 文字框

一个基本的文本框包含注释、名称、显示内容、文字大小、高度、宽度等属性,属性的内容都可以调节。其他的好理解,我们重点关注下名称和显示内容。
  1. 文字框:
  2. {
  3. 注释:"文字大小、高度、宽度是可选属性,如需使用默认值,可保持值为0或直接删除此属性",
  4. 名称:"文字框1",
  5. 显示内容:"显示内容",
  6. 文字大小:0,
  7. 高度:0,
  8. 宽度:0
  9. },
复制代码
名称:名称是一个控件的唯一标识,相当重要,脚本中需要判断UI界面的元素状态都是根据名称来判断的,使用ReadUIConfig来获取
显示内容:文本默认显示的内容

2. 输入框(用户自定义内容,比如要做自动喊话,可以自定义喊的内容)
一个基本的输入框包括名称、提示内容、初始文本、仅输入数字、文字大小、最大输入长度、高度、宽度等属性。
  1. 输入框:
  2. {
  3. 注释:"初始文本、文字大小、最大输入长度、高度、宽度是可选属性,如需使用默认值,可保持值为0或直接删除此属性",
  4. 名称:"输入框1",
  5. 提示内容:"提示用户应该输入什么内容",
  6. 初始文本:"用户首次输入之前,输入框中的文本",
  7. 仅输入数字:false,
  8. 文字大小:0,
  9. 最大输入长度:0,
  10. 高度:0,
  11. 宽度:0
  12. },
复制代码
提示内容:用来提示用户该往里面输入什么东西
初始文本:用户不输入的情况下默认使用的文本
仅输入数字:此输入框只能输入数字
最大输入长度:限制输入文本的长度

3. 多选框(一般用来勾选功能)
一个基本的多选框包括名称、提示内容、选中、文字大小、高度、宽度等属性。
  1. 多选框:
  2. {
  3. 注释:"文字大小、高度、宽度是可选属性,如需使用默认值,可保持值为0或直接删除此属性",
  4. 名称:"多选框1",
  5. 提示内容:"提示用户的文字内容",
  6. 选中:false,
  7. 文字大小:0,
  8. 高度:0,
  9. 宽度:0
  10. },
复制代码
选中:用来标识此个多选框有没有被选中,只有真(true)或者假(false)两个情况


4. 下拉框 (一些互斥的功能使用下拉框做唯一选择,比如两个宝箱只能选一个)
一个基本的下拉框包括名称、选项、初始选项等属性。
  1. 下拉框:
  2. {
  3. 注释:"初始选项是可选属性,默认值为0。模版中设置了三个选项,您可以根据需要增加或减少,注意各选项之间用逗号分隔。",
  4. 名称:"下拉框1",
  5. 选项:
  6. [
  7. "选项1",
  8. "选项2",
  9. "选项3",
  10. ],
  11. 初始选项:0
  12. },
复制代码
选项:就是下拉框内所有的内容显示,在一个中括号[]内,多个选项使用“,”分隔,选项序号从0开始
初始选项:默认是哪个选项

5. 水平布局
我们的界面默认使用纵向布局,即每个控件占1行,但是这有一些不友好,例如我们做了一个下拉框,要在他的前面添加一个文本框作为说明,分行的话很不友好,那么我们可以使用水平布局将这两个控件包含在里面。
  1. 水平布局:
  2. {
  3. 文字框:
  4. {
  5. 注释:"文字大小、高度、宽度是可选属性,如需使用默认值,可保持值为0或直接删除此属性",
  6. 名称:"文字框1",
  7. 显示内容:"请选择:",
  8. 文字大小:0,
  9. 高度:0,
  10. 宽度:0
  11. },
  12. 下拉框:
  13. {
  14. 注释:"初始选项是可选属性,默认值为0。模版中设置了三个选项,您可以根据需要增加或减少,注意各选项之间用逗号分隔。",
  15. 名称:"下拉框1",
  16. 选项:
  17. [
  18. "选项1",
  19. "选项2",
  20. "选项3",
  21. ],
  22. 初始选项:0
  23. },
  24. },
复制代码

常用的控件就这几个,已经能够帮助我们完成大部分的功能了,当我们写好了一个界面后,我们可以点击预览来显示我们设计的界面。比如上面的最后一个例子,我们点击预览就可以得到:


恩,看起来简陋了一些,来做个高端大气的界面试试:



我们前面说到脚本是通过名称来获取控件的,那么我们来试试看怎么玩这个。我们现在来写一个显示用户选择以什么速率同时生成几种钞票的脚本,我们可以自己尝试着改变选项,看看内容是不是发生了变化。
UI界面:
  1. 界面1:
  2. {
  3. 文字框:
  4. {
  5. 注释:"文字大小、高度、宽度是可选属性,如需使用默认值,可保持值为0或直接删除此属性",
  6. 名称:"文字框1",
  7. 显示内容:"--这是帅气的自定义界面--",
  8. 文字大小:25,
  9. 高度:0,
  10. 宽度:0
  11. },
  12. 文字框:
  13. {
  14. 注释:"文字大小、高度、宽度是可选属性,如需使用默认值,可保持值为0或直接删除此属性",
  15. 名称:"文字框1",
  16. 显示内容:"!!!功能列表!!!",
  17. 文字大小:22,
  18. 高度:0,
  19. 宽度:0
  20. },
  21. 多选框:
  22. {
  23. 注释:"文字大小、高度、宽度是可选属性,如需使用默认值,可保持值为0或直接删除此属性",
  24. 名称:"多选框1",
  25. 提示内容:"生产1元钞票",
  26. 选中:true,
  27. 文字大小:0,
  28. 高度:0,
  29. 宽度:0
  30. },
  31. 多选框:
  32. {
  33. 注释:"文字大小、高度、宽度是可选属性,如需使用默认值,可保持值为0或直接删除此属性",
  34. 名称:"生产10元钞票",
  35. 提示内容:"生产10元钞票",
  36. 选中:true,
  37. 文字大小:0,
  38. 高度:0,
  39. 宽度:0
  40. },
  41. 多选框:
  42. {
  43. 注释:"文字大小、高度、宽度是可选属性,如需使用默认值,可保持值为0或直接删除此属性",
  44. 名称:"生产50元钞票",
  45. 提示内容:"生产50元钞票",
  46. 选中:true,
  47. 文字大小:0,
  48. 高度:0,
  49. 宽度:0
  50. },
  51. 水平布局:
  52. {
  53. 文字框:
  54. {
  55. 注释:"文字大小、高度、宽度是可选属性,如需使用默认值,可保持值为0或直接删除此属性",
  56. 名称:"文字框1",
  57. 显示内容:"生产速率",
  58. 文字大小:0,
  59. 高度:0,
  60. 宽度:0
  61. },
  62. 下拉框:
  63. {
  64. 注释:"初始选项是可选属性,默认值为0。模版中设置了三个选项,您可以根据需要增加或减少,注意各选项之间用逗号分隔。",
  65. 名称:"生产速率",
  66. 选项:
  67. [
  68. "1张每秒",
  69. "10张每秒",
  70. "100张每秒",
  71. ],
  72. 初始选项:2
  73. },
  74. },
  75. 水平布局:
  76. {
  77. 文字框:
  78. {
  79. 注释:"文字大小、高度、宽度是可选属性,如需使用默认值,可保持值为0或直接删除此属性",
  80. 名称:"文字框1",
  81. 显示内容:"输入口令",
  82. 文字大小:0,
  83. 高度:0,
  84. 宽度:0
  85. },
  86. 输入框:
  87. {
  88. 注释:"初始文本、文字大小、最大输入长度、高度、宽度是可选属性,如需使用默认值,可保持值为0或直接删除此属性",
  89. 名称:"输入框1",
  90. 提示内容:"提示用户应该输入什么内容",
  91. 初始文本:"逗你玩~~",
  92. 仅输入数字:false,
  93. 文字大小:0,
  94. 最大输入长度:0,
  95. 高度:0,
  96. 宽度:600
  97. },
  98. },
  99. }
复制代码
脚本源码:
  1. Dim 速率
  2. 速率 = ReadUIConfig("生成速度")

  3. If 速率 = 0 Then
  4. TracePrint "用户选择的生成速率是10张每秒"
  5. ElseIf 速率 = 1 Then
  6. TracePrint "用户选择的生成速率是50张每秒"
  7. ElseIf 速率 = 2 Then
  8. TracePrint "用户选择的生成速率是100张每秒"
  9. End If

  10. Dim 是否生产1元钞票,是否生产10元钞票,是否生产50元钞票
  11. 是否生产1元钞票 = ReadUIConfig("生产1元钞票")
  12. 是否生产10元钞票 = ReadUIConfig("生产10元钞票")
  13. 是否生产50元钞票 = ReadUIConfig("生产50元钞票")

  14. If 是否生产1元钞票 = true Then
  15. TracePrint "用户有生产1元钞票"
  16. End If
  17. If 是否生产10元钞票 = true Then
  18. TracePrint "用户有生产10元钞票"
  19. End If
  20. If 是否生产50元钞票 = true Then
  21. TracePrint "用户有生产50元钞票"
  22. End If
复制代码
运行效果:


点评

hungchih919  學習了! 謝謝  发表于 2017/4/19 11:47:08

    已有1评分我要评分查看所有评分

    最后编辑兄弟工程师13 最后编辑于 2015-09-29 15:50:04
    本主题由 按键工程师 兄弟工程师13 于 2015/9/29 15:50:36 执行 移动主题 操作
    2#

    每一篇都要坚持点赞

    3#

    学习

    4#

    继续学习

    5#

    不错的教程

    6#

    为什么我的脚本只显示4行界面,第5行死活不显示

    7#

    各种招都想过了,但是还是没解决这个问题,后面添加什么内容都不显示

    8#

    学习

    9#

    速率 = ReadUIConfig("生成速度") 这个“生产速度”哪来的

    10#

    很好很强大!

    11#

    完全看不懂 不能搞简单些么

    12#

    就算再强大没啥用 看不懂啊

    13#

    学习了

    14#

    上面的代码有问题,请管理员查看后予以修改

    15#

    看得懂。。上节课在评论里闹了笑话。。DO LOOP中间加ELSE。。。原来是我搞错了。
    应该是 IF END IF 中间加

    16#

    下拉选项比较多 分父子类别 可以吗 要怎么做

    17#

    谢谢分享。对我这种初学者很有用

    18#

    简单易懂

    19#

    话说,没视频么?

    20#

    选项:

    [

    "1张每秒",

    "10张每秒",

    "100张每秒",
    -------------------------------------------------
    If 速率 = 0 Then

    TracePrint "用户选择的生成速率是10张每秒"

    ElseIf 速率 = 1 Then

    TracePrint "用户选择的生成速率是50张每秒"

    ElseIf 速率 = 2 Then

    TracePrint "用户选择的生成速率是100张每秒"
    界面是1张,源码是10张,界面是10张,调试输出是50张,好像没有对应起来,小白不是很懂

    发新话题 回复该主题