您现在的位置是:首页 >技术教程 >第四十六章 Unity 布局(上)网站首页技术教程

第四十六章 Unity 布局(上)

咆哮的程序猿 2024-06-14 17:17:56
简介第四十六章 Unity 布局(上)

学习了UI元素的使用,并不能构建出一个完整的UI界面,我们需要使用一些方法将这些UI元素按照“设计稿”的效果,将其摆放到对应的位置上。如何摆放这些UI元素,就是我们需要讲的“布局”,当然这需要借助一些布局组件来完成。我们知道在画布Canvas下的每个UI元素都会自动添加 Rect Transform 组件来控制自身的位置和大小。通常情况下,基于Rect Transform组件的anchor(锚点)和 pivot(轴点)的特性,可以让UI元素实现依赖父UI元素的定位功能。例如绑定在父UI元素的左上角或正中央,长度和宽度“填充”父UI元素尺寸等。但是这种布局的方式属于“静态布局”,也就是在Unity中提前设置好的,项目运行后不能改变了。因此,如果我们想要实现项目运行中的“动态布局”,就得需要使用另一种方法了。Unity的动态布局包括 Horizontal Layout Group水平布局组件、Vertical Layout Group垂直布局组件和Grid Layout Group网格布局组件。

首先,我们先介绍Horizontal Layout Group组件。

我们新建一个“SampleScene4.unity”场景,然后添加一个Text UI 元素,如下所示

 

默认情况下,Text的尺寸是160*30的大小。请注意,这个Horizontal Layout Group组件需要附加到父类UI元素中。因此,我们需要创建一个“Panel”的UI元素,我们称之为面板容器。它的作用就是充当父类UI元素,用来放置子类UI元素的。

 

我们发现这个“Panel”面板容器并没有特殊的组件,唯一的就是Image组件而已。并且“Panel”的锚点是一个矩形,它的尺寸就是父类Canvas的大小。也就是说,这个“Panel”面板容器会“撑满”父类Canvas画布。接下来,我们调节“Panel”的锚点(将矩形的四个点拖拽到一个点上去)和尺寸(300*300)来改变的位置和大小。如下所示

 

接下来,我们要做的就是要让这个“Panel”充当父类UI元素,我们之前创建的Text UI元素作为它的子元素。操作非常简单,只需要在层次面板中,将Text拖动到Panel上面即可。

 

该操作并不会影响到场景视图中的UI变化。

接下来,我们就需要给这个“Panel”添加水平布局组Horizontal Layout Group组件。

水平布局组Horizontal Layout Group组件将其子UI元素并排放置(水平方向)在一起。子UI元素的宽度根据各自的最小宽度、偏好宽度和灵活宽度决定。当我们为Panel添加了Horizontal Layout Group组件后,我们发现Text的位置也发生了变化。

这个Text由原来的位置移动到了Panel的左上方位置。这说明Horizontal Layout Group组件起作用了。接下来,我们就来介绍Horizontal Layout Group组件的一些属性。

Padding布局组边缘内的填充。它分为left,right,top,bottom四个数值,分别代表布局组四个方向的边缘。默认情况下,布局组的子UI元素会紧贴着布局组,如果我设置了Padding的话,子UI元素就会与布局组产生Padding数值的间距。说白了,就是不让子UI元素紧贴布局组而已。熟悉Web网页开发的人员应该对这个Padding非常熟悉了。

Spacing布局元素之间的间距,它影响的是子UI元素之间的间隔距离。说白了,就是不想让子UI元素与子UI元素之间紧贴在一起。

Child Alignment用于子UI元素的对齐方式,默认值为Upper Left,也就是在最上面左对齐。当然还有其他值可供选择:Upper Left,Upper Center,Upper Right,Middle Left,Middle Center,Middle Right,Lower Left,Lower Center,Lower Right。根据英文单词,我们就大概知道这些值的含义了。这里就不再解释了,大家可以自己修改试一试。

Control Child Size  布局组是否控制其子布局元素的宽度和高度。说白了,就是父UI元素控制子UI元素的尺寸。默认值是没有勾选,也就是父UI元素不控制子UI元素的尺寸。

Use Child Scale在为子UI元素调整大小的时候,布局组是否考虑其子UI元素的缩放(scale属性不为1)。也就是说,如果子UI元素进行过缩放,那么就按照缩放后的宽高进行排版。

Child Force Expand是否要强制子UI元素扩展以填充额外的可用空间。默认是勾选状态。也就是说,当父类UI元素有多余的空间时候,子UI元素会根据Layout Element中设置其尺寸。

为了演示水平布局组的效果,我们在Panel的下面再添加一个Text2 UI元素。

也就是说,Panel下面有两个文本 UI子元素。

 

我们发现两个Text UI 元素在水平方向上面依次放置在Panel的最上面。由于Panel的宽度为300,而两个Text的总宽度为 160 + 160 = 320,因此两个Text 超出了Panel的范围。这种情况下,我们有两种解决办法,一个是直接修改Text的Rect Transform里面的Width属性。另一种方式就是修改布局。我们下一个章节介绍如何修改。

本课程涉及的内容已经共享到百度网盘:https://pan.baidu.com/s/1e1jClK3MnN66GlxBmqoJWA?pwd=b2id

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。