LoginSignup
1
1

More than 3 years have passed since last update.

テキストの長さに合わせてラベルの長さを変える方法

Last updated at Posted at 2021-02-27

これはテスト用にTABキーを押すと変更するようにしていますが、使いたいタイミングでScript内の関数を呼び出す感じで使います。

やり方

1.Canvasを追加

ヒエラルキー右クリック>>UI>>Canvas
2021-02-27 (4).png

2.Panelを追加

Canvasを左クリックで選択>>右クリック>>UI>>Panel
2021-02-27 (5).png

3.Panelを設定

適当でかまいません
2021-02-27 (24).png

4.TEXTを追加

Panelを左クリックで選択>>右クリック>>UI>>テキスト
2021-02-27 (25).png

5.TEXTを設定

整列の設定だけ同じであれば問題ないです。
そのほかの設定はTEXTがぼやけないようにするための設定です。
参考:https://qiita.com/tyoberiba225/items/3a44d6b2456b61166276
2021-02-27 (30).png

6.Panel に ContentsSizefitter を追加

Panel>>Inspector>>AddComponent>>Layout>>ContentsSizefitter
2021-02-27 (9).png
2021-02-27 (10).png

7.Panel に HorizontalLayoutGroup を追加

Panel>>AddComponent>>Layout>>HorizontalLayoutGroup
2021-02-27 (11).png
2021-02-27 (12).png

8.Panelの ContentsSizefitter と HorizontalLayoutGroupを設定

2021-02-27 (32).png

9.スクリプトを作成

Projectで右クリック>>Create>>Script
名前はFitLabelToTextにする
2021-02-27 (33).png

10.下記のスクリプトをコピペ

FitLabelToText.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class FitLabelToText : MonoBehaviour
{
    [SerializeField]
    LayoutElement labelLe;

    [SerializeField]
    Text text;

    [SerializeField]
    float padding;

    RectTransform textRect;

    private void Start()
    {
        textRect = text.rectTransform;
        OnTextUpdate();
    }

    private void Update()
    {
        if (Input.GetKeyDown(KeyCode.Tab))
        {

            UpdateLabel();
        }
    }

    //テキストの長さが変わったら呼び出す
    void UpdateLabel()
    {
        labelLe.preferredWidth = text.preferredWidth / (1 / textRect.localScale.x) + padding;
    }
}

11.FitLabelToText スクリプトを Panel に追加して設定

2021-02-27 (34).png

これで終わりです。
再生ボタンを押した後にテキストを変えてTABキーを押して確かめてみてください。
アイテムの個数をスロットの右下に表示したいときなんかに使ってます。
もっといい方法があれば教えてください。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1