UGUI之UI组件横向和纵向布局

一.横向布局组件 Horizontal Layout Group：横向布局组件。 表格布局组件是功能最全的一个布局组件，可以实现表格，横向，纵向布局； 而横向布局组件可以理解成是表格布局组件功能的一部分。 组件属性： Child Controls Size：子物体的大小。 —勾选Width：自动缩放所有子物体的宽度，让子物体横向占满空间. —勾选Height：自动缩放所有子物体的高度，让子物体竖向占满空间. Child Force Expand：子物体的扩展。 如果要使用上方的“子物体的大小”属性，这里的属性必须勾选，上方的属性依赖该属性。 案例：使用Horizontal Layout Group组件做一个横向滑动框 1.新建一个Image，命名BG，调节大小和透明度[

](http://www.wjgbaby.com/wp-content/uploads/2017/12/17122701-300x208.png)](http://www.wjgbaby.com/wp-content/uploads/2017/12/17122701.png) 2.创建一个空物体Empty，调节大小，添加Image组件并调节透明度，添加Mask组件起到遮罩作用。添加ScrollRect组件，取消勾选Vertical，注意Grid最后要拖入到ScrollRect组件的Content。 [](http://www.wjgbaby.com/wp-content/uploads/2017/12/17122702.jpg)3.创建空物体Grid，添加Horizontal Layout Group组件，调节边距，勾选Height。添加Content Size Fitter组件，进行内容尺寸的过滤，并设置Horizontal Fit为Preferred Size。 [](http://www.wjgbaby.com/wp-content/uploads/2017/12/17122703.jpg) 4.在Grid下面添加各种颜色的Image，注意调节大小。 效果如下(gif图片)： [

二.纵向布局组件 Vertical Layout Group：纵向布局组件。 纵向布局组件和横向布局组件使用是完全一样的，包括组件属性也是完全一样；区别就是一个是横向，一个是纵向，所以不写了。