Unity MVC设计模式与UI背包界面制作

Unity MVC设计模式与UI背包界面制作

MVC设计模式非常适合UI的架构，UI界面相当于View，UI转换控制相当于Controller，UI上面的数据变换相当于Model。MVC设计模式在软件设计中无处不在，结合其他设计模式或设计思想，同一设计方案中，对于更好的MVC模式的追求几乎是没有尽头的。SO，作为Unity行业新人，本文旨在讨论关于MVC设计模式在UI背包界面制作过程中，相关的思路及应用，顺便附上本次实际应用中的代码及思路。

写在前边：

1.本文使用Unity版本为Unity 2019.1.14f1 (64-bit)，VS版本为Microsoft Visual Basic 2015
2.UI使用Unity默认UGUI
3.涉及服务器数据与静态数据，使用JSON进行存取 ，并在C#中使用LitJson工具进行编译
4.文章内知识综合各类文章、读物学习总结而来，并非完全原创，以下为创作过程中使用知识点较多的文章：
站内优秀文章：
Unity (C#) 使用 LitJson 处理 JSON 数据
unity基于MVC的ui框架(一)
MVC的理解和优缺点的总结
Unity拖动背包物品/技能图标位置互换

正式开始

一、图示MVC结构

Model–view–controller (usually known as MVC) is a software design pattern commonly used for developing user interfaces that divides the related program logic into three interconnected elements. This is done to separate internal representations of information from the ways information is presented to and accepted from the user.——Wikipedia

机翻：模型-视图-控制器(通常称为MVC)是一种软件设计模式，通常用于开发用户界面，它将相关的程序逻辑划分为三个相互关联的元素。这样做是为了将信息的内部表示与向用户显示信息和从用户接受信息的方式分开。

下图是来自维基百科对于MVC基本交互模型的图示

二、UI背包界面效果构想图

具体到本次UI背包界面制作，将会围绕下图进行展开

三、正式开始

• 新建Canvas搭建ＵI视图

根据构想图搭建UI视图，具体Hierachy面板层级部署如下：
（对比上文构想图）

————————————————————————————————————————————————————

• 新建Canvas搭建ＵI视图

• 根据上图五个部分拆分需要实现的功能

• 第一部分包括：两个button组件（V），控制BackPack层视图的开启和关闭（C）

• 第二部分(search)包括：一个图片，一个InputFiled组件（V），根据道具名称（M），搜索道具（C）

• 第三部分(Types)包括：一个Toggle组件（V），根据道具类型（M），筛选道具（C）

• 第四部分(Items)包括：一个Scrollbar组件，一个固定物品框图片（V），一个可变图标图片（M）

• 第五部分包括：一个button组件（V），实现物品栏的简单整理（C）

————————————————————————————————————————————————————

• 新建Ｃanvas搭建ＵI视图
• 根据上图五个部分拆分需要实现的功能
• 根据需求拆分MVC

总体而言，我们需要通过传入Model到Controller相应去修改View

综合上述五部分：

• M部分——包括道具栏中的道具的数据，通过JSON来进行读写，实现数据的CURD操作，即
  Create增加数据，Update修改数据，Read读取数据 以及 Delete删除数据
• V部分——图片，字符，按键等各个UI组件的显示
• C部分——理论上需要实现View的部分，都需要传入Model到Controller部分，去修改View

同时需要注意：

• 使用MVC的目的是将M和V实现代码分离（理想情况），从而使同一个程序可以使用不同的表现形式。C存在的目的则是确保M和V的同步，一旦M改变，V应该同步更新。更好的调节M和V的搭配。

• View里会包含Model信息，不可避免的还要包括一些业务逻辑。
  在MVC模型里，更关注的Model的不变，而同时有多个对Model的不同显示，即View
  

————————————————————————————————————————————————————

• 新建Ｃanvas搭建ＵI视图
• 根据上图五个部分拆分需要实现的功能
• 根据需求拆分MVC
• 编写代码

1.ItemStaticDataManager.cs 和 ItemDynamicDataManger.cs

建立两个类来装载道具的表数据和服务器数据，对应Model部分

下图为本次示例中的部分JSON格式表数据截图（放在Resources/JSON/Items目录下），根据表数据表头内容来编写静态数据脚本ItemStaticDataManager.cs

静态类数据代码 ItemStaticDataManager.cs：

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using LitJson;

/// <summary>
/// 静态数据管理类
/// 键值对Dictionart类型读取JSON数据中的道具表，定义一个类来获取值Value
/// </summary>
public class ItemStaticData
{
   
    public int ItemID;
    public string Name;
    public string Description;
    public string Icon;
    public int Type;
    public int Quality;
    public int CanSell;
    public int CellGold;
    public int UseEffect;
    public int UseNumerical;
}

public class ItemStaticDataManager
{
   
    private static ItemStaticDataManager instance;
    public static ItemStaticDataManager Instance
    {
   
        get
        {
   
            if(instance == null)
            {
   
                instance = new ItemStaticDataManager();
            }
            return instance;
        }
    }

    //定义Dictionary类型变量itemStaticDataDic
    private Dictionary<int, ItemStaticData> itemStaticDataDic;
    
    //读取JSON表中数据，并用list接收ItemStaticData
    //LitJson反序列化：JsonMapper.ToObject<T>()
    public ItemStaticDataManager()
    {
   
        itemStaticDataDic = new Dictionary<int, ItemStaticData>();

        TextAsset temp = Resources.Load<TextAsset>("JSON/Items");
        List<ItemStaticData> list = JsonMapper.ToObject<List<ItemStaticData>>(temp.text);
        
        //遍历list,获取ItemStaticData，itemStaticDataDic获取键值
        for (int i = 0; i < list.Count; i++)
        {
   
            itemStaticDataDic.Add(list[i].ItemID, list[i]);
            
        }
    }
    /// <summary>
    /// 根据id访问ItemStaticData类的ItemStaticData方法，获取反序列化后的数据（Dictionary类型）
    /// </summary>
    /// <param name="id"></param>
    /// <returns></returns>
    public ItemStaticD