《虚拟仿真实验脚本与策划》课件-四-4-知识点3：UI自动布局组件

矿井灾害应急救援（火灾）虚拟仿真实验UI自动布局组件目录01自动布局组件布局功能介绍02工作任务验收检查本节内容的掌握程度Part1自动布局组件01自动布局组件布局功能介绍■Normal下新建面板，右键点击Normal-UI-Panel新建面板Panel类似于3D物体中的空物体功能，方便管理面板元素新建面板的方式01自动布局组件布局功能介绍■新建Image元素，右键点击Panel-UI-ImagePanel本质上也是Image，只不过是半透明的白色图片添加面板的位置01自动布局组件布局功能介绍■复制两个Image元素，复制元素可以选择Ctrl+C粘贴使用Ctrl+V也可以使用Ctrl+D直接完成复制粘贴工作快速添加面板元素01自动布局组件添加布局组件■面板上添加布局组件。选中Panel点击Inspector上的AddComponent组件，在搜索框中搜索Layout添加布局组件01自动布局组件添加布局组件■添加HorizontalLayoutGroup，该组件是布局组件中的水平布局组件，可将元素均匀排布在当前的Panel中布局组件参数调整01自动布局组件添加布局组件■调整参数ChildAlignment，控制元素的对齐方式当前面板参数选择为MiddleCenter，可以将元素上下左右都居中的方式进行排列布局组件参数调整01自动布局组件添加布局组件■调整参数Padding调整间隔。可以从上下左右多个方向对元素进行间隔调整Padding参数面板01自动布局组件其他布局组件■VerticalLayoutGroup，该组件可以将对应的元素垂直方向上均匀进行排列。Vertical组件参数内容类似于Horizontal垂直布局组件面板参数内容01自动布局组件其他布局组件■GridLayoutGroup按照固定行列布局，可以将元素在面板上从单个角度，如左上，对元素进行排列，可以完成背包等情况下的功能Grid的排列方式01自动布局组件其他布局组件■CellSize和Padding参数调整，分别调整元素的大小和各个元素之间的间隔。参数面板与水平/垂直布局组件的内容类似元素大小和间隔的参数01自动布局组件其他布局组件■StartCorner，该参数可以设置元素排列的顺序，如这里选择为UpperLeft可以理解为从上到下从左到右进行对齐StartCorner的参数选择01自动布局组件其他布局组件■StartAxis，该参数可以设置元素初始的排列方式，这里设置为水平，则元素首先以水平的方式进行排布排列轴向的调整01自动布局组件其他布局组件■Constraint，该参数修改元素布局的不同约束方式，可以限制元素尺寸上下限，同时填充空白间隔排列元素的调整01自动布局组件其他布局组件■ContentSizeFitter，内容尺寸适配器。挂载在带文本/图片/子布局的UI物体上，让物体宽高自动跟随内部内容大小变化，不用手动改RectTransform尺寸。Horizontal/VerticalFit这两个参数可以控制从水平和垂直方向分别自适应调整元素大小元素大小自适应Part2工作任务验收02工作任务验收工作内容1■检查是否使用自动布局组件结合演示视频中面板内容制作相关的面板，如：敲帮问顶、气体检测、生命探测等环节时的面板图文配合的面板大都使用了水平自动布局组件，来显示面板上的内容根据面板