《虚拟现实脚本与策划》教案-四-4-知识点3：UI自动布局组件

任务4主要UI面板制作任务描述适配岗位与职责使用Unity中的UI功能，制作项目中的各种面板，包括：提示面板、信息面板、小地图。使用代码制作不同面板之间的跳转逻辑，使用UI组件制作自动布局。UI界面是项目交互组成中重要的一环。岗位：VR开发工程师职责：VR项目开发学习目标知识目标：熟练Canvas、RectTransform等组件的作用和参数的调整。了解EventSystem事件系统在响应面板过程中的作用。了解面板分类，将面板合理分类划分层级进行管理。认识布局组件和自适应组件的参数并能熟练调整。能力目标：能熟练使用UI控件制作可交互的UI面板。能熟练编写UI逻辑，控制面板显示和隐藏，控制新面板加载。能熟练使用水平/垂直布局组件分配元素位置。素质目标：具备审美素养，能选择合理的UI元素，保持项目整体UI的协调性和UI风格一致性。了解其他加载资源的方式，如AB包等提升项目性能。学习重难点重点：Canvas和EventSystem等静态组件的使用。Button、Image、ScrollView等核心控件的使用。面板布局组件如Horizontal/VerticalLayoutGroup的使用。难点：ContentSizeFilter组件的使用。控制面板逻辑的数据结构的设计和使用。操作步骤职业知识布局功能介绍布局组件使用步骤1：新建面板找到Normal下新建面板，右键点击Normal-UI-Panel，新建面板Panel类似于3D物体中的空物体功能，方便管理面板元素。新建Image元素，右键点击Panel-UI-Image，Panel本质上也是Image。再复制两个Image元素，复制元素可以选择Ctrl+C粘贴使用Ctrl+V，同时也可以使用Ctrl+D直接完成复制粘贴工作。步骤2：添加布局组件面板上添加布局组件。选中Panel点击Inspector上的AddComponent组件，在搜索框中搜索Layout步骤3：调整布局组件参数添加HorizontalLayoutGroup，该组件是布局组件中的水平布局组件，可将元素均匀排布在当前的Panel中。调整参数ChildAlignment，控制元素的对齐方式，当前面板参数选择为MiddleCenter，可以将元素上下左右都居中的方式进行排列。调整参数Padding调整间隔。可以从上下左右多个方向对元素进行间隔调整。垂直布局和元素布局VerticalLayoutGroup，该组件可以将对应的元素垂直方向上均匀进行排列。Vertical组件参数类似于Horizontal。GridLayoutGroup按照固定行列布局，可以将元素在面板上从单个角度，如左上，对元素进行排列，可以完成背包等情况下的功能。CellSize和Padding参数调整，分别调整元素的大小和各个元素之间的间隔。参数面板与水平/垂直布局组件的内容类似。StartCorner，该参数可以设置元素排列的顺序，如这里选择为UpperLeft可以理解为从上到下从左到右进行对齐。StartAxis，该参数可以设置元素初始的排列方式，这里设置为水平，则元素首先以水平的方式进行排布。Constraint，该参数修改元素布局的不同约束方式，可以限制元素尺寸上下限，同时填充空白间隔。ContentSizeFitter，内容尺寸适配器，挂载在带文本/图片/子布局的UI物体上，让物体宽高自动跟随内部内容大小变化，不用手动改RectTransform尺寸。Horizontal/VerticalFit这两个参数可以控制从水平和垂直方向分别自适应调整元素大小。工作任务验收步骤1：利用使用自动布局组件结合演示视频中面板内容制作相关的面板，如：敲帮问顶、气体检测、生命探测等环节时的面板。步骤2：能熟练分析需求，使用该组件调整和分析AI数字人面板的结构。知识点1：自动布局组件的使用场景在制作类背包系统时会使用知识点2：水