细说sketch 39新必杀:Resizing,创建响应式UI

2,780 阅读2分钟

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-…