接下來就是客戶端了先講講那個(gè)動(dòng)態(tài)聊天框怎么實(shí)現(xiàn)的把

先上張效果圖好了，

動(dòng)態(tài)聊天框演示.gif

說下大概實(shí)現(xiàn)過程

TXT.png

首先TXT錨點(diǎn)設(shè)置成上面那個(gè)，方便我們計(jì)算 因?yàn)檫@樣的話他的寬度就會(huì)隨著聊天框增長(zhǎng)而增長(zhǎng) 我們只需要設(shè)置left 和right 兩邊的距離就行了 ，不懂啥意思看圖吧

TXT差距.png

然后就是獲取到 txt文字里面寬度最長(zhǎng)的那行長(zhǎng)度 如果大于自己設(shè)置的最大寬度 聊天框就設(shè)置寬度最大值就行了 Txt高度靠ContentSizeFitter組件適配垂直高度
所以 聊天框的寬度計(jì)算就是 如果沒大于自己設(shè)置的寬度就是 txt 兩邊的差距+文字最長(zhǎng)的那行，如果這兩者加起來超過了設(shè)置的寬度，就直接設(shè)置最大寬度就好
聊天框長(zhǎng)計(jì)算的話 就是 原本聊天框的高度+文字的高度
因?yàn)?還要匹配一下頭像圖片高度 所以這里用了父物體來增加這個(gè)高度就是Dialogui
聊天框錨點(diǎn)就設(shè)置成這樣

TXT.png

隨著父物體高度增加而增加

可以看下 下面代碼 這時(shí)候聊天框就動(dòng)態(tài)了
順便放下計(jì)算代碼

//Dialogui聊天框的父物體
//DialogBox聊天框
        //DialogTxt文本
        //preferredWidth是獲取該文本的文字 最寬的一段的長(zhǎng)度   如果超過540長(zhǎng)度 就寬度上限了
        if ((int)(DialogTxt.preferredWidth / 540) == 0)
        {

            //沒超過設(shè)置的540之前，他的寬度是 TXT和聊天框兩邊的差距+文字的長(zhǎng)度   
            DialogBox.sizeDelta = new Vector2(Mathf.Abs(DialogTxt.rectTransform.sizeDelta.x) + DialogTxt.preferredWidth, DialogBox.sizeDelta.y);

        }
        else
        {
            //超過最大寬度540了 就一直設(shè)置540就好
            DialogBox.sizeDelta = new Vector2(540, DialogBox.sizeDelta.y);
        }
        //就是原本 是原本100高度+文本高度
        Dialogui.sizeDelta = new Vector2(Dialogui.sizeDelta.x, 100 + DialogTxt.preferredHeight);

聊天框圖片九宮格 設(shè)置

大概切成這樣， 圖片拉伸就會(huì)值拉伸紅色框框那里 ，emmm這張拉起來有點(diǎn)丑 湊合吧

九宮格.png

Pivot UI旋轉(zhuǎn)縮放的中心點(diǎn)

就是UI旋轉(zhuǎn)縮放的中心點(diǎn)，左下角為(0,0)右上角為(1,1)
一般他們默認(rèn)是0.5，0.5 所以縮放長(zhǎng)度高度時(shí)候會(huì)均勻縮放，而我們的聊天框不允許這樣縮放 所以要設(shè)置 看下圖

Pivot.png

然后就是頭像 和父物體的設(shè)置了 我直接上圖吧沒啥好說的

父物體.png

頭像 錨點(diǎn)也是設(shè)置成這樣方便操作

PlayerInfo.png

完整代碼：

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

public class DialogUI : MonoBehaviour 
{
    public RectTransform Dialogui;
    public RectTransform DialogBox;
    public RectTransform HeadBG;

    public RawImage HeadImg;

    public Text DialogTxt;
    public Text PlayerNameTxt;

    private void Start()
    {
      //  InitDialog("啊啊啊啊啊啊啊啊啊\n啊啊啊啊啊啊啊啊");
    }

    /// <summary>
    /// 設(shè)置我方的對(duì)話位置 內(nèi)容
    /// </summary>
    /// <param name="info"></param>
    /// <returns></returns>
    public DialogUI InitLocalDialog(string playername,string info, Texture2D head)
    {
        //這邊是左邊的邊界離父物體的左邊距離635
        HeadBG.offsetMax = new Vector2(627, HeadBG.offsetMax.y);
        HeadBG.offsetMin = new Vector2(0, HeadBG.offsetMin.y);

        InitDialog(playername,info, head);

        DialogBox.anchoredPosition = new Vector2(-DialogBox.anchoredPosition.x, DialogBox.anchoredPosition.y);

        //設(shè)置旋轉(zhuǎn)
        DialogBox.transform.localEulerAngles = new Vector3(0, 180, 0);
        DialogTxt.transform.localEulerAngles = new Vector3(0, 180, 0);
        return this;
    }

    /// <summary>
    /// 設(shè)置對(duì)方的對(duì)話位置 內(nèi)容
    /// </summary>
    /// <param name="info"></param>
    /// <returns></returns>
    public DialogUI InitDialog(string playername, string info,Texture2D head)
    {
        PlayerNameTxt.text = playername;

        DialogTxt.text = info;

        //DialogBox聊天框
        //DialogTxt文本
        //preferredWidth是獲取該文本的文字 最寬的一段的長(zhǎng)度   如果超過540長(zhǎng)度 就寬度上限了
        if ((int)(DialogTxt.preferredWidth / 540) == 0)
        {

            //沒超過設(shè)置的540之前，他的寬度是 TXT和聊天框兩邊的差距+文字的長(zhǎng)度   
            DialogBox.sizeDelta = new Vector2(Mathf.Abs(DialogTxt.rectTransform.sizeDelta.x) + DialogTxt.preferredWidth, DialogBox.sizeDelta.y);

        }
        else
        {
            //超過最大寬度540了 就一直設(shè)置540就好
            DialogBox.sizeDelta = new Vector2(540, DialogBox.sizeDelta.y);
        }
        //就是原本 是原本100高度+文本高度
        Dialogui.sizeDelta = new Vector2(Dialogui.sizeDelta.x, 100 + DialogTxt.preferredHeight);

        HeadImg.texture = head;
        return this;
    }

}

https://github.com/LKaiGuo/KGScriptGenerator 喜歡的給我點(diǎn)個(gè)星星啊
u3d萌新QQ群844087555 歡迎進(jìn)來灌水=。=