Unity UGUI (1) 基本コンポーネント

記事ディレクトリ

よく使用される UI コンポーネントと UGUI での使用法を記録して、再利用を容易にします。

1.テキスト: テキストボックス

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.画像: スプライトマップ

コンポーネントプロパティの概要:
ソースイメージ: 表示されるテクスチャイメージを指定します。注: 画像はスプライトタイプの画像のみをサポートします。
色: 画像の色。
素材: 画像レンダリング素材。
Raycast Target: X線検査ができるかどうか。
画像タイプ: 画像の表示タイプ。表示タイプが異なると、スプライトが異なる方法で画像コンポーネントを「埋める」ことになります。表示タイプには次のものがあります。
(1) シンプル: 画像とスプライトのサイズが異なる場合、スプライトは画像と同じ大きさに引き伸ばされます。この操作により画像が変形する可能性があります。画像を変形させたくない場合は、PreserveAspect オプションをチェックすると、スプライトの元の幅と高さの比率に従ってスプライトが引き伸ばされます。
アスペクト比フィッターコンポーネントを使用して、一定のアスペクト比を維持することもできます。
(2) スライス: 9 正方形グリッドスケーリングプロセス中、9 正方形グリッドによって処理されるスプライトは、4 つの角のスライスをスケーリングせずに保持し、4 つの側面のスライスは引き伸ばされるだけで、中央のスライスのみがスケーリングされます。。このモードでは、デフォルトで「中央を塗りつぶす」オプションがチェックされていますが、チェックを外した場合、画像を完全に表示することができず、スライスのエッジ画像のみが表示されます。
(3) Tiled: 床タイルをタイル状に並べるこのモードでは、スプライト自体のサイズは変更されず、床タイルを敷くようにスプライトが Image コントロール全体を埋め尽くします。
(4) 塗りつぶし: このモードは通常、「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 スケーリングとオフセットは、UV Rect を調整することで設定できます。
Image コンポーネントとの違い:
RawImage は Texture タイプのテクスチャを表示するために使用されます。Sprite タイプのテクスチャは表示できません。
テクスチャタイプのテクスチャ (インターネットからダウンロードした画像など) しかない場合は、必要に応じて Sprite.Create を使用してテクスチャタイプのテクスチャをスプライトに変換できます。ただし、この操作はパフォーマンスに負荷がかかるため、表示には RawImage を使用することをお勧めします。

void Start()
{
    
    
    RawImage raw = this.GetComponent<RawImage>();
    raw.texture = Resources.Load<Texture>("image_path");
    raw.uvRect = new Rect(0, 0, 1, 1); 
}

4.ボタン: ボタン

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.Toggle: 選択ボックス

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.スライダー：スライダー

// 常用于调节音量等功能
void Start()
{
    
    
    _slider.onValueChanged.AddListener(PrintSliderValue);
}

public void PrintSliderValue(float v)
{
    
    
    print("监听 slider 滑动事件，slider value: " + v);
}

8.ドロップダウン: ドロップダウンメニュー

[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.スクロールバー: スクロールバー

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