文章轉(zhuǎn)自：小武的技術(shù)漁場-iOS開發(fā)：使用大圖+腳本，生成各種size的app icon和圖片素材

美術(shù)UI在公司是寶貴的資源，集各種項目寵愛于一身。為了努力完成好老板的進度需求，不給UI添麻煩。程序員開始忙活了。
在iOS里面，我們使用image assert來管理素材和app icon。為什么呢？因為方便，按照image assert要求的尺寸拖進去就好了。

ImageAssert適配各種尺寸

k！胸中無限感慨，我們是光榮偉大的Coder乜！come on！
1， 縮放圖片到指定尺寸。
用過PS么？用過美圖秀秀么？ 好吧，沒有我也不勉強你，估計你也不會美顏、磨皮、消下巴、變大眼睛、美白吧！用的很熟練，你也不用看這篇東東了。 來吧，在Mac下給你一個神器sips，一個命令行工具，哈哈！sips這玩意是命令行處理圖片大小的，可以方便的用來修改圖片的各種尺寸。

高分辨率的button圖片素材

如果一個圖片button.png為256256的，壓成@2x和@1x的話，按照2/3、1/3來壓縮得到171

cp button.png button@3x.png
sips -z 171 171 button.png --out button@2x.png
sips -z 85 85 button.png --out button.png

這樣輸出，在當前文件夾下，你可以得到獲得 button.png\button@2x.png \buttong@3x.png三個素材圖片了，把它們拖到image assert里面來管理吧。在iOS界面Storyboard中可以直接使用button圖片，配合AutoLayout自動適配不同尺寸設(shè)備。

@2x和@1x的button-assert

sips的詳細用法請打開Mac的命令行終端：

//執(zhí)行sips －h(huán)elp查看詳細用法
sips –help

2，獲取圖片尺寸，等比例縮放圖片。
上面我們是預(yù)先知道了圖片的寬和高，然后自己進行了寬和高乘以2/3、1/3的處理，但是如果圖片素材很多，你總不可能一個一個的搞幾天啊，這不科學。我們是光榮偉大的Coder乜！嗯嗯，sips會給我們答案的，使用下面兩行命令分別獲取圖片素材的寬和高：

sips -g pixelHeight button.png | awk -F: '{print $2}' sips -g pixelWidth button.png | awk -F: '{print $2}'

請實際將這兩行代碼運行一下，看看是否得到預(yù)期結(jié)果。sips輸出寬高，然后awk命令把值提取出來。具體的參數(shù)含義請查一下手冊。 接下來，我們需要地方來存儲這兩個變量，并計算出它們乘以2/3、1/3的結(jié)果。因此，我們來寫個Shell腳本程序吧！ Shell腳本，你就理解能把命令行程序打包組合執(zhí)行的這么一個東東吧。 在Shell里面定義一個函數(shù)，命名為ScalePic

ScalePic () {
# 1 獲取圖片的高和寬imageHeight=`sips -g pixelHeight $1 | awk -F: '{print $2}'`imageWidth=`sips -g pixelWidth $1 | awk -F: '{print $2}'`height=`echo $imageHeight`width=`echo $imageWidth`# 2 獲取壓縮2/3和1/3后的尺寸height2x=$(($height*2/3))width2x=$(($width*2/3))height1x=$(($height/3))width1x=$(($width/3))# 3 存放輸入文件名，并生成@2x和@3x后綴文件名imageFile=$1fileName2x=${imageFile/\.png/@2x\.png}fileName3x=${imageFile/\.png/@3x\.png}# 4 拷貝并進行壓縮cp $1 $fileName3xsips -z $height2x $width2x $1 --out $fileName2xsips -z $height1x $width1x $1

}

接下來我們?nèi)绾卧赟hell腳本里面調(diào)用這個函數(shù)呢？我們首先來確定一下我們可愛尊貴的UI MM&GG給我們素材。都統(tǒng)統(tǒng)放在了一個文件夾里，有11.png、112.png 等感人肺腑的命名文件命名，好了。我們默默的把文件名改好。 打開命令行，進入跟這個文件夾一級的文件夾，將Shell腳本放入。Shell腳本是這個樣子滴：

!/bin/sh
0 進入素材文件夾
cd $1
1 遍歷當前文件夾下的所有文件，即所有圖片素材了。
for file in ./* do # 2 獲取圖片的文件名，并生成 “文件名.imageset”文件夾，方便下一步處理 imageFile=$(basename $file) imageDir=${imageFile/.png/.imageset} mkdir $imageDir
# 3 將圖片拷貝入“文件名.imageset”文件夾，并進入該文件夾cp $imageFile $imageDir/cd $imageDir# 4 執(zhí)行ScalePic函數(shù)，將圖片文件名作為參數(shù)。最后處理完后，退回上一級目錄ScalePic $imageFilecd ..

done
cd ..

大家可以試著運行一下Shell腳本，腳本名字imagesetGenerator.sh，素材圖片的文件夾為imageiphone，命令行下執(zhí)行腳本：

./imagesetGenerator.sh imageiphone

哇塞！一瞬間，所有的大小尺寸的圖片都生成了，并在各自的文件夾下了！wonderful！
3，真的要手動把所有圖片拖入到ImageSet里面嗎？
手動生成了所有圖片素材后，你以為工作就結(jié)束了嗎？試試將所有的素材拖入到ImageSet里面吧，工作是痛苦而乏味的。我們能這樣弱嗎？答案明顯是NO，我們是光榮偉大的Coder乜！ 首先，在Xcode里面右鍵，打開一個ImageSet文件夾。

在Finder中打開ImageSet-1024x482

如下圖所示，ImageSet文件夾都是以“.imageset”結(jié)尾的，里面包含三個圖像素材和一個“Contents.json”文件。

ImageSet結(jié)構(gòu)

{ "images" : [ { "idiom" : "universal", "scale" : "1x", "filename" : "btn_close.png" }, { "idiom" : "universal", "scale" : "2x", "filename" : "btn_close@2x.png" }, { "idiom" : "universal", "scale" : "3x", "filename" : "btn_close@3x.png" } ], "info" : { "version" : 1, "author" : "xcode" } }

這是一個以JSON格式表述的素材管理格式。這個JSON文件的內(nèi)容很容易看懂的，基本上就是1x，2x和3x對應(yīng)的圖像文件名。因此我們就要生成這樣的一個Contents.json文件，并放入相應(yīng)的有各種圖像素材的imageset文件夾里。 好，回到我們現(xiàn)在的工作階段。上一步2的腳本里面，我們已經(jīng)把圖像的素材放入了.iamgeset文件夾里了，我們現(xiàn)在就差一個Contents.json描述文件了。繼續(xù)搞起！

contents () { imageFile=$1 renameFile2x=${imageFile/.png/@2x.png} renameFile3x=${imageFile/.png/@3x.png}
echo { >> Contents.jsonecho " \"images\"" : [>> Contents.jsonecho " "{>> Contents.jsonecho " \"idiom\"" : "\"universal\"",>> Contents.jsonecho " \"scale\"" : "\"1x\"",>> Contents.jsonecho " \"filename\"" : "\"$imageFile\"">> Contents.jsonecho " "},>> Contents.jsonecho " "{>> Contents.jsonecho " \"idiom\"" : "\"universal\"",>> Contents.jsonecho " \"scale\"" : "\"2x\"",>> Contents.jsonecho " \"filename\"" : "\"$renameFile2x\"">> Contents.jsonecho " "},>> Contents.jsonecho " "{>> Contents.jsonecho " \"idiom\"" : "\"universal\"",>> Contents.jsonecho " \"scale\"" : "\"3x\"",>> Contents.jsonecho " \"filename\"" : "\"$renameFile3x\"">> Contents.jsonecho " "}>> Contents.jsonecho " "],>> Contents.jsonecho " \"info\"" : {>> Contents.jsonecho " \"version\"" : 1,>> Contents.jsonecho " \"author\"" : "\"xcode\"">> Contents.jsonecho " "}>> Contents.jsonecho }>> Contents.json

}

contents函數(shù)，暴力的echo文本到Contents.json文件中去。 好了，最后的完成態(tài)的腳本應(yīng)該是這個樣子滴：

!/bin/sh
0 進入需要處理的素材文件夾
cd $1
1 遍歷當前文件夾下的所有文件，即所有圖片素材了。
for file in ./* do # 2 獲取圖片的文件名，并生成 “文件名.imageset”文件夾，方便下一步處理 imageFile=$(basename $file) imageDir=${imageFile/.png/.imageset} mkdir $imageDir
# 3 將圖片拷貝入“文件名.imageset”文件夾，并進入該文件夾cp $imageFile $imageDir/cd $imageDir# 4 執(zhí)行ScalePic函數(shù)，將圖片文件名作為參數(shù)。# 執(zhí)行Contents函數(shù)，生成描述文件Contents.json# 最后處理完后，退回上一級目錄ScalePic $imageFileContents $imageFilecd ..

done
cd ..

執(zhí)行后，得到所需要的文件素材，拖入XCode工程的Assets.xcassets文件夾中，就可以在項目中自動識別出來了。
完成的腳本在GitHub上，可以點擊獲取imagesetGenerator.sh。
調(diào)用過程如下(可能簡書沒法顯示GIF，可以去我的博客站看看)：

imageProcess.gif

!/bin/sh
IconWithSize() { #-Z 等比例按照給定尺寸縮放最長邊。 sips -Z $1 icon.png --out icon_$1x$1.png }
for size in 29 40 50 57 58 60 72 76 80 87 100 114 120 144 152 180 do IconWithSize $size done

希望大家能夠利用工具簡化一切操作！我們是光榮偉大的Coder乜！以上。