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