Unity有间隔的UI经验条自适应与加载

今天遇到制作上图这样的进度条，自适应和加载都需要用代码实现，所以记录一下这个小技巧，
首先吧进度条制作一下，创建一个背景把锚点放在最下方，然后创建空物体（背景是父物体），然后制作十个（根据自己需求）小进度条（空物体是父物体），，
给空物体挂载GridLayoutGroup组件，

间隔为10， Cell Size的X 用代码计算，Y自己调个合适的数即可，

下面是代码部分：

    //进度条的空物体背景
    public Transform expPrgTrans;

     GridLayoutGroup grid = expPrgTrans.GetComponent<GridLayoutGroup>();
        //全局比例   计算UI基于当前屏幕高度的缩放比例：屏幕标准高度除以屏幕高度   使用高度计算比例是因为UI面板的缩放是基于高度的
        float globalRate = 1.0f * Constants.ScreenStandardHeight / Screen.height;
        //当前真实的UI宽度：当前屏幕宽度乘以全局比例
        float screenWidth = Screen.width * globalRate;
        //获取进度条
        float width = (screenWidth - 178) / 10;
        grid.cellSize = new Vector2(width, 7);

ScreenStandardHeight是屏幕的标准高度（即画布高度），
我的是

使用Screen.height来计算全局比例，是因为UI面板的缩放是基于高度的，

(screenWidth - 178) / 10：
178= （EXP图标所占的大小(选着进度条的背景即可看到，如我的是74) +进度条的父物体（空物体）与背景两头空余出的空间（选着空物体即可看到，如我的左边是4 右边是10）+ 进度条之间的间隙（10个小进度条有9个间隔 每个间隔是10,共90））全部相加后除以10，

以上是制作经验条和自适应的操作，

--------------------------分割线--------------------
以下代码是经验条的加载

       int expPrgVal = (int)(pd.exp * 1.0f / PECommon.GetExpUpValByLv(pd.lv) * 100);
        int index = expPrgVal / 10;

//加载进度条
for (int i = 0; i < expPrgTrans.childCount ; i++)
{
Image img = expPrgTrans.GetChild(i).GetComponent<Image>();
if(i<index )//全部加载
{
                img.fillAmount = 1;
}
else if(i==index )
{
                img.fillAmount = expPrgVal %10 * 1.0f / 10;
}
else
{
                img.fillAmount = 0;
}
}

expPrgVal可以显示在text文本上，
GetExpUpValByLv是计算这个项目计算经验值的方法（根据自己项目中经验值编写代码）

//升级的经验值
    public static int GetExpUpValByLv(int lv)
    {
        return 100 * lv * lv;
    }