整理UI文档:创建UI文件夹,更新README
This commit is contained in:
154
03_核心功能/UI/UI开发指南.md
Normal file
154
03_核心功能/UI/UI开发指南.md
Normal file
@@ -0,0 +1,154 @@
|
||||
# StrayFog 框架 UI开发指南
|
||||
|
||||
## 一、窗口开发
|
||||
|
||||
### 1.1 创建模板
|
||||
```csharp
|
||||
[HFAssetBundlePath(enHFLanguageRootFolder.ASSETS_GAME_GAMEHFRESOURCE, "UIWindows/MyWindow/MyWindow.prefab")]
|
||||
[HFUIWindowLayer(enHFUICanvasLayer.UIWindow, enHFUIWindowLayer.Dynamic)]
|
||||
public class MyWindow : AbsHFUIWindow
|
||||
{
|
||||
private SFUI_Button BtnClose;
|
||||
|
||||
protected override void OnRunAwake()
|
||||
{
|
||||
base.OnRunAwake();
|
||||
BtnClose = FindUICtrlByName<SFUI_Button>("BtnClose");
|
||||
BtnClose.OnAddClickListener += OnBtnClose;
|
||||
}
|
||||
|
||||
protected override void OnOpen(Action _onOpenComplete)
|
||||
{
|
||||
base.OnOpen(_onOpenComplete);
|
||||
RefreshUI();
|
||||
}
|
||||
|
||||
private void OnBtnClose(GameObject go) => CloseWindow();
|
||||
private void RefreshUI() { }
|
||||
}
|
||||
```
|
||||
|
||||
### 1.2 生命周期
|
||||
|
||||
| 方法 | 调用时机 | 推荐操作 |
|
||||
|-----|---------|---------|
|
||||
| `OnRunAwake` | 创建时一次 | 绑定UI事件 |
|
||||
| `OnOpen` | 每次打开 | 注册TC事件、刷新数据 |
|
||||
| `OnClose` | 每次关闭 | 取消TC事件 |
|
||||
|
||||
### 1.3 窗口操作
|
||||
```csharp
|
||||
// 打开
|
||||
HFFunCatalogue.UIManager.OpenWindow<MyWindow>();
|
||||
// 关闭
|
||||
HFFunCatalogue.UIManager.CloseWindow<MyWindow>();
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 二、事件绑定
|
||||
|
||||
| 事件类型 | 绑定位置 | 是否需要 `-=` |
|
||||
|---------|---------|--------------|
|
||||
| UI按钮/拖拽 | `OnRunAwake` | 不需要 |
|
||||
| 全局TC事件 | `OnOpen`/`OnClose` | 需要 |
|
||||
|
||||
---
|
||||
|
||||
## 三、常用组件
|
||||
|
||||
### 3.1 按钮
|
||||
```csharp
|
||||
SFUI_Button btn = GetComponent<SFUI_Button>();
|
||||
btn.OnAddClickListener += OnBtnClick;
|
||||
btn.SetSelfGray(true);
|
||||
```
|
||||
|
||||
### 3.2 文本
|
||||
```csharp
|
||||
SFUI_TextMeshProUGUI txt = GetComponent<SFUI_TextMeshProUGUI>();
|
||||
txt.text = "Hello";
|
||||
```
|
||||
|
||||
### 3.3 图片
|
||||
```csharp
|
||||
SFUI_Image img = GetComponent<SFUI_Image>();
|
||||
img.HFSetSprite(/* atlasName */, "Icon_Player", /* languageRoot */);
|
||||
```
|
||||
|
||||
### 3.4 滚动列表(核心)
|
||||
```csharp
|
||||
SFUI_ScrollRect scroll = GetComponent<SFUI_ScrollRect>();
|
||||
scroll.BindEvent(
|
||||
() => itemList.Count,
|
||||
(idx) => itemPrefab.gameObject,
|
||||
OnUpdateItem,
|
||||
(item) => item.gameObject.HFGetOrAddSimulateBehaviour<ItemSlot>()
|
||||
);
|
||||
scroll.ShowView();
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 四、对象池
|
||||
|
||||
| 场景 | 推荐方式 |
|
||||
|-----|---------|
|
||||
| 滚动列表 | `SFUI_ScrollRect.BindEvent`(内置池) |
|
||||
| 固定栏(装备/技能) | `HFSimulateBehaviourPool<T>` |
|
||||
|
||||
---
|
||||
|
||||
## 五、子组件
|
||||
|
||||
### 5.1 多态基类
|
||||
```csharp
|
||||
public abstract class AbsListItem<T> : AbsHFUIWindow
|
||||
{
|
||||
protected SFUI_Button m_BtnItem;
|
||||
protected Action<T> m_OnSelect;
|
||||
|
||||
protected override void OnRunAwake()
|
||||
{
|
||||
base.OnRunAwake();
|
||||
m_BtnItem = gameObject.GetComponent<SFUI_Button>();
|
||||
m_BtnItem.OnAddClickListener += OnBtnClick;
|
||||
}
|
||||
|
||||
public virtual void SetData(T data, Action<T> onSelect = null)
|
||||
{
|
||||
m_OnSelect = onSelect;
|
||||
OnDataChanged(data);
|
||||
}
|
||||
|
||||
protected abstract void OnDataChanged(T data);
|
||||
private void OnBtnClick(GameObject go) => m_OnSelect?.Invoke(m_CurrentData);
|
||||
}
|
||||
|
||||
// 子类
|
||||
public class CardItem : AbsListItem<CardData>
|
||||
{
|
||||
protected override void OnDataChanged(CardData data) { }
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 六、开发规范
|
||||
|
||||
### 6.1 文件路径
|
||||
| 类型 | 路径 |
|
||||
|-----|------|
|
||||
| 脚本 | `Assets/Game/GameHFScripte/GameFunction/UIWindows/{Name}/` |
|
||||
| 预制体 | `Assets/Game/GameHFResource/CN/UIWindows/{Name}/` |
|
||||
| 图片 | `Assets/Game/GameHFResource/CN/SpriteAtlas/{Name}/` |
|
||||
|
||||
### 6.2 性能优化
|
||||
- 使用对象池复用UI元素
|
||||
- 将图标打包到SpriteAtlas
|
||||
- 滚动列表用 `SFUI_ScrollRect.BindEvent`
|
||||
|
||||
---
|
||||
|
||||
**版本**: v1.0
|
||||
**适用**: StrayFog框架开发人员
|
||||
Reference in New Issue
Block a user