FC2ブログ
ヽ|∵|ゝ(Fantom) の 開発blog? ホーム » Unity »【Unity】【C#】制限付きでテキストのサイズに合わせて他のオブジェクトのサイズも変化させる

【Unity】【C#】制限付きでテキストのサイズに合わせて他のオブジェクトのサイズも変化させる  


 ContentSizeFitter を使えば近い感じにもなるが、最小~最大みたいになると、レイアウトの入れ子になったり、オブジェクトを階層化しなくてはならなかったりと複雑になる気がするので、もっと簡単にできるものないかとググってみたら、やはり同じ様なものがあった

TextSizeAdjuster



 ただ試してみたら、ちょっと私が欲しい挙動と違ったので、元のスクリプトを参考に改造してみた。簡単に言えば「テキストの幅が最小~最大サイズまでは伸縮し、最大を超えたら折り返す」みたいにできるようにスクリプトに書き換えた。

 まぁ、自動レイアウトを駆使すれば同じことはできるかもしれないが、実は私も自動レイアウトは苦手なので、今回のスクリプト1つで簡単に実現できるのなら、それもアリかと(笑)。

【Unity】uGUIの自動レイアウトが分かりにくいと評判なので解説してみる

(※) Unity 2018.4.8f1 / Windows10(x64) で確認



■テキストのサイズに合わせて他のオブジェクトのサイズも変化させる(サイズ制限付き)

●TextSizeSync.cs
using UnityEngine;
using UnityEngine.UI;
#if UNITY_EDITOR
using UnityEditor;
#endif

/// <summary>
/// https://gist.github.com/iwashihead/db6e88e7de74f43c43fb9ebbd6769516
/// を改造
/// Text の preferredWidth / preferredHeight に合わせて
/// 他の RectTransform のサイズも変更する.
/// </summary>
[ExecuteInEditMode]
//[ExecuteAlways]
public class TextSizeSync : MonoBehaviour
{
//サイズを調整する方向
public enum AdjustMode
{
Width, Height, Both,
}
public AdjustMode adjustMode = AdjustMode.Width;

public bool alwaysAdjust = false; //Update でテキスト変化を検出

public Text referenceText; //サイズを参照するテキスト

public float minWidth = -1; //調整する最小幅 (※負で無視)
public float maxWidth = -1; //調整する最大幅 (※負で無視)
public float minHeight = -1; //調整する最小高 (※負で無視)
public float maxHeight = -1; //調整する最大高 (※負で無視)

//同期させるオブジェクトの余白(テキストサイズ+余白になる)
public RectOffset padding = new RectOffset();

//サイズを同期させるオブジェクト
public RectTransform[] syncRectTransforms = new RectTransform[0];


//Editor only
private void Reset()
{
if (referenceText == null)
referenceText = GetComponent<Text>();
}

//Editor only
private void OnValidate()
{
if (referenceText != null)
Adjust();
}

private void OnEnable()
{
if (referenceText != null)
Adjust();
}

// Use this for initialization
private void Start()
{
Adjust();
}

// Update is called once per frame
private void LateUpdate()
{
if (alwaysAdjust && IsTextChanged)
Adjust();
}

string _oldText;

//テキストの内容が変化したか?
public bool IsTextChanged {
get {
if (_oldText == null || _oldText != referenceText.text)
{
_oldText = referenceText.text;
return true;
}
return false;
}
}

//サイズの調整
public void Adjust()
{
switch (adjustMode)
{
case AdjustMode.Width:
AdjustWidth();
break;
case AdjustMode.Height:
AdjustHeight();
break;
case AdjustMode.Both:
AdjustBoth();
break;
}

AdjustSyncRectTransforms();
}


Vector2 _size = Vector2.zero;

//幅を調整
void AdjustWidth()
{
var w = ClampWidth(referenceText.preferredWidth);
var h = referenceText.rectTransform.sizeDelta.y;
_size.Set(w, h);
referenceText.rectTransform.sizeDelta = _size;
}

//高さを調整
void AdjustHeight()
{
var w = referenceText.rectTransform.sizeDelta.x;
var h = ClampHeight(referenceText.preferredHeight);
_size.Set(w, h);
referenceText.rectTransform.sizeDelta = _size;
}

//幅・高さの両方を調整
void AdjustBoth()
{
var w = ClampWidth(referenceText.preferredWidth);
var h = ClampHeight(referenceText.preferredHeight);
_size.Set(w, h);
referenceText.rectTransform.sizeDelta = _size;
}

//幅の制限
float ClampWidth(float w)
{
if (minWidth >= 0) w = Mathf.Max(minWidth, w);
if (maxWidth >= 0) w = Mathf.Min(maxWidth, w);
return w;
}

//高さの制限
float ClampHeight(float h)
{
if (minHeight >= 0) h = Mathf.Max(minHeight, h);
if (maxHeight >= 0) h = Mathf.Min(maxHeight, h);
return h;
}

//他の RectTransform のサイズ同期(余白付き)
void AdjustSyncRectTransforms()
{
var w = ClampWidth(referenceText.preferredWidth);
var h = ClampHeight(referenceText.preferredHeight);

foreach (var rt in syncRectTransforms)
{
var x = rt.sizeDelta.x;
var y = rt.sizeDelta.y;
switch (adjustMode)
{
case AdjustMode.Width:
x = padding.left + w + padding.right;
break;
case AdjustMode.Height:
y = padding.top + h + padding.bottom;
break;
case AdjustMode.Both:
x = padding.left + w + padding.right;
y = padding.top + h + padding.bottom;
break;
}
_size.Set(x, y);
rt.sizeDelta = _size;
}
}
}


#if UNITY_EDITOR
//※エディタ用
//OnValidate() では他のコンポーネント変化が検知できないので、
//インスペクタの更新で変化をチェックする
[CustomEditor(typeof(TextSizeSync))]
public class TextSizeSyncEditor : Editor
{
public override void OnInspectorGUI()
{
base.OnInspectorGUI();

var obj = target as TextSizeSync;
if (obj.IsTextChanged)
{
obj.Adjust();
}
}
}
#endif

 色々付け加えたので長くなった(笑)。まぁ、少し古いバージョン(.NET3.5)でも対応できるようにしてるせいもあるけどね。
"[ExecuteInEditMode]" なんかもいつの間にか "[ExecuteAlways]" になったらしいしね。

 使い方は、参照する Text と同じ GameObject にアタッチし、変化させたいオブジェクトを syncRectTransforms に登録するだけだ。あとは最小~最大サイズや余白を設定しておく。






●例えば以下のようタグを囲むのに使っている


※ただし、レイアウトの計算は同じフレーム内では上手く反映されないので、1フレーム遅らせて反映させた方が確実。



 ちなみに、gif アニメの ContetnSizeFitter と TextSizeAdjuster の設定は以下のようになる。



●ContentSizeFitter ① を使い、LayoutElement で MinWidth を設定





●ContentSizeFitter ② を使い、LayoutElement で MinWidth, PereferedWidth を設定





●TextSizeAdjuster と ContentSizeFitter を使う

TextSizeAdjuster






 まぁ、自動レイアウトを極めれば色々できるかも知れないが、とにかく組み合わせを考えるのが大変なので、何重にもレイアウトの入れ子になるくらいなら、簡単なスクリプトを作るのも1つの手かも知れない(笑)。

【Unity】uGUIの自動レイアウトが分かりにくいと評判なので解説してみる
【Unity】逆引き自動レイアウトのトレーニング。UIをLayoutGroupで並べる
逆引き、UnityのuGUIのレイアウトトレーニング(uGUI RectTransform入門その2)






(関連記事)
【Unity】【C#】RectTransform の矩形の実座標を取得する
【Unity】【C#】uGUI ドロップダウンの要素をコードで設定と取得、外観のカスタマイズなど
【Unity】【C#】インスペクタの表示項目を動的に変更する
【Unity】【C#】独自のギズモ(Gizmo)を表示する


関連記事
スポンサーサイト



category: Unity

thread: ゲーム開発

janre: コンピュータ

tag: Unityライブラリ  Unityリファレンス  uGUI 
tb: 0   cm: --


トラックバック

トラックバックURL
→http://fantom1x.blog130.fc2.com/tb.php/336-913a6234
この記事にトラックバックする(FC2ブログユーザー)

プロフィール

Social

検索フォーム

全記事一覧

カテゴリ

ユーザータグ

最新記事

リンク

PR

▲ Pagetop