CocosCreator UI组件

Canvas

在 Canvas 中，可以设置分辨率和对齐方案，当手机屏幕发生变化时，会自动适配手机，有根据宽适配和根据长适配两种策略。

Widget

• 能使当前节点自动对齐到父物体的任意位置，或者约束尺寸，让你的游戏可以方便地适配不同的分辨率。
  
• 如图，为UI界面设置，其中，值可以是%为单位，也可以是 px 为单位，当左右两侧都有数据时，图片将会被拉伸。

Layout

• Layout 是一种容器组件，容器能够开启自动布局功能，自动按照规范排列所有子物体，方便用户制作列表、翻页等功能
  

Label

• Label 组件用来显示一段文字，文字可以是系统字体，TrueType 字体或者 BMFont 字体和艺术数字。另外，Label 还具有排版功能。
  

• 排版功能：

• Label 组件的排版也是基于节点尺寸（Size），也就是约束框（Bounding Box）所规定的范围。
• Label 中以下的属性决定了文字在约束框中显示的位置：
  • Horizontal Align（水平对齐）：文字在约束框中水平方向的对齐准线，可以从 Left、Right、Center 三种位置中选择。
  • Vertical Align（垂直对齐）：文字在约束框中垂直方向的对齐准线，可以从 Top、Bottom、Center 三种位置中选择。
• 大小与行高
  • Font Size（文字尺寸）决定了文字的显示大小，单位是 Point （也称作“磅”）
  • Line Height（行高）决定了文字在多行显示时每行文字占据的空间高度，单位同样是 Point
  • 如果 Font Size 和 Line Height 设为相同数值，文字正好占据一行大部分的空间高度。
  • 如果 Font Size 小于 Line Height，多行文字之间间隔会加大
  • 如果 Font Size 大于 Line Height，多行文字之间间隔会缩小，甚至出现文字相互重叠的情况。
• 排版模式：
  • Overflow（排版模式） 属性，决定了文字内容增加时，如何在约束框的范围内排布。共有 NONE、CLAMP、SHRINK、RESIZE_HEIGHT 四种模式，而只有在后面三种模式下才能通过编辑器左上角的 矩形变换工具 或者修改 属性检查器 中的 Size 大小或者添加 Widget 组件 来调整约束框的大小。
  • Clamp：截断模式下，文字首先按照对齐模式和尺寸的要求进行渲染，而超出约束框的部分会被隐藏（截断）
  • Shrink：自动缩小模式下，如果文字按照原定尺寸渲染会超出约束框时，会自动缩小文字尺寸以显示全部文字。
  • Resize Height：自动适应高度模式会保证文字的约束框贴合文字的高度，不管文字有多少行。这个模式非常适合显示内容量不固定的大段文字，配合 ScrollView 组件可以在任意 UI 区域中显示无限量的文字