Unity UGUI（一）基础组件

---

记录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 =                                            // 富文本标签
        "   粗体" +
        "   斜体" +
        "   粗体&斜体" +
        "   字号60" +
        "   绿色" +
        "   红色";

    #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);
}