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