文章目录
记录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;
//可以遍历提供的迭代器 得到当前处于选中状态的 Toggle
foreach(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滚动视图来使用
#endregion
Scrollbar 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 垂直滚动条
#endregion
ScrollRect 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);
}