ugui制作简单水平进度条

效果图：

效果图.png

分析

该进度条包含3部分：白色边框色、黑色底色、黄色进度颜色。
对应的UI元素，可使用3个image实现，如下图：

结构图.png

制作过程

1、白色边框
新建image、改名ProgressBar、设置宽高、设置image颜色为白色、添加slider组件。
详见下图：

白色边框.png

2、黑色底色
分析：黑色背景应随着白色边框控件伸缩大小，所以应通过锚点控制其伸缩属性。
新建image、改名Bg、设置image颜色为黑色、设置填充方式：

设置填充方式.png

设置锚点、中心轴：
x、y 取值0~1，标识水平垂直方向比例，min、max的x和y分别代表左上右下锚点位置。

锚点、中心轴.png

设置基于锚点的x y偏移量(数值2.5指显示的白色边框大小):

基于锚点的x y偏移量.png

总设置图，如下：

黑色底色.png

3、进度图
分析：进度图也应随着白色边框控件伸缩大小，所以应通过锚点控制其伸缩属性。
新建image、改名Progress、设置拉伸方式、设置锚点偏移、设置图片颜色、选择图片

进度图.png

4、设置slider组件的Fill Rect
将进度图Progress拖拽到Fill Rect属性上即可，然后通过slider的value控制进度（0~1）

设置slider组件.png

这样，进度图就制作完成了，可在代码中获得slider组件，通过value设置进度。

转载于:https://www.jianshu.com/p/8b85544a2d0c