UGUI快速制作带圆形前进度的Slider(完美解决Slider变大和消失的问题)

当你的滑动条出现消失和变大的情况,不要犹豫,进来看吧

1.准备素材:进度条一个,进度条前面的圆圈一个(长的我叫Bar,短的叫做Head,把他们放在Unity里做成Sprite)

UGUI快速制作带圆形前进度的Slider(完美解决Slider变大和消失的问题)UGUI快速制作带圆形前进度的Slider(完美解决Slider变大和消失的问题)

2.UI-->Slider,创建一个滑动条Slider

UGUI快速制作带圆形前进度的Slider(完美解决Slider变大和消失的问题)

3.修改Fill的Image为Bar,回复默认大小,并且记住他的width 625和Height 13

UGUI快速制作带圆形前进度的Slider(完美解决Slider变大和消失的问题)

4.将Slider(1)的宽高修改为625和13.坐标归0

UGUI快速制作带圆形前进度的Slider(完美解决Slider变大和消失的问题)

5.按住T键将FillArea的边框和SLider(1)保持一致,然后将Fill和FillArea保持一致(中间可能出现边框消失的情况,只需要修改Slider的Pos即可,等到边框再次出现,将Pos重新修改回来就行了)


6.将Fill的Pivot修改为(0,0.5),坐标全部归0

UGUI快速制作带圆形前进度的Slider(完美解决Slider变大和消失的问题)

7.此时可以尝试修改Slider(1)上的Slider脚本了,发现他并不会变大


8.选中Handle,修改图片为Head,SetnativeActive一下,将他的Recttreansform修改为如下图(可能会出现变大的情况,不要担心,再次修改为下图属性就行了)

UGUI快速制作带圆形前进度的Slider(完美解决Slider变大和消失的问题)

9.将Handle Slide Area,按T键,同样和Slider保持一致


10.修改背景BackGround吧,他并不会对上述操作造成任何影响


11.完工了,修改Slider(1)下的Slider组件中的value,发现无论如何他也不会背景变大哦,而且前面的圆形始终都在最前方哦

UGUI快速制作带圆形前进度的Slider(完美解决Slider变大和消失的问题)

UGUI快速制作带圆形前进度的Slider(完美解决Slider变大和消失的问题)