实例代码 - 每行显示一个控件

效果图

第一页:文本、单选组合和下拉框

第二页:多行文本框和多选组合

第三页:图片

示例代码

local ts = require("ts")
local cjson = ts.json
w,h = getScreenSize();
MyTable = {
    ["style"]  = "default",            --  选填,默认样式,控件排列类型
    ["rettype"] = "table",              
    --  选填,旧版,showUI 返回值格式
    ["width"] = w,          
    --  选填,安卓默认全屏,iOS 默认,showUI 宽度
    ["height"] = h,             --  选填,安卓默认全屏,iOS 默认,showUI 高度
    ["config"] = "showuiTest1.txt",  --  选填,无,配置文件保存文件
    ["timer"] = 99,                 --  选填,无,自动执行倒计时
    ["orient"] = 0,                 --  选填,竖屏,显示方向(仅支持 iOS)
    ["pagetype"]= "multi",                  
    --  选填,单页,单页/多页 (多页显示时必填,否则无法正确显示 showUI)
    ["title"] = "触动精灵脚本 UI 演示",--  选填,脚本配置,showUI 标题
    ["titles"] = "第一页,第二页,第三页", 
    --  选填,无,多页 showUI 标题(仅在多页下有效)
    ["cancelname"] = "取消",      --  选填,取消,左下角按钮名称
    ["okname"] = "开始",          --  选填,确认,右下角按钮名称
    ["selpage"] = 1,              --  选填,无,多页模式下指定默认停留的页面
    ["btnbkcolor"] = "255,255,255",         
    --  选填,255,255,255,底部按钮背景色(仅支持 iOS)
    ["bgcolor"] = "255,255,255",  --  选填,255,255,255,界面背景色(仅支持 iOS)
    ["pagenumtype"] = "number",  --  选填,无,分页指示样式    
    pages            =
    {
        {
            {
                ["type"] = "Label",
                ["text"] = "点击右上角闹钟关闭倒计时↗",
                ["size"] = 20,
                ["align"] = "center",
                ["color"] = "255,0,0",
            },
            {
                ["type"] = "Label",             -- 必填,控件类型,标签
                ["text"] = "第一页设置",        
                -- 选填,无,显示内容(内容为空,仍然占用一行)
                ["size"] = 25,                  -- 选填,15,字号
                ["align"] = "center",           -- 选填,居左,对齐样式
                ["color"] = "0,0,0",            -- 选填 ,0,0,0,字体颜色
            },
            {
                ["type"] = "Label",
                ["align"] = "center",
                ["text"] = "单选组合-RadioGroup",
                ["size"] = 20,
            },
            {
                ["type"] = "RadioGroup",            
                -- 必填,控件类型,单选组合
                ["id"] = "rg",                      
                -- 选填,无,控件 ID,以 table 格式返回返回值时必填,否则无法获取返回值
                ["list"] = "小学,初中,高中,大学",     -- 必填,无,单选组合内容
                ["select"] = "1",                   -- 选填,0,默认选中项 id
                ["images"] = "showui_test_a.png,showui_test_b.png,showui_test_c.png,showui_test_d.png", 
                -- 选填,无, 单选组合选项显示图片
                ["scale"] = "0.4",                  -- 选填,1,图片缩放比例
            },
            {
                ["type"] = "Label",
                ["align"] = "center",
                ["text"] = "输入框-Edit",
                ["size"] = 20,
            },
            {
                ["type"] = "Edit",               
                -- 必填,控件类型,输入框
                ["id"] = "edit",                  
                -- 选填,无,控件 ID 以table格式返回返回值时必填,否则无法获取返回值
                ["prompt"] = "年",                -- 选填,无,提示文字
                ["text"] = "1989",                -- 选填,无,默认文字
                ["kbtype"] = "number",            -- 选填,标准键盘,键盘类型
                ["color"] = "0,0,0",              -- 选填,黑色,字体颜色
                ["size"] = 15,                    -- 选填,15,字体大小
                ["align"] = "center",             -- 选填,居左,对齐方式
            },
            {
                ["type"] = "Label",
                ["align"] = "center",
                ["text"] = "单级下拉框-ComboBox",
                ["size"] = 20,
            },
            {
                ["type"] = "ComboBox",                             
                -- 必填,控件类型,下拉框
                ["id"] = "cb1",                                     
                -- 选填,无,控件 ID 以 table 格式返回返回值时必填,否则无法获取返回值
                ["list"] = "鼠,牛,虎,兔,龙,蛇,马,羊,猴,鸡,狗,猪",
                -- 必填,无,下拉框内容
                ["select"] = "1",                                   
                -- 选填,0,默认选中项 ID
            },
            {
                ["type"] = "Label",
                ["text"] = "二级下拉框-ComboBox",
                ["size"] = 20,
            },
            {
                ["type"] = "ComboBox",          -- 必填,控件类型,下拉框
                ["id"] = "cb2",                             
                -- 选填,无,控件ID 以 table 格式返回返回值时必填,否则无法获取返回值
                ["list"] = "北京,上海,广州,深圳",-- 必填,无,下拉框内容
                ["select"] = "0",               -- 选填,0,默认选中项 ID
                ["data"] = "北京1,北京2,北京3,北京4#"..
                "上海1,上海2,上海3,上海4#"..
                "广州1,广州2,广州3,广州4#"..
                "深圳1,深圳2,深圳3,深圳4",   --必填,无,下拉框子选项内容
                ["source"] = "这里必须一致"                      
                --  必填,无,主选项下拉框控件 source 属性必须与子选项下拉框的 dataSource 属性一致
            },
            {
                ["type"] = "ComboBox",                      -- 必填,控件类型,下拉框
                ["id"] = "cb3",                             
                -- 选填,无控件 ID,以 table 格式返回返回值时必填,否则无法获取返回值
                ["select"] = "0",                           
                -- 选填,无,子选项下拉框默认选中项
                ["dataSource"] = "这里必须一致"             
                --必填,无,主选项下拉框控件 source 属性必须与子选项下拉框的 dataSource 属性一致
            },
            },{
            {
                ["type"] = "Label",
                ["text"] = "第二页设置",
                ["size"] = 25,
                ["align"] = "center",
                ["color"] = "0,0,0",
            },
            {
                ["type"] = "Label",
                ["align"] = "center",
                ["text"] = "多行文本框-TextArea",
                ["size"] = 20,
            },
            {   -- 必填,控件类型,输入框
                ["type"] =  "TextArea",         
                ["id"] = "ta",                  
                -- 选填,无,控件ID 以 table 格式返回返回值时必填,否则无法获取返回值
                ["text"] = "触动精灵"..
                "官方工作人员都是使用 288 开头的企业 QQ\r\n"..
                "交易需谨慎,谨防上当受骗!",       -- 选填,无,默认文字
                ["prompt"] =  "我是hint",       -- 选填,无,提示文字
                ["size"] =  15,                 -- 选填,15,字体大小
                ["align"] =  "center",          -- 选填,居左,对齐方式
                ["height"] =  250,              -- 选填,75,空间高度(仅支持 iOS)
                ["color"] =  "255,0,0",         -- 选填,黑色,字体颜色
                ["kbtype"] = "number",          -- 选填,标准键盘,键盘类型
            },
            {
                ["type"] = "Label",
                ["align"] = "center",
                ["text"] = "多选组合-CheckBoxGroup",
                ["size"] = 20,
            },
            {   --必填,控件类型,单选组合
                ["type"] = "CheckBoxGroup",     
                -- 选填,无,控件 ID  以 table 格式返回返回值时必填,否则无法获取返回值
                ["id"] = "cbg",                             

                -- 必填,无 ,单选组合内容
                ["list"] = "电影,读书,跑步,吃饭,"..
                "运动,睡觉,旅行,打豆豆,听歌,电影",   
                -- 选填,0,默认选中项 ID
                ["select"] = "3@5@7",           
                -- 选填,无,单选组合选项显示图片
                ["images"] = "showui_test_a.png,showui_test_b.png,"..
                "showui_test_c.png,showui_test_d.png,showui_test_e.png,"..
                "showui_test_f.png,showui_test_g.png,showui_test_h.png,"..
                "showui_test_i.png,showui_test_j.png",
                -- 选填,1,图片缩放比例
                ["scale"] = "0.3",         
            },
            },{
            {
                ["type"] = "Label",
                ["text"] = "第三页设置",
                ["size"] = 25,
                ["align"] = "center",
                ["color"] = "0,0,0",
            },
            {
                ["type"] = "Label",
                ["align"] = "center",
                ["text"] = "图片-Image",
                ["size"] = 20,
            },
            {   -- 必填,控件类型,图片
                ["type"] = "Image",    
                --- 必填,无,图片路径(可填写资源目录下相对路径,绝对路,,网址)
                ["src"] = "http://mrw.so/4wbrDw",   
                -- 选填,无,图片缩放比例
                ["scale"] = 0.4,                     
            },
            {
                ["type"] = "Image",
                ["src"] = "http://mrw.so/4wbrDw",
                -- 选填,无,图片缩放比例
                ["scale"] = 0.6,                     
                -- 选填,默认居左,对齐方式
                ["align"] = "left"                   
            },
            {
                ["type"] = "Image",
                ["src"] = "http://mrw.so/4wbrDw",
                -- 选填,无,图片缩放比例
                ["scale"] = 0.8,       
                -- 选填,默认居左,对齐方式
                ["align"] = "center"                
            },
            {
                ["type"] = "Image",
                ["src"] = "http://mrw.so/4wbrDw",
                -- 选填,无,图片缩放比例
                ["scale"] = 1,      
                -- 选填,默认居左,对齐方式
                ["align"] = "right"               
            },
        }
    }   
}
local MyJsonString = cjson.encode(MyTable);
UIret,values = showUI(MyJsonString)
if UIret == 1 then
    local rg =  values.rg
    local edit =  values.edit
    local cb1 =  values.cb1
    local cb2 =  values.cb2
    local cb3 =  values.cb3
    local ta =  values.ta
    local cbg =  values.cbg
    dialog("单选组合:"..rg..",\r\n单行输入框:"..edit..",\r\n一级下拉框:"..cb1..",\r\n二级下拉框主选项:"..cb2..",\r\n二级下拉框子选项:"..cb3..",\r\n多行文本框:"..ta..",\r\n多选组合:"..cbg..",")
end
  1. 以上实例需引擎版本 iOS v2.2.6,Android v1.2.7 以上版本支持。
  2. 实例中所使用的图片资源包下载地址:https://pan.baidu.com/s/1c4liZ88, 将图片包中的图片文件解压后放入 /User/Media/TouchSprite/res 目录中,运行实例即可看到效果。
  3. 实例在 iPhone 6S iOS9.0.2 上调试通过,如在其他设备上使用,需自行调整部分参数以适配不同的分辨率。

名词解析

  1. JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本 格式,易于人阅读和编写,同时也易于机器解析和生成。
  2. JSON 中冒号后的值可以是字符串、数字、也可以是另一个数组或对象。
  3. 转义即取消某些特定的、在编辑语言中被定义为特殊用途的字符。这些字符由于被定义为特殊用途,它们失去了原有的意义,如三种引号 " ' ` 、美元符号 $ 等等。当我们在被引号“括起来”的文本中,想表示出一个引号,就需要转义,如:dialog("\"",5);

注意事项

  1. 如果您的系统为 iOS 9 以上版本,并且设备是 iPad,由于一些特殊原因,锁定横屏的时候弹出的 UI 界面可能无法正常操作,如出现此问题,请将设备改为锁定竖屏。
  2. 需要注意的是,所有控件的属性值必须按照规则来赋值,错误的赋值类型会导致一些不可预料的结果。
  3. 为了方便开发者使用,触动精灵提供了封装好的便携 UI 供大家使用
  4. 在部分安卓设备上需要在系统设置里开启悬浮窗权限方可正常使用 showUI。
Copyright 北京帮你玩科技有限公司 2020 all right reserved,powered by Gitbook该文章修订时间: 2020-09-27 12:37:30

results matching ""

    No results matching ""