本期開(kāi)始蔼啦，給各位設(shè)計(jì)師帶來(lái)一個(gè)系列文章：你不知道的Sketch黑科技锄码，也算是照應(yīng)UI黑客的名稱了动知。
作為目前最受UI設(shè)計(jì)師歡迎的設(shè)計(jì)軟件，Sketch包含的強(qiáng)大功能足以顛覆PS時(shí)代的設(shè)計(jì)方式缭召，而且未來(lái)還有很強(qiáng)的擴(kuò)展性栈顷。借助一些第三方插件和技巧，會(huì)產(chǎn)生很多意想不到的效果嵌巷，極大推進(jìn)了設(shè)計(jì)師的工作效率妨蛹。
在平時(shí)的工作中，通過(guò)實(shí)踐與總結(jié)晴竞，逐漸發(fā)現(xiàn)Sketch的潛力遠(yuǎn)遠(yuǎn)比我們知道的要多蛙卤。因此通過(guò)公司項(xiàng)目沉淀了一些經(jīng)驗(yàn)和技巧，在這里分享給大家噩死。
好了颤难，我們開(kāi)始今天的話題。
前陣子在知乎中遇到這樣一個(gè)問(wèn)題：
一個(gè)搜索框Symbol組件已维，里面的提示文字?jǐn)?shù)量不定行嗤，如何讓圖標(biāo)和文字整體居中？
這位知友的問(wèn)題估計(jì)很多設(shè)計(jì)師都遇到過(guò)垛耳，先看下圖栅屏，一個(gè)簡(jiǎn)單的搜索框飘千，由圓角輸入框、搜索icon和提示文字構(gòu)成栈雳，其中的文字字?jǐn)?shù)會(huì)根據(jù)頁(yè)面的不同而不同护奈。整個(gè)搜索框要做成Symbol組件，以便項(xiàng)目全局掉用哥纫。
下圖是Symbol組件中的圖層顯示霉旗。內(nèi)容組居中在整個(gè)搜索框中。由于是居中蛀骇，所以很自然地想到提示文字應(yīng)該也是居中對(duì)齊厌秒。
可是當(dāng)改變文本的時(shí)候，左側(cè)的icon并沒(méi)有發(fā)生改變擅憔，我們希望的效果是鸵闪，無(wú)論文字多長(zhǎng)，內(nèi)容組整體居中于搜索框暑诸。
對(duì)于這個(gè)問(wèn)題岛马，其實(shí)不用借助任何插件工具，Sketch本身就能實(shí)現(xiàn)屠列，也算是Sketch一個(gè)黑科技了。
這里我們還需要了解一個(gè)現(xiàn)象就是伞矩，如果icon在文字的右邊笛洛，內(nèi)容組是可以居中的∧死ぃ看下圖苛让。
既然icon在右側(cè)能居中，那如果我在頁(yè)面中把Symbol整體翻轉(zhuǎn)一下不就“實(shí)現(xiàn)”想要的效果了嗎湿诊？來(lái)試下狱杰。
嗯，已經(jīng)基本實(shí)現(xiàn)想要的效果了厅须，最后的問(wèn)題是icon和文字都是反的仿畸，我們需要再次把它倆翻轉(zhuǎn)過(guò)來(lái)。方法就是直接進(jìn)入Symbol把icon和文字翻轉(zhuǎn)朗和。
到這里我們已經(jīng)解決了問(wèn)題错沽，icon在文字左邊，無(wú)論字?jǐn)?shù)多少眶拉，整體都可以居中于輸入框千埃。一起看下最終效果。
當(dāng)然了忆植，在實(shí)際工作中放可，這個(gè)框的寬度可能有多個(gè)谒臼，比如我想把框拉大，如果不作一些處理的話耀里，會(huì)變成這樣：icon被拉扁了蜈缤。
所以還需要利用Sketch的Resizing功能，關(guān)于這個(gè)功能之前也分享過(guò)一篇教程《用Sketch制作彈性可伸縮的音頻播放條》备韧，不過(guò)在新版本的Sketch中劫樟，Resizing的界面發(fā)生了改變，但是本質(zhì)還是一樣的织堂。
我們需要利用Resizing把icon的寬高給固定住叠艳，由于文字在Sketch中是不會(huì)被拉伸的，所以不用管易阳。
經(jīng)過(guò)以上操作就可以完美實(shí)現(xiàn)不同寬度的搜索框了附较，同時(shí)icon和文字整體在框中保持居中。
END
