找回密码
 注册帐号

扫一扫,访问微社区

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

14
回复
1541
查看
[ 复制链接 ]

15

主题

25

帖子

220

积分

Rank: 9Rank: 9Rank: 9

UID
327626
好友
6
蛮牛币
87
威望
0
注册时间
2019-7-19
在线时间
164 小时
最后登录
2019-12-1
2019-8-26 09:29:06 显示全部楼层 阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?注册帐号

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

先上张效果图好了,嗯又是这该死的1MB限制
动态聊天框演示.gif



说下大概实现过程
TXT.png
首先TXT锚点设置成上面那个,方便我们计算 因为这样的话他的宽度就会随着聊天框增长而增长  我们只需要设置left 和right 两边的距离就行了 ,不懂啥意思看图吧
TXT差距.png
然后就是获取到 txt文字里面宽度最长的那行长度 如果大于自己设置的最大宽度 聊天框就设置宽度最大值就行了  Txt高度靠ContentSizeFitter组件适配垂直高度
所以 聊天框的宽度计算就是  如果没大于自己设置的宽度就是 txt 两边的差距+文字最长的那行,如果这两者加起来超过了设置的宽度,就直接设置最大宽度就好
聊天框长计算的话 就是  原本聊天框的高度+文字的高度
因为 还要匹配一下头像图片高度 所以这里用了父物体来增加这个高度就是Dialogui   
聊天框锚点就设置成这样 父物体高度.png 随着父物体高度增加而增加


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


[C#] 纯文本查看 复制代码
 [/size]
[size=3]//Dialogui聊天框的父物体[/size]
[size=3]//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

完整代码:
[C#] 纯文本查看 复制代码
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;
    }

    

}




好了下篇再继续了


工程地址
游客,如果您要查看本帖隐藏内容请回复




回复

使用道具 举报

7日久生情
3148/5000
排名
528
昨日变化

2

主题

842

帖子

3148

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
19501
好友
1
蛮牛币
1868
威望
0
注册时间
2014-3-29
在线时间
852 小时
最后登录
2021-4-11
2019-8-26 10:15:10 显示全部楼层
一个简单 小型的C#Socket网络通信库 聊天室示例
回复 支持 反对

使用道具 举报

3偶尔光临
179/300
排名
10705
昨日变化

1

主题

26

帖子

179

积分

Rank: 3Rank: 3Rank: 3

UID
296815
好友
0
蛮牛币
283
威望
0
注册时间
2018-9-12
在线时间
44 小时
最后登录
2020-7-25
2019-8-26 16:00:59 显示全部楼层
33333333333333
回复

使用道具 举报

3偶尔光临
179/300
排名
10705
昨日变化

1

主题

26

帖子

179

积分

Rank: 3Rank: 3Rank: 3

UID
296815
好友
0
蛮牛币
283
威望
0
注册时间
2018-9-12
在线时间
44 小时
最后登录
2020-7-25
2019-8-26 16:02:36 显示全部楼层
33333333333333
回复

使用道具 举报

0

主题

19

帖子

81

积分

Rank: 2Rank: 2

UID
329538
好友
0
蛮牛币
663
威望
0
注册时间
2019-8-16
在线时间
62 小时
最后登录
2020-1-23
2019-8-26 17:03:12 显示全部楼层
666666666666666666
回复 支持 反对

使用道具 举报

5熟悉之中
895/1000
排名
2836
昨日变化

0

主题

64

帖子

895

积分

Rank: 5Rank: 5

UID
120082
好友
3
蛮牛币
2838
威望
0
注册时间
2015-8-28
在线时间
315 小时
最后登录
2021-2-8
2019-8-27 09:05:17 显示全部楼层
666666666666666666666666
回复 支持 反对

使用道具 举报

7日久生情
3789/5000
排名
10705
昨日变化

0

主题

1651

帖子

3789

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
301976
好友
1
蛮牛币
3637
威望
0
注册时间
2018-10-31
在线时间
2040 小时
最后登录
2021-4-11
2019-8-27 10:11:24 显示全部楼层
可以可以,感谢大佬分享
回复 支持 反对

使用道具 举报

0

主题

4

帖子

20

积分

Rank: 1

UID
329203
好友
0
蛮牛币
121
威望
0
注册时间
2019-8-13
在线时间
16 小时
最后登录
2019-9-26
2019-8-27 10:32:52 显示全部楼层
看看参考一下
回复

使用道具 举报

7日久生情
2420/5000
排名
474
昨日变化

2

主题

104

帖子

2420

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
69739
好友
0
蛮牛币
3066
威望
0
注册时间
2015-1-20
在线时间
772 小时
最后登录
2021-4-1
2019-9-5 09:29:28 显示全部楼层
学习学习
回复

使用道具 举报

5熟悉之中
633/1000
排名
14497
昨日变化

0

主题

42

帖子

633

积分

Rank: 5Rank: 5

UID
265586
好友
0
蛮牛币
685
威望
0
注册时间
2018-1-21
在线时间
535 小时
最后登录
2021-4-6
2019-10-8 09:36:03 显示全部楼层
受益匪浅,谢谢大佬
回复 支持 反对

使用道具 举报

15

主题

25

帖子

220

积分

Rank: 9Rank: 9Rank: 9

UID
327626
好友
6
蛮牛币
87
威望
0
注册时间
2019-7-19
在线时间
164 小时
最后登录
2019-12-1
楼主 2019-10-8 10:13:54 显示全部楼层
微笑要拍照 发表于 2019-10-8 09:36
受益匪浅,谢谢大佬

进去给我点颗星星啊
回复 支持 反对

使用道具 举报

2初来乍到
111/150
排名
16953
昨日变化

0

主题

16

帖子

111

积分

Rank: 2Rank: 2

UID
92797
好友
0
蛮牛币
67
威望
0
注册时间
2015-4-16
在线时间
55 小时
最后登录
2020-12-4
2019-10-21 17:17:32 显示全部楼层
eeeeeeeeeeeeeeeeeeeeeee
回复 支持 反对

使用道具 举报

5熟悉之中
985/1000
排名
3912
昨日变化

1

主题

140

帖子

985

积分

Rank: 5Rank: 5

UID
68132
好友
7
蛮牛币
1476
威望
0
注册时间
2015-1-13
在线时间
480 小时
最后登录
2021-1-29
QQ
2021-1-11 16:42:21 显示全部楼层
一个简单 小型的C#Socket网络通信库 聊天室示例
回复 支持 反对

使用道具 举报

7日久生情
1940/5000
排名
5015
昨日变化

4

主题

423

帖子

1940

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
191995
好友
1
蛮牛币
2643
威望
0
注册时间
2016-12-13
在线时间
1213 小时
最后登录
2021-4-6
2021-3-9 15:28:04 显示全部楼层
{:98:}{:98:}
回复

使用道具 举报

7日久生情
4914/5000
排名
227
昨日变化

5

主题

332

帖子

4914

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
14807
好友
3
蛮牛币
7154
威望
0
注册时间
2014-2-18
在线时间
2549 小时
最后登录
2021-4-11
2021-3-24 17:57:35 显示全部楼层
一个简单 小型的C#Socket网络通信库 聊天室示例
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册帐号

本版积分规则

关注游戏蛮牛公众号送vip