今天我們來聊一下建立組件庫時少不了的Resizing功能。

掌握Resizing功能可以幫助我們制作彈性控件，用一個組件適配不同尺寸，提升效率so easy！下面我們就從Resizing的出現(xiàn)條件，Resizing的使用，實際操作詳解以及它的拓展四個方面來了解Resizing功能吧。

Resizing的出現(xiàn)條件

有些小伙伴可能會奇怪，為什么自己的操作區(qū)沒有Resizing的面板，所以我們先來了解一下Resizing的出現(xiàn)條件。

Resizing是控制物體間的位置關系和物體尺寸的，是一種相對關系。所以它的使用需要參照物，這個參照物可以是畫板、也可以是組，也就是說如果你選擇的是一個不在畫板內(nèi)，且沒有組的物體的話，是無法使用Resizing功能的。

1.沒有參照沒有組織，就沒有Resizing。

2. 組內(nèi)的Resizing

3.畫板內(nèi)的Resizing

如果發(fā)現(xiàn)自己的面板中沒有Resizing功能，可以先檢查一下是否建立了畫板或者組。

Resizing的使用

弄清了Resizing的出現(xiàn)條件，現(xiàn)在我們來看看它的使用面板。

Resizing面板中一共分三個模塊：Pin to Edge 、Fix Size 和 Preview，下面我們依次來了解它們的作用。

1.Pin to Edge

Pin to Edge是用來固定邊緣的，選擇我們需要固定的邊緣點擊選中后，該邊緣變成藍色。再拖動一下組或畫板，可以看到我們固定的邊緣還是保持不變。

如下圖固定橘貓右側(cè)邊緣，固定白貓左側(cè)邊緣，再拖動組的時候，橘貓與組右邊距就會保持不變，白貓與組左邊距會保持不變，這樣我們就把兩只相親相愛的貓咪分開了。

固定左右邊緣分開貓咪

2.Fix Size

Fix Size是固定所選物體的尺寸大小的，可以選擇固定其高度或?qū)挾?，或是高寬同時固定。同樣 固定后的尺寸大小，不會隨畫板或組而改變。

如下圖，先把cute虎圖層的寬度和高度都固定，拉伸組的時候，cute虎的尺寸保持不變還是一只cute虎。

固定大小保持cute虎

而下圖是不固定cute虎圖層的寬度和高度，再次拉伸組的時候，我們的cute虎被成功拉伸成胖虎！

不固定大小拉伸成胖虎

3.Preview

Preview是預覽 ，在選擇時實時演示，以幫助我們理解判斷是否是自己想要的效果。

edge上下左右和size寬高之間各種配搭組合，會成產(chǎn)生不一樣的效果，多嘗試幾次就能熟練掌握，找到自己想要的效果了。

實例操作詳解

了解了Resizing的出現(xiàn)條件和使用，現(xiàn)在就用一個例子實際操作一下吧。我們以App Store里常見的一個列表形式為例，為了方便理解，我給它加上淺灰色的底色。首先做好750的尺寸，然后選擇好各元素與組之間的關系，如下圖：

接下來就可以讓它適應各個尺寸了。

Resizing的拓展

最后我們來做一個復雜一點的組件，以播放器為例，需要寬度自適應的有播放器整體以及進度條兩部分。

如下圖所示，我們可以分兩部分設置好各元素的邊緣和大小，這樣就可以實現(xiàn)自由的彈性控件了。

播放器還需要暫停、播放的按鈕變化，這時只需要配上Library使用，不僅可以自由切換按鈕還可以調(diào)整顏色。

以上就是Resizing的使用過程啦，想了解組件建立的小伙伴可以去看上篇《手把手教你用sketch Libraries》哦。

劃重點

1.Resizing的使用需要參照物可以是畫板、也可以是組。

2. Pin to Edge固定邊緣，F(xiàn)ix Size固定尺寸大小。

3.搭配Library使用，除了自適應尺寸還可以切換按鈕、顏色等，讓組件更加自由。

原創(chuàng)： 焱小玖

公眾號：海鹽社