UGUI自适应气泡

发表于

今天终于把困惑我好久的气泡做好了，效果类似于那些聊天APP里的气泡效果。就比如这样

效果图

效果图1
效果图2

对于普通的固定分辨率，这种效果来说可能比较好做.但是我就喜欢那种自适应的UI

普通的气泡思路是这样的，确定每行的宽度、高度，当文字不超过这个宽度时。设置文字的背景和文字长度相同，高度不变。

当文字超过固定宽度，文字换行，并且设置文字的背景高度增加。

如果是自适应的话，这个宽度无法确定。算了我不说有哪些问题了，直接说我怎么做的吧。

Canvas Scaler设置

Canvas Scaler中UI Scale Mode设置的Scale With Screen Size

Reference Resolution 800*600

Match 设置Match Width Or Height

上面这个怎么设置应该无所谓，哈哈哈

预制体制作

使用预制体可以减少很多麻烦，首先样式设置很方便；其次Canvas有一些缩放什么的，通过预制体可以直接获得；总之就是很方便就是了。

预制体锚点设置为左下角，文字Padding 15，背景图Padding 5（随意）

代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
//气泡最长的数值，气泡单行数值，边缘留空宽、高
private float singleW, singleH, PaddingW, PaddingH;
//提前把预制体添加到Canvas下面后执行
private IEnumerator waitjisuan()
{
//保险起见，等待一帧，
    yield return new WaitForSeconds(0.08f);
    singleW = contentL.preferredWidth;
    EmpterW = dialog.GetComponent<RectTransform>().sizeDelta.x - singleW;
    singleH = contentL.preferredHeight;
    EmpterH = dialog.GetComponent<RectTransform>().sizeDelta.y - singleH;
}
//使用的时候
IEnumerator Click()
{
    float trueLenght = contentL.preferredWidth;
    float y;
    if (trueLenght > singleW)
    {
	//超过指定长度，高度增加
        dialogWidth = singleW;
        y = 2 * singleH;
    }
    else
    {
	//没有超过指定长度
        dialogWidth = trueLenght;
        y = singleH;
    }
    traRect.sizeDelta = new Vector2(dialogWidth + PaddingW, y + PaddingH);
}

就这样，这些是关键的地方，其他根据自己的情况再做修改吧。