Unity的UGUI自动布局小功能组件制作及学习历程（1）

功能需求：

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

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

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

1. Layout Properties

   

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

   • (54条消息) Unity/Auto Layout -- 理解Layout Elements（布局元素）_路人王小二的博客-CSDN博客_unity 布局https://blog.csdn.net/qq_28849871/article/details/79528697?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164515718416780271535209%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=164515718416780271535209&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-4-79528697.pc_search_result_cache&utm_term=unity+ugui%E8%87%AA%E5%8A%A8%E5%B8%83%E5%B1%80%E7%BB%84%E4%BB%B6&spm=1018.2226.3001.4187

   • 其他具体的介绍见第二条，该博客非常好的讲解了每个元素的作用

2. 水平垂直布局组件

     

   • 将子对象并排或者竖直放在一起，组件名Horizontal Layout Group 和 Vertical Layout Group

   • 参数相关：

     • Padding：与左右上下偏移的位置

     • Spacing:子对象之间的间距

     • ChildAlignment:九宫格对其方式，在父对象有富余的时候，能在九宫格中进行对齐。

     • Control Child Size：是否由父物体自动控制子对象的宽高，比较重要的功能。

     • Use Child Scale：在设置子对象大小和布局时，是否考虑子对象的缩放。如果勾选了，缩放后的大小就会参与进布局的计算中，如果没有勾选，就会按照原有的大小去计算。

     • Child Force Expand：是否强制子对象拓展以填充额外可用空间，有点像平均分配大小，当不是自动控制大小的时候，并不会改变原有的物体大小，但是会把整个长度平均分成几块，然后把子物体放进平均块中，这个分的比例会根据每个物体的Flexible来计算。当自动控制大小的时候，首先会铺满这个平均块中，在改变父物体的大小时，平均块的大小随之改变，子物体的大小也随之改变。但是子物体不会小于本身的min值，而带有preferred值的子物体，会优先的占据这个大小，然后其他的子物体再平均分块。该组件理解起来较为困难，需要多实践实践。

3. 网格布局组件

   

   • 将子对象当成一个一个小格子，放进父物体的范围中

   • 组件名：Grid Layout Group

   • 参数相关：

     • 其中Padding，Spacing，ChildAlignment和上面水平垂直完全一样的功能，不再说明

     • Cell Size 该项用于设置每个格子的长宽大小，该项注定了无法设置子对象的大小，也就不适配上述的需求。

     • StartCorner 开始摆放的位置，有4个位置可以选择。

     • StartAxis 摆放的顺序，和StartCorner结合起来，那就是控制格子的走向。

     • Constraint 有三个可以选择，Flexible 不限制行列数量，Fixed Column Count限制列的数量，Fixed Row Count限制行的数量

4. 内容大小适配器：Content Size Fitter

    

   • 它可以自动的调整RectTransform的长宽来让组件自动设置大小

   • 参数相关：

     • Horizontal Fit :如何控制宽度

     • Vertical Fit :如何控制高度

       • Unconstrained：不根据布局元素伸展

       • Min Size：根据布局元素的最小宽高度来伸展

       • Preferred Size：根据布局元素的偏好宽度来伸展宽度。

   • 补充：该内容是非常重要的一个功能组件，他可以让子物体大小改变的情况下，超出父物体的范围或者父物体富于内容过多。自动的改变设置大小。其中在Text上用的较多，文字变多内容也能变大。

   • 补充2：但是在挂载自动布局组件的子物体上，并不能使用这个内容，特别是长宽自动布局，所以自动布局组件才给了个自动控制，能根据子物体的min和preferred值去自动扩展大小（通常子物体为Text或者带有自动布局组件的时候，内容变多后，min和preferred值会随着改变），这个就是自动控制子物体的大小的必要性，这也是设计扩展组件的关键点和难点。

5. 宽高比适配器

     

   • 组件名：Aspect Ratio Fitter

   • 功能：让布局元素按照一定比例来调整自己的大小；使布局元素在父对象内部根据父对象大小进行适配。

   • 参数相关：

     • Aspect Mode:适配模式，如何调整矩形大小来实施宽高比。

       • None：不让举行适应宽高比

       • Width Controls Height：根据宽度自动调整高度

       • Height Controls Width：根据高度自动调整宽度

       • Fit In Parent：自动调整宽度、高度、位置和锚点，使矩形适应父项的矩形，同时保持宽高比，会出现“黑边”

       • Envelope Parent：自动调整宽度、高度、位置和锚点，使矩形覆盖父项的整个区域，同时保持宽高比，会出现“裁剪”

     • Aspect Ratio：宽高比；宽除以高的比值

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

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

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

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