Unity3D 官方文档 UGUI总览 自动布局组件的介绍
来源:互联网 发布:程序员多少钱一个月 编辑:程序博客网 时间:2024/06/05 14:23
版本:unity 5.6 语言:C#
总起:
自动布局组件可以根据元素的内容自动调节元素的布局,在和滚动列表配合显示动态元素时比较方便。
拥有Layout Element脚本的是子元素,放在相应的Layout Group父节点上,Layout Group就会根据其Width、Height进行布局。
自动布局组件:
♦ Layout Element
自动布局的元素,任何的需要自动布局的GameObject都需要添加此脚本。
Min Width:布局元素最小的宽度;
Min Height:布局元素最小的高度;
Preferred Width:布局元素首选的宽度;
Preferred Height:布局元素首选的高度;
Flexible Width:弹性宽度;
Flexible Height:弹性高度;
以上三种宽高遵循以下原则进行适配:
1.首先Min的宽高会被适配;
2.如果有足够的空间,则Preferred的宽高会被适配;
3.如果有剩余的空间,则Flexible的宽高会被适配。
前两个比较好理解,空间不够就Min,空间够,尽量Preferred,那么第三种是什么意思呢?
如果分配完Preferred还有剩余空间,那么Layout Group组件会根据Flexible的比例将剩余空间分配给子元素。假设A为1,B为2,C为0,剩余了300的空间,则A会分到100,B会分到200,而C不会分到空间。
要使Layout Group可以控制其子节点的大小,请勾选其上的Control Child Size,以上设置才能生效。
♦ Content Size Fitter
该脚本可以根据子元素的宽高适配Layout的宽高,跟上一个脚本的作用刚好相反:
Horizontal Fit:水平的适配方式;
Vertical Fit:垂直的适配方式;
适配的三种方式:
1.None,不进行适配;
2.Minimum,根据元素的最小宽度进行适配;
3.Preferred,根据元素的首选宽度进行适配。
♦ Aspect Ratio Fitter
根据比例控制当前的宽高:
Aspect Mode:控制的模式:
1.None,不进行控制;
2.Width Controls Height,宽控制高;
3.Height Controls Width,高控制宽;
4.Fit In Parent,宽高比例为1:1,以父节点的宽高最小值为该节点的宽高;
5.Envelope Parent,宽高比例为1:1,以父节点的宽高最大值为该节点的宽高;
6.Aspect Ratio(2017),宽高比。
♦ Horizontal Layout Group
水平布局,元素会一个挨着一个沿着水平方向排过去,如果超过了这个该Layout Group宽度,并不会换行,而且直接继续排下去:
Padding:Layout边缘的间隙;
Spacing:Layout元素之间的间隙;
Child Alignment:子元素的对齐方式,就是文字对齐的那九种,不多说了;
Control Child Size:是否会控制子元素的宽高,只有启用该选项Layout Element的设置才会起作用;
Child Force Expand:是否强制子元素扩张以填满多余空间,该选项不受Flexible属性的影响,并且优先级比Flexible属性高,以1:1的比例进行分配。
♦ Vertical Layout Group
垂直布局,与水平布局类似,不多说了。
♦ Grid Layout Group
网格布局,将元素依次排入网格中,如果超过宽度或高度,则换行:
Padding:Layout边缘的间隙;
Cell Size:每个元素的尺寸,该值会控制子元素的宽高;
Start Corner:第一个元素所定位角落;
Start Axis:排列方式,一种水平、一种垂直;
Child Alignment:对齐方式,九种,不多说;
Constraint:元素换行的参考:
1.Flexible,自动适配,宽高不够了,则换行;
2.Fixed Column Count,指定行元素的数量进行换行;
3.Fixed Row Count,指定列元素的数量进行换行。
Grid Layout Group可以配合Content Size Fitter自动计算父节点的宽高,有那么三种模式,首先将Content Size Fitter全设置为Preferred Size:
1.Constraint设置为Fixed Row Count,优先垂直排列元素,超过则增加父节点的宽度;
2.Constraint设置为Fixed Column Count,优先水平排列元素,超过则增加父节点的高度;
3.Constraint设置为Flexible,根据元素数量,设置最佳的宽高,水平优先,同时尽量使宽高比例靠近1:1。
RectTransform几个控制坐标的方法:
如果你还是使用localPosition来手动控制UI的坐标,那很有可能得到一个错误的结果,这边介绍几个控制坐标的常用方法,如果对于锚点和轴点还不是很熟,可以参考我上上篇文章的介绍。
RectTransform.anchoredPosition,设置轴点和锚点之间的距离,最为常用;
RectTransform.offsetMin,设置左下角小蓝点于锚点的距离;
RectTransform.offsetMax,设置右上角小蓝点于锚点的距离;
RectTransform.sizeDelta,就是UI的宽高;
UGUI的内容基本上差不多了,但还有个内容IMGUI,其实就是OnGUI,当然因为其效率问题,在实际的UI制作中使用的越来越少了,但是如果你制作写Edtior脚本,自己扩展Unity编辑器,这方面的知识是必不可少的。
下篇文章就会重点介绍这方面的知识。
个人:
稍作休息,等下继续研究!
- Unity3D 官方文档 UGUI总览 自动布局组件的介绍
- Unity3D 官方文档 UGUI总览 可互动组件的介绍
- Unity3D 官方文档 UGUI总览 一个将图片铺满整个屏幕的技巧、可视化组件的介绍
- Unity3D 官方文档 UGUI的总览 Canvas和EventSystem的认识
- 【Unity3D】UGUI组件的监听
- Unity3D 官方文档 NavMesh三个组件的翻译与解释 自动寻路需要知道的细节
- Unity 3D 官方文档 UGUI总览 IMGUI OnGUI Editor脚本初窥1
- Unity 3D 官方文档 UGUI总览 IMGUI OnGUI Editor脚本初窥2
- Unity3D-UGUI的Text组件渐变效果
- 【UGUI】UGUI 常用布局组件
- UGUI官方文档canvas
- UGUI自动布局_LayoutGroups
- UGUI自动布局
- UGUI官方文档之控件
- Unity3D 基于UGUI的图文混排组件
- [Unity3D]UGUI分辨率自适应的组件和方法
- Unity3D UGUI组件的Inspector属性探究(一)--RectTransform
- unity3d 官方文档的调试方法
- pat A1046
- (DFS)N皇后问题--HDOJ
- java-jvisualvm远程监控tomcat
- 深入剖析printf
- Redis Sorted-Sets数据类型
- Unity3D 官方文档 UGUI总览 自动布局组件的介绍
- NYOJ 找球号(二)(哈希表)
- 使用MyBatis-generator 自动生成MyBatis mapper代码
- HDU-1257-最少拦截系统
- React动画之react-transition-group使用
- jQuery中each的用法之退出循环和结束本次循环
- spring cloud 学习(四) Hystrix
- 自动根据excel的某一列单元格的值计算,并将计算的结果给同行的下一列单元格赋值
- bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式