加载cocos studio UI布局文件方法

meinvwudi · 9 月 '22

---ssr/ssrgame/ui/ccexport/normal/MapMove
function ssrCreateExport(filename)   --返回创建的界面
    local ui = require(filename).create()   --创建界面
    if ui.root:getName() == "Layer" then   --如果是层
        ui.root:setContentSize(ssrConstCfg.size)  ---ssrConstCfg.size=ssrDirector:getVisibleSize()  --获取屏幕宽高
        ccui.Helper:doLayout(ui.root)  --刷新布局
    end
    return ui.root  --返回界面
end

meinvwudi · 9 月 '22

cocos studio 导出的布局文件

--------------------------------------------------------------
-- This file was automatically generated by Cocos Studio.
-- Do not make changes to this file.
-- All changes will be lost.
--------------------------------------------------------------

local luaExtend = require "LuaExtend"

-- using for layout to decrease count of local variables
local layout = nil
local localLuaFile = nil
local innerCSD = nil
local innerProject = nil
local localFrame = nil

local Result = {}
------------------------------------------------------------
-- function call description
-- create function caller should provide a function to 
-- get a callback function in creating scene process.
-- the returned callback function will be registered to 
-- the callback event of the control.
-- the function provider is as below :
-- Callback callBackProvider(luaFileName, node, callbackName)
-- parameter description:
-- luaFileName  : a string, lua file name
-- node         : a Node, event source
-- callbackName : a string, callback function name
-- the return value is a callback function
------------------------------------------------------------
function Result.create(callBackProvider)

local result={}
setmetatable(result, luaExtend)

--Create Layer
local Layer=cc.Node:create()
Layer:setName("Layer")
layout = ccui.LayoutComponent:bindLayoutComponent(Layer)
layout:setSize({width = 1136.0000, height = 640.0000})

--Create bg_close
local bg_close = ccui.ImageView:create()
bg_close:ignoreContentAdaptWithSize(false)
bg_close:loadTexture("res/custom/common/bg_main_6.png",0)
bg_close:setTouchEnabled(true);
bg_close:setLayoutComponentEnabled(true)
bg_close:setName("bg_close")
bg_close:setTag(221)
bg_close:setCascadeColorEnabled(true)
bg_close:setCascadeOpacityEnabled(true)
bg_close:setAnchorPoint(0.0000, 0.0000)
bg_close:setOpacity(0)
layout = ccui.LayoutComponent:bindLayoutComponent(bg_close)
layout:setPercentWidthEnabled(true)
layout:setPercentHeightEnabled(true)
layout:setPercentWidth(1.0000)
layout:setPercentHeight(1.0000)
layout:setSize({width = 1136.0000, height = 640.0000})
Layer:addChild(bg_close)

--Create nd_root
local nd_root=cc.Node:create()
nd_root:setName("nd_root")
nd_root:setTag(200)
nd_root:setCascadeColorEnabled(true)
nd_root:setCascadeOpacityEnabled(true)
nd_root:setPosition(568.0000, 320.0000)
layout = ccui.LayoutComponent:bindLayoutComponent(nd_root)
layout:setPositionPercentXEnabled(true)
layout:setPositionPercentYEnabled(true)
layout:setPositionPercentX(0.5000)
layout:setPositionPercentY(0.5000)
layout:setLeftMargin(568.0000)
layout:setRightMargin(568.0000)
layout:setTopMargin(320.0000)
layout:setBottomMargin(320.0000)
Layer:addChild(nd_root)

--Create img_bg
local img_bg = ccui.ImageView:create()
img_bg:ignoreContentAdaptWithSize(false)
img_bg:loadTexture("res/custom/mapmove/00313.png",0)
img_bg:setTouchEnabled(true);
img_bg:setLayoutComponentEnabled(true)
img_bg:setName("img_bg")
img_bg:setTag(201)
img_bg:setCascadeColorEnabled(true)
img_bg:setCascadeOpacityEnabled(true)
img_bg:setPosition(-48.9622, 10.5227)
layout = ccui.LayoutComponent:bindLayoutComponent(img_bg)
layout:setSize({width = 750.0000, height = 450.0000})
layout:setLeftMargin(-423.9622)
layout:setRightMargin(-326.0378)
layout:setTopMargin(-235.5227)
layout:setBottomMargin(-214.4773)
nd_root:addChild(img_bg)

--Create tx_title
local tx_title = ccui.Text:create()
tx_title:ignoreContentAdaptWithSize(true)
tx_title:setTextAreaSize({width = 0, height = 0})
tx_title:setFontName("fonts/font.ttf")
tx_title:setFontSize(20)
tx_title:setString([[地图传送]])
tx_title:enableOutline({r = 0, g = 0, b = 0, a = 255}, 2)
tx_title:setLayoutComponentEnabled(true)
tx_title:setName("tx_title")
tx_title:setTag(202)
tx_title:setCascadeColorEnabled(true)
tx_title:setCascadeOpacityEnabled(true)
tx_title:setAnchorPoint(0.0000, 0.5000)
tx_title:setPosition(405.1876, 338.7670)
tx_title:setTextColor({r = 214, g = 198, b = 173})
layout = ccui.LayoutComponent:bindLayoutComponent(tx_title)
layout:setPositionPercentX(0.5403)
layout:setPositionPercentY(0.7528)
layout:setPercentWidth(0.1133)
layout:setPercentHeight(0.0667)
layout:setSize({width = 85.0000, height = 30.0000})
layout:setLeftMargin(405.1876)
layout:setRightMargin(259.8124)
layout:setTopMargin(96.2330)
layout:setBottomMargin(323.7670)
img_bg:addChild(tx_title)

--Create btn_close
local btn_close = ccui.Button:create()
btn_close:ignoreContentAdaptWithSize(false)
btn_close:loadTextureNormal("res/custom/common/btn_close_1_1.png",0)
btn_close:loadTexturePressed("res/custom/common/btn_close_1_2.png",0)
btn_close:setTitleFontSize(14)
btn_close:setTitleColor({r = 65, g = 65, b = 70})
btn_close:setScale9Enabled(true)
btn_close:setCapInsets({x = 8, y = 11, width = 10, height = 20})
btn_close:setLayoutComponentEnabled(true)
btn_close:setName("btn_close")
btn_close:setTag(203)
btn_close:setCascadeColorEnabled(true)
btn_close:setCascadeOpacityEnabled(true)
btn_close:setPosition(703.2308, 313.6957)
layout = ccui.LayoutComponent:bindLayoutComponent(btn_close)
layout:setPositionPercentX(0.9376)
layout:setPositionPercentY(0.6971)
layout:setPercentWidth(0.0347)
layout:setPercentHeight(0.0933)
layout:setSize({width = 26.0000, height = 42.0000})
layout:setLeftMargin(690.2308)
layout:setRightMargin(33.7692)
layout:setTopMargin(115.3043)
layout:setBottomMargin(292.6957)
img_bg:addChild(btn_close)

--Create bg_di
local bg_di = ccui.Layout:create()
bg_di:ignoreContentAdaptWithSize(false)
bg_di:setClippingEnabled(false)
bg_di:setBackGroundColorType(1)
bg_di:setBackGroundColor({r = 150, g = 200, b = 255})
bg_di:setBackGroundColorOpacity(0)
bg_di:setTouchEnabled(true);
bg_di:setLayoutComponentEnabled(true)
bg_di:setName("bg_di")
bg_di:setTag(1470)
bg_di:setCascadeColorEnabled(true)
bg_di:setCascadeOpacityEnabled(true)
bg_di:setPosition(246.7333, 56.8764)
layout = ccui.LayoutComponent:bindLayoutComponent(bg_di)
layout:setPositionPercentX(0.3290)
layout:setPositionPercentY(0.1264)
layout:setPercentWidth(0.0667)
layout:setPercentHeight(0.1111)
layout:setSize({width = 50.0000, height = 50.0000})
layout:setLeftMargin(246.7333)
layout:setRightMargin(453.2667)
layout:setTopMargin(343.1236)
layout:setBottomMargin(56.8764)
img_bg:addChild(bg_di)

--Create tx_mapname
local tx_mapname = ccui.Text:create()
tx_mapname:ignoreContentAdaptWithSize(true)
tx_mapname:setTextAreaSize({width = 0, height = 0})
tx_mapname:setFontName("fonts/font.ttf")
tx_mapname:setFontSize(18)
tx_mapname:setString([[神龙秘境一层]])
tx_mapname:setLayoutComponentEnabled(true)
tx_mapname:setName("tx_mapname")
tx_mapname:setTag(210)
tx_mapname:setCascadeColorEnabled(true)
tx_mapname:setCascadeOpacityEnabled(true)
tx_mapname:setVisible(false)
tx_mapname:setPosition(672.3927, 392.9907)
tx_mapname:setTextColor({r = 192, g = 192, b = 192})
layout = ccui.LayoutComponent:bindLayoutComponent(tx_mapname)
layout:setPositionPercentX(13.4479)
layout:setPositionPercentY(7.8598)
layout:setPercentWidth(2.2000)
layout:setPercentHeight(0.4800)
layout:setSize({width = 110.0000, height = 24.0000})
layout:setLeftMargin(617.3927)
layout:setRightMargin(-677.3927)
layout:setTopMargin(-354.9907)
layout:setBottomMargin(380.9907)
bg_di:addChild(tx_mapname)

--Create Image_16
local Image_16 = ccui.ImageView:create()
Image_16:ignoreContentAdaptWithSize(false)
Image_16:loadTexture("res/custom/mapmove/mapmove1.png",0)
Image_16:setLayoutComponentEnabled(true)
Image_16:setName("Image_16")
Image_16:setTag(211)
Image_16:setCascadeColorEnabled(true)
Image_16:setCascadeOpacityEnabled(true)
Image_16:setVisible(false)
Image_16:setPosition(671.4056, 379.1996)
layout = ccui.LayoutComponent:bindLayoutComponent(Image_16)
layout:setPositionPercentX(13.4281)
layout:setPositionPercentY(7.5840)
layout:setPercentWidth(4.6000)
layout:setPercentHeight(0.9600)
layout:setSize({width = 230.0000, height = 48.0000})
layout:setLeftMargin(556.4056)
layout:setRightMargin(-736.4056)
layout:setTopMargin(-353.1996)
layout:setBottomMargin(355.1996)
bg_di:addChild(Image_16)

--Create tx_xiaohao
local tx_xiaohao = ccui.Text:create()
tx_xiaohao:ignoreContentAdaptWithSize(true)
tx_xiaohao:setTextAreaSize({width = 0, height = 0})
tx_xiaohao:setFontName("fonts/font.ttf")
tx_xiaohao:setFontSize(18)
tx_xiaohao:setString([[元宝:1000]])
tx_xiaohao:setLayoutComponentEnabled(true)
tx_xiaohao:setName("tx_xiaohao")
tx_xiaohao:setTag(215)
tx_xiaohao:setCascadeColorEnabled(true)
tx_xiaohao:setCascadeOpacityEnabled(true)
tx_xiaohao:setAnchorPoint(0.0000, 0.4985)
tx_xiaohao:setPosition(315.2224, 49.1411)
tx_xiaohao:setTextColor({r = 255, g = 255, b = 0})
layout = ccui.LayoutComponent:bindLayoutComponent(tx_xiaohao)
layout:setPositionPercentX(6.3044)
layout:setPositionPercentY(0.9828)
layout:setPercentWidth(1.6800)
layout:setPercentHeight(0.4800)
layout:setSize({width = 84.0000, height = 24.0000})
layout:setLeftMargin(315.2224)
layout:setRightMargin(-349.2224)
layout:setTopMargin(-11.1771)
layout:setBottomMargin(37.1771)
bg_di:addChild(tx_xiaohao)

--Create SlV_jieshao
local SlV_jieshao = ccui.Layout:create()
SlV_jieshao:ignoreContentAdaptWithSize(false)
SlV_jieshao:setClippingEnabled(false)
SlV_jieshao:setBackGroundColorType(1)
SlV_jieshao:setBackGroundColor({r = 150, g = 200, b = 255})
SlV_jieshao:setBackGroundColorOpacity(0)
SlV_jieshao:setTouchEnabled(true);
SlV_jieshao:setLayoutComponentEnabled(true)
SlV_jieshao:setName("SlV_jieshao")
SlV_jieshao:setTag(112)
SlV_jieshao:setCascadeColorEnabled(true)
SlV_jieshao:setCascadeOpacityEnabled(true)
SlV_jieshao:setAnchorPoint(0.0000, 1.0000)
SlV_jieshao:setPosition(68.6165, 195.5948)
layout = ccui.LayoutComponent:bindLayoutComponent(SlV_jieshao)
layout:setPositionPercentX(1.3723)
layout:setPositionPercentY(3.9119)
layout:setPercentWidth(6.0000)
layout:setPercentHeight(0.4000)
layout:setSize({width = 300.0000, height = 20.0000})
layout:setLeftMargin(68.6165)
layout:setRightMargin(-318.6165)
layout:setTopMargin(-145.5948)
layout:setBottomMargin(175.5948)
bg_di:addChild(SlV_jieshao)

--Create btn_chuanshong
local btn_chuanshong = ccui.Button:create()
btn_chuanshong:ignoreContentAdaptWithSize(false)
btn_chuanshong:loadTextureNormal("res/custom/mapmove/00014.png",0)
btn_chuanshong:loadTexturePressed("res/custom/mapmove/00015.png",0)
btn_chuanshong:loadTextureDisabled("Default/Button_Disable.png",0)
btn_chuanshong:setTitleFontSize(14)
btn_chuanshong:setTitleColor({r = 65, g = 65, b = 70})
btn_chuanshong:setScale9Enabled(true)
btn_chuanshong:setCapInsets({x = 15, y = 11, width = 78, height = 8})
btn_chuanshong:setLayoutComponentEnabled(true)
btn_chuanshong:setName("btn_chuanshong")
btn_chuanshong:setTag(216)
btn_chuanshong:setCascadeColorEnabled(true)
btn_chuanshong:setCascadeOpacityEnabled(true)
btn_chuanshong:setPosition(355.7712, 7.8807)
layout = ccui.LayoutComponent:bindLayoutComponent(btn_chuanshong)
layout:setPositionPercentX(7.1154)
layout:setPositionPercentY(0.1576)
layout:setPercentWidth(2.1600)
layout:setPercentHeight(0.6000)
layout:setSize({width = 108.0000, height = 30.0000})
layout:setLeftMargin(301.7712)
layout:setRightMargin(-359.7712)
layout:setTopMargin(27.1193)
layout:setBottomMargin(-7.1193)
bg_di:addChild(btn_chuanshong)

--Create tx_btn_jieshao
local tx_btn_jieshao = ccui.Text:create()
tx_btn_jieshao:ignoreContentAdaptWithSize(true)
tx_btn_jieshao:setTextAreaSize({width = 0, height = 0})
tx_btn_jieshao:setFontName("fonts/font.ttf")
tx_btn_jieshao:setFontSize(18)
tx_btn_jieshao:setString([[]])
tx_btn_jieshao:setLayoutComponentEnabled(true)
tx_btn_jieshao:setName("tx_btn_jieshao")
tx_btn_jieshao:setTag(218)
tx_btn_jieshao:setCascadeColorEnabled(true)
tx_btn_jieshao:setCascadeOpacityEnabled(true)
tx_btn_jieshao:setPosition(62.6871, 21.0033)
tx_btn_jieshao:setTextColor({r = 192, g = 192, b = 192})
layout = ccui.LayoutComponent:bindLayoutComponent(tx_btn_jieshao)
layout:setPositionPercentX(0.5804)
layout:setPositionPercentY(0.7001)
layout:setLeftMargin(62.6871)
layout:setRightMargin(45.3129)
layout:setTopMargin(8.9967)
layout:setBottomMargin(21.0033)
btn_chuanshong:addChild(tx_btn_jieshao)

--Create lv_item
local lv_item = ccui.ListView:create()
lv_item:setDirection(2)
lv_item:setGravity(5)
lv_item:ignoreContentAdaptWithSize(false)
lv_item:setClippingEnabled(true)
lv_item:setBackGroundColorOpacity(0)
lv_item:setLayoutComponentEnabled(true)
lv_item:setName("lv_item")
lv_item:setTag(219)
lv_item:setCascadeColorEnabled(true)
lv_item:setCascadeOpacityEnabled(true)
lv_item:setAnchorPoint(0.0000, 0.5000)
lv_item:setPosition(19.8129, 100.8655)
layout = ccui.LayoutComponent:bindLayoutComponent(lv_item)
layout:setPositionPercentX(0.3963)
layout:setPositionPercentY(2.0173)
layout:setPercentWidth(8.0000)
layout:setPercentHeight(1.3000)
layout:setSize({width = 400.0000, height = 65.0000})
layout:setLeftMargin(19.8129)
layout:setRightMargin(-369.8129)
layout:setTopMargin(-83.3655)
layout:setBottomMargin(68.3655)
bg_di:addChild(lv_item)

--Create Img_yulan
local Img_yulan = ccui.ImageView:create()
Img_yulan:ignoreContentAdaptWithSize(false)
Img_yulan:loadTexture("res/custom/mapmove/mapmove4.png",0)
Img_yulan:setLayoutComponentEnabled(true)
Img_yulan:setName("Img_yulan")
Img_yulan:setTag(220)
Img_yulan:setCascadeColorEnabled(true)
Img_yulan:setCascadeOpacityEnabled(true)
Img_yulan:setVisible(false)
Img_yulan:setPosition(567.2823, 147.8213)
layout = ccui.LayoutComponent:bindLayoutComponent(Img_yulan)
layout:setPositionPercentX(11.3456)
layout:setPositionPercentY(2.9564)
layout:setPercentWidth(1.9800)
layout:setPercentHeight(0.4600)
layout:setSize({width = 99.0000, height = 23.0000})
layout:setLeftMargin(517.7823)
layout:setRightMargin(-566.7823)
layout:setTopMargin(-109.3213)
layout:setBottomMargin(136.3213)
bg_di:addChild(Img_yulan)

--Create Animation
result['animation'] = ccs.ActionTimeline:create()
  
result['animation']:setDuration(0)
result['animation']:setTimeSpeed(1.0000)
--Create Animation List

result['root'] = Layer
return result;
end

return Result

meinvwudi · 9 月 '22

meinvwudi Result.create

其中创建了UI组件,并返回了layer

result['root'] = Layer
return result;

meinvwudi · 9 月 '22

返回界面后,进行UI格式化,绑定在屏幕上面显示,并绑定事件

function MapMoveUI:initUI(data)  
    self.root = ssrCreateExport(self.obj.ssrobjcfg.EXPORT_PATH) --创建UI层
    self.ui = ssr.UIQuickChild(self.root) --ui快速化
    ssrAddTouchEventListener({    
        widget = self.ui.img_bg,
        callback = function ()
            --ssrPrint("我是防点击穿透")
        end,
        scale = 1,
    })
    
    ssrAddTouchEventListener({     
        widget = self.ui.bg_close,
        callback = function ()
            --ssrPrint("我是关闭背景")
            ssrUIManager:CLOSE(ssrObjCfg.MapMove)
        end,
        scale = 1,
    })
    ssrAddTouchEventListener({     
        widget = self.ui.btn_close,
        callback = function ()
            ssrUIManager:CLOSE(ssrObjCfg.MapMove)
        end,
        scale = 1,
    })
    
    ssrAddTouchEventListener({        
        widget = self.ui.btn_chuanshong,
        callback = function ()
            self:RequestZS()
        end,
        scale = 1,
    })

    self:updateUI()

    self:addChild(self.root)
end

meinvwudi · 9 月 '22

总结:加载布局文件 ,拿到节点.绑定事件

加载cocos studio UI布局文件方法

Mmeinvwudi

Mmeinvwudi

Mmeinvwudi

Mmeinvwudi

Mmeinvwudi