在制作进度条时,可先准备Image背景图片,基本UI层次结构如下图;准备空节点,取名LoadingWnd,铺满整个界面,在下面加入背景(bg)。加入提示信息(TextTips)下面正式制作进度条。
1、加入UI-Image,作为进度条背景,起名为loadingbg,并使用九宫格对背景图片进行处理,图片Type选择Sliced。
2、复制一份当做前景,起名loadingfg,替换为前景图片,Type改为Filled,选择Herizontal方式,水平填充。
3、在loadingfg下,加入进度指示点(ImgPoint)
4、加入imgPoint文本提示,显示进度百分比文字。
5、下面进行代码部分的工作;
1 using UnityEngine; 2 using UnityEngine.UI; 3 5 public class LoadingWnd : WindowRoot 6 { 7 public Text txtTips; 8 public Image imgFG; 9 public Image imgPoint; 10 public Text txtPrg; 11 12 private float fgWidth; 13 14 protected override void InitWnd() 15 { 16 base.InitWnd(); 17 18 fgWidth = imgFG.GetComponent<RectTransform>().sizeDelta.x; 19 20 SetText(txtTips, "这是一条提示Tips..."); 21 SetText(txtTips, "0%"); 22 txtPrg.text = "0%"; 23 imgFG.fillAmount = 0; 24 imgPoint.transform.localPosition = new Vector3(-449f, 0, 0); 25 26 27 } 28 public void SetProgress(float prg) 29 { 30 SetText(txtTips,(int)(prg * 100) + "%"); 31 imgFG.fillAmount = prg; 32 33 float posX = prg * fgWidth - 449; 34 imgPoint.GetComponent<RectTransform>().anchoredPosition = new Vector2(posX, 0); 35 } 36 }
prg参数需要在资源加载.cs中定义,与实际资源加载进度一致。