美文网首页设计iOS开发资源寒哥管理的技术专题
细说sketch 39新必杀:Resizing,创建响应式UI

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

作者: 没故事的卓同学 | 来源:发表于2016-08-20 13:37 被阅读2220次

    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

    相关文章

      网友评论

      • 85b3ae2582f4:Float in Place 的计算方式有误... 并不是左右的 padding 比例. 上图只是刚刚好是这样 在查相关资料的童鞋留意

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

      本文链接:https://www.haomeiwen.com/subject/vtristtx.html