Unity 做一个提示框，背景图片随文字改变大小

目录

一、介绍

二、创建UI物体

三、添加组件

四、运行

五、文字水平居中

结束

---

一、介绍

实现这个功能并不是特别难，我这里主要用了两个布局组件：horizontal layout group，content size fitter，下面是这两个组件的介绍。

Horizontal Layout Group

Unity 的 Horizontal Layout Group（水平布局组）是 Unity 引擎中的一个 UI 布局组件。它用于在水平方向上自动排列其子对象，使它们按照一定的规则进行对齐和布局。

Horizontal Layout Group 可以通过 Unity 的编辑器界面进行配置，也可以通过脚本进行动态设置。使用该组件，您可以轻松地实现水平方向上的自动布局，而无需手动调整每个子对象的位置和大小。 Horizontal Layout Group 具有一些常用的属性，可以用来控制布局的行为，例如：

- Spacing（间距）：用于指定子对象之间的间隔距离。

- Child Alignment（子对象对齐方式）：用于指定子对象在水平方向上的对齐方式，如左对齐、右对齐、居中对齐等。

- Child Force Expand（子对象是否自动拉伸）：用于指定子对象是否在水平方向上自动拉伸以填充布局空间。

- Child Control Width/Height（子对象是否控制宽度/高度）：用于指定子对象是否控制宽度或高度。 通过调整这些属性，您可以根据需要创建水平布局，并自动对齐和调整子对象的位置和大小。

Horizontal Layout Group 是 Unity UI 系统中非常有用的一个布局组件，可用于创建各种水平布局的用户界面，如按钮栏、菜单栏、导航栏等。它提供了一种简便的方式来管理和控制 UI 元素的排列和布局，提高开发效率和用户体验。

Content Size Fitter

Unity 的 Content Size Fitter（内容尺寸适配器）是一个 UI 组件，用于自动调整其所属对象的大小，以适应其内容的大小。它可以确保对象的大小与其子对象的大小保持一致或根据内容进行调整。

Content Size Fitter 可以通过 Unity 的编辑器界面进行配置，也可以通过脚本进行动态设置。使用该组件，您可以轻松地实现 UI 元素的自适应布局，而无需手动调整对象的大小。

Content Size Fitter 具有一些常用的属性，可以用来控制适配器的行为，例如：

- Horizontal Fit（水平适配）：用于指定对象在水平方向上的适配方式，如自动调整大小以适应内容、仅根据最小或最大尺寸调整大小等。

- Vertical Fit（垂直适配）：用于指定对象在垂直方向上的适配方式，如自动调整大小以适应内容、仅根据最小或最大尺寸调整大小等。 通过调整这些属性，您可以根据需要创建自适应的 UI 元素，以确保其大小与内容的大小保持一致或根据内容进行调整。

Content Size Fitter 是 Unity UI 系统中非常有用的一个组件，可用于处理 UI 元素的自适应布局。它可以帮助您轻松地实现不同分辨率、不同内容大小的界面布局，提高应用程序的适应性和可扩展性。

Unity 版本 2019.4.36f1c1，如果你的版本低于我这个版本，组件中的部分功能可能没有

二、创建UI物体

新建一个Canvas，然后创建一个 Image，再在 Image 里面添加一个子物体 Text

如图

场景中效果

此时并没有设置任何参数。

三、添加组件

给 Image 添加两个组件 horizontal layout group，content size fitter

注意图中的设置参数，如下图：

这时候，场景中的布局自动就变成了这样

四、运行

此时还没有写任何的代码，效果已经实现了，运行后，在编辑器中我们改变 Text 的文本的内容，如下

可以看到，场景中，背景图片自动适应了文字的大小

水平方向自适应了大小，并且自动添加了外边距，下面我们看看垂直方向的自适应。

在输入框里按回车键，再给Text 随意添加一些文本。

场景中的效果

五、文字水平居中

 

场景中的效果

结束

如果这个帖子对你有用，欢迎关注 + 点赞 + 留言，谢谢

end