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

功能需求:

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

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

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

  1. Layout Properties

    Unity的UGUI自动布局小功能组件制作及学习历程(1)_第1张图片

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

    • (54条消息) Unity/Auto Layout -- 理解Layout Elements(布局元素)_路人王小二的博客-CSDN博客_unity 布局icon-default.png?t=M1H3https://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. 水平垂直布局组件

    Unity的UGUI自动布局小功能组件制作及学习历程(1)_第2张图片  

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

    • 参数相关:

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

      • Spacing:子对象之间的间距

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

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

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

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

  3. 网格布局组件

    Unity的UGUI自动布局小功能组件制作及学习历程(1)_第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

     Unity的UGUI自动布局小功能组件制作及学习历程(1)_第4张图片

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

    • 参数相关:

      • Horizontal Fit :如何控制宽度

      • Vertical Fit :如何控制高度

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

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

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

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

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

  5. 宽高比适配器

    Unity的UGUI自动布局小功能组件制作及学习历程(1)_第5张图片  

    • 组件名:Aspect Ratio Fitter

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

    • 参数相关:

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

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

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

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

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

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

      • Aspect Ratio:宽高比;宽除以高的比值

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

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

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

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

你可能感兴趣的:(Unity的UGUI自动布局,unity,学习,ui)