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策略
相关链接:
https://medium.com/sketch-app-sources/sketch-39-resizing-cheat-sheet-feec0450e7e2#.g0j7cdv35