preface

For example, I have implemented the requirements on NGUI, but now NGUI has not been used for many years. Now the requirements need to continue to be implemented on the UGUI version. I feel that they can be implemented quickly with components such as grid and ContentSizeFitter. After tossing for an hour, it has taken shape. I'll share it with you here.

effect

realization

Build UI

Let's Demo the effect of big logic imitating WX. Share each other's chat notes with yourself.

main interface

The main chat interface is mainly a rolling record panel, input box and send button:

Own message

This own message bar contains avatars and chat bubbles. The size of chat bubbles is scaled with the size of the content. And on the right side, we build it as follows:

Note that the ContentSizeFitter component is added to the Text to facilitate our automatic line transition and Text box size acquisition, while the horizontal and vertical self-adaptive size needs to be dynamically set. This will be implemented when we code.

Note the settings of BG node:

This is to facilitate content size changes and bubble changes:

Of course, the setting of TalkSelf is the same as above.

Opposite message

The other party's is basically similar to his own, but the position is different.
The other party's message bar contains a avatar and a chat bubble. The size of the chat bubble is scaled with the size of the content. And on the left, we build it as follows:

Note that the ContentSizeFitter component is added to the Text to facilitate our automatic line transition and Text box size acquisition, while the horizontal and vertical self-adaptive size needs to be dynamically set. This will be implemented when we code.

Note the settings of BG node:

This is to facilitate content size changes and bubble changes:

Of course, the setting of TalkOther is the same as above.

Coding implementation

The core idea of this function is to set the size of the bubble background and the size of the whole message entry according to the size of the content. Just distinguish between each other's messages and your own.

Message bar class

The TalkItem script is hung on TalkOther and TalkSelf. Its responsibility is to set the content and synchronously set the bubble size.

Dynamic ContentSizeFitter mode:

        if (Msgtext.preferredWidth >= TextMaxWidth)
        {
            MsgRect.sizeDelta = new Vector2(TextMaxWidth, 0);
            TextCSF.horizontalFit = ContentSizeFitter.FitMode.Unconstrained;
            TextCSF.verticalFit = ContentSizeFitter.FitMode.PreferredSize;
        }
        else
        {
            TextCSF.horizontalFit = ContentSizeFitter.FitMode.PreferredSize;
            TextCSF.verticalFit = ContentSizeFitter.FitMode.PreferredSize;
        }

Adaptive height and width when one line; When there are multiple rows, you only need to adapt the height.

Sync entry, bubble height:

    TextBGRect.sizeDelta = MsgRect.sizeDelta + SizeScal;
    ItemRect.sizeDelta = new Vector2(ItemRect.sizeDelta.x, TextBGRect.sizeDelta.y);
transform.localScale = Vector3.one;

Chat management class

TalkMgr's core responsibility is to add chat messages by category.

    public void AddTalkRecord(string msg, bool IsSelf) {
        GameObject go = Instantiate(IsSelf? SelfItem: OtherItem, TalkParent);
        TalkItem ti = go.GetComponent<TalkItem>();
        ti.SetText(msg);
}

This interface is provided. The parameters are information content and sender.

Test script

The function of TalkTest is to send and simulate replies.

    public void ClickSend() {
        TalkMgr.instance.AddTalkRecord(ipt.text, true);
        Invoke("Reply", Random.Range(1, 4));
    }
    public void Reply() {
        string Repmsg ="";
        for(int i = 0;i < Random.Range(1, 8);i++) 
            Repmsg += "This is a reply message!";
        TalkMgr.instance.AddTalkRecord(Repmsg, false);
}

problem

There are two problems found in the development process, which are also shared here. The questions are as follows:

It can be seen that the synchronization frame is obviously a step late. This problem is that the adaptation of ContentSizeFitter will take a little time. My repair method is to delay 0.2 seconds and change the scale to 1. SetActive cannot be used.

Project engineering

https://download.csdn.net/download/qq_33789001/83784673
If it cannot be opened, it indicates that it has not passed the review