一个简单小型的C#Socket网络通信库聊天室示例(三)

接下来就是客户端了先讲讲那个动态聊天框怎么实现的把

先上张效果图好了，

动态聊天框演示.gif

说下大概实现过程

TXT.png

首先TXT锚点设置成上面那个，方便我们计算因为这样的话他的宽度就会随着聊天框增长而增长我们只需要设置left 和right 两边的距离就行了，不懂啥意思看图吧

TXT差距.png

然后就是获取到 txt文字里面宽度最长的那行长度如果大于自己设置的最大宽度聊天框就设置宽度最大值就行了 Txt高度靠ContentSizeFitter组件适配垂直高度
所以聊天框的宽度计算就是如果没大于自己设置的宽度就是 txt 两边的差距+文字最长的那行，如果这两者加起来超过了设置的宽度，就直接设置最大宽度就好
聊天框长计算的话就是原本聊天框的高度+文字的高度
因为还要匹配一下头像图片高度所以这里用了父物体来增加这个高度就是Dialogui
聊天框锚点就设置成这样

TXT.png

随着父物体高度增加而增加

可以看下下面代码这时候聊天框就动态了
顺便放下计算代码

//Dialogui聊天框的父物体
//DialogBox聊天框
        //DialogTxt文本
        //preferredWidth是获取该文本的文字 最宽的一段的长度   如果超过540长度 就宽度上限了
        if ((int)(DialogTxt.preferredWidth / 540) == 0)
        {

            //没超过设置的540之前，他的宽度是 TXT和聊天框两边的差距+文字的长度   
            DialogBox.sizeDelta = new Vector2(Mathf.Abs(DialogTxt.rectTransform.sizeDelta.x) + DialogTxt.preferredWidth, DialogBox.sizeDelta.y);

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

聊天框图片九宫格设置

大概切成这样，图片拉伸就会值拉伸红色框框那里，emmm这张拉起来有点丑凑合吧

九宫格.png

Pivot UI旋转缩放的中心点

就是UI旋转缩放的中心点，左下角为(0,0)右上角为(1,1)
一般他们默认是0.5，0.5 所以缩放长度高度时候会均匀缩放，而我们的聊天框不允许这样缩放所以要设置看下图

Pivot.png

然后就是头像和父物体的设置了我直接上图吧没啥好说的

DialogUI 就是整个Panel的

父物体.png

头像锚点也是设置成这样方便操作

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>
    /// 设置我方的对话位置 内容
    /// </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);

        //设置旋转
        DialogBox.transform.localEulerAngles = new Vector3(0, 180, 0);
        DialogTxt.transform.localEulerAngles = new Vector3(0, 180, 0);
        return this;
    }

    /// <summary>
    /// 设置对方的对话位置 内容
    /// </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是获取该文本的文字 最宽的一段的长度   如果超过540长度 就宽度上限了
        if ((int)(DialogTxt.preferredWidth / 540) == 0)
        {

            //没超过设置的540之前，他的宽度是 TXT和聊天框两边的差距+文字的长度   
            DialogBox.sizeDelta = new Vector2(Mathf.Abs(DialogTxt.rectTransform.sizeDelta.x) + DialogTxt.preferredWidth, DialogBox.sizeDelta.y);

        }
        else
        {
            //超过最大宽度540了 就一直设置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 喜欢的给我点个星星啊
u3d萌新QQ群844087555 欢迎进来灌水=。=

一个简单 小型的C#Socket网络通信库 聊天室示例(三)