Unity實現(xiàn)微信聊天框界面

更新時間：2021年10月15日 16:30:11 作者：永恒星

這篇文章主要為大家詳細介紹了Unity實現(xiàn)微信聊天框界面，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Unity實現(xiàn)微信聊天框界面的具體代碼，供大家參考，具體內(nèi)容如下

【原理】

一個聊天界面主要由三個部分組成：內(nèi)容區(qū)、可見區(qū)、滑動條

可見區(qū)在內(nèi)容區(qū)上邊，內(nèi)容區(qū)會隨著聊天內(nèi)容變得非常長，但只有位于可見區(qū)的部分才能被看見，其他區(qū)域的看不見。通過滑動條上下移動內(nèi)容區(qū)，看見的內(nèi)容發(fā)生變化。

【步驟】

新建一個UI->Panel，重命名為ChatPanel，添加Scroll Rect組件
在ChatPanel下新建一個UI->Panel，重命名為ViewPort,添加Mask組件
在ChatPanel下新建一個UI->Scrollbar，Direction選擇Bottom To Top
在ViewPort下新建一個UI->Panel，移除Image組件，重命名為Content，調(diào)整其Anchor和Pivot
調(diào)整ViewPort、Content、Scrollbar的Height一致

給Scroll Rect組件復制如下

創(chuàng)建聊天氣泡

效果如下

在bubble上添加 ContentSizeFitter和Vertical Layout Group組件，使得bubble大小隨文本大小改變。在Text上添加LayoutElement。效果如下

創(chuàng)建右邊的聊天氣泡，效果如下：

新建一個腳本，名為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;//文本內(nèi)容的最大寬度
 
    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);
        //設置氣泡內(nèi)容
        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);
        }
    }
}

【測試腳本——按空格添加內(nèi)容】

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