效果图：
效果图.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设置进度。
网友评论