1. 程式人生 > >如何在執行時改變App的圖示

如何在執行時改變App的圖示

在你完成應用程式的beta版本後,最後會有些人去幫你測試,使你去完善應用程式……或者會有投資青睞。但是如果測試人員有一種簡單地方式去檢查構建版本的應用程式會不會有幫助呢?

這個教程將會向你展示這些,向你介紹一些或許很少有人知道的Xcode裡面的功能。

你會相信在這個教程中你不會寫一行Swift的程式碼嗎?當然,你也不用寫一句Objective-C程式碼。

這個教程會讓你寫一些bash shell指令碼。你將會使用到ImageMagick,Terminal,Xcode,去寫一個自動在你的app的圖示上加上“debug”或者“beta”標識的指令碼。

這個教程需要你有一些基本的Unix指令碼的知識。你可以跟隨一些shell指令碼大神學習,但你也可以在

Bash初學者指南或者Bas指令碼高階程式設計指南

你想接下來做這些嗎?

準備

首先,你需要安裝ImageMagick,這是一個非常強大的圖形處理圖軟體套件,專門通過終端進行。你可以非常簡單地通過Homebrew來安裝ImageMagick。如果你沒有安裝Homebrew,或者你可能並不知道它是什麼,你可以在主頁上學習瞭解並安裝它。

如果你已經安裝了Homebrew,開啟終端並輸入:

Shell
1 brew update

這是確定你是否從Homebrew上安裝的最新的安裝包,這個也是確認你是否有安裝Homebrew。

那麼,現在,通過使用Homebrew來安裝你所需要的安裝包。現在輸入下面的命令:

Shell
1 brew install ImageMagick

你將會看到一些列的東西通過Homebrew,展示了ImageMagick安裝的詳細過程,因此跟著步驟安裝。

接下來,你也需要安裝Ghostscript,因為你將使用的ImageMagick會依賴它。Ghostscript是一個軟體套件用於呈現PDF和PS檔案。你需要它是因為它提供了支援ImageMagick的字型。

安裝Ghostscript通過執行下面的命令:

Shell
1 brew install ghostscript

如果中間發生錯誤,執行這個命令:

Shell
1 brew doctor

如果安裝失敗,你會得到一個訊息,並告訴你如何去修復它。

這些是所有你需要安裝的,以在本教程中使用。

Llama你好

ImageMagick中有許多命令,但在本教程中,你需要用到的是convert和composite(轉換和組合)

convert:一張圖片,修改它,然後儲存為一張新的圖片;

composite:一張圖片,在它上面覆蓋另外一張圖片,然後存為新的第三張圖片。

本教程中提供一些簡單地圖示供使用。當然,你也可以使用你自己的圖示,但你需要修改為相應的檔名。在這裡下載圖示,對於本教程,將其放在桌面上。

這裡的目標之一是覆蓋構建版本應用程式的圖示。所以你將看到如何使用ImageMagick覆蓋文字影象將Hello World放在其中的一個圖示上。開啟終端並進入到放應用程式圖示的資料夾:

Shell
1 cd~/Desktop/AppIconSet

現在輸入:

Shell
1 convert AppIcon60x60@2x.png-fill white-font Times-Bold-pointsize18-gravity south-annotate0"Hello World"test.png

我將會逐一分解這行命令,因此你將會明白它做了寫什麼:

1、[email protected] 是輸入圖片的名字;

2、fill white 設定文字為白色;

3、font Times-Bold 告訴ImageMagick使用什麼字型;

4、pointsize 18 設定字型的大小為18;

5、gravity south 文字與圖片的底部對齊

6、annotate 0 “Hello World” 告訴ImageMagick使帶有“Hello World”文字註釋的圖片旋轉的度數為0度;

7、test.png 輸出的檔名,並且ImageMagick將會覆蓋掉已經存在的檔案。

如果你在終端上沒有看到任何的錯誤,那麼你將會在AppIconSet的資料夾中看到一個命名為test.png的檔案,開啟後你會看到這樣:

提示:如果你看到了錯誤的訊息,或者是指令碼沒有作用,那麼可能是你沒有安裝所需的字型。通過執行下面的命令,看下你所能用的字型有哪些。

Shell
1 convert-list font

如果你沒有Times這個字型,那麼選擇一個你可以使用的來代替。

現在,將beta標誌載入圖片上。在終端上輸入:

Shell
1 composite betaRibbon.pngtest.pngtest2.png

這個是將betaRibbon.png放在test.png的上面,然後將合成的圖片儲存為test2.png

開啟test2.png。等等,你看到的還是原來的test.png.

那麼為什麼會是這樣呢?

test.png 大小是120×120的,然而,betaRibbon.png是1024×1014的,所以betaRibbon.png只有透明的那部分在test.png上,剩下的部分被裁剪掉了。

不相信我嗎?那麼試下相同的命令,但是將betaRibbon.png 和 test.png位置交換。

Shell
1 composite test.pngbetaRibbon.pngtest2.png

你現在將會看到一張在test.png的右上角帶有beta的很大的圖片:

為了得到我們想要的,你需要將betaRibbon.png的尺寸改為120×120的。在ImageMagick中這是非常容易的。僅僅輸入:

Shell
1 convert betaRibbon.png-resize120x120smallBetaRibbon.png

這行命令是將betaRibbon.png的大小改為120×120,並儲存為smallRetaRibbon.png

現在,執行下面:

Shell
1 composite smallBetaRibbon.pngtest.pngtest2.png

開啟test2.png,然後你將看到我們期待的:

這些就是在本教程中你需要知道的ImageMagick的功能,但是這些僅僅是ImageMagick功能的冰山一角。點選ImageMagick的主頁,檢視更多關於它的功能。

Xcode

在這些影象處理工作之後,是時候回到我們熟悉的平臺了。

開啟Xcode,選擇File\New\Project…選擇 iOS\Application\Single View Application, 然後點選 Next. 工程命名為Llama Trot, 選擇語言為 Swift, 然後設定裝置為Universal. 然後將工程儲存在桌面上。

你的目標是通過Xcode和ImageMagick,根據所選的構建配置,在每次構建時生成一個適當的圖示。

Xcode能夠在你的工程構建時執行指令碼來做些事情。執行指令碼僅僅是Unix指令碼,就像你已經寫過的,在你每次執行你的Xcode的專案時執行。

設定一個執行指令碼

在你的工程中,選擇Llama Trot的Target,然後選擇Build Phases,點選+,在彈出的選單中選擇New Run Script Phase:

你將會看到Run Script Phase新增到你的工程配置中。

在執行指令碼時,Shell引數被自動設定為bin/sh,也就是說指令碼將在bash Unix shel中執行。

下面的框是讓你用來寫指令碼的。在框中輸入:

Shell
1 echo"Hello World

你的新的 build phase應該看起來像下面這樣:

構建並執行。你將看到什麼也沒發生。這事因為指令碼列印的“Hello World”在你的構建日誌中。

點選Report Navigator,Xcode的導航欄面板最右邊的圖示,點選最近構建的報告,像下圖展示的這樣。當你構建一個工程時,這裡描述了Xcode為你做的所有的事情,你將會看到“Hello World”:

應用圖示

很好,現在你已經寫了一個指令碼輸出“Hello World”,就像你作為一個開發者的職業生涯中已經做過一百萬次列印“Hello World”。現在是時候修改應用的圖示了。

從你的指令碼中找到應用圖示

將所有的應用圖示都新增到Images.xcassets中,將每個圖示拖到合適的AppIcon尺寸上:

同時,你也要將debugRibbon.png 和 betaRibbon.png 放在和.xcodeproj同級的目錄檔案中。

為了使用icons,你的指令碼需要知道致謝icons在哪裡。用下面的程式碼代替你之前寫的指令碼:

Objective-C
123 echo"${BUILT_PRODUCTS_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}"echo${SRCROOT}"

1、第一行列印在你執行你的專案後的問佳佳路徑,包含最後一個圖示。

2、第二行列印專案檔案所在的資料夾路徑。

這是通過使用Xcode的一些構建設定的變數。

執行你的專案並檢視構建報告。你將會看到描述你的工程最後產品的檔案路徑。在它下面,你將會看到你的專案工程所在的檔案路徑:

定位到第一個資料夾,檢視它所在的位置;你將看到你的app中所有的東西,包括所有的app圖示。這裡面是存放ImageMagick修改後的圖示的地方。

通過在Application icon點選右鍵,然後選擇Show Package Contents,你將看到這些圖示。現在他們都是看起來非常正常的!

現在定位到列印的第二個檔案路徑。這個僅僅是你正常工程專案的資料夾。因此,應用圖示在哪裡呢?

前往有著相同名字的Llama Trot檔案。在這裡面你將看到Images.xcassets。開啟Images.xcassets,你將會看到另外一個叫AppIcon.appiconset的檔案。

應用圖示就在這個資料夾中,你將通過ImageMagick來修改它們。假設你將你的工程儲存到桌面上命名為Llama Trot,那麼圖示的路徑為~/Desktop/Llama\ Trot/Llama\ Trot/Images.xcassets/AppIcon.appiconset

將指令碼的最後一行替換為下面的程式碼,你將會得到原始圖示的我完整路徑:

Shell
123 IFS=$'\n'echo$(find${SRCROOT}-nameAppIcon60x60@2x.png")

1、第一行設定IFS-internal欄位分隔符換行符。如果你不這樣做,第二行就會失敗,因為檔名,Llama Trot,包含一個空格。如果你好奇沒有第一行發生了什麼,你可以將其刪除後嘗試一下。

2、第二行中此命令$ { SRCROOT }資料夾遞迴搜尋檔案[email protected]

執行專案,你將會看到 [email protected] 完整的路徑被打印出來:

將它們放在一起

困難的事情就要結束了。現在是時候將它們放在一起,通過你的指令碼來修改應用的圖示。你將首先開始修改[email protected],然後處理所有的應用圖示。這就意味著你需要在[email protected]的模擬器或者6Plus上測試。

通過結合ImageMagick的技術和你以前的指令碼,最終你會得到下面的指令碼。確保更新相應的指令碼:

Shell
12345678910111213141516171819 IFS=$'\n'#1PATH=${PATH}:/usr/local/bin#2TARGET_PATH="${BUILT_PRODUCTS_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/[email protected]"BASE_IMAGE_PATH=$(find${SRCROOT}-name"[email protected]")#3convert betaRibbon.png-resize120x120resizedBetaRibbon.png#4convert${BASE_IMAGE_PATH}-fill white-font Times-Bold-pointsize18-gravity south-annotate0"Hello World"-|composite resizedBetaRibbon.png-${TARGET_PATH}

現在來分析發生了什麼:

1、如果你省略第一行,編譯將失敗。你的終端有一個叫PATH的變數,來儲存一些預設的本地指令碼。對於所有的命令終端認為這是第一個,預設並不是Unix的一部分。這允許任何命令位於一個目錄路徑執行沒有指定完整的命令的位置。Xcode需要將相同的PATH變數分享給你的終端。這行新增/user/local/bin到PATH變數,Homebrew安裝的地方。

2、接下來的兩行,獲取本地的應用圖示,然後分別將該路徑儲存到TARGET_PATH 和 BASE_IMAGE_PATH 變數中

3、這行是將betaRibbon.png的圖示的尺寸改為合適的大小;

4、最後一行做了兩件事情。首先,它在原始的應用圖示上新增“Hello World”文字。然後該指令碼執行合成的功能——將有beta標識的圖片放置在其上面。然後將合成的圖片儲存為應用的圖示。

提示:應用程式圖示名字不是任意的。在最終的產品,應用程式圖示的名稱必須像[email protected]。Xcode使用此命名約定來確定使用哪個圖示根據裝置使用。

執行專案,在你的裝置的主螢幕中看你的應用的圖示;吐過你是在模擬其中,可以按Cmd + Shift + H 切換到主螢幕。你將會看到一個修改過的圖示:

剩下的圖示

現在你已經處理了一個圖示,現在該將這個指令碼去處理所有的圖示了,以使得在iPad、iPhone 6+等上顯示。

要做到這一點,你就會把程式碼修改到一個函式,使圖示圖示的名稱作為引數。然後為每個圖示執行該函式。

修改指令碼像下面這樣:

Shell
123456789101112131415161718192021222324252627 PATH=${PATH}:/usr/local/binIFS=$'\n'functiongenerateIcon(){BASE_IMAGE_NAME=$1TARGET_PATH="${BUILT_PRODUCTS_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/${BASE_IMAGE_NAME}"BASE_IMAGE_PATH=$(find${SRCROOT}-name${BASE_IMAGE_NAME})WIDTH=$(identify-format%w${BASE_IMAGE_PATH})convert betaRibbon.png-resize$WIDTHx$WIDTHresizedRibbon.pngconvert${BASE_IMAGE_PATH}-fill white-font Times-Bold-pointsize18-gravity south-annotate0"Hello World"-|composite resizedRibbon.png-${TARGET_PATH}}generateIcon"[email protected]"generateIcon"[email protected]"generateIcon"AppIcon76x76~ipad.png"generateIcon"[email protected]~ipad.png"

這使得整個影象處理程式碼為一個函式,稱為generateIcon(),並且你將圖示的名稱傳遞給過程作為引數。指令碼訪問這個論點通過使用$1,並設定變數BASE_IMAGE_PATH.$ { BASE_IMAGE_PATH }然後放置[email protected]之前放置的地方。

你將會發現ImageMagick的一個新功能,Identity,這個功能會獲取圖片的資訊。在這種情況下,你想使用通過格式化-format %w 得到的寬度在identify,去重新改變betaRibbon.png的大小。

現在,選擇一個iPad或者一個iPhone6+的模擬器,然後執行該專案。這是因為字型的大小是用畫素表示的,不同的裝置螢幕有不同的畫素密度。

這是很容易的。你真正想要的是根據整個圖示通過一定的比例來設定文字的高度。

在你之前設定WIDTH變數的地方立即加入下面的指令碼:

Shell
1 FONT_SIZE=$(echo"$WIDTH * .15"|bc-l)

這行是非常微妙的,但是它確實是設定一個FONT_SIZE變數可變寬度的五分之一。因為Unix算術不支援浮點運算,您必須使用bc程式。

basic calculator的縮寫,bc能夠處理浮點型別的計算。

現在,改變最後一行generateIcon() ,通過使用FONT_SIZE變數來代替18.最後指令碼應該是下面這樣:

Shell
123456789101112131415161718192021

相關推薦

如何在執行改變App圖示

在你完成應用程式的beta版本後,最後會有些人去幫你測試,使你去完善應用程式……或者會有投資青睞。但是如果測試人員有一種簡單地方式去檢查構建版本的應用程式會不會有幫助呢? 這個教程將會向你展示這些,向你介紹一些或許很少有人知道的Xcode裡面的功能。 你會相信在這個教程中你不會

解決:Android App執行時候按下 home 鍵,讓App 在後臺執行,點選圖示再次進入防止應用重新啟動

一:app 退出時,讓 app 在後臺執行,類似於 home 鍵的功能,最小化 重寫 onkeydown 和 onBackPressed 方法,主要是 movetoBack 方法。 注意在 MainA

iOS-APP-執行防Crash工具XXShield練就

原文地址 前言 正在執行的 APP 突然 Crash,是一件令人不爽的事,會流失使用者,影響公司發展,所以 APP 執行時擁有防 Crash 功能能有效降低 Crash 率,提升 APP 穩定性。但是有時候 APP Crash 是應有的表現,我們不讓 APPCrash 可能會導致別的邏輯錯誤

執行APP顯示兩個APP圖示,一個打不開,刪除一個後,另一個也會消失。

可能原因:你添加了兩個intent-filter 的LAUNCHER 事件,這種情況尤其在一個專案多個module的時候容易出現            <intent-filter>       &nbs

selenium執行程式碼一直提示,找不到webdrive&&執行模擬器的app一直提示網路異常

一.使用selenium執行程式碼一直提示,找不到webdriver 解決辦法:1.將google瀏覽器的路徑加入到環境變數中 2.將webdriver放在C:\Program Files (x86)\Google\Chrome\Application,並這個路徑加入到環境變數中 3.將we

Android底部導航欄切換介面,點選選項文字和圖示改變顏色

** 類似底部導航欄的選單,點選圖示,文字和圖示都變顏色,Fragment切換介面詳解 ** 先看效果圖 以下是全部完整程式碼,如果有問題歡迎留言 圖示和文字佈局color_change.xml <?xml version="1.0" encodi

selenium執行程式碼一直提示,找不到webdrive&&執行模擬器的app一直提示網路異常

一.使用selenium執行程式碼一直提示,找不到webdriver 解決辦法:1.將google瀏覽器的路徑加入到環境變數中 2.將webdriver放在C:\Program Files (x86)\Google\Chrome\Application,並這個路

IOS的app執行不滿屏,上下留有黑邊

特別是在5或者5s上執行,會出現上下有一樣寬高的黑色區域,明明程式碼已經設定全屏了,為啥還出現這樣的問題,那又如何解決呢? 因為我們的那個應用是按照320*480的size來執行的,所以導致上下有黑色。 1.解決辦法就是把default-568h圖片放到你的專案裡,這樣執行

xcode7/ios9中 低版本app執行,螢幕上下出現黑邊的問題

xcode從低版本升級至 7.0或更高版本後,某些低版本app再次編譯執行後,發現app在裝置上執行時,會在上端和底部 出現黑邊的現象。這導致app的展示介面跟縮水了一樣,變得十分醜陋。 對於這一問題,找度娘,沒找到類似的解決方案。有人說 將低版本中的xcode包內容裡的

app啟動執行不滿屏,上下有黑邊

iOS開發中,使用真機,或模擬器除錯時,當APP啟動後,會出現不滿屏的情況,即上下出現黑邊。 如下圖所示:   造成這種顯示異常的原因是因為應用是按照320*480的size來執行的,所以導致上下有黑

android IDE——通過DDMS檢視app執行所佔記憶體情況

在android記憶體優化方面,我們不可能做到沒有大記憶體的佔用情況。 所以有時候要清楚我們的app到底佔用了多少記憶體,哪一步操作佔用了多少的記憶體。 這時候,android的ddms中提供了一個工具,是可是實時檢視app執行時的記憶體使用情況。 下面我

MFC對話方塊初始化執行如何隱藏,托盤圖示,工作列圖示的相關問題

花了兩三天在搞這些啊,順便看了看MFC對話方塊的機制。 一、托盤圖示 1. 新增托盤訊息定義;在dlg類中新增變數,托盤訊息響應函式的宣告;在dlg類的cpp中手動新增托盤訊息對映 #define WM_NOTIFYICON WM_USER+5 NOTIFYICON

重置IOS APP首次執行系統彈出的“是否允許”提示框

iOS app首次執行時,如果使用了某些敏感功能(比如訪問相簿、傳送推送等),系統會彈出一個提示框,詢問使用者是否允許。使用者一旦選擇了允許或者不允許,之後似乎就沒有後悔藥吃了,因為即使你重灌app,這個框也不會再彈出。 那正確的做法是什麼呢? 1.刪除該app

執行動態移動控制元件的位置和改變控制元件的尺寸

Delphi的TCustomForm留有一個為IDE的視覺化設計的用的介面Designer. Designer是IDesignerNotify, IDesignerHook 介面. 我在這裡實現了這些介面. 程式不用做任何改動,只要調函式BeginDesign就可以開始像I

Android app執行按HOME鍵,再次點選圖表後從新呼叫啟動頁問題

如標題所述,最近被重複例項化launcher activity這個問題搞得很慘,這個問題有哪些表現呢?如下: 1. 在package installers 安裝介面安裝完一個應用後,直接開啟app,然後進入了 Activity_1, 此時再通過此activity用star

vs2010 按執行不自動編譯已經改變的直接執行先前的專案

現象: 點選F5,VS無法自動編譯,即它會直接執行原有已經編譯好的工程,除非手工在專案上右擊選擇“重新生成” 解決辦法: 工具→選項→專案和解決方案→生成並執行:執行時,當專案過期時選擇“始終生成” 。 or 解決方案->配置管理->專案上下文:將生成

android opencv配置及執行不用opencv Manager即可執行APP

各種教學視訊或文件資料 +QQ:635992897 準備Android-ndk Android-sdk eclipse(ADT+CDT) Java-JDK opencv android SDK軟體包並配置好Java環境 將opencv android SDK拷

Android 簽名打包後的APP在後臺執行按icon導致程式重啟的奇葩問題解決

前言 公司專案在完結時遇到一個問題,用正式簽名打包後進行測試發現,在程式正常執行時按下home鍵返回桌面,此時再點選APP的icon並不會回到之前的狀態,而是會從splash頁開始重啟程式,而從任務列表裡開啟APP則無此問題,在debug簽名下也並沒有遇到這個

利用gradle修改打包或者執行App工程生成的app檔名

1.第一種情況,你的android工程versionname是通過build.gradle檔案配置的話,直接在build.gradle檔案的android括號內新增如下程式碼 //修改生成的apk名字 applicationVariants.all { variant -