UI设计详解
本文主要讲解通过手写代码设计UI界面过程，会对标题，状态栏，连接控制，数据发送和数据接收这几个界面分别讲解。
# 界面划分界
界面设计主要有标题，状态栏，连接控制，数据发送和数据接收几个部分组成。
# 界面设计
## lvgl 初始化
lvgl 初始化是在main.lua脚本中实现的，代码如下：
```lua
lvgl.init(function()
end, tp.input)
```
## 加载样式文件，启动状态栏与初始容器
```lua
require "stytle"
makeHead(_G.body) -- 启动状态栏
makeBox(_G.body) -- 主体内容初始容器
```
## 加载各个界面
```lua
require "fragment_home" --控制设置，数据收发容器初始化
require "fragment_systemSet" --连接控制设置页面
require "fragment_systemSocket" --数据发送接收页面
require "fragment_fontSet" --字体设置页面
fragment_home.init(_G.BOX) --控制设置，数据收发容器初始化
```
## 状态栏界面
状态栏界面是在mian.lua脚本中实现的，有4部分组成：标题标签，时间标签，设置按钮，4G 图标
### 标题标签
```lua
--标题标签
local sysname=lvgl.label_create(headCont, nil)
if _G.Font=="vector"then
lvgl.obj_set_style_local_text_font(sysname, lvgl.LABEL_PART_MAIN, lvgl.STATE_DEFAULT, font36)
end
lvgl.label_set_recolor(sysname, true)
lvgl.label_set_text(sysname,"#FFFFFF Socket测试系统")
lvgl.obj_align(sysname, headCont, lvgl.ALIGN_IN_LEFT_MID, 35, 0)
```
### 时间标签
```lua
--时间标签
local dateLabel=lvgl.label_create(statusLabelCont, nil)
if _G.Font=="vector"then
lvgl.obj_set_style_local_text_font(dateLabel, lvgl.LABEL_PART_MAIN, lvgl.STATE_DEFAULT, font24)
end
lvgl.label_set_recolor(dateLabel, true)
lvgl.label_set_text(dateLabel,"")
lvgl.obj_align(dateLabel,statusLabelCont, lvgl.ALIGN_IN_LEFT_MID,20, 0)
sys.subscribe("SYSTEM_CHANGE_TIME",function(date)
lvgl.label_set_text(dateLabel,"#FFFFFF "..date)
end)
```
### 设置按钮
```lua
--设置按钮
local settingBtn=lvgl.cont_create(statusLabelCont, nil)
lvgl.obj_set_size(settingBtn, 60,32)
lvgl.obj_add_style(settingBtn, lvgl.CONT_PART_MAIN, style.style_msgBg)
lvgl.cont_set_layout(settingBtn,lvgl.LAYOUT_CENTER)
if _G.Font=="vector"then
lvgl.obj_align(settingBtn,statusLabelCont, lvgl.ALIGN_IN_LEFT_MID,282, 0)
else
lvgl.obj_align(settingBtn,statusLabelCont, lvgl.ALIGN_IN_LEFT_MID,232, 0)
end
local settingLabel=lvgl.label_create(settingBtn, nil)
lvgl.label_set_recolor(settingLabel, true)
if _G.Font=="vector"then
lvgl.obj_set_style_local_text_font(settingLabel, lvgl.LABEL_PART_MAIN, lvgl.STATE_DEFAULT, font24)
end
lvgl.label_set_text(settingLabel, "#217bda 设置")
local function settingHandler(obj, event)
if event == lvgl.EVENT_CLICKED then
_G.BEEP()
-- print("设置按钮按下")
if not _G.fragmentFontSetting then
fragment_fontSet.init(_G.BOX)
lvgl.label_set_text(settingLabel, "#217bda 返回")
_G.fragmentFontSetting = true
else
--fragment_fontSet.init(unInit)
fragment_home.init(_G.BOX)
lvgl.label_set_text(settingLabel, "#217bda 设置")
_G.fragmentFontSetting = false
end
end
end
lvgl.obj_set_event_cb(settingBtn,settingHandler)
```
### 4G图标
```lua
--4G 图标
local signImg=lvgl.img_create(statusLabelCont, nil)
lvgl.img_set_src(signImg,"/lua/nosin_icon.png")
lvgl.obj_align(signImg,statusLabelCont, lvgl.ALIGN_IN_RIGHT_MID, -20, 0)
sys.subscribe("RSSI_CHANGE",function(img)
lvgl.img_set_src(signImg,img)
end)
```
## 连接控制设置界面
连接控制设置界面是在fragment_systemSet.lua中实现，有连接控制标签，协议下来框，地址输入文本，端口输入文本，连接按钮5部分组成。
### 连接控制标签
```lua
function makeLable(text,x,y)
local label=lvgl.label_create(sysCont, nil)
if _G.Font=="vector"then
lvgl.obj_set_style_local_text_font(label, lvgl.LABEL_PART_MAIN, lvgl.STATE_DEFAULT, font24)
end
lvgl.label_set_text(label, text)
lvgl.obj_align(label, sysCont, lvgl.ALIGN_IN_LEFT_MID, x, y)
end
makeLable("连接控制",0,0)
```
### 协议下来框
```lua
event_handler = function(obj, event)
if (event == lvgl.EVENT_VALUE_CHANGED) then
local opt = lvgl.dropdown_get_selected(obj)
log.info("Option:", lvgl.dropdown_get_selected(obj))
_G.BEEP()
if opt == 1 then
_G.ipProtocol = "udp"
else
_G.ipProtocol = "tcp"
end
end
end
function makeDropdown()
local itemCont=lvgl.cont_create(setCont, nil)
lvgl.obj_set_click(itemCont,false)
lvgl.obj_set_size(itemCont, 210,40)
lvgl.obj_add_style(itemCont, lvgl.CONT_PART_MAIN, style.style_divBox)
local label=lvgl.label_create(itemCont, nil)
if _G.Font=="vector"then
lvgl.obj_set_style_local_text_font(label, lvgl.LABEL_PART_MAIN, lvgl.STATE_DEFAULT, font24)
end
lvgl.label_set_text(label, "协议:")
lvgl.obj_align(label, itemCont, lvgl.ALIGN_IN_LEFT_MID, 0, 0)
local dd = lvgl.dropdown_create(itemCont, nil)
if _G.Font=="vector"then
lvgl.obj_set_style_local_text_font(dd, lvgl.DROPDOWN_PART_SELECTED,lvgl.STATE_DEFAULT, font24)
lvgl.obj_set_style_local_text_font(dd, lvgl.DROPDOWN_PART_LIST,lvgl.STATE_DEFAULT, font24)
lvgl.obj_set_style_local_text_font(dd, lvgl.DROPDOWN_PART_MAIN,lvgl.STATE_DEFAULT, font24)
end
lvgl.dropdown_set_options(dd, [[TCP
UDP]])
lvgl.obj_set_event_cb(dd, event_handler)
lvgl.obj_set_size(dd, 150,40)
lvgl.obj_align(dd, itemCont, lvgl.ALIGN_IN_LEFT_MID, 60, 0)
end
```
### 地址输入文本
```lua
--地址输入框
local itemCont=lvgl.cont_create(setCont, nil)
lvgl.obj_set_click(itemCont,false)
lvgl.obj_set_size(itemCont, 210,80)
lvgl.obj_add_style(itemCont, lvgl.CONT_PART_MAIN, style.style_divBox)
lvgl.obj_align(itemCont, setCont, lvgl.ALIGN_CENTER, 0, 0)
local label=lvgl.label_create(itemCont, nil)
if _G.Font=="vector"then
lvgl.obj_set_style_local_text_font(label, lvgl.LABEL_PART_MAIN, lvgl.STATE_DEFAULT, font24)
end
lvgl.label_set_text(label, "地址:")
lvgl.obj_align(label, itemCont, lvgl.ALIGN_IN_LEFT_MID, 0, 0)
makeLimitBox(itemCont,"addr",_G.ipAddress)
```
### 端口输入文本
```lua
--端口输入框
local itemCont=lvgl.cont_create(setCont, nil)
lvgl.obj_set_click(itemCont,false)
lvgl.obj_set_size(itemCont, 210,80)
lvgl.obj_add_style(itemCont, lvgl.CONT_PART_MAIN, style.style_divBox)
lvgl.obj_align(itemCont, setCont, lvgl.ALIGN_IN_BOTTOM_MID, 0, 0)
local label=lvgl.label_create(itemCont, nil)
if _G.Font=="vector"then
lvgl.obj_set_style_local_text_font(label, lvgl.LABEL_PART_MAIN, lvgl.STATE_DEFAULT, font24)
end
lvgl.label_set_text(label, "端口:")
lvgl.obj_align(label, itemCont, lvgl.ALIGN_IN_LEFT_MID, 0, 0)
makeLimitBox(itemCont,"prot",_G.ipPort)
```
### 连接按钮
```lua
event_handler_btn = function(obj, event)
if event == lvgl.EVENT_CLICKED then
_G.BEEP()
log.info("UI makeQRbtn",_G.fragmentConnect)
if _G.fragmentConnect then
lvgl.label_set_text(_G.connLabel, "#FFFFFF 断开连接")
_G.fragmentConnect = false
sys.publish("CONNECT_IND")
else
lvgl.label_set_text(_G.connLabel, "#FFFFFF 连接")
_G.fragmentConnect=true
sys.publish("SOCKET_DISCONNECT_IND")
socketOutMsg.sndTest("disconnect")
end
end
end
function makeConnBtn()
local btn = lvgl.cont_create(sysCont, nil)
lvgl.obj_set_size(btn, 200, 50)
lvgl.obj_add_style(btn, lvgl.BTN_PART_MAIN, style.style_QRbtnBg)
lvgl.obj_set_event_cb(btn, event_handler_btn)
_G.connLabel=lvgl.label_create(btn, nil)
if _G.Font=="vector"then
lvgl.obj_set_style_local_text_font(_G.connLabel, lvgl.LABEL_PART_MAIN, lvgl.STATE_DEFAULT, font24)
end
lvgl.label_set_recolor(_G.connLabel, true)
lvgl.label_set_text(_G.connLabel, "#FFFFFE 连接")
lvgl.obj_align(_G.connLabel, btn, lvgl.ALIGN_CENTER, 0, 0)
end
```
## 数据发送界面
数据发送界面是在fragment_systemSocket.lua脚本中实现的，有发送数据标签，发送数据输入框，发送按钮3部分组成。
### 送数据标签
```lua
function makeLable(text,x,y)
local label=lvgl.label_create(sysCont, nil)
if _G.Font=="vector"then
lvgl.obj_set_style_local_text_font(label, lvgl.LABEL_PART_MAIN, lvgl.STATE_DEFAULT, font24)
end
lvgl.label_set_text(label, text)
lvgl.obj_align(label, sysCont, lvgl.ALIGN_IN_TOP_MID, x, y)
end
makeLable("发送数据",0,0)
```
### 发送数据输入框
```lua
--创建limit输入框
local function makeLimitBox(cont,alignObj,alignX,alignY,p1,p2)
local limitCont=lvgl.cont_create(cont, nil)
lvgl.obj_set_click(limitCont,false)
lvgl.obj_set_size(limitCont, 202,280)
lvgl.obj_add_style(limitCont, lvgl.CONT_PART_MAIN, style.style_divBox)
lvgl.obj_align(limitCont,cont, lvgl.ALIGN_IN_TOP_MID, 5, 2)
--输入框回调
local function paraChange(obj)
sendData = lvgl.textarea_get_text(obj)
log.info("UI sendData",sendData)
end
local inputLeft=inputBox.init(limitCont,200,278,lvgl.ALIGN_CENTER,5, 0,p1,paraChange)
return limitCont,inputLeft,inputRight
end
--发送内容输入框
local itemCont=lvgl.cont_create(sysCont, nil)
lvgl.obj_set_click(itemCont,false)
lvgl.obj_set_size(itemCont, 210,260)
lvgl.obj_add_style(itemCont, lvgl.CONT_PART_MAIN, style.style_divBox)
makeLimitBox(itemCont,sysCont,10,0,"socket send test","09")
```
### 发送按钮
```lua
event_handler_send = function(obj, event)
if event == lvgl.EVENT_CLICKED then
_G.BEEP()
socketOutMsg.sndTest(sendData)
log.info("UI makeSendBtn",_G.fragmentSend)
if _G.fragmentSend then
_G.fragmentSend = false
else
_G.fragmentSend=true
end
end
end
function makeSendBtn()
local btn = lvgl.cont_create(sysCont, nil)
lvgl.obj_set_size(btn, 200, 50)
lvgl.obj_add_style(btn, lvgl.BTN_PART_MAIN, style.style_QRbtnBg)
lvgl.obj_set_event_cb(btn, event_handler_send)
local Label=lvgl.label_create(btn, nil)
if _G.Font=="vector"then
lvgl.obj_set_style_local_text_font(Label, lvgl.LABEL_PART_MAIN, lvgl.STATE_DEFAULT, font24)
end
lvgl.label_set_recolor(Label, true)
lvgl.label_set_text(Label, "#FFFFFE 发送")
lvgl.obj_align(Label, btn, lvgl.ALIGN_CENTER, 0, 0)
end
```
## 数据接收界面
数据发送界面是在fragment_systemSocket.lua脚本中实现的，有数据接收标签，数据接收内容标签，数据接收字节统计标签3部分组成。
### 数据接收标签
```lua
--数据接收
local label=lvgl.label_create(recvCont, nil)
if _G.Font=="vector"then
lvgl.obj_set_style_local_text_font(label, lvgl.LABEL_PART_MAIN, lvgl.STATE_DEFAULT, font24)
end
lvgl.label_set_text(label, "数据接收") lvgl.obj_align(label, recvCont, lvgl.ALIGN_IN_TOP_MID, 0, 0)
```
### 数据接收内容标签
```lua
local itemCont=lvgl.cont_create(recvCont, nil)
lvgl.obj_set_click(itemCont,false)
lvgl.obj_set_size(itemCont, 210,260)
lvgl.obj_add_style(itemCont, lvgl.CONT_PART_MAIN, style.style_msgBg)
RecvLabel=lvgl.label_create(itemCont, nil)
if _G.Font=="vector"then
lvgl.obj_set_style_local_text_font(RecvLabel, lvgl.LABEL_PART_MAIN, lvgl.STATE_DEFAULT, font24)
end
lvgl.label_set_long_mode(RecvLabel,lvgl.LABEL_LONG_BREAK)
lvgl.obj_set_width(RecvLabel, 200)
lvgl.label_set_text(RecvLabel, _G.recvData)
lvgl.obj_align(RecvLabel, itemCont, lvgl.ALIGN_IN_TOP_LEFT, 0, 0)
```
### 数据接收字节统计标签
```lua
local btn = lvgl.cont_create(recvCont, nil)
lvgl.obj_set_size(btn, 200, 50)
lvgl.obj_add_style(btn, lvgl.BTN_PART_MAIN, style.style_QRbtnBg)
--lvgl.obj_set_event_cb(btn, event_handler_send)
RecvLenLabel=lvgl.label_create(btn, nil)
if _G.Font=="vector"then
lvgl.obj_set_style_local_text_font(RecvLenLabel, lvgl.LABEL_PART_MAIN, lvgl.STATE_DEFAULT, font24)
end
lvgl.label_set_recolor(RecvLenLabel, true)
lvgl.label_set_text(RecvLenLabel, "#FFFFFE 已接收"..#_G.recvData.."个字节")
lvgl.obj_align(RecvLenLabel, btn, lvgl.ALIGN_CENTER, 0, 0)
```
# 其它参考资料
[UI开发指南](https://easydoc.net/doc/50207163/vRKgmDaY/lMLY2Rha)