细说sketch 39新必杀：Resizing，创建响应式UI

Sketch 39中新增了一个重要的功能：Resizing，可以给图层设置布局改变时图层的响应策略。 Sketch官方发了一个简短的演示视频（需翻墙）：Sketch 39 Brings Symbol Resizing。

下面详细的介绍这4种策略

Stretch：拉伸

• 这就是图层默认的策略，和以前sketch中一样
• 当外围尺寸变化时，图层也按照变化的百分比拉伸自身

Pin to Corner：固定边距

• 组内图层的尺寸不变
• 每个图层到最近的边的距离保持不变
• 当图层到两边的距离一致时，此时会保证图层居中

Resize Object：改变图层尺寸

• 图层会改变自己的尺寸来保证到每条边的边距保持不变
• 当图层和group的3条或者4条边相接的时候却会改变行为，图层会保持自身尺寸，然后改变和剩下那条没有相接的边的边距，注意下面gif的第二个图就是这个逻辑。这个属性用来做titlebar正合适啊。但是这个逻辑和float in plcae有点像。

Float in Place：保持边距比例

• 和CSS里面的float不一样！
• 组里的图层保持尺寸不变，图层的位置会根据边距的百分比重置。外围拉伸后，图层会保证到两边的比例不变。如下图所示，上图中绿色矩形到左边距为25，到右边距为125，比例为1比5。当组拉伸到下图的尺寸后，到左边的边距为50，则此时右边距为了保持比例调整为50 * 5 =250
• 根据实际体验，因为百分比时常会得到小数，所以有时拉伸后图层的位置会有百分1这样的偏移。

温馨提示

• 强烈建议打开设置中的Pixel fit when resizing layers
• pin to corner 和 float in place都可以达到居中的设置。pin to corner只能保证离边缘最近的那个轴方向居中，只能保证一个方向的居中。而float in plcae 则每次都按照比例计算，两个方向都可以保证居中。
• resizing的设置被认为是图层的核心属性，不是样式属性。所以不被包括在Shared Styles中。
• 选择图层后可以使用快捷键 ctrl+1,2,3,4快速设置resizing策略

相关链接： medium.com/sketch-app-…