UGUI学习笔记之聊天系统实现

    最近工作需要做了一个聊天系统，花了将近一个月左右完成了百分之七八十，勉强能用吧。聊天记录的拉取还没来得及做。趁我还记得就做一下复盘，记录一下这一个月遇到的坑和知识点~

    做聊天第一件事当然是选择一个支持item动态大小的scroll插件啦~我选择的是LoopScrollRect插件，插件的相关用法和介绍我就贴个链接，这儿就不多赘述了。

LoopScrollRect介绍用法API戳这里~

    定好要使用的插件之后就可以开始做UI的设计了，首先是做聊天item的预设，我这边做的包括3个部分，自己的聊天item，别人的聊天item，时间item，如图

    新建一个LoopScroll，在其子物体content下挂上VerticalLayoutGroup和ContentSizeFitter组件之后，再在pop_item_obj上挂上用于布局的LayoutElement组件，UI的准备工作就差不多完成啦，接下来要做的就是用代码在content里生成聊天item并且计算好位置大小做好布局就可以了！

    顺带说一句，在聊天item位置的布局逻辑里我没有用ugui自带的布局组件，因为这玩意儿很坑，会延迟一帧刷新，就会导致item重叠，就算调了强制刷新方法，还是会有一些奇奇怪怪的问题，所以干脆自己算位置大小（此处感谢一位大佬提供的计算方法）。

    此处贴上气泡高度计算的lua方法

--自己算气泡高度
function ChatWin:SetPopHeight(pop_item,pop_comp,msg_comp,show_content, is_time)
    local x = 650;
    local y = 50;
    local max_width = 370;
    local min_width = 10;
    local interval = 5;

    --if not is_time then
    --文字显示的最大范围，需要减去tmpText的边距
        --local text_max_width = max_width - 25 - 12;
        local v2 = msg_comp:GetPreferredValues(show_content, max_width, 0);
        v2.y = math.min(v2.y, 1000);
        x = math.max(math.min(v2.x + 16,max_width), min_width);
        v2.y = v2.y + 10;         --需要加上文字跟气泡边距
        y = v2.y + 25 + interval;         --25是头像相对高度
    --end
    if is_time then
        y = 22;
    end

    pop_comp:GetComponent("RectTransform").sizeDelta = UVector2(x, v2.y);
    pop_item:GetComponent("RectTransform").sizeDelta = UVector2(0, y);
    pop_item.gameObject:GetComponent("LayoutElement").preferredHeight = y;
end

    讲一下GetPreferredValues这个方法，是textmeshpro自带的计算text宽高的方法，本来计算text高度跟字体以及字体大小是否加粗之类的设置息息相关是一件很困难的事情，但是因为textmeshpro提供了这个方法，所以计算气泡高度就没有什么难度了。

    然后就是图文混排，这个是textmeshpro自带的也没有啥好说的_(:з」∠)_