Unity自适应Text对话框

最新推荐文章于 2024-06-28 17:18:38 发布

原创最新推荐文章于 2024-06-28 17:18:38 发布 · 4.1k 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#对话框 #UGUI #自适应Text

Unity3D 专栏收录该内容

31 篇文章

订阅专栏

本文介绍了一种能够根据文本内容自动调整大小的对话框设计方案，包括两种模式：一种是随着文本实时输入调整；另一种是在输入完成后一次性调整。通过使用ContentSizeFitter组件和脚本控制，实现了对话框的灵活布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

制作一个对话框，让框能随着文本的长度和高度变化。

模式一

一个随文本的实时输入而自动适应的对话框。

1.效果：

2.层级与组件：

frame就是个Image对话框图，锚点和Text一样，使用ContentSizeFitter组件使Text适应文字，当小于单行的最大长度时使用HorizontalFit，当大于单行最大长度则使用VerticalFit，然后在代码中让框的大小随Text的大小变化。

3.代码：

/// <summary>
    /// 对话框
    /// </summary>
    [HideInInspector]
    public Image boxFrame;
    /// <summary>
    /// 输入文本
    /// </summary>
    [HideInInspector]
    public Text messageText;
    private ContentSizeFitter sizeFitter;
    /// <summary>
    /// 框最小长度
    /// </summary>
    public int minFrameWidth = 100;
    /// <summary>
    /// 框最大长度
    /// </summary>
    public int maxFrameWidth = 1200;
    /// <summary>
    /// 框与文本的高度差
    /// </summary>
    private float offsetDistance;
	// Use this for initialization
	void Start () {
        boxFrame = transform.Find("frame").GetComponent<Image>();     
        messageText = GetComponentInChildren<Text>();
        sizeFitter = messageText.transform.GetComponent<ContentSizeFitter>();
        offsetDistance = boxFrame.rectTransform.sizeDelta.y - messageText.rectTransform.sizeDelta.y;
    }
	
	void Update () {
        AdjustDialogBoxSize();
    }

    private void AdjustDialogBoxSize()
    {
        //大于行的最大长度则换行
        if(boxFrame.rectTransform.sizeDelta.x > maxFrameWidth)
        {
            if(sizeFitter.horizontalFit == ContentSizeFitter.FitMode.PreferredSize)
            {
                sizeFitter.horizontalFit = ContentSizeFitter.FitMode.Unconstrained;
                sizeFitter.verticalFit = ContentSizeFitter.FitMode.PreferredSize;
            }
        }
        else
        {
            if (sizeFitter.horizontalFit == ContentSizeFitter.FitMode.Unconstrained)
            {
                sizeFitter.horizontalFit = ContentSizeFitter.FitMode.PreferredSize;
                sizeFitter.verticalFit = ContentSizeFitter.FitMode.Unconstrained;
            }
        }
        boxFrame.rectTransform.sizeDelta = new Vector2(minFrameWidth + messageText.rectTransform.sizeDelta.x, messageText.rectTransform.sizeDelta.y + offsetDistance);
    }

模式二

传入一段文字到对话框，然后根据文本一次性适配。

1.效果：

2.层级与组件

在frame的狂下有两个Text，一个做行的长度适配，一个做行数的高度适配，当长度小于行最大长度时，把VecticalText的Color设为透明隐藏，当大于行最大长度则换行，把Horizontal的字体颜色设置为透明隐藏。

3.代码：

    /// <summary>
    /// 对话框
    /// </summary>
    [HideInInspector]
    public Image boxFrame;

    public Text horizontalText;
    public Text verticalText;

    private ContentSizeFitter sizeFitter;
    /// <summary>
    /// 框最小长度
    /// </summary>
    public int minFrameWidth = 100;
    /// <summary>
    /// 框最大长度
    /// </summary>
    public int maxFrameWidth = 1200;

    public Color textColor = new Color(1, 1, 1, 1);
    public Color hideColor = new Color(1, 1, 1, 0);
    /// <summary>
    /// 框与文本的高度差
    /// </summary>
    private float offsetDistance;

	// Use this for initialization
	void Start () {
        boxFrame = transform.Find("frame").GetComponent<Image>();     
        offsetDistance = boxFrame.rectTransform.sizeDelta.y - horizontalText.rectTransform.sizeDelta.y;

        verticalText.color = hideColor;
        horizontalText.color = textColor;
        StartCoroutine(AdjustSize());
    }

    private void AdjustDialogBoxSize()
    {
        //换行
        if(verticalText.rectTransform.sizeDelta.y > 85)
        {
            verticalText.color = textColor;
            horizontalText.color = hideColor;
            boxFrame.rectTransform.sizeDelta = new Vector2(minFrameWidth + verticalText.rectTransform.sizeDelta.x, verticalText.rectTransform.sizeDelta.y + offsetDistance);
        }
        else
        {
            boxFrame.rectTransform.sizeDelta = new Vector2(minFrameWidth + horizontalText.rectTransform.sizeDelta.x, horizontalText.rectTransform.sizeDelta.y + offsetDistance);
        }
    }

    /// <summary>
    /// 传入文本
    /// </summary>
    /// <param name="input"></param>
    public void SendText(InputField input)
    {
        verticalText.text = horizontalText.text = input.text;
        StartCoroutine(AdjustSize());
    }

    IEnumerator AdjustSize()
    {
        yield return new WaitForEndOfFrame();
        AdjustDialogBoxSize();
    }