Unity UGUI系列七 Layout、Content Size Fitter、Aspect Ratio Fitter

参考

Unity3D-UGUI原理篇（五）Auto Layout 自动布局

Unity中UI的自动布局

>

via @ >

控件是UGUI内置的，控件上面因因包含不同的组件而不同。

关于按钮的事件统一管理方法

小练习：写个小框架滑动菜单

在实际使用UGUI开发的过程中发现一个UGUI的BUG：当Content下的子物体增加时，ScrollBar下的Handle滑条大小没有实时根据发生Content下的子物体数量发生变化。(在Hierarchy面板中右键创建UI->ScrollView,在子物体中找到Content，需要按行列布置的游戏物体都作为Content的子物体挂在Content下)（以开发垂直的ScrollView为例）在查找问题的过程中发现：我的这个项目里Content的高小于遮罩层Viewport的的高，致使ScrollBar滑条的size一直为1的状态。调整Content的高使高大于遮罩层Viewport的的高后又发现如下问题：在编辑模式下ScrollBar滑条的size只根据Content与遮罩层Viewport的大小比例进行了调整，而不是根据Content的子物体数量进行变换，致使了在Content下添加的子物体的总高大于Content设置的高时下拉滑条并不能全部显示的问题，并且在游戏运行时ScrollBar的Size又重新变回1了，无论怎么调整参数都无济于事。于是自己写了一个脚本，根据Content下的子物体的个数来控制Content的宽高（原理是修改RectTransform的sizedelta）

Image控件是用来显示一张的，sprite类型的

CanvasRenderer：负责UI元素的渲染，所有UI控件都需要一个CanvasRenderer，它继承自Componet

SpriteRenderer（渲染sprite用的）、MeshRenderer（渲染三维物体用的）、SkinnedMeshRenderer（渲染蒙皮的物体），它们都继承自Renderer负责渲染的

SourceImage： 是你要显示的，下面的有一个对应的 Set Native Size按钮 ，有可能会被拉伸，按这个按钮可以让Image控件的宽高设置为和原始的宽高一样，

Material： 材质，当我们需要一些比较高级的效果，比如你要为这张编写自己的shader的时候，才会用到材质

ImageType: 表示展示的类型，默认是Simple，就是正常显示，对应一个Preserve Aspect选项，意思是，是否保持比例（宽高比）， 在屏幕适配的时候，有可能会拉伸，这时候为了不让失真，一般会勾选这个选项

1引入命名空间

using UnityEngineUI

2获取组件

Image image = GetComponent<Image>();

3改变属性

imagesprite = xxx;

RawImage控件也是用来显示一张的，但是显示的是Texture类型的

用于显示文本，这个和一些应用里面的字体差不多，没什么好说的

Line Spacing：行距

Rich Text：是否使用富文本，就是会检测到尖括号

Best Fit：根据Text控件的大小来显示合适的字体大小，字体大小会受控件大小的限制，即文本会完整显示

相信很多刚接触UGUI的开发者，对于这套系统中RectTransform里的position，anchor，pivot都或多或少有些不熟悉，不知道这些是干嘛用的，为此，本篇文章就给大家介绍下这几个概念，不过主要还是会以Anchor和Pivot为主，position会带过介绍。

1、Pivot轴心

旋转、大小和缩放修改发生在主轴Pivot点周围，因此Pivot的位置会影响旋转、调整大小或缩放的结果。当工具栏Pivot/Center按钮设置为Pivot模式时，可以在场景视图中移动矩形变换的Pivot小圆圈。

如图：旋转 *** 作为绕着这个点旋转。

注：

Pivot是相对于自身的，(0,0)为自己左下角，(1,1)为自己右上角。(可以把这个UI看成这个点)

2、Anchors锚点

如果一个RectTransform的父物体也是RectTransform，那么子RectTransform可以以各种方式锚定到父RectTransform。

例如，子节点可以锚定在父节点的中心或其中一个角上。

锚定也允许孩子与父母的宽度或高度一起伸展。矩形的每个角都有一个固定的锚点偏移量，即矩形的左上角有一个固定的锚点偏移量，等等。这样，矩形的不同角就可以固定在父矩形的不同点上。

如：

3、Anchor presets锚点预设

在Inspector中，可以在Rect Transform组件的左上角找到锚预置按钮。单击该按钮将d出锚预置下拉菜单。从这里您可以快速地从一些最常见的锚定选项中进行选择。您可以将UI元素锚定到父元素的侧面或中间，或者与父元素大小一起拉伸。水平和垂直锚定是独立的。

锚预置按钮显示当前选择的预置选项(如果有的话)。如果将水平轴或垂直轴上的锚设置为与任何预设位置不同的位置，则会显示自定义选项。

Anchor Min对应场景视图中左下方的Anchor handle, Anchor Max对应右上方的handle。

矩形的position字段根据锚顶点是否在一起(产生固定的宽度和高度)或是否分开(导致矩形与父矩形一起拉伸)而不同。

方式1：当所有的锚柄在一起时，显示的字段是Pos X、Pos Y、宽度和高度。Pos X和Pos Y的值表示pivot相对于锚点的位置。

方式2：当锚被分开时，字段可以部分或完全改变为左、右、上、下。这些字段定义锚定义的矩形内的填充。如果锚水平分开，则使用左字段和右字段，如果锚垂直分开，则使用顶部和底部字段。

注意，在anchor或pivot字段中更改值通常会反向调整position值，以使矩形保持原位。在不需要这样做的情况下，通过单击检查器中的R按钮启用原始编辑模式。这使得anchor和pivot值能够在不改变任何其他值的情况下被改变。这可能会导致矩形在视觉上移动或调整大小，因为它的位置和大小取决于anchor和pivot值。

看下图预设布局，可以注意到：布局分为左侧、上侧和右下。

左和上只是方位标记，用啥要选择右下角部分；

右下部分的左上9个是一个点，所有锚柄在一起，大小不会受父物体影响，父物体大小变化子物体pivot到锚点位置保持不变; 如上面方式1

其他为2个点，最右下角的为四个点，大小会受父物体影响;如上面方式2

注意区分：

Pivot是相对于自身的，(0,0)为自己左下角，(1,1)为自己右上角。(可以把这个UI看成这个点)

Anchor为相对于父物体的，(0,0)为父物体左下角，(1,1)为父物体右上角。

4、Blue Print Mode(蓝图模式) 、 Raw Edit Mode(原始编辑模式)

参考链接： >

以上就是关于Unity UGUI系列七 Layout、Content Size Fitter、Aspect Ratio Fitter全部的内容，包括:Unity UGUI系列七 Layout、Content Size Fitter、Aspect Ratio Fitter、UGUI笔记——Canvas,CanvasScaler,GraphicRaycaster、关于Unity中的UGUI优化，你可能遇到这些问题等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！