UGUI聊天气泡随文字地自适应
在游戏开发过程中用UGUI做聊天界面时,其中聊天气泡会随着聊天内容地长度做自适应。
需要在气泡图片上,添加两个组件,Horizontal Layout Group和Content Size Fitter,下面详细介绍一下这两个组件。
Horizontal Layout Group:
Padding : 包括布局元素距离四个方位的距离,Left : 左边缘 , right : 右边缘 , top : 顶边缘 , bottom : 底边缘
Spacing : 布局元素之间的距离
Child Alignment : 对齐方式
Child Controls Size : 两个可选项,是否控制元素的的宽和高。
Child Force Expand : 两个可选项
width : 是否强行扩大布局元素宽度以填补额外可用的空间
Height : 是否强行扩大布局元素高度以填补额外可用的空间
Content Size Fitter:
content Size Fitter组件是用来设置UI的长度,Horizontal Fit和Vertical Fit分别是控制UI的宽和高,有三个值可选:
Unconstrained : 组件不根据布局元素调整,可手动修改长宽的值
MinSize : 根据布局元素的最小来调整,不能手动修改长度值
PreferredSize : 根据布局元素的内容来调整,不能手动修改长宽的值。
将输入消息显示出来(代码):
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class Chat : MonoBehaviour {
public Text chat; //显示消息
public InputField input; //输入消息
List<string> strs = new List<string>();
int length; //得到输入地长度
int singleLength = 15; //单行长度
void Start () {
}
void Update () {
if (Input.GetKeyDown(KeyCode.Return) && input.text != null)
{
length = input.text.Length;
int index = length / singleLength;
for (int i = 0; i <= index; i++)
{
//将单行文本放入字符链表中
if (input.text.Substring(i * singleLength).Length > singleLength)
{
strs.Add(input.text.Substring(i * singleLength, singleLength) + "\n");
}
else
{
strs.Add(input.text.Substring(i * singleLength));
}
}
foreach (var item in strs)
{
chat.text += item;
}
strs.Clear();
input.text = "";
}
}
}
效果图:
注:
气泡图需要使用九宫格进行切割:
然后将图片的Image组件,Image Type设置为Slied.