sketch 58新功能layout详解

Sketch最近更新了版本58，新的layout功能非常适合用来做多端自适应的页面，这跟我很久之前推荐的 Anima这个插件的其中layout的功能很类似，但是自家的功能肯定就不会出现插件不兼容的问题，所以接下来跟大家分享下sketch 58新功能layout详解

注：新的layout功能只适用于symbol（sketch的灵魂功能之一）

先看下运用layout做出的效果：

可以看出sketch的layout可以根据文字的长短自动换行和排版，拉伸也完全可以做到自适应

主要功能解释：

在symbol页面点击symbol画板或者symbol内的一个组，在右边的操作面板中会看到layout的功能区，有三个选项，none很好理解就是不使用layout功能；

Horizontal是水平方向，意思是symbol内的元素之间保持固定的间距在水平向发生变化；从左向右、中间和从右向左这三个选项的意思是：从左向右变化、从中间向两边变化和从右边向左变化

Vertical是垂直向，意思是symbol内的元素之间保持固定的间距在垂直向发生变化；从上向下，居中，从下向上这三个选项的意思可由上面水平向的意思同理可得。

而且像symbol可以symbol套symbol一样， layout也可以layout套layout！

我下面举例具体说明一下：

比如设计中常见的组件button，我们希望button的长短可以随着里面文字的长短自动变，这个时候就可以运用layout。这个变化是水平向的所以我们选择水平向的选项。

注意：layout识别元素是不会识别组里面的元素的，所以要确保你要自适应的元素们能被识别到！

三个button分别使用了水平向的：从左向右，中间，从右向左，可以看出layout会保持文字和外面圆角矩形的边距自动拉长btn的长度，而三个选项的区别就是拉伸的方向，一个是从左向右拉伸，一个是从中间向两边拉伸，还有一个是从右边向左拉伸，同理可以自己去理解一下垂直方向上的三个选项的意思哦～

下面的card运用layout的功能，配合resize的设置来完成：

首先分析一下这个card我们的需求是什么：

1.card里面的元素：图片、heading、describe text、以及下面的作者信息区块保持上下间距不变；card的高度随着里面内容的变化向下拉高。

2.左右拉伸时保证左右间距

可以得出：

1.整个card作为一个大symbol的里面元素的layout是垂直向的从上到下的

2.resize设置左右间距不变

步骤

1. 先做出一张卡片；

我这里的图片直接用的填充而非蒙版（虽然用蒙版也可以，但是会给symbol增加图层，我个人建议使用填充的方式）

2. 设置好各个元素距离card边界的距离

注意：在上面的button例子中不要设置文本框的宽度，因为水平向的变化，宽度是自适应的，如果设置文字宽度反而会用不了layout。在这里是垂直向上的变化所以我们要固定好文本框的宽度以及与symbol左右边界的距离，这样文字才会自动转行并保持与symbol左右边界的距离

3. 整理元素

在这里作者信息那部分 头像和文字可以打组作为一个整体。而这个组里的文字部分又是可以使用layout的所以可以文字部分再打一个组

4.创建symbol

创建symbol选择垂直向的从上向下，在symbol页面勾选 adjust content on resize

5.在symbol里设置resizing

因为我们希望在拉伸过程中元素左右边距保持不变，所以在这里我们要固定元素的左右边距。

6.在layout的symbol里嵌套layout

在symbol页面所有组也都可以用layout的功能，在这里我在作者信息组里将文字部分打组并且做了一个垂直向的从上到下layout。并且固定左右间距，

tada～到这里就完成了，返回到主页面上 尝试输入大段文字，并且左右拉伸试试看～你会爱上这个功能哦～

Tips：有些时候输入文字页面的排版没有马上自适应可以点击这个地方：

以上～

来源：UI中国