Skip to content

Commit

Permalink
Merge pull request cocos#705 from xunyi0/2.1_new
Browse files Browse the repository at this point in the history
完善 layout 组件
jareguo authored Nov 13, 2018

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
2 parents d3e451f + 3347b3e commit c294d66
Showing 2 changed files with 14 additions and 22 deletions.
19 changes: 7 additions & 12 deletions en/components/layout.md
Original file line number Diff line number Diff line change
@@ -14,8 +14,7 @@ Layout is a container component. The container can unlock the auto-layout functi

![grid-layout](./layout/grid-layout.png)

Click `Add component` button at the bottom of **Properties** panel and then select `Layout` from `add UI component`, then you add the Layout component to the node.

Click the **Add Component** button at the bottom of **Properties** panel and then select **Layout** from the **UI Component** to add the Layout component to the node.

## Layout property

@@ -38,21 +37,17 @@ Click `Add component` button at the bottom of **Properties** panel and then sele

The default layout type is NONE after adding the Layout component. It indicates that the container won't change size and location of the sub-object. When the user places sub-object manually, the container will take the minimum rectangular region that can contain all the sub-objects as its own size.

You can switch the layout container type by altering `Type` in **Properties** panel, all the layout
types support `Resize Mode`.
You can switch the layout container type by altering `Type` in **Properties** panel, all the layout types support `Resize Mode`.

- When `Resize Mode` is *NONE*, the container and sub-objects' size is independent of each other.
- When **Resize Mode** is **NONE**, the container and sub-objects' size is independent of each other.

- When `Resize Mode` is *CHILDREN*, the sub-objects' size will change with container's size.
- When **Resize Mode** is **CHILDREN**, the sub-objects' size will change with container's size.

- When `Resize Mode` is *CONTAINER*, the container's size will change with sub-objects' size.
- When **Resize Mode** is **CONTAINER**, the container's size will change with sub-objects' size.

When using Grid layout, the `Start Axis` is very important. When choosing Horizontal, it will fill an entire
row before a new row is started. When choosing Vertical, it will fill an entire column before a new column is started.
When using Grid layout, the **Start Axis** is very important. When choosing **HORIZONTAL**, it will fill an entire row before a new row is started. When choosing **VERTICAL**, it will fill an entire column before a new column is started.

Node:
1. Scaling and rotation of child nodes are not considered.
2. After setting the Layout, the results need to be updated until the next frame, unless you manually 'updateLayout' api.
**Node**: After setting the Layout, the results need to be updated until the next frame, unless you manually `updateLayout` API.

---

17 changes: 7 additions & 10 deletions zh/components/layout.md
Original file line number Diff line number Diff line change
@@ -10,16 +10,13 @@ Layout 是一种容器组件,容器能够开启自动布局功能,自动按

![vertical-layout.png](./layout/vertical-layout.png)


- 网格布局容器

![grid-layout.png](./layout/grid-layout.png)

点击 **属性检查器** 下面的 **添加组件** 按钮,然后从 **添加 UI 组件** 中选择 **Layout**,即可添加 Layout 组件到节点上。


点击 **属性检查器** 下面的`添加组件`按钮,然后从`添加 UI 组件`中选择`Layout`,即可添加 Layout 组件到节点上。

布局的脚本接口请参考[Layout API](../../../api/zh/classes/Layout.html)
布局的脚本接口请参考 [Layout API](../../../api/zh/classes/Layout.html)

## Layout 属性

@@ -42,16 +39,16 @@ Layout 是一种容器组件,容器能够开启自动布局功能,自动按

添加 Layout 组件之后,默认的布局类型是 NONE,它表示容器不会修改子物体的大小和位置,当用户手动摆放子物体时,容器会以能够容纳所有子物体的最小矩形区域作为自身的大小。

通过修改 **属性检查器** 里面的`Type`可以切换布局容器的类型,可以切换成水平,垂直或者网格布局。
通过修改 **属性检查器** 里面的 `Type` 可以切换布局容器的类型,可以切换成水平,垂直或者网格布局。

另外,所有的容器均支持 ResizeMode(NONE 容器只支持 NONE 和 CONTAINER)。

- 当 ResizeMode 设置为 NONE 时,子物体和容器的大小变化互不影响。
-**ResizeMode** 设置为 NONE 时,子物体和容器的大小变化互不影响。

- 设置为 CHILDREN 则子物体大小会随着容器的大小而变化。

- 设置为 CONTAINER 则容器的大小会随着子物体的大小变化。

注意:
1. Layout 不会考虑子节点的缩放和旋转。
2. Layout 设置后的结果需要到下一帧才会更新,除非你设置完以后手动调用 'updateLayout' API。
在使用网格布局时,当 **Start Axis** 设置为 HORIZONTAL 时, 将在新行开始之前填充整行。设置为 VERTICAL 时, 它将在新列开始之前填充整个列。

**注意**Layout 设置后的结果需要到下一帧才会更新,除非你设置完以后手动调用 `updateLayout` API。

0 comments on commit c294d66

Please sign in to comment.