UGUI笔记5-自动布局

这个组件能提供组件的最大最小和最合适大小信息，比如Text，Image都是实现了ILayoutElement接口的组件，所以它会自动获取

如果一个RectTransform的物体的其中一个组件实现了ILayoutElement接口，同时这个RectTransform的物体又添加了Layout Element组件， 那么起作用的是Layout Element

Image继承了ILayoutElement，重写了虚方法，如果没有就返回0，如果类型是九宫或者重复平铺类型，那么就返回的原始大小

LayoutGroups是用来控制子对象位置的，实现布局，但它不控制自己；当父对象添加了LayoutGroup，那么子对象的位置不再由子对象自己控制

一共有3种组件如下图， 网格布局（Grid）、水平布局（Horizontal）、垂直布局（Vertical） ，一个游戏物体最多只能添加一个LayoutGroup

水平布局和垂直布局都差不多，区别只是一个排列是水平方向，一个是垂直方向，这里选水平方向来介绍

Padding： 内边距，可以设置距离上下左右四个边框的偏移量

Spacing： 表示cell之间的距离，也就是整个布局中每个单元之间的距离

Child Alignment： 表示对齐方式

Control Child Size： 是否控制子物体的大小（新版UGUI水平和垂直布局都添加了这个选项，网格布局依旧自动控制，老版本三个布局组件都默认控制子对象大小）

Child Force Expand： 表示自适应 宽 高，勾选上后所有子物体会被拉伸以至填充满整个布局容器

Cell Size： 子物体大小

Start Corner： 子物体排列的角度

Start Axis： 子物体排列的方向

Constraint： Flexible灵活的( 按照父物体长宽自动横竖行 ) Fixed Column Count 指定列数 Fixed Row Count 指定行数

一般用空物体来作为布局容器（父物体）然后布局容器下就是很多个格子（cell）了，而一个cell下面可能会放很多，例如说要有一个格子的背景，然后一个物品，所以一个cell我们也会用空的gameobject来当父节点。

LayoutControl主要用于控制组件附加物体的RectTransform，ContentSizeFitter就是一个LayoutControl组件，LayoutGroup下的子物体大小已被控制了，会冲突所以添加不了ContentSizeFitter

1创建一个空物体作为布局容器（父物体），为父物体添加一种布局方式的组件如Grid Layout Group

2把做好的格子（cell）拖放成Prefab，创建脚本实例化Prefab，把它设置为布局容器的子物体即可(setParent)，Layout Group会根据大小自动计算布局，注意这个脚本最好挂在布局容器上

父控件： 指的是添加了LayoutGroups组件的GameObject

控件大小信息： 指的是控件最小大小，最合适（期望）大小，控件最大大小

11 LayoutElement负责提供该组件所附加的物体的控件大小的信息，不提供位置信息。只提供大小信息，并且不直接控制自己的大小，由其它组件控制例如，LayoutControl、LayoutGroups

12Text，Image本身就实现了ILayoutElement接口，提供了控件大小的信息，但它的控件大小信息是系统源码提供的；如果想修改Text，Image等控件大小的信息，可以给物体添加LayoutElement组件，系统会读取LayoutElement组件提供的大小

父对象LayoutGroups是如何利用控件提供的大小信息来控制子对象大小和位置，并分配空间的呢？

首先， 父对象获取控件期望的最小的大小，然后分配最小的大小，即使父控件的空间比子控件的期望大小要小，子控件也一样可以获得它期望的最小值，也就是最小的大小一定能够得到满足

其次， 如果父对象还有足够的空间，那就分配控件的最合适（期望）的大小给控件

最后， 如果父控件分配完最合适（期望）大小之后，还有额外空间则按照控件提供的最大（扩展比率）大小，按照比率分配额外的空间给控件

最大值，它是一个相对数值 ，是0和大于0的数组成。该值的意思是表示父控件的多个子控件分配额外空间的一个比率，最大值设置是在Layout Element的Flexible Width和Flexible Height

举个栗子： 比如一个父控件下有A、B两个子控件，A的最大值是1，B的最大值是2，则表示父控件剩余的空间平分三分，A占用1份，B占用2份,0表示不占用父控件的多余空间

总之， 父控件分配子控件的大小是按照先保证子控件满足最小大小的要求；然后，如果父控件还有足够的空间，就分配给子控件按照合适的大小；如果还有额外的空间，则分配给子控件比率空间

再举个栗子： 有A、B两个子控件，A设置宽高最小值为0，0，期望值为0，0，最大值2，2，B设置宽高最小值为0，0，期望值为100，100，最大值1，1，父控件的大小为160×160

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中的组件，追随鼠标的运动轨迹。由于个人在以前使用中对于UGUI的坐标系了解不深，在使用中产生了一些问题，在此对UGUI的坐标系做一个简单的记录，以备后面查询。

Unity3D 采用InputmousePosition来获取当前鼠标的位置，获取的位置是相对于屏幕坐标系的，而UGUI使用的坐标系和屏幕坐标系不是同一个坐标系，

在UGUI中组件使用的坐标都是2D在Rect中的一个相对坐标，所以在实际使用中需要进行转换。

<pre>

public class test : MonoBehaviour

{

public RectTransform myRectTransform; // 目标组件

public Canvas myCanvas; // 当前画布

// Update is called once per frame

void Update ()

{

Vector2 vT = Vector2zero;

// 通过此函数，将鼠标坐标，从屏幕坐标，转换到UGUI坐标

RectTransformUtilityScreenPointToLocalPointInRectangle(myCanvastransform as RectTransform, InputmousePosition, myCanvasworldCamera, out vT);

myRectTransformlocalPosition = vT;

}

}

</pre>

#######附带一说，在Unity3D中可以使用函数ScreenshowCursor(老版本)、UnityEngineCursorvisible来显示和隐藏鼠标

1、打开Unity，新建一个空工程。

2、在百度上搜索下载XLua，导入Unity工程中。

3、新建一个Lua脚本，内容大概为打印一个消息，设置几个变量，然后保存为“CSCallLualuatxt”。

4、在工程中，新建一个脚本，可以命名为“MyCSCallLua”，双击脚本或者右键“Open C# Project”打开脚本。

5、在打开的脚本“MyCSCallLua”编写代码，首先引入XLua命名空间，然后设置Lua环境变量。

6、运行场景，即可在控制台上看到，获取Lua脚本变量成功的打印。

注意事项:

Unity 是一个用纯C语言编写的测试工具 它简洁实用,多应用于嵌入式系统Unity工具可以裁剪用于各种规模的嵌入式项目,当然,只要是纯C语言的项目,Unity都可以使用。

参考

[专栏精选]TextMeshPro插件

TextMeshPro使用说明

TextMeshPro中文字体生成和字体材质更换

新一代Unity 文本组件 Text Mesh Pro 系列教程

Unity学习笔记TextMeshPro文档(一)

Unity学习笔记TextMeshPro文档(二)

Unity学习笔记TextMeshPro文档(三)

Unity学习笔记TextMeshPro文档(四)

Unity学习笔记TextMeshPro组件官方文档翻译

首次添加会d出导入必要资源面板，点击IMPORT后，项目Assets文件夹下会生成TextMesh Pro文件夹

UGUI的Text使用了一张字体贴图，Unity把所有需要显示的字符放到了一张图集中，字符的形状是通过像素定义的。当我们放大时，像素不够用就会出现文字变模糊的情况。

TextMesh Pro的Text使用了不同的技术来渲染文字，叫做 Signed Distance Field （后面简称SDF，对该技术感兴趣的同学可以自行搜索一下）。和UGUI类似，这个技术同样需要将字符放到一个图集中，但是不使用像素来代表字符的形状，而使用SDF技术来生成字符的形状。使用这种技术字符在渲染时不会因为缩放而造成字符模糊的情况，总是能够准确的渲染字符的边缘。

TextMesh Pro无法像UGUI Text那样使用动态字体，因为TextMesh Pro需要对字体进行预处理来计算SDF，这部分计算非常耗时。这对于英文字体来说影响不大，一个字体文件或一张贴图包含的信息都很少，但是对于字符非常多的语言如中文就影响很大。 所以对于中文环境建议如下：

推荐 >

using UnityEngine;

using SystemCollections;

using UnityEngineUI;

 

public class wenzi : MonoBehaviour {

    private string a = "我就不告诉你这么做";

    // Use this for initialization

    void Start () {

        Text text = thisGetComponent<Text> ();

        texttext = a;

        textcolor = Colorred;

 

    }

}

以上就是关于UGUI笔记5-自动布局全部的内容，包括:UGUI笔记5-自动布局、UGUI笔记2-Image、RawImage和Text控件、Unity3D UGUI组件跟随鼠标运动等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！