自适应元件

智能的自适应元件可以让你来决定以何种方式来让元件内容根据设计稿的不同宽度,或者高度作出改变。

例如,你希望让一个图层总是保持在元件的中间位置-或者一个组总是出现在左上角的位置-无论这个容器有多高或者多宽。现在使用这种智能规则,效果就可以实现。

你可以按你的方式来调整这个元件的尺寸,点击然后拖拽图层四周的调节把手。但是,使用智能调整尺寸功能后,你可以为这些组或者原价内部的图层指定一些规则。

当创建或者编辑元件的时候,你可以定义当你调节父级元件尺寸时,内部元件的行为表现。下面的四种规则你可以在属性检查器中找到,也可以使用快捷键来定义。

+1 Stretch(弹性调整):调整图层大小并保持图层的原始坐标。这是默认的一种调节方式。

+2 Pin to corner(固定到某象限):自动将图层固定在离它最近的某一个象限中。这个图层不会随着父级图层的大小改变而发生变化。在这个操作中,Sketch将父级图层划分为一个九宫格,即为九个象限。某个元素离哪个象限最近,则被固定到某个象限中。

+3 Resize object(可调整的子图层):当父级图层尺寸发生变化时,子图层的大小也会随之发生变化。当你需要让子图层和父图层的比例完全保持一致的时候,你可以使用这种方式。比如你在调整一个图标的大小的时候,用这种方式就对了。

+4 Float in place(相对定位):图层的大小不发生变化,但是它的位置会随着父级图层的百分比发生变化。比如我们需要子图层永远保持在宽度20%的位置,那么用这种方式非常理想。

以上这些调节规则并不仅仅适用于元件,对组也同样生效(Group)。

resizing@2x

这四种调节规则可以在组或者元件内部图层的属性检查器中找到。

使用这种方式后,你接下来就可以更简单的来拉伸图层或者组了。对于适配不同屏幕宽度的设计稿,这种方式非常有效。

通过下面一段视频,你会有更直观的了解:

Sketch新版本中已经内置了带有Resizing-Symbols的模板,你可以在File > New From Template > iOS UI Design中找到。

 
上一篇:嵌套元件
下一篇:样式