Laya 1.x UI组件化

目录

• Laya 1.x UI组件化
  • 1. UI组件的理解
  • 2. Laya 1.x UI组件化的几种形式
    • 2.1 匿名组件
    • 2.2 Runtime组件
    • 2.3 嵌套Runtime组件
  • 3. 总结

Laya 1.x UI组件化

author @ixenos

1. UI组件的理解

• prefab: 可复用的UI预制体
• runtime: 以继承或组合的形式控制prefab的逻辑类
• UI组件: prefab + runtime 可复用的带有逻辑的UI预制体

2. Laya 1.x UI组件化的几种形式

2.1 匿名组件

• 简述: 拓展脚本 + 匿名UI部件
• 实现方式
  • 在业务UI中拼接UI部件
  • 编写继承于UI部件容器的逻辑类
    • 通过getChildByName匿名引用子UI部件
  • UI编辑器新建prop脚本, 对应逻辑类的路径
  • prop脚本附着到UI部件上
• 原理
  • 编译后, 节点的 UI部件 替换为 继承于逻辑类的UI部件
• 优点
  • 支持自定义属性设置
• 缺点
  • 不能保证配置和样式的唯一性
  • 再复用时需要到已使用处去拷贝, 跟业务熟悉度相关, 增加复用门槛

2.2 Runtime组件

• 简述: Runtime + prefab UI类
• 实现方式
  • 在prefab目录下拼接UI类
  • 编写继承于该UI类的逻辑类
  • UI类使用时填写Runtime属性为逻辑类全路径名(包含namespace的路径)
• 原理
  • 编译后, 节点的 prefab UI类 替换为 Runtime类
• 优点
  • 保证配置和样式的唯一性
  • 归类完善, 查找快, 直接从Prefab目录下查找
• 缺点
  • 再复用时需要手动拷贝Runtime类名进行填写

2.3 嵌套Runtime组件

• 简述: 拓展脚本/Runtime + prefab UI类内部的匿名UI部件
• 实现方式
  • 在prefab目录下拼接UI类
  • UI类内部持有UI逻辑部件: <拓展脚本 + 匿名UI部件> 或 <Runtime + prefab UI类>
  • 逻辑类通过引用UI组件类内部的UI逻辑部件
• 原理
  • 结合2.1和2.2
• 优点
  • 支持自定义属性设置
  • 再复用时无需关注逻辑类, 业务逻辑可以直接引用 prefab UI 内部的 带有拓展脚本的UI部件
• 缺点
  • 暂无

3. 总结

• Laya 1.x UI组件化的最佳实践: 嵌套Runtime组件