功能需求：

假设项目中有一个UI公告板的需求，这个公告板的长度或者宽度是固定的。里面有很多带文字的新闻，但是这些个新闻的字数和大小是不固定的，要求模仿自动布局组件，写一个组件满足UI的需求。

前置学习（主要学习来自与唐老狮的UGUI课以及自己总结，感兴趣可以自行去购买查看内容）

要想完成该功能，首先需要学习已经存在的自动布局组件，了解已经存在的自动布局组件为什么不能满足该需求。

  1. Layout Properties

Unity luban 自定义 unity自定义组件_自动布局

  • 可以通过点击UI控件左下角的Layout Properties查看该UI控件的属性，也可以手动更改。通过添加Layout Elements组件去更改。

  • Unity luban 自定义 unity自定义组件_Unity luban 自定义_02

  • 其他具体的介绍见第二条，该博客非常好的讲解了每个元素的作用
  1. 水平垂直布局组件

Unity luban 自定义 unity自定义组件_自动布局_03

  • 将子对象并排或者竖直放在一起，组件名Horizontal Layout Group 和 Vertical Layout Group
  • 参数相关：
  • Padding：与左右上下偏移的位置
  • Spacing:子对象之间的间距
  • ChildAlignment:九宫格对其方式，在父对象有富余的时候，能在九宫格中进行对齐。
  • Control Child Size：是否由父物体自动控制子对象的宽高，比较重要的功能。
  • Use Child Scale：在设置子对象大小和布局时，是否考虑子对象的缩放。如果勾选了，缩放后的大小就会参与进布局的计算中，如果没有勾选，就会按照原有的大小去计算。
  • Child Force Expand：是否强制子对象拓展以填充额外可用空间，有点像平均分配大小，当不是自动控制大小的时候，并不会改变原有的物体大小，但是会把整个长度平均分成几块，然后把子物体放进平均块中，这个分的比例会根据每个物体的Flexible来计算。当自动控制大小的时候，首先会铺满这个平均块中，在改变父物体的大小时，平均块的大小随之改变，子物体的大小也随之改变。但是子物体不会小于本身的min值，而带有preferred值的子物体，会优先的占据这个大小，然后其他的子物体再平均分块。该组件理解起来较为困难，需要多实践实践。
  1. 网格布局组件

Unity luban 自定义 unity自定义组件_unity_04

  • 将子对象当成一个一个小格子，放进父物体的范围中
  • 组件名：Grid Layout Group
  • 参数相关：
  • 其中Padding，Spacing，ChildAlignment和上面水平垂直完全一样的功能，不再说明
  • Cell Size 该项用于设置每个格子的长宽大小，该项注定了无法设置子对象的大小，也就不适配上述的需求。
  • StartCorner 开始摆放的位置，有4个位置可以选择。
  • StartAxis 摆放的顺序，和StartCorner结合起来，那就是控制格子的走向。
  • Constraint 有三个可以选择，Flexible 不限制行列数量，Fixed Column Count限制列的数量，Fixed Row Count限制行的数量
  1. 内容大小适配器：Content Size Fitter

Unity luban 自定义 unity自定义组件_unity_05

  • 它可以自动的调整RectTransform的长宽来让组件自动设置大小
  • 参数相关：
  • Horizontal Fit :如何控制宽度
  • Vertical Fit :如何控制高度
  • Unconstrained：不根据布局元素伸展
  • Min Size：根据布局元素的最小宽高度来伸展
  • Preferred Size：根据布局元素的偏好宽度来伸展宽度。
  • 补充：该内容是非常重要的一个功能组件，他可以让子物体大小改变的情况下，超出父物体的范围或者父物体富于内容过多。自动的改变设置大小。其中在Text上用的较多，文字变多内容也能变大。
  • 补充2：但是在挂载自动布局组件的子物体上，并不能使用这个内容，特别是长宽自动布局，所以自动布局组件才给了个自动控制，能根据子物体的min和preferred值去自动扩展大小（通常子物体为Text或者带有自动布局组件的时候，内容变多后，min和preferred值会随着改变），这个就是自动控制子物体的大小的必要性，这也是设计扩展组件的关键点和难点。
  1. 宽高比适配器

Unity luban 自定义 unity自定义组件_ui_06

  • 组件名：Aspect Ratio Fitter
  • 功能：让布局元素按照一定比例来调整自己的大小；使布局元素在父对象内部根据父对象大小进行适配。
  • 参数相关：
  • Aspect Mode:适配模式，如何调整矩形大小来实施宽高比。
  • None：不让举行适应宽高比
  • Width Controls Height：根据宽度自动调整高度
  • Height Controls Width：根据高度自动调整宽度
  • Fit In Parent：自动调整宽度、高度、位置和锚点，使矩形适应父项的矩形，同时保持宽高比，会出现“黑边”
  • Envelope Parent：自动调整宽度、高度、位置和锚点，使矩形覆盖父项的整个区域，同时保持宽高比，会出现“裁剪”
  • Aspect Ratio：宽高比；宽除以高的比值

在了解完现有的自动布局组件的用法后，我们就要分析为什么不能达到我们的需求了。

1.该需求首先是大小可以手动改变大小，从各个公告大小不同就能看出来，所以Grid无法满足我们的需求。

2.要按格子的模式去填充进矩形当中，自然也无法使用长宽自动布局了。

在知道了我们得自定义自动布局组件后，我们就要先开始分析其他两种布局组件的源码，明白他们为什么能够自动布局，将在下一篇文章继续。