Unity微信聊天框界面制作

【原理】

一个聊天界面主要由三个部分组成:内容区、可见区、滑动条

可见区在内容区上边,内容区会随着聊天内容变得非常长,但只有位于可见区的部分才能被看见,其他区域的看不见。通过滑动条上下移动内容区,看见的内容发生变化。

【步骤】

  • 新建一个UI->Panel,重命名为ChatPanel,添加Scroll Rect组件
  • 在ChatPanel下新建一个UI->Panel,重命名为ViewPort,添加Mask组件
  • 在ChatPanel下新建一个UI->Scrollbar,Direction选择Bottom To Top
  • 在ViewPort下新建一个UI->Panel,移除Image组件,重命名为Content,调整其Anchor和Pivot
  • 调整ViewPort、Content、Scrollbar的Height一致

  •  给Scroll Rect组件复制如下

  •  创建聊天气泡
    • 效果如下

  •    在bubble上添加 ContentSizeFitter和Vertical Layout Group组件,使得bubble大小随文本大小改变。在Text上添加LayoutElement。效果如下

 

  •  创建右边的聊天气泡,效果如下:

  • 新建一个脚本,名为ChatPanelManager,挂在ChatPanel下

【脚本】

using UnityEngine;
using UnityEngine.UI;

public class ChatPanelManager : MonoBehaviour
{
    public GameObject leftBubblePrefab;
    public GameObject rightBubblePrefab;

    private ScrollRect scrollRect;
    private Scrollbar scrollbar;
    
    private RectTransform content;

    [SerializeField] 
    private float stepVertical; //上下两个气泡的垂直间隔
    [SerializeField] 
    private float stepHorizontal; //左右两个气泡的水平间隔
    [SerializeField]
    private float maxTextWidth;//文本内容的最大宽度

    private float lastPos; //上一个气泡最下方的位置
    private float halfHeadLength;//头像高度的一半

    public void Init()
    {
        scrollRect = GetComponentInChildren<ScrollRect>();
        scrollbar = GetComponentInChildren<Scrollbar>();
        content = transform.Find("ViewPort").Find("Content").GetComponent<RectTransform>();
        lastPos = 0;
        halfHeadLength = leftBubblePrefab.transform.Find("head").GetComponent<RectTransform>().rect.height / 2;
    }

    public void AddBubble(string content, bool isMy)
    {
        GameObject newBubble = isMy ? Instantiate(rightBubblePrefab, this.content) : Instantiate(leftBubblePrefab, this.content);
        //设置气泡内容
        Text text = newBubble.GetComponentInChildren<Text>();
        text.text = content;
        if (text.preferredWidth > maxTextWidth)
        {
            text.GetComponent<LayoutElement>().preferredWidth = maxTextWidth;
        }
        //计算气泡的水平位置
        float hPos = isMy ? stepHorizontal / 2 : -stepHorizontal / 2;
        //计算气泡的垂直位置
        float vPos = - stepVertical - halfHeadLength + lastPos;
        newBubble.transform.localPosition = new Vector2(hPos, vPos);
        //更新lastPos
        Image bubbleImage = newBubble.GetComponentInChildren<Image>();
        float imageLength = GetContentSizeFitterPreferredSize(bubbleImage.GetComponent<RectTransform>(), bubbleImage.GetComponent<ContentSizeFitter>()).y;
        lastPos = vPos - imageLength;
        //更新content的长度
        if (-lastPos > this.content.rect.height)
        {
            this.content.sizeDelta = new Vector2(this.content.rect.width, -lastPos);
        }

        scrollRect.verticalNormalizedPosition = 0;//使滑动条滚轮在最下方
    }

    public Vector2 GetContentSizeFitterPreferredSize(RectTransform rect, ContentSizeFitter contentSizeFitter)
    {
        LayoutRebuilder.ForceRebuildLayoutImmediate(rect);
        return new Vector2(HandleSelfFittingAlongAxis(0, rect, contentSizeFitter),
            HandleSelfFittingAlongAxis(1, rect, contentSizeFitter));
    }

    private float HandleSelfFittingAlongAxis(int axis, RectTransform rect, ContentSizeFitter contentSizeFitter)
    {
        ContentSizeFitter.FitMode fitting =
            (axis == 0 ? contentSizeFitter.horizontalFit : contentSizeFitter.verticalFit);
        if (fitting == ContentSizeFitter.FitMode.MinSize)
        {
            return LayoutUtility.GetMinSize(rect, axis);
        }
        else
        {
            return LayoutUtility.GetPreferredSize(rect, axis);
        }
    }
}

【测试脚本——按空格添加内容】

using System.Collections.Generic;
using UnityEngine;


public class test : MonoBehaviour
{
    public ChatPanelManager cpm;
    private int count;
    private List<string> dialogue = new List<string>();
    void Start()
    {
        cpm.Init();
        dialogue.Add("永恒之星");
        dialogue.Add("永恒之星永恒之星");
        dialogue.Add("永恒之星永恒之星永恒之星");
        dialogue.Add("永恒之星永恒之星永恒之星永恒之星");
        dialogue.Add("永恒之星永恒之星永恒之星永恒之星永恒之星");
        dialogue.Add("永恒之星永恒之星永恒之星永恒之星永恒之星永恒之星");
        dialogue.Add("永恒之星永恒之星永恒之星永恒之星永恒之星永恒之星永恒之星");
        dialogue.Add("永恒之星永恒之星永恒之星永恒之星永恒之星永恒之星永恒之星");
        dialogue.Add("永恒之星永恒之星永恒之星永恒之星永恒之星永恒之星永恒之星永恒之星");
        dialogue.Add("永恒之星永恒之星永恒之星永恒之星永恒之星永恒之星永恒之星永恒之星永恒之星永恒之星永恒之星永恒之星永恒之星永恒之星永恒之星永恒之星");
    }

    void Update()
    {
        if (Input.GetKeyDown(KeyCode.Space))
        {
           cpm.AddBubble(dialogue[count],Random.Range(0,2)>0);
           count++;
           if (count > dialogue.Count-1)
           {
               count = 0;
           }
        }
    }
}


【测试结果】

 【补充说明】

 这里核心是实现了聊天气泡内容的添加,至于头像和name,比较简单,我们可以在AddBubble方法中自己补充实现。

要下载Unity聊天界面项目,你可以按照以下步骤操作。 步骤1:准备工作 在开始下载项目之前,你需要确保你的计算机已经安装了Unity开发环境。如果没有安装,你需要先下载并安装它。你可以在Unity官方网站上下载适合你操作系统的最新版本。 步骤2:寻找合适的项目 在Unity Asset Store或其他类似的网站上,搜索并找到你感兴趣的聊天界面项目。浏览不同的项目,阅读详细的描述和用户评论,找到适合你需求的项目。确保项目的兼容性和最新版本的Unity。 步骤3:下载项目 一旦你找到了合适的项目,点击下载按钮。通常会有几个不同的下载选项,你可以选择下载整个项目文件,或者只下载示例场景和必需的资源文件。选择适合你需求的下载选项,并等待下载完成。 步骤4:导入项目 下载完成后,打开Unity开发环境。在Unity菜单中选择“导入”或“打开项目”,并在弹出的浏览器中选择你下载的项目文件。Unity会自动导入项目文件和相关资源。这可能需要一些时间,取决于项目的大小。 步骤5:使用项目 一旦项目成功导入,你就可以开始使用它了。通过Unity编辑器探索项目文件夹结构,并查看项目中包含的脚本、场景和资源。根据你的需求和项目的功能,你可以对项目进行修改和定制。 这样,你就可以下载并使用Unity聊天界面项目了。记得定期检查项目的更新和新版本,以获取最新的功能和修复的bug。
评论 19
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值