[Unity][UGUI]UGUI的饼状统计图-白红宇

[Unity][UGUI]UGUI的饼状统计图

阅读量：482 次

发布时间：2019-03-06

本文共 2233 字，大约阅读时间需要 7 分钟。

Unity UI 统计图样式制作及其实现原理

在 Unity 工作中，开发一套可配置的统计图样式系统，可以显著提升开发效率。本文将详细介绍从设计到实现的完整流程，并分享解决方案。

一、开发背景

在 PC 细节游戏开发中，统计类UI（如输出、治疗、DPS、控制等）是重要组成部分。由于现有的商用插件成本较高，我们选择通过预制体和代码实现自定义化统计图。

二、解决方案概述

本方案通过以下方式实现统计图样式化管理：

预制体规范化：制作多种样式的预制体，并存储于数组中。

布局管理：利用UGUI的Layout Element实现布局。

样式配置：通过 scripts控制各样式的显示参数，包括颜色、填充方式等。

三、实现步骤

预制体创建首先，创建一个底板（Panel）预制体，包含多种统计图样式。每个样式对应一个预制体。

样式预制体制作把每个统计图样式制作成预制体，并通过 Script 绑定相关参数。例如，左侧的方框按钮样式预制体可以通过Color属性设置为红色，Work Info 组件的属性设置为治疗50。

布局设置在Panel下方排列四个Image组件，使用UGUI的Layout Element实现水平排列。这个布局会在后续代码中进行扩展。

核心逻辑实现主脚本 JobManager 负责样式及其数据填充。主要逻辑包括：

获取样式数组和位置数组。

初始化统计值数组。

遍历样式数组，创建新预制体并设置显示数据。

根据创建顺序，从最后一个样式开始累加数据。

四、关键代码解析

using System.Collections;using System.Collections.Generic;using UnityEngine;using UnityEngine.UI;public class JobManager : MonoBehaviour{    public GameObject[] GOPrefab_Array; // 存放统计图样式预制体的数组    public GameObject[] GOPOS_Array; // 存放UI显示的位置数组    private int[] GO_work_array; // 临时存储需要显示的数值数组    public Image.Type ImageType; // 设置填充类型    public Image.FillMethod Image_FillMethod; // 设置填充方式    public int Image_FillOrigin; // 设置填充来源    public bool Image_FillClockwise; // 设置填充方向    private void Start()    {        SortingWorkNum(this.gameObject); // 初始化统计数值数组        foreach (int j in Enumerable.Range(0, GOPrefab_Array.Length))        {            print("Sample-" + GOPrefab_Array[j].transform.name);            CreateGO(this.gameObject, GOPrefab_Array[j], GOPOS_Array[j]);        }    }    public void CreateGO(GameObject ReferenceGO, GameObject go_, GameObject goPos)    {        int ChildCount = ReferenceGO.transform.childCount;        float each_totalnum = 0;        int totalNum = 0;        for (int i = 0; i < ReferenceGO.transform.childCount; i++)        {            totalNum += ReferenceGO.transform.GetChild(i).GetComponent
   
    ().num;        }        foreach (int i in Enumerable.Range(0, ChildCount))        {            GO_work_array[i] = ReferenceGO.transform.GetChild(i).GetComponent
    
     ().num;        }    }}

五、优化与升级

本方案通过以下方式优化：

代码简化：去掉了冗余代码和多次赋值操作。

逻辑优化：通过按序处理样式，避免了重复循环。

扩展支持：可以后续支持多种统计项目和用户自定义样式。

六、实践验证

资源优化：预制体制作后，可以直接复制使用，减少资源浪费。

维护简化：通过 Script 绑定参数，减少对资源文件的修改需求。

七、总结

通过以上方法，我们可以自行制作并实现统计图样式系统。这种方案不仅降低了开发成本，还为后续 UI 细节优化提供了基础支持。在实际工作中，可以根据项目需求进行调整和扩展。

转载地址：http://dvudz.baihongyu.com/

你可能感兴趣的文章