讯享网

 <p><strong>Layout 组件</strong></p><p>Layout 是一种容器组件，容器能够开启自动布局功能，自动按照规范排列所有子物体，方便用户制作列表、翻页等功能。</p><p><ul><li></p><p><strong>水平布局容器</strong></p><p></li></ul></p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2FFZC8LwGUBXBrLVTHfpN5qQ7CYL8ggWbiSVYY9DigJTJyN29.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p><ul><li></p><p><strong>垂直布局容器</strong></p><p></li></ul></p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2FrAW%3Di0bfqIgMKyvBjkCDwFfTBWPruuZp5TdXr%3DkGJDrvC31.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p><ul><li></p><p><strong>网格布局容器</strong></p><p></li></ul></p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F7dCXc1LG113k%3DT2kr0MiMgKdsgZcF30on%3DQzZlPKOMHS432.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p><strong>选中你要添加组件的节点， 点击 属性检查器 下面的 按钮，然后从 中选择 ，即可添加 Layout 组件到节点上</strong></p><p>Layout 属性</p><p>属性功能说明Type布局类型，支持 NONE, HORIZONTAL，VERTICAL 和 GRID。<br/>NONE 不会对子节点进行自动布局； <br/>HORIZONTAL 横向自动排列子节点； <br/>VERTICAL 垂直自动排列子节点； <br/>GRID 采用网格方式对子节点进行自动布局；ResizeMode缩放模式，支持 NONE，CHILDREN 和 CONTAINER。<br/>NONE 不会对子节点和容器进行大小缩放；<br/>CHILDREN 对子节点的大小进行缩放 <br/>CONTAINER 对容器的大小进行缩放PaddingLeft排版时，子物体相对于容器左边框的距离。PaddingRight排版时，子物体相对于容器右边框的距离。PaddingTop排版时，子物体相对于容器上边框的距离。PaddingBottom排版时，子物体相对于容器下边框的距离。SpacingX水平排版时，子物体与子物体在水平方向上的间距。NONE 模式无此属性。Horizontal Direction指定水平排版时，第一个子节点从容器的左边还是右边开始布局。当容器为 Grid 类型时，此属性和 Start Axis 属性一起决定 Grid 布局元素的起始水平排列方向。Vertical Direction指定垂直排版时，第一个子节点从容器的上面还是下面开始布局。当容器为 Grid 类型时，此属性和 Start Axis 属性一起决定 Grid 布局元素的起始垂直排列方向。Cell Size此属性只在 Grid 布局时存在，指定网格容器里面排版元素的大小。Start Axis此属性只在 Grid 布局时存在，指定网格容器里面元素排版指定的起始方向轴。</p><p>详细说明</p><p>添加layout组件之后，默认的布局类型是NONE，它表示容器不会修改子物体的大小和位置，当用户手动摆放子物体时，容器会以容纳所有物体的最小矩形区域作为自身大小</p><p>通过修改 <strong>属性检查器</strong> 里面的可以切换布局容器的类型，可以切换水平、垂直或者网格布局。<br/>另外，所有容器均支持(NONE容器只支持CONTAINER、NONE)。</p><p><ul><li></p><p>当ResizeMode 设置为NONE时，子物体和容器的大小变化互不影响。</p><p></li><li></p><p>设置CHILDREN 则子物体大小会随着容器的大小而变化。</p><p></li><li></p><p>设置CONTAINER 则容器的大小会随着子物体的大小而变化。</p><p></li></ul></p><p>注意：</p><p><ol><li></p><p>1. Layout不会考虑子节点的缩放和旋转。</p><p></li><li></p><p>2. Layout的设置后的结果需要到下一帧才会更新，除非你在设置完以后手动调用</p><p></li></ol></p><p><strong>使用范例</strong></p><p><strong>例子一</strong></p><p>TypeResizeModeHorizontal DirectionHORIZONTALNONELEFT_TO_RIGHT</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2FhPfX8zmV3Tbchgx5kH1iDps879XF2rXBSLREHHvXDQkmk33.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p>在使用的过程中发现的特点：</p><p><ul><li></p><p>在我在父节点之中添加子节点的时候，每一个子节点都会按照 left to right 从左到右的排列顺序进行排序</p><p></li><li></p><p>如果子节点不进行对齐挂件的操作，因为是水平布局，所以并没有在垂直坐标进行约束，这时候子节点可以随意的进行上下拖动，出现途中参差不齐</p><p></li><li></p><p>一旦子节点添加超过了容器父节点的大小，那么就会出现图中截断现象</p><p></li><li style="list-style: none; display: inline"><ul><li></p><p>解决方法就是： <br/>1.设置 ResizeMode 为 CHILDREN会对子节点进行大小缩放以变适应容器的大小来显示所有的子节点<br/>2.设置 ResizeMode 为 CONTAINER 对容器的大小进行缩放，这样容器就会有可能超过你设备的屏幕从而看不到所有的子节点，这样可以保证子节点不所以变化，容易会变大，这种形式一般用于滚动视图ScrollView</p><p></li></ul></li></ul></p><p><strong>例子二</strong></p><p>TypeResizeModeHorizontal DirectionHORIZONTALCHILDRENLEFT_TO_RIGHT</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2Fy7q7gUMIGz3nmHlZ%3DVdA8icibri90YSUIQbEFlqKvNY1434.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p>这个例子就是为了验证在例子一种出现截断，以保持容器父节点不变的情况下，缩小子节点为代价的布局方案，这种方式的特点</p><p><ul><li></p><p>所有的子节点全部显示在父节点当中</p><p></li><li></p><p>子节点会根据父节点的大小而改变自身的大小，父节点不会改变</p><p></li><li></p><p>子节点大小，如果定义小的限制就需要设置子节点数量，子节点的数据直接关联子节点的大小</p><p></li></ul></p><p><strong>例子三</strong></p><p>在一些特殊的场合，一个需求，水平布局的一组子节点(item)，子节点(item)的大小是固定的，随着添加的子节点(item)的增加，设备的屏幕大小不够使用，子节点(item)出现断裂，超出屏幕，在这种情况下，我们通常会使用Scrollview、PageView这两种父节点(SuperView)。</p><p><strong>ScrollView</strong></p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2FdhVsr4%3DIFh9howLBRhkA8G1aeBT2oWgJzGVBXe1q94SlC34.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p><ul><li></p><p>创建一个ScrollView的节点，删掉里面不必要的内容，只留下ScrollView、view，然后在这个节点当中设置它的属性块，</p><p></li><li></p><p>选中ScrollView设置它的属性：横向滚动、...等等你需要的设置，添加widget(对齐挂件)left、right、top、bottom = 0px 全屏适配</p><p></li></ul></p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2FX0qJxpwYqzC2JpRVUfr1XCv5SAHDyjkISAnRdfy9Ip%3Dge36.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p><ul><li></p><p>在View(ScrollView的centent)添加widget(对齐挂件)、Layout(布局)并设置属性</p><p></li><li style="list-style: none; display: inline"><ul><li></p><p>横向滚动、父节点（SuperView）根据子节点(SubView)的数量占用的大小拉伸父节点的宽度</p><p></li><li></p><p>设置View的widget，left、top、bottom = 0px ，父节点变化的时候，不会改变x的大小(View在ScrollView中的初始位置)，</p><p></li></ul></li></ul></p><p><strong>View的属性设置</strong></p><p></p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2qcyaluOwtWy6MKKU1FaZ0SPLE3gNQNiZlmdGhocuw5Ck36.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p>验证得到的结果是当我在View中创建多个子节点，超出屏幕的大小时，View会自动拉伸，View的父节点是ScrollView可以滚动</p><p>当然Layout还是会有很多的应用，在工作当中会经常用到这个UI组件，时间长了自然而然也就熟悉了</p><p>EditBox 组件</p><p>EditBox 是一个文本输入框，该组件能让你获取到用户输入的内容，就是输入文字、获取文字的地方。</p><p>EditBox 属性</p><p>属性功能说明String输入框的初始输入内容，如果为空则会显示展位符的文本Background image输入框的背景图片Keyboard Return Type指定移动设备上面回车按钮的样式Input Flag指定输入标示：可以指定输入方式为密码或者单词首字母大写（仅支持Android）Input Mode指定输入模式：ANY表示多行输入，其他都是单行输入，移动平台上还可以指定键盘样式。Font Size输入框文本的字体大小StayOnTop输入总是可见，并且永远在游戏视图的上面Tabindex修改DOM输入元素的tabindex，这个属性只有在Web上面修改有意义。Line Height输入框文本的行高Font Color输入框文本的颜色Placeholder输入框占位符的文本内容Placeholder Font Size输入框占位符的字体大小Placeholder Font Color输入框占位符的字体颜色Max Length输入框最大允许输入的字符个数</p><p>查看属性检查器中的EditBox组件</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F12fvxMXr8%3Dv7rC7zm9SVeA2NfPOyp4xSqwQGrJn%3DS7nKJ38compressflag.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p>EditBox 事件</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2Ff4h%3DM6JKCMq%3DWtmoGbqlPvnrdo1uN6LVP2U6SRuJw6cqw40.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p>事件事件说明Editing Did Began当用户点击输入框，刚开始编辑的时候调用Text Chnaged当输入框中的数据的数据变化的时候调用Editing Did Ended在单行模式下面，一般是在用户按下回车或者点击屏幕输入框以外的地方调用该函数。 如果是多行输入，一般是在用户点击屏幕输入框以外的地方调用该函数。Editing Return输入回车的时候调用该函数如果是单行输入框失去编辑焦点，如果为移动端的时候则是点击Return按钮</p><p>Editing Did began 事件的定义</p><p>属性功能说明Target带有脚本组件的节点Component脚本组件名称Handler指定一个回调函数，当用户开始输入文本的时候会调用该函数CustomEventData用户指定任意的字符串作为事件回调的最后一个参数传入</p><p>Text Changed 事件的定义</p><p>属性功能说明Target带有脚本组件的节点Component脚本组件名称Handler指定一个回调函数，当用户正在输入文本的时候会调用该函数CustomEventData用户指定任意的字符串作为事件回调的最后一个参数传入</p><p>Editing Did Ended 事件的定义</p><p>属性功能说明Target带有脚本组件的节点Component脚本组件名称Handler指定一个回调函数，当用户输入文本结束时会调用该函数CustomEventData用户指定任意的字符串作为事件回调的最后一个参数传入</p><p>Editing Return 事件的定义</p><p>属性功能说明Target带有脚本组件的节点Component脚本组件名称Handler指定一个回调函数，当用户输入文本按下回车键时会调用该函数。CustomEventData用户指定任意的字符串作为事件回调的最后一个参数传入</p><p>EditBox 详细说明</p><p><ul><li></p><p>Keyboard Return Type 特指在移动设备上面进行输入的时候，弹出的虚拟键盘上面的回车键样式</p><p></li><li></p><p>如果需要输入密码，则需要把 Input Flag 设置为 password，同时 Input Mode 必须是 Any 之外的选择，一般选择 Single Line。</p><p></li><li></p><p>如果要输入多行，可以把 Input Mode 设置为 Any。</p><p></li><li></p><p>背景图片支持九宫格缩放</p><p></li></ul></p><p>注意：如果在 iframe（嵌入式框架） 里面使用，最好把 stayOnTop 属性设置为 true<br/>注解：iframe优缺点、IFrame在网页中有什么作用</p><p>添加脚本、和使用脚本添加回调</p><p>第一种 通过属性检查器，编写脚本回调，两者结合的添加EditBox的回调</p><p><ul><li></p><p>在层级管理器当中创建一个EditBox， 名为</p><p></li><li></p><p>资源管理器中添加一个 脚本文件，并添加需要的回调函数</p><p></li></ul><ul><li></p><p>将脚本文件添加到上面，属性检查器当中出现下面一项</p><p></li></ul></p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2FT8D3zLzfWHOs80tjzvRrzGjZUvyVGMloUG8HT5tIBbTrA40.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p><ul><li></p><p>在属性检查器中的EditBox属性块中添加在脚本中写好的方法</p><p></li></ul></p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2Fb1%3DNg0B7qxqCYBJScGuffy3GkrLYKV4V5Be9GlLqKlZvf40.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p>第二种 通过代码添加回调</p><p>这种方法添加的事件回调和使用编辑器添加的事件回调是一样的，通过代码添加， 你需要首先构造一个 cc.Component.EventHandler 对象，然后设置好对应的 target, component, handler 和 customEventData 参数。</p><p><ul><li></p><p>编写脚本文件</p><p></li></ul><ul><li></p><p>将该脚本拖入到目标UI组件属性检查器</p><p></li></ul></p><p>第三种方式 通过 editbox.node.on('editing-did-began', ...) 的方式来添加</p><p><ul><li></p><p>编写脚本文件</p><p></li></ul><ul><li></p><p>将该脚本拖入到目标UI组件属性检查器</p><p></li></ul></p><p><strong>官方文档的坑</strong></p><p>官方文档其中写到的内容，event.detail，获取到的对象获取不到string，我在debug的时候调试看到其实就是EditBox这个对象</p><p></p><p>所以上述内容应该这么写</p><p></p><p><strong>以上是三种EditBox的回调事件的实现</strong></p><p>RichText 组件</p><p><strong>一个富文本组件</strong><br/>RichText 组件用来显示一段带有不同样式效果的文字，你可以通过一些简单的 BBCode 标签来设置文字的样式。 目前支持的样式有：颜色(color)，字体大小(size)，字体描边(outline)，加粗(b)，斜体(i)，下划线(u)，换行(br)，图片(img)和点击事件(on)，并且不同的 BBCode 标签是可以支持相互嵌套的。</p><p>BBCode 标签的内容，请参考本文档的 BBCode 标签格式说明</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2FLE91g4gu3cdzmKTt0ic0QE3aS4wMNYbI7V8Tc4TuLofQi41.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p>点击 下面的添加组件按钮，然后从添加渲染组件中选择 RichText，即可添加 RichText 组件到节点上。</p><p>富文本的脚本接口请参考 RichText API。</p><p>RichText 属性</p><p>属性功能说明String富文本的内容字符串，你可以在里面使用 来指定特定文本的样式Horizonal Align水平对齐方式Font Size字体大小，单位是point （注意，该字段不会影响 里面设置的字体的大小）Font富文本定制字体，所有Label片段都会使用使用这个定制的 字体Line Height字体行高，单位是pointMax Width富文本的最大宽度，传0的话意味着必须手动换行Image Atlas对于 标签里面的 属性名称，都需要在imageAtlas里面找到一个有效的 ，否则img tag会判断失效Handle Touch Event选中选项后， 将阻止节点边界框中的所有输入事件（鼠标，触摸），从而防止输入事件穿透到底层节点</p><p>BBCode 标签格式</p><p>目前支持的标签类型有：size，color, b, i, u, img 和 on，分别用来定制字体大小，字体颜色, 加粗，斜体，下划线，图片和点击事件。 每一个标签都有一个起始标签和一个结束标签，起始标签的名字和属性格式必要符合要求，且全部为小写。 结束标签的名字不做任何检查，只需要满足结束标签的定义即可。</p><p>下面分别是应用 size 和 color 标签的一个例子：</p><p></p><p>支持标签</p><p>名称描述示例注意事项color指定字体渲染颜色，颜色值可以是内置颜色，比如 white，black 等，也可以使用 16 进制颜色值，比如#ff0000 表示红色&lt;color=#ff0000&gt;Red Text&lt;/color&gt;内置颜色值参考 cc.Colorsize指定字体渲染大小，大小值必须是一个整数&lt;size=30&gt;enlarge me&lt;/size&gt;Size 值必须使用等号赋值outline设置文本的描边颜色和描边宽度&lt;outline color=red width=4&gt;A label with outline&lt;/outline&gt;如果你没有指定描边的颜色或者宽度的话，那么默认的颜色是白色(#ffffff),默认的宽度是 1b指定使用粗体来渲染&lt;b&gt;This text will be rendered as bold&lt;/b&gt;名字必须是小写，且不能写成 boldi指定使用斜体来渲染&lt;i&gt;This text will be rendered as italic&lt;/i&gt;名字必须是小写，且不能写成 italicu给文本添加下划线&lt;u&gt;This text will have a underline&lt;/u&gt;名字必须是小写，且不能写成 underlineon指定一个点击事件处理函数，当点击该 Tag 所在文本内容时，会调用该事件响应函数&lt;on click="handler"&gt; click me! &lt;/on&gt;除了 on 标签可以添加 click 属性，color 和 size 标签也可以添加，比如 &lt;size=10 click="handler2"&gt;click me&lt;/size&gt;br插入一个空行<br/>注意：<br/>&lt;/br&gt; 和 <br/>都是不支持的。img给富文本添加图文混排功能，img 的 src 属性必须是 ImageAtlas 图集里面的一个有效的 spriteframe 名称&lt; img src='https://www.163.com/dy/article/ImageUrl' click='handler' /&gt;注意: 只有 &lt; img src='https://www.163.com/dy/article/ImageUrl' click='bar' /&gt; 这种写法是有效的。如果你指定一张很大的图片，那么该图片创建出来的精灵会被等比缩放，缩放的值等于富文本的行高除以精灵的高度。</p><p>标签与标签是支持嵌套的，且嵌套规则跟 HTML 是一样的。比如下面的嵌套标签设置一个文本的渲染大小为 30，且颜色为绿色。</p><p></p><p>也可以实现为:</p><p></p><p>详细说明</p><p>富文本组件全部由 JS 层实现，采用底层的 Label 节点拼装而成，并且在上层做排版逻辑。 这意味着，你新建一个复杂的富文本，底层可能有十几个 label 节点，而这些 label 节点都是采用系统字体渲染的，</p><p>所以，一般情况下，你不应该在游戏的主循环里面频繁地修改富文本的文本内容, 这可能会导致性能比较低。</p><p>另外，如果能不使用富文本组件，就尽量使用普通的文本组件，并且 BMFont 的效率是最高的。</p><p><br/>作者：struggle3g<br/>来源：简书<br/></p><p><strong>声明</strong>：发布此文是出于传递更多知识以供交流学习之目的。若有来源标注错误或侵犯了您的合法权益，请作者持权属证明与我们联系，我们将及时更正、删除，谢谢</p>