UI 构建 | 节点精灵官网|安卓免Root小程序

# UI 构建

视频演示 (opens new window)

整体的UI 分为3部分

UI窗口(UI) :构建窗口的主体
控件(UIView)：构建窗口的控件
样式(style)：构建控件的样式

案例：


-- 背景可用 Shape 填充

-- 背景可用 Shape 填充
shape={
	windowShape={
		colors={"#d788b5","#ac77af","#61519c","#3b3c8e"},
		angle=225;
	};
	btn={
		radius=270;
		angle=135;
		colors={"#000000","#000000"};
	};
	headbg={
		colors={"#000000"};
		conner=20;
		border=2;
		borderColor="#FFFFFF"
	};
}

css={
	window={tabfColor="#000000",tbgColor="#282746",width=-1,height=140,textSize=15,textColor="#FFFFFF",bgShape=shape.windowShape};
	text={textSize=20,textColor="#FFFFFF",width=-2,bgColor="#FF0000",align="center",margin={0,30,0,30}},
	text2={textSize=15,textColor="#90FFFFFF",align="left",},
	text3={textSize=30,textColor="#FC9403",align="right",},
	right={textSize=20,gravity="right",margin={0,0,50,0}},
	head={textColor="#EE7373",margin={20,20,20,0},grivity="center",bgShape=shape.headbg,padding={10,10,10,10},width=-1};
	btn={bgShape=shape.btn,textColor="#EE7373"};
	image={width=100,height=100};
	bgimage = {bgImage ="1.png",width=-1,height=400};

};

ui={
	width=-1;height=-1;
	time = 10;
	page={
		主线任务={
			{type="div",ore=2,style=css.head,
				views={
					{type="text",value="我居中显示",style=css.text},
					{type="text",value="我居左显示",style=css.text2},
					{type="text",value="我居右显示",style=css.text3},
					{type="image",value="logo.png",id="name",style=css.image}
				};
			},
			{type="div",ore=2,style=css.bgimage,
				views={
					{type="text",value="我居中显示",style=css.text},
					{type="text",value="我居左显示",style=css.text2},
					{type="text",value="我居右显示",style=css.text3},
					{type="image",value="logo.png",id="name",style=css.image}
				};
			},
			{type="div",ore=1,style=css.center,views={
				{type="radio",value="18级 |19级 |20级 ",ore=1,id="cc"},
				{type="spinner",value="18级 |19级 |20级",id="cc2"},
			}};
		},
		支线任务={
		{type="edit",hint="请输入账号",id="name"}}},
		style=css.window;
		submit={type="text",value="运行",style=css.btn};
		cancle={type="text",value="取消",style=css.btn};
};

ret=show(ui)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

# UI窗口

UI 窗口为一个 lua table 包含的元素有

width,height:窗口的宽度，窗口的高度
pages: 包含的页面是一个 table
style: 样式是一个table
submit: 确定按钮,是一个UIView
cancle: 取消按钮,是一个UIView

    -- 可以把所有样式放在一个tble里
    style={
        window = {bgColor="#000000"}; --创建一个style ，设置背景色为 黑色
    }

    ui={
        width =-1;height= -1; -- -1:全屏
        time = 10; -- 10秒后自动选择确认
        pages = {
            欢迎界面 = {};
            关于我们 = {};
        },
        style= style.window; -- 样式 指定为 style.window;
        submit={value="运行"}; -- 指向一个 UIView
        cancle={value="取消"}; -- 指向一个 UIView
    }
    local ret = show( ui )
    if ret then
        print('用户选择了确认')
    else
        print('用户选择了取消')
    end

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 显示窗口

给窗口设置一个标题，该标题显示最顶端

show(ui) 该函数会返回一个boolean 值 true=用户选择了确定；false= 用户选择了取消

   ui = {
      title = "";
   };
   local ret = show( ui )
       if ret then
           print('用户选择了确认')
       else
           print('用户选择了取消')
    end

1
2
3
4
5
6
7
8
9

# 设置窗口自动确认

给窗口设置一个时间，自动选择确认

time = 0; 不自动选择确认 time = 10; 10秒后自动选择确认

title ="这是一个标题"

   ui = {
         title = "";
         time =10;
      };
      local ret = show( ui )
          if ret then
              print('用户选择了确认')
          else
              print('用户选择了取消')
       end

1
2
3
4
5
6
7
8
9
10

# View控件

可创建 "文本控件" "输入框架" "单选控件" "多选控件"，"下拉框"，"区块"

# 引入样式

通过样式可控制控件的显示位置，文本大小，颜色，背景，背景渐变，圆角，外边距，内边距，边框等

{style={...}}

# 文本控件

文本控件:在设备上显示一段文字

语法:

{type="text",value="请输入痘印的账号密码"}

属性:

type ="text" (标记类型为文本型)
value ="这是一个文本" （设置文本控件的内容）

案例:

    ui={
        title="游自在欢迎你的光临";
        views={
            {type="text",value="请输入痘印的账号密码"}
        }
    }
    local ret = show( ui )
    if ret then
        print('用户选择了确认')
    else
        print('用户选择了取消')
    end

1
2
3
4
5
6
7
8
9
10
11
12

# 图片控件

图片控件:在设备上显示一张图片

语法:

{type="image",value="1.png"}

属性:

type ="image" (标记类型为图片类型)
value ="1.png" （图片的地址,当前路径和mian.lua平级）也可以填入网络图片

案例:

    ui={
        title="游自在欢迎你的光临";
        views={
            {type="image",value="1.png"}
        }
    }
    local ret = show( ui )
    if ret then
        print('用户选择了确认')
    else
        print('用户选择了取消')
    end

1
2
3
4
5
6
7
8
9
10
11
12

# 输入框控件

输入框控件:用户可通过此控件输入值

语法:

{type="edit",hint="请输入账号",id="name"},

属性:

id ="变量名" （可通过此名称取到用户输入的值，详情见案例）
type ="text" (标记为输入框类型)
value ="user" （输入框内的文本值）
hint ="请输入密码" （提示用户需要输入的值）

案例:

    ui={
        title="游自在欢迎你的光临";
        views={
            {type="edit",hint="请输入账号",id="name"}
        }
    }
    local ret = show( ui )
    if ret then
        print('用户输入的值'..name);
    else
        print('用户选择了取消')
    end

1
2
3
4
5
6
7
8
9
10
11
12

# 多选框控件

输入框控件:用户可通过此控件输入值

语法:

{type="check",value="18级 |19级 |20级 ",ore=1,id="p1|p2|p3"}

属性:

id ="变量名" ！！！【多个id请用'|' 隔开，不可用数字开头！】
type ="text" (标记为多选类型)
value ="18级 |19级 |20级 " （创建多个多选框请用'|' 隔开，id的位置和value 值的位置对应！）
ore =0 （设置布局朝向默认为0 ，0= 纵向布局，1= 横向布局）

案例:

    ui={
        title="游自在欢迎你的光临";
        views={
            {type="check",value="18级 |19级 |20级 ",ore=1,id="p1|p2|p3"}
        }
    }
    local ret = show( ui )
    if ret then
        if p1 then  print('18级勾选了') end;
        if p2 then  print('19级勾选了') end;
        if p3 then  print('20级勾选了') end;
    else
        print('用户选择了取消')
    end

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 单选框控件

输入框控件:用户可通过此控件输入值

语法:

{type="radio",value="18级 |19级 |20级 ",ore=0,id="cc"},

属性:

id ="变量名" （单选框只填写一个id 即可。用户点击确定后会返回选中单选框的值）
type ="radio" (标记为单选类型)
value ="18级 |19级 |20级 " （创建多个多选框请用'|' 隔开）
ore =0 （设置布局朝向默认为0 ，0= 纵向布局，1= 横向布局）

案例:

    ui={
        title="游自在欢迎你的光临";
        views={
            {type="radio",value="18级 |19级 |20级 ",ore=0,id="cc"}
        }
    }
    local ret = show( ui )
    if ret then
        print("单选框的值为:"..cc);
    else
        print('用户选择了取消')
    end

1
2
3
4
5
6
7
8
9
10
11
12

# 下拉框控件

输入框控件:用户可通过此控件输入值

语法:

{type="radio",value="18级 |19级 |20级 ",ore=0,id="cc"},

属性:

id ="变量名" （单选框只填写一个id 即可。用户点击确定后会返回选中单选框的值）
type ="spinner" (标记为单选类型)
value ="18级 |19级 |20级 " （创建多个多选框请用'|' 隔开）
ore =0 （设置布局朝向默认为0 ，0= 纵向布局，1= 横向布局）

案例:

    ui={
        title="游自在欢迎你的光临";
        views={
            {type="spinner",value="18级 |19级 |20级 ",ore=0,id="cc"}
        }
    }
    local ret = show( ui )
    if ret then
        print("单选框的值为:"..cc);
    else
        print('用户选择了取消')
    end

1
2
3
4
5
6
7
8
9
10
11
12

# 区块控件

区块控件，内部可放置任意控件

语法:

{type="div",ore =0,views={}}, -- ore 控制布局方向

ui = {
	width = -1; height = -1;
	page = {
		主线任务 = {
			{ type = "div", ore = 2,
				views = {
					{ type = "text", value = "我居中显示", style = css.text },
					{ type = "text", value = "我居左显示", style = css.text2 },
					{ type = "text", value = "我居右显示", style = css.text3 },
				};
			},
			{ type = "edit", hint = "请输入账号", id = "name" },
		}; },
		支线任务 = {
			{ type = "edit", hint = "请输入账号", id = "name" },
		},
	},
	style = css.window;
	submit = { type = "text", value = "运行", style = css.btn };
	cancle = { type = "text", value = "取消", style = css.btn };
};

ret = show( ui )

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 样式 Style

通过样式可以对控件的显示进行控制

# 宽 | 高

width，height 值单位为px。如值=-1 则为全屏

style={
    test = {width= 300,height = 300}; --
}

1
2
3

# 外边距 margin

margin :值为table {左,上,右,下};

style={
    test = {margin ={10,20,30,40}}; -- 距左，上，右，下 边距 依次为 10，20，30，40 px
}

1
2
3

# 内边距 padding

padding :值为table {左,上,右,下};

style={
    test = {padding ={10,20,30,40}}; -- 距左，上，右，下 内边距 依次为 10，20，30，40 px
}

1
2
3

# 背景色 bgColor

bgColor :值string ，ARGB 颜色值

style={
    test = {bgColor ="#FFFFFF"}; -- RGB 必须带"#" 支持ARGB 透明色
}

1
2
3

# 背景图片 bgImage

bgImage = "1.png" 设置背景图片为 1.png

图片可以为本地图片，也可以为http 外网图片

style={
    test = {bgImage = "1.png"};
    test2 = {bgImage = "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"};
}

1
2
3
4

# 背景图形 bgShape

bgShape :值table

conner :圆角数值 number类型，
colors :图形背景色 table类型，多个即为渐变色
border :图形边框颜色
angle:渐变背景角度，只能为45 的倍数

shape = {
		colors = { "#000000","#FFFFFF"};
		conner = 20;
		border = 3;
		borderColor = "#FFFFFF";
		angle = 90;
};
style={
    test = {bgShape = shape};
}

1
2
3
4
5
6
7
8
9
10

# 位置 align （相对于外部）

aligin 可控制控件显示的位置

center :居中显示
left:居左显示
right:居右显示
center-v:纵向居中显示
center-h:横向居中显示

style={
    test = {align = "center"}; --
}

1
2
3

# 位置 grivity （相对于内部）

aligin 可控制控件显示的位置

center :居中显示
left:居左显示
right:居右显示
center-v:纵向居中显示
center-h:横向居中显示

style={
    test = {grivity = "center"}; --
}

1
2
3

# 标题选中颜色 tabfColor

tabfColor 当标题为选中时的选区RGB 颜色

style={
    test = {tabfColor= "#FFFFFF"};
}

1
2
3

# 标题背景色 tbgColor

tbgColor 当标题为选中时的选区RGB 颜色

style={
    test = {tbgColor= "#60FFFFFF"};
}

1
2
3

# 布局朝向 ore

ore =0 （设置布局朝向默认为0 ，0= 纵向布局，1= 横向布局）

style={
    test = {ore= 1};
}

1
2
3

# 字体大小 textSize

textSize =20 设置字体大小

style={
    test = {textSize= 20};
}

1
2
3

# 字体颜色 textColor

textColor = "#FF00FF" 设置字体颜色

style={
    test = {textColor = "#FF00FF"};
}

1
2
3

← 简单界面文件读写 →

# UI 构建

# UI窗口

# 显示 窗口

# 设置 窗口 自动确认

# View控件

# 引入样式

# 文本控件

# 图片控件

# 输入框控件

# 多选框 控件

# 单选框 控件

# 下拉框 控件

# 区块控件

# 样式 Style

# 宽 | 高

# 外边距 margin

# 内边距 padding

# 背景色 bgColor

# 背景图片 bgImage

# 背景图形 bgShape

# 位置 align （相对于外部）

# 位置 grivity （相对于内部）

# 标题选中颜色 tabfColor

# 标题背景色 tbgColor

# 布局朝向 ore

# 字体大小 textSize

# 字体颜色 textColor

# 显示窗口

# 设置窗口自动确认

# 多选框控件

# 单选框控件

# 下拉框控件