文章目录
- 1.Text：文本框
- 2.Image：精灵图
- 3.RawImage：生图
- 4.Button：按钮
- 5.InputField：输入框
- 6.Tooggle：选择框
- 7.Slider：滑动条
- 8.Dropdown：下拉菜单
- 9.Scrollbar：滚动条
- 10.ScrollView：滚动视图
记录UGUI中常用的UI组件和用法，方便复用。
1.Text：文本框
private void Start()
{#region 简介// Text是文本组件// 是UGUI中用于显示文本的组件#endregion#region 参数相关_text.font = Resources.Load<Font>("造字工房悦圆"); // 文本字体_text.fontStyle = FontStyle.Bold; // 文本样式_text.fontSize = 40; // 文本大小_text.lineSpacing = 1; // 行间距_text.supportRichText = true; // 是否开启富文本_text.alignment = TextAnchor.UpperCenter; // 文本的水平和垂直对齐方式，对应九宫格的九个位置_text.alignByGeometry = true; // 以当前所显示的文字中获取最大长宽的那个字作为参考（不勾选以字体中的长宽最大值），进行对齐_text.horizontalOverflow = HorizontalWrapMode.Wrap; // 当选择Overflow时允许水平方向超出文本框范围_text.verticalOverflow = VerticalWrapMode.Overflow; // 当选择Overflow时允许垂直方向超出文本框范围_text.resizeTextForBestFit = true; // 自动调整字体大小以适应文本框（比较耗费性能，不建议使用）_text.color = Color.white; // 文本颜色_text.material = null; // 文本材质_text.maskable = false; // 关闭后父物体的遮罩将不再对其生效_text.text = "使用代码修改文本内容~~~~"; // 文本内容#endregion#region 富文本示例_text.text = // 富文本标签" <b>粗体</b>" +" <i>斜体</i>" +" <b><i>粗体&斜体</i></b>" +" <size=60>字号60</size>" +" <color=#00ff00ff>绿色</color>" +" <color=red>红色</color>";#endregion
}#region 行间距相关
// 一行字的高度等于字体大小
// 行间距为1时，间距的高度是字体大小的一半
private void CheckTextHeightThenSetAnchor(Text text)
{// 只有一行居中，超过一行左对齐if(text.preferredHeight > text.fontSize){text.alignment = TextAnchor.MiddleLeft;}else{text.alignment = TextAnchor.MiddleCenter;}
}#endregion#region 边缘线和阴影
// 边缘线组件 outline
// 阴影组件 Shadow
#endregion
2.Image：精灵图
组件属性介绍：
Source Image：指定展示的纹理图片。注意：Image只支持Sprite类型的图片。
Color：图片颜色。
Material：图片渲染材质。
Raycast Target：能否进行射线检测。
Image Type：图片的显示类型，不同的显示类型会导致Sprite“填充”Image组件的方式不同。显示类型包括：
（1）Simple：当Image与Sprite的大小不同时，Sprite将会被拉伸到与Image一样大。此操作可能会导致图片变形，如果不想让图片变形的话，可以勾选上PreserveAspect选项，Sprite将会根据Sprite原宽高比例进行拉伸。
也可以使用 Aspect Ratio Fitter 组件保持恒定宽高比。
（2）Sliced：九宫格，经过九宫格处理的Sprite，在缩放过程中，会保持4个角的切片不做缩放，4个边的切片只完成拉伸，只有中间的切片做缩放操作。此模式默认勾选了Fill Center选项，如果取消勾选，Image不能完整显示，只会显示切片的边缘图片。
（3）Tiled：地面砖平铺，此模式中Sprite本身大小会保持不变，Sprite会像铺地面砖那样填充满整个Image控件。
（4）Filled：此模式一般用作“CD”技能冷却，血条、蓝条等。
void Start()
{#region 简介//Image是图像组件//是UGUI中用于显示精灵图片的组件#endregion#region 参数相关_imageSimple.sprite = Resources.Load<Sprite>("Character"); // 修改图片的精灵图_imageSimple.useSpriteMesh = true; // 使用TextureImporter生成的网格显示UI图像_imageSimple.preserveAspect = true; // 保持恒定宽高比_imageSimple.SetNativeSize(); // 恢复原图大小_imageSliced.fillCenter = false; // 中间部分不显示_imageSliced.pixelsPerUnitMultiplier = 1; // 每单位像素乘数_imageFilled.fillMethod = Image.FillMethod.Horizontal; // 填充方式_imageFilled.fillOrigin = 0; // 填充起始点 #endregion
}
3.RawImage：生图
可以通过调整 UV Rect 来设置UV缩放，偏移。
和Image组件的区别：
RawImage 用于显示Texture类型的纹理，无法显示 Sprite 类型的纹理。
当你只有Texture类型的纹理时（比如网络下载的图片）必要时可以使用 Sprite.Create 来将Texture类型的纹理转换成 Sprite。但是这个操作比较费性能，此时推荐使用RawImage来显示。
void Start()
{RawImage raw = this.GetComponent<RawImage>();raw.texture = Resources.Load<Texture>("image_path");raw.uvRect = new Rect(0, 0, 1, 1);
}
4.Button：按钮
Interactable：是否可交互
void Start()
{#region 简介//是UGUI中用于处理玩家按钮相关交互的组件//默认创建的Button由2个对象组成//父对象——Button组件依附对象 同时挂载了一个Image组件 作为按钮背景图//子对象——按钮文本（可选）#endregion#region 代码控制、事件监听_btnStartGame.interactable = true;_btnStartGame.transition = Selectable.Transition.ColorTint;//1.拖脚本//2.代码添加_btnStartGame.onClick.AddListener(OnBtnStartGameClick);#endregion
}public void OnBtnStartGameClick()
{print("按钮点击，代码添加监听");
}public void OnBtnStartGameClick2()
{print("按钮点击，通过编辑器拖拽的形式");
}private void OnDestroy()
{// 清除事件监听_btnStartGame.onClick.RemoveListener(OnBtnStartGameClick);_btnStartGame.onClick.RemoveAllListeners();
}
5.InputField：输入框
[SerializeField]
private InputField _usernameField;[SerializeField]
private Button _btnPlay;[SerializeField]
private Text _messageText;void Start()
{#region InputField简介//是UGUI中用于处理玩家文本输入相关交互的组件//默认创建的InputField由3个对象组成//父对象——InputField组件依附对象 以及 同时在其上挂载了一个Image作为背景图//子对象——文本显示组件（必备）、默认显示文本组件（必备）print(_usernameField.text);#endregion#region 监听事件//1.拖脚本//2.代码添加_usernameField.onValueChanged.AddListener((str) =>{print("代码监听 输入文本改变：" + str);});// 输入时按回车_usernameField.onSubmit.AddListener((str) =>{print("代码监听 提交输入：" + str);});_usernameField.onEndEdit.AddListener((str) =>{print("代码监听 结束输入：" + str);});#endregion_btnPlay.onClick.AddListener(() =>{if(!string.IsNullOrEmpty(_usernameField.text)){print("点击Play按钮");}else{_messageText.text = "用户名不能为空!";_messageText.enabled = true;}});
}
6.Tooggle：选择框
void Start()
{#region Toggle//是UGUI中用于处理玩家单选框多选框相关交互的组件//开关组件 默认是多选框//可以通过配合ToggleGroup组件制作为单选框//默认创建的Toggle由4个对象组成//父对象——Toggle组件依附//子对象——背景图（必备）、选中图（必备）、说明文字（可选）_toggle.isOn = true;_toggleGroup.allowSwitchOff = false;//可以遍历提供的迭代器 得到当前处于选中状态的 Toggleforeach(Toggle item in _toggleGroup.ActiveToggles()){print(item.name + " " + item.isOn);}//1.拖脚本//2.代码添加_toggle.onValueChanged.AddListener(ChangValue);#endregion
}public void ChangValue(bool isOn)
{print("代码监听状态改变" + isOn);
}private void OnDestroy()
{_toggle.onValueChanged.RemoveListener(ChangValue);_toggle.onValueChanged.RemoveAllListeners();
}
7.Slider：滑动条
// 常用于调节音量等功能
void Start()
{_slider.onValueChanged.AddListener(PrintSliderValue);
}public void PrintSliderValue(float v)
{print("监听 slider 滑动事件，slider value: " + v);
}
8.Dropdown：下拉菜单
[SerializeField]
public Dropdown dd;private List<string> sceneNames = new List<string>(); // 存储所有场景名称void Start()
{dd.options.Clear();// 获取Asset目录下所有场景名称for (int i = 0; i < SceneManager.sceneCountInBuildSettings; i++){string scenePath = SceneUtility.GetScenePathByBuildIndex(i);string sceneName = System.IO.Path.GetFileNameWithoutExtension(scenePath);sceneNames.Add(sceneName);dd.options.Add(new Dropdown.OptionData(sceneName));}print(dd.value); // 打印当前索引值print(dd.options[dd.value].text); // 打印当前索引值对应的显示文本dd.onValueChanged.AddListener((index) => {print(sceneNames[index]);if(sceneNames[index] != "Main"){SceneManager.LoadScene(sceneNames[index]);}});
}
9.Scrollbar：滚动条
void Start()
{#region Scrollbar//是UGUI中用于处理滚动条相关交互的组件//默认创建的Scrollbar由2组对象组成//父对象——Scrollbar组件依附的对象//子对象——滚动块对象//一般情况下我们不会单独使用滚动条 //都是配合ScrollView滚动视图来使用#endregionScrollbar sb = this.GetComponent<Scrollbar>();print(sb.value); // 打印当前滚动条的值（0-1f）print(sb.size); // 滚动条滑块的大小，其中1表示它填充整个滚动条#region 监听事件的两种方式//1.拖脚本//2.代码添加sb.onValueChanged.AddListener((v) => {print("代码监听的函数" + v);});#endregion
}public void ChangeValue(float v)
{print(v);
}
10.ScrollView：滚动视图
void Start()
{#region ScrollRect// UGUI中用于处理滚动视图相关交互的组件// 默认创建的ScrollRect由4组对象组成// 父对象——ScrollRect组件依附的对象 还有一个Image组件 最为背景图// 子对象// Viewport控制滚动视图可视范围和内容显示// Scrollbar Horizontal 水平滚动条// Scrollbar Vertical 垂直滚动条#endregionScrollRect sr = this.GetComponent<ScrollRect>();//改变内容的大小 具体可以拖动多少 都是根据它的尺寸来的//sr.content.sizeDelta = new Vector2(200, 200);sr.normalizedPosition = new Vector2(0, 0.5f);#region 监听事件的两种方式//1.拖脚本//2.代码添加sr.onValueChanged.AddListener((vec) =>{print(vec);});#endregion
}public void ChangeValue(Vector2 v)
{print(v);
}// 自动导航到指定位置
public static void Nevigate(ScrollRect scrollRect, RectTransform item)
{RectTransform viewport = scrollRect.viewport;RectTransform content = scrollRect.content;Vector3 itemCurrentLocalPostion = scrollRect.GetComponent<RectTransform>().InverseTransformVector(ConvertLocalPosToWorldPos(item));Vector3 itemTargetLocalPos = scrollRect.GetComponent<RectTransform>().InverseTransformVector(ConvertLocalPosToWorldPos(viewport));Vector3 diff = itemTargetLocalPos - itemCurrentLocalPostion;diff.z = 0.0f;var newNormalizedPosition = new Vector2(diff.x / (content.GetComponent<RectTransform>().rect.width - viewport.rect.width),diff.y / (content.GetComponent<RectTransform>().rect.height - viewport.rect.height));newNormalizedPosition = scrollRect.GetComponent<ScrollRect>().normalizedPosition - newNormalizedPosition;newNormalizedPosition.x = Mathf.Clamp01(newNormalizedPosition.x);newNormalizedPosition.y = Mathf.Clamp01(newNormalizedPosition.y);DOTween.To(() => scrollRect.normalizedPosition, x => scrollRect.normalizedPosition = x, newNormalizedPosition, 0.8f);
}private static Vector3 ConvertLocalPosToWorldPos(RectTransform target)
{var pivotOffset = new Vector3((0.5f - target.pivot.x) * target.rect.size.x,(0.5f - target.pivot.y) * target.rect.size.y, 0f);var localPosition = target.localPosition + pivotOffset;return target.parent.TransformPoint(localPosition);
}
