# 开始新建一个界面

## 准备工作

* TA 制作好界面 UI Prefab
* TA 配置好 UI 配置表
* 程序或者策划导出 UI 配置表到工程目录

## 基础内容

### 绑定 UI 节点
每个 UI Prefab 根节点必须有一个 LuaComponent.cs 组件


1. 点击 Bind 按钮，会自动把 ***GameObject 名符合 m_ 开头且带如下组件的控件*** 自动 Bind 到 LuaUIComponent 上

{ typeof(LoveButton), "_btn" },
{ typeof(Image), "_img" },
{ typeof(Button), "_btn" },
{ typeof(Text), "_txt" },
{ typeof(Slider), "_sld" },
{ typeof(Scrollbar), "_slb" },
{ typeof(TextMeshProUGUI),"_tmp" },
{ typeof(Dropdown), "_ddn" },
{ typeof(InputField), "_ipt" },
{ typeof(Animation), "_ani" },
{ typeof(Animator), "_anr" },
{ typeof(LuaUIComponent), "_cmp"},
{ typeof(GridView), "_gvw" },
{ typeof(PageView), "_pvw" },
{ typeof(ScrollRect), "_srt" },
{ typeof(FlexibleView), "_fvw"},

2. 点击 CreateLua 按钮，会根据 Prefab 文件名，在 Assets\Game\Resources\lua\pages 目录下创建一个同名的 lua 文件，生成内容包含（节点，常用事件）
> 比如 LoginPage.prefab -> LoginPage.lua

3. 点击 UpdateLua，一般 TA 增加了组件或节点需要更新 Bind 节点时使用，会根据当前绑定的节点重新生成 Lua 文件的 _OnBind 函数。
***需注意的是，后续新添加的按钮等事件不会自动生成，需要自行添加***

**以下是登录界面生成的 Lua 文件**

local LoginPage = class("LoginPage", gIndex.BasePage)
-- 界面对象创建时调用
function LoginPage:OnNew()
	self:_OnBind( )
	
end

-- 界面显示时调用
function LoginPage:OnShow()
    
end


function LoginPage:OnClick_m_AccountBtn( btn )
	
end

function LoginPage:OnClick_m_CGBtn( btn )
	
end

function LoginPage:OnClick_m_ServerBtn( btn )
	
end

function LoginPage:OnClick_m_StartBtn( btn )
	
end

-- 界面需要 Update 时调用，一般不用，所以默认是注释状态
--[[
function LoginPage:OnUpdate()
end
]]

-- 界面关闭时调用
function LoginPage:OnHide()

end

-- 当前界面跳转时调用，用于保存数据。
-- 当跳转的界面关闭时，会把 OnSave 保存的数据填充到 OnShow 函数里。
--anchorbegin[_OnSave]
function LoginPage:_OnSave()
	BasePage._OnSave( self )
end
--anchorend[_OnSave]

-- 绑定的节点列表
--anchorbegin[_OnBind]
function LoginPage:_OnBind()
	
	local nodes = self._mLuaUIComponent:GetNodes( )
	self._AccountBtn_btn = nodes[10]--Canvas (Environment)/LoginPage/safearea/Btn/m_AccountBtn/
	self._AccountBtn_img = nodes[9]--Canvas (Environment)/LoginPage/safearea/Btn/m_AccountBtn/
	self._CGBtn_btn = nodes[7]--Canvas (Environment)/LoginPage/safearea/Btn/m_CGBtn/
	self._CGBtn_img = nodes[6]--Canvas (Environment)/LoginPage/safearea/Btn/m_CGBtn/
	self._ID_tmp = nodes[0]--Canvas (Environment)/LoginPage/safearea/m_ID/
	self._Num_tmp = nodes[1]--Canvas (Environment)/LoginPage/safearea/m_Num/
	self._ServerBtn_btn = nodes[14]--Canvas (Environment)/LoginPage/safearea/Servers/m_ServerBtn/
	self._ServerName1_tmp = nodes[11]--Canvas (Environment)/LoginPage/safearea/Servers/m_ServerName1/
	self._ServerName2_tmp = nodes[12]--Canvas (Environment)/LoginPage/safearea/Servers/m_ServerName2/
	self._StartBtn_btn = nodes[4]--Canvas (Environment)/LoginPage/safearea/Btn/m_StartBtn/
	self._StartBtn_img = nodes[3]--Canvas (Environment)/LoginPage/safearea/Btn/m_StartBtn/
end

--anchorend

return LoginPage

### 响应事件

运行的时候 LuaUIComponent 会绑定一些常用控件的事件，当事件触发时会主动调用到 Lua 层。

现有如下控件的常用事件：
Button, Dropdown, InputField, Slider, Scrollbar

"OnClick_{button.name}"
"OnValueChanged_{dropdown.name}"
"OnEndEdit_{inputField.name}"
"OnValueChanged_{inputField.name}"
"OnValueChanged_{slider.name}"
"OnValueChanged_{scrollbar.name}"

**后续新添加的按钮得先点击 LuaUIComponent 的 Bind，然后自行在 Lua 里面申明函数**

比如新加个 m_Login 按钮，则在 Page Lua 文件里面声明

function LoginPage:OnClick_m_Login( btn )
	
end

**多个同名按钮回调会回调到一个函数里，根据函数 btn 参数去判断是哪个按钮即可**

### 操作 UI 节点

Page Lua 都继承于 BasePage.lua, BasePage 里面封装了大部分常用操作节点函数，强烈建议先提前浏览一遍 BasePage 熟悉。

## 常用接口

-- 打开界面
BasePage:Head( pagename, ... )
-- 关闭当前界面
BasePage:Back( )
-- 获取多语言文本
BasePage:getLangText(langId, ...)
-- 设置 Text 多语言文本
BasePage:setLangText(uiText, langId, ...)
-- 设置图标
BasePage.LoadSprite(self, uiImage, spriteName, callback)
-- 复制当前节点
BasePage:CopyComponent(component, count)
-- 横向排列节点列表
BasePage:HorizontalComponents(components, align, space)
-- 竖向排列节点列表
BasePage:VerticalComponents(components, align, space)
-- 设置 Text 文本
BasePage:setText( uitext, txt )
-- 设置 node 显隐
BasePage:setNodeVisible(uinode, visible)
-- 监听网络请求
BasePage:pbAttach(pbStructName, callback)
-- 监听消息
BasePage:attach(key, callback)
-- 设置大背景图，有缓存功能
BasePage.LoadBg(self, uiImage, spriteName, callback)
-- 创建 ScorllView
BasePage:CreateList( scrollrect, itemclass )
-- 创建 GridView
BasePage:CreateGrid(scrollrect, itemclass)
-- 创建 FlexibleView
BasePage:CreateFlexibleView(scrollrect, itemclass)
-- Load Spine 文件
BasePage:LoadSpine(uiParent, logicname, roleCfgId, callback)
-- 设置 Graphic 颜色值
BasePage:setColorCfg(uitext, color)
-- 设置文本颜色值
BasePage:setTextColor(uitext, r, g, b, a)
-- 设置 node 锚点
BasePage:SetAnchorPosition(uinode, x, y, z)
-- 设置 node local position
BasePage:SetLocalPosition(uinode, x, y, z)
-- 设置 node rotation
BasePage:SetRotation(uinode, x, y, z, w)
-- 设置节点变灰带虚边
BasePage:SetAllChildGrayAndEdge(uinode, isGray)
-- 设置节点变灰不带虚边
BasePage:SetAllChildGrayNoEdge(uinode, isGray)
-- 格式化成千进制
BasePage:Formatnumberthousands(num)
-- 播放动画
BasePage:PlayAnr(anr, aniName, layer, normalizedTime)
-- 停止缓动
BasePage:directValue( name, curr, callback )
-- 缓动，需要跟 directValue 函数配套使用
BasePage:tweenValue( name, target, last, cycle, callback, tweenFun )
-- directValue 和 tweenValue 的封装
BasePage:SimpleTween( name, start, target, cycle, time, callback )
-- 计时器
BasePage:OnceTimer(name, delay, callback)
-- 计时器
BasePage:CtrlTimer(name, duration, callback)
-- 停止一个计时器
BasePage.StopTimer( self, name )

## 常见问题及注意事项

1. LuaUIComponent Cteate UI Lua 文件时提示：“需要先配置且导出 table_page 表”
**一定是 TA 忘记配置 UI 配置表或者忘记同步配置到工程。**

2. LuaUIComponent Cteate UI Lua 文件时提示：“文件已经存在，需要重新生成请手动删除”
**防止误操作覆盖已经修改的 Lua 文件加的临时文件，有需要重新删除的需求，自行找到文件删除即可重新生成**

3. OnShow 函数在切换语言和重联的情况下，调用 OnShow 函数时不会回传参数列表，需要使用最后记录值

function LoginPage:OnShow(oldshow, x1)
    self.x1 = x1 or self.x1
end