Unity自适应Text对话框

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

模式一

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

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();
    }
发布了13 篇原创文章 · 获赞 4 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/YasinXin/article/details/96114807
今日推荐