在制作進度條時,可先准備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中定義,與實際資源加載進度一致。