1.通过Slider设置图片的滑动时加载的效果
2.Image Type
Image分为四个类型
Simple:有个Preserve Aspect,勾选后UI会保持相对大小而不是填充整个Canves
Sliced:可以保证被切割的部分不会随着放大缩小而失真,需要在图片自身的Sprite Editor里设置九宫格所切的部分,切割后只有中心部分会拉伸
Tiled:根据图片自身的大小铺满Image
Filled:可以设置加载/切割的大小(如左到右或360)
3.控制技能冷却,通过改变图片的Fill Amount值来显示图片
UI中放在最下面的图片是最靠近表层的(如同一个物体中有许多图片时,位在最下面的会覆盖前面的)
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 using System.Collections; 2 using System.Collections.Generic; 3 using UnityEngine; 4 using UnityEngine.UI; 5 6 public class Skill : MonoBehaviour { 7 8 public float coldTime = 2f; //冷却时间 9 private Image fillIcon; 10 private float timer = 0f; //计时器 11 private bool isClick = false; 12 public KeyCode keyCode; 13 14 15 16 17 // Use this for initialization 18 void Start () { 19 fillIcon = transform.Find("FillIcon").GetComponent<Image>(); 20 fillIcon.fillAmount = 0; 21 } 22 23 // Update is called once per frame 24 void Update () { 25 26 //通过快捷键触发技能 27 if (Input.GetKey(keyCode)) 28 { 29 isClick = true; 30 } 31 32 //改变Fill Amount的值 33 if (isClick) 34 { 35 timer += Time.deltaTime; 36 fillIcon.fillAmount = (coldTime - timer) / coldTime; 37 if(timer>=coldTime) 38 { 39 fillIcon.fillAmount = 0; 40 timer = 0; 41 isClick = false; 42 } 43 } 44 } 45 46 public void OnClick() 47 { 48 isClick = true; 49 } 50 }
4.可以在Component -> layout里给物体添加各种平铺的组件
直接把图片放到带有layout组件的物体下面会出现某些问题(如偏移等)
可以先创建一个空物体设置好相应位置,然后把UI放入空物体中并让Pivot定在中心位置
父物体会影响子物体但是不太会影响到孙物体
(如设置grid后图片就不能随意拖拽摆放,而是自动排列,但是创建一个空的object并把图片放入其中就可以随意拖放)
5.Scroll Rect组件
设置Scroll Rect组件后把内容放到此物体下面就可以实现在范围内滑动
添加Mask组件可以隐藏显示范围外的物体,不选Show Mask Graphic能把组件所在的图片隐藏掉
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 using System.Collections; 2 using System.Collections.Generic; 3 using UnityEngine; 4 using UnityEngine.EventSystems; //IBeginDragHandler,IEndDragHandler这两个接口的命名空间 5 using UnityEngine.UI; 6 7 public class LevelScroll : MonoBehaviour, IBeginDragHandler, IEndDragHandler { 8 9 private ScrollRect scrollRect; 10 private float[] scrollArray = new float[] { 0f, 0.48f, 0.96f }; 11 private float targetPos = 0; 12 private bool isDrag = false; 13 14 public Toggle[] toggleArray; //在脚本面板里把相应的Toggle按钮拖拽进去 15 16 // Use this for initialization 17 void Start() 18 { 19 scrollRect = GetComponent<ScrollRect>(); 20 } 21 22 void Update() 23 { 24 //实现滑动结束后缓慢滑动到目标位置的效果 25 //此处如果不设置条件在点击来回滑动时会出现闪烁bug 26 if (isDrag == false) 27 { 28 scrollRect.horizontalNormalizedPosition = Mathf.Lerp(scrollRect.horizontalNormalizedPosition, targetPos, Time.deltaTime * 4); 29 } 30 31 } 32 33 public void OnBeginDrag(PointerEventData eventData) 34 { 35 isDrag = true; 36 } 37 38 public void OnEndDrag(PointerEventData eventData) 39 { 40 //Siki老师写的 41 //float posX = scrollRect.horizontalNormalizedPosition; 42 //int index = 0; 43 //float offset = Mathf.Abs(scrollArray[index] - posX); 44 //for(int i=1;i<scrollArray.Length;i++) 45 //{ 46 // float offsetTemp = Mathf.Abs(scrollArray[i] - posX); 47 // if(offsetTemp<offset) 48 // { 49 // index = i; 50 // offset = offsetTemp; 51 // } 52 //} 53 //scrollRect.horizontalNormalizedPosition = scrollArray[index]; 54 55 56 isDrag = false; 57 58 //有点小问题,有时候滑动处于中间位置时会滞留在那一区域 59 //当前水平位置(0 ~ 1) 60 float posX = scrollRect.horizontalNormalizedPosition; 61 62 //位置赋值 63 for (int i = 0; i < scrollArray.Length; i++) 64 { 65 float offset = Mathf.Abs(posX - scrollArray[i]); 66 if (offset <= 0.2) 67 { 68 targetPos = scrollArray[i]; 69 toggleArray[i].isOn = true; //相应的toggle按钮也开启 70 } 71 } 72 73 } 74 75 //通过Toggle移动到指定位置 76 public void Page1(bool isON) 77 { 78 if(isON) 79 { 80 targetPos = scrollArray[0]; 81 } 82 } 83 84 public void Page2(bool isON) 85 { 86 if (isON) 87 { 88 targetPos = scrollArray[1]; 89 } 90 } 91 92 public void Page3(bool isON) 93 { 94 if (isON) 95 { 96 targetPos = scrollArray[2]; 97 } 98 } 99 }
6.开关的切换
由于Toggle组件只能设置图片的显示与隐藏,而不能设置图片+文字的切换,所以此处要用脚本来实现
通过Switch 上Toggle组件的isOn开关来控制ON/OFF两个GameObject的激活
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 using System.Collections; 2 using System.Collections.Generic; 3 using UnityEngine; 4 using UnityEngine.UI; 5 6 public class AudioSwitch : MonoBehaviour { 7 8 public GameObject audioON; 9 public GameObject audioOFF; 10 private Toggle switchToggle; 11 12 // Use this for initialization 13 void Start () { 14 switchToggle = GetComponent<Toggle>(); 15 SwitchAudio(switchToggle.isOn); 16 17 } 18 19 public void SwitchAudio(bool isON) 20 { 21 audioON.SetActive(isON); 22 audioOFF.SetActive(!isON); 23 } 24 25 }
7.input Field
PlaceHolder: 显示的是未输入时的默认文字,当有输入后就会disable其中的Text组件
可以在Content Type那设置输入内容,设置为PassWord后输入的文字会自动变成****