[Unity]滑动条与图片填充与滑动条填充（滑动条和Image的关联）

本人使用unity版本：2020.3.17

文章涉及UI资源为unity资源商店免费资源：Beautiful Progress Bar Free | 2D 图标 | Unity Asset Storehttps://assetstore.unity.com/packages/2d/gui/icons/beautiful-progress-bar-free-194904

文章中展示3种血条（进度条）制作方式。

0.准备

 从unity资源商店下好使用的素材，例：

1.UGUI滑动条 

在Hierarchy窗口右键创建一个UI——Slider（滑动条）。

由于在本章中不需要用到那个圆形按钮，因此将“Handle Slide Area” 删掉（隐藏也行）。

---

删掉之后滑动条下面就只剩下三个游戏对象

分别是背景图片（Background）；填充区域（Fill Area）；填充图片（Fill）。 

---

此时场景中的滑动条会有一部分填充图片已经显示出来了，这是我们不想看见的。

我们通过将Fill游戏对象的Width参数设为0解决 ： 

---

这时通过调整Slider组件的Value属性会发现我们的滑动区域也是有问题的： 

这明显是填充区域的问题，我们将Fill Area游戏对象的几个属性也归零就解决问题了。

ps：这部分如果不是很理解的话可以先点击属性参数来观察Scene视图来理解其代表含义，例：

 

---

最后，将背景图片和填充图片替换为我们自己的素材并且调整大小就能实现以下样式：

 并且可以通过在代码中控制Slider组件的Value属性或者运行后直接拖拽进行操控。

2.图片填充

 现在拿出这套素材：

如果使用上面讲的滑动条方法制作会发现结果是这样的： 

原理涉及到第3种方法，买个关子到时说。

那么我们想实现我们预期的效果（图一）一共有两种方法，第一种便是我现在要讲的图片填充。

---

首先，创建一个Image将背景图素材放在其中并设置为素材原始大小。

---

再创建一个Image将填充图放在其中，作为背景图的子物体（我按照自己的习惯改好了名字）： 

---

将填充图的Image组件中的ImageType(图片显示类型)改为Filled(填充的)，设置为素材原始大小：

 ImageType下面的几个属性：填充方式、填充起点、填充比例、顺时针？、保持长宽比？。

---

在此我们直接将填充方式改为Horizontal(横向),再对填充比例进行修改就会发现达到我们想要的效果了（填充比例也可以在代码中动态修改）。

 3.修改UGUI滑动条

这时又有一个问题：我既想实现第二种图片填充的表现方式又想有第一种UGUI滑动条的操作方式怎么办呢？

如果我上面说的两种方法你都已经理解，那么很简单，首先我们先用第一种的方式实现但素材使用第二种的：

---

之后将滑动条下面的Fill游戏对象的Image组件按照第二种的方法设置，并且重新改一下滑动条的Value属性让其刷新一下：

---

这样我们修改Value的数值会实施反应在Fill的FillAmount属性上，这样就实现了我们想要的效果。

4.结语

文章就此结束，这是我第一次写文章希望可以为你带来帮助，如果哪里有错，欢迎指出。

ps：

我使用的素材有些默认Image类型是Sliced，这个是没有”设置原生大小“的按键的。

这个素材本身的场景里也实现了我所说的第3种功能，但他是使用监听动态修改的，不知道是不是unity新版本更新的新功能才能自动的同步。

很多属性大家都可以随便调一下试试会有什么反应，说不定就会实现你想要某个效果。