Xcode 6 技巧: 向量影象,程式碼片段以及其他

發表於2015-05-23

作為一名開發者,無論你是職業的還是為了興趣,毫無疑問的是你肯定會花無數的時間坐在顯示器前等待你的工程完畢。感覺你正在使用的程式設計工具得心應手非常重要,因為它們是你的虛擬工作空間和所有工作條件的組成部分。當我說“所有”,我指的是:從你選擇來作為工具的應用,一直到你把最後的可用的配置運用於它們身上。毫無疑問,一個友好的環境可以增強你的表現;一個不那麼友好的,沒有定製化的程式設計工具會起到相反的效果,從而你的生產率會急劇減少。例如,當你使用“冰冷無情”的工具且不能改變它的展示配置時,你可能會感到厭煩,或者因為字型太小而感覺到視覺疲勞,或者因為不可能配置自己的組合鍵而不得不使用滑鼠。

希望以上我已經把我的觀點解釋清楚了,現在讓我把它更具體化。作為一個iOS(或者Mac)開發者,很可能都是使用Xcode作為首要IDE(Integrated Development Environment)來開發工程。我之所以說可能是因為也存在其他的可選工具來代替Xcode。儘管如此,因為大部分的開發者都是使用Xcode,我將著重介紹。不管怎樣,Xcode是一款非常強大的IDE,擁有數不清的選項和可能性,在第六版本(截止寫這篇文章的時間時)幾乎沒有其他IDE沒有的東西。每一個新版本都會帶來新的特性,使開發者使用更方便。但是,我們也不得不承認Xcode也不是完美的;它也有瑕疵,有些甚至很煩人。但是儘管如此,它仍然是個很棒的工具,而且慶幸的是,通過每個新的迭代,蘋果都非常努力的來終止所有的瑕疵和bugs。簡短的說,儘管有些瑕疵,Xcode也還是一款很強大的使用工具。

Xcode,同一些其他的程式設計工具一樣,由一些預定義的配置組成。只要它被安裝了,從首次使用它的初始狀態就服務於大部分的開發者。毫無疑問,Xcode有一系列強大的功能, 對於一些新開發者或者首次使用者可能會看著很困惑。顯然,事實就是並非每個人都會用到所有的選項。例如,如果你不使用版本控制,你將可能永遠都不會使用相關功能。或者,除非你開發一個非常大的工程,你可能永遠都不會使用bots來測試。但是,無論你會不會使用一些功能,你必須承認一件事:Xcode並不是一成不變的,它是可以通過很多種方法來定製化的,所以當你使用它的時候會感到很方便舒適,同時也會變的很有產出。

正如你想的,這篇教程並不會像普通教程那樣,今天會討論新的程式設計話題。我們將會更多處理一些“輕量級”的東西,但請相信我,這是長久以來我一直想寫下來的一篇非常重要的課題。接下來的部分我的目標包括:

  • 怎樣改變Xcode的外觀和感受,這樣你將永遠不會厭煩使用它。是誰說的色彩不是為專業人士準備的?
  • 實用貼士幫助你提高生產率以及減少在實現普通程式設計上浪費的時間。
  • 一個快速的指南來介紹我個人認為非常重要的Xcode功能特性;可能你會發現一些新的有用的東西併為自己所用。

簡言之,這個教程介紹了Xcode在審美觀上的,程式設計上的和使用水平上的定製化。讓我強調一下,Xcode肯定有比我等一下將要展現給你的東西多的多的特性,但是我們即將介紹的都是最普通的調整(如果允許我這樣說的話)而且你將非常有必要這麼做。因此,如果你仍然對上面說的感興趣,來吧跟我們一起;我們將起飛了!

Creating a Sample Project

在這個教程裡我不會給你一個初始工程來上手,我們也不會從頭開始建立一個複雜工程。我們將會建立一個有兩個labels 和一個image view的非常簡單的工程,這樣我們就可以看到接下來將會應用的東西。 然而,你可以點選這裡下載我們後面將會需要的資源壓縮檔案。 當你下載並解壓縮檔案後你將會發現以下東西:

1.一些你可選擇性使用的字型. 除此之外,你可以使用和下載你自己的,但是這部分我們將會在後續進行更多講解。

2.一個叫FlatUI.clr的檔案,包含了自定義調色盤裡的所有顏色。

3.一個PDF檔案,包含了一個向量圖。

現在,讓我們專注於必須建立的簡單demo工程。就像我說的,我們的工程裡不會包含特別難的東西,除此之外我們也不會設計一個複雜的介面。我們會一步一步的看清所有的步驟,從在Xcode裡建立開始吧。

在第一步裡,確保在工程模板裡選擇 Single View Application選項。接下來,選擇Swift 作為偏愛的語言然後給工程取個自己喜歡的名字。我自己命名的是TipsTricks。最後,儲存好後就準備做一些配置了吧。

現在到Xcode中,找到 Project Navigator 然後點選Main.storyboard。當 Interface Builder 出現時,從Object library 裡拖兩個UILabel 物件放置到canvas上 , 把他們的frame按如下設定:

  • 第一個 label: X = 16, Y = 70, Width = 568, Height = 40
  • 第二個 label: X = 16, Y = 140, Width = 568, Height = 40

之後,把它們兩個的文字設定為居中。視需要,你可以刪除預設文字,但並不是強制的。

接下來,從library裡獲取一個UIImageView 物件然後佈置到canvas上,設定它的frame為如下:

X = 250, Y = 440, Width = 100, Y = 100

現在,必須設定constraints。因為我們的subviews 非常簡單,我們可以允許Xcode隨意設定constraints。在View Controller 裡的所有檢視裡,選中選單裡的 Editor > Resolve Auto Layout Issues > Add Missing Constrains

t30_1_constraints_menu.png

最終,介面會展現為如下所示:

t30_2_interface_sample.png

現在,定位到 ViewController.swift檔案,在類檔案的開頭宣告如下 IBOutlet 屬性值:

再次返回到Interface Builder,把IBOutlets和適合的subviews關聯起來。

上面就是所有需要的東西。這個簡單工程現在任由我們支配啦,因此我們可以在以下的幾部分使用它。

t30_3_connect_iboutlet_properties.png

更換Themes

在Xcode裡最初看起來不那麼重要卻最有趣之一的東西就是改變預設的主題選項,意味著原始碼編輯器裡的顏色和字型。儘管聽起來不怎麼重要,實際上是很重要的。在很長的一段時間內使用相同的主題不僅僅會讓你感覺枯燥,甚至你會在工作中感覺不開心,但是最最重要的,就是如果字型大小設定的不合理,你將會很快經歷負面影響,例如眼疲勞和頭痛。因此,知道怎樣改變字型選項,或者知道使用新的主題是非常實用的,而且很新鮮。個人喜歡時不時的改變主題,而且我發現這樣在程式設計時就像如沐新生。

我們從頭開始。最初,Xcode安裝好時就設定的主題如下,也就是預設的一款:

t30_4_default_theme.png

注意,以上展示的程式碼僅僅是我上一個教程的demo project,regarding text to speech in iOS。這裡我只是用來展示作為例項,並無其他。

上面的主題已經很好了,沒有任何煩人的顏色。但是,在我看來,它有兩個問題:第一,如果你在光線昏暗的環境下工作,白色背景會令人疲勞,第二,字型大小太小了導致在大顯示器上很難看清。因此,我們看看能怎樣改變它們的一些設定吧。

首先,開啟Xcode的Preferences,通過開啟Xcode > Preferences…選單。在這裡有許多的關於Xcode各方面的選項和設定的標籤。我們現在關心的是 Fonts & Color標籤。如果點選它,下面是你將看到的(當然,你可能不會看到完全相同的東西,因為我有一些事先已經額外加好了的主題,但是我將馬上會為你講解它們):

t30_6_font_colors_prefs.png

在左邊嵌板裡你可以找到一個當前有的主題列表,意味著文字型別組合,背景顏色和字型集合成了一個包。如果你的主題列表比我的小請不要擔心。

在佔據了大部分螢幕面積的右邊嵌板裡展現了所有字型變數的種類(例如,變數,命令,評論,字串,關鍵字的文字)以及在當前選擇的主題上它們是怎樣展現的。在上面的截圖例子裡,你可以看到關鍵字是紫紅色的顏色,而評論是用淺綠色顏色展示的。在下方,你可以找到改變編輯器背景色的按鈕(非常重要!),以及選中文字和游標的顏色。

顯然,你可以改變你想要的主題的任何細節。除了底部的顏色,你需要做的就是選中一個文字變數然後改變它的字型或者它的顯示顏色。在點選的同時按住Command鍵,你可以選擇不止一個文字種類。

t30_7_select_text_types.png

通常,你不會希望只改變原始碼編輯器裡文字設定的一部分屬性。通常情況下,你需要一起改變所有的設定而且最簡便的方法就是點選任意的文字型別,然後按住鍵盤上的Command + A 組合鍵。當所有都選好時,你可以通過上圖中小T圖示來改變字型屬性。根據這個示例方法,你可以立即在預設主題裡使字型變的更大。

t30_8_font_change.png

你設定的任何新配置都會馬上應用到原始碼編輯器中,因此你不必做確認或者拒絕操作。但是,當你要改變編輯器的設定資訊時應該非常小心,因為很可能到最後你改變了很多設定甚至記不到怎樣可以回覆到從前狀態。在做你想要的改變之前,一個安全的方法就是首先儲存一個你將要改變的主題的備份,然後再進行操作。兩次點選操作就可以備份當前的主題。在左邊的嵌板裡,點選下部的+號圖示,然後在彈出選單裡選擇Duplicate ‘Theme_Name’ 選項(Theme_Name就是主題的名字)

t30_9_duplicate_theme.png

我建議你始終在實行改變時備份你的主題。那樣的話你就不用擔心改變了什麼東西而不能還原。

Xcode包含了不止一個主題,你可以一個個嘗試它們而且可以簡單地點選它們的名字來看它們的視覺效果。除開預設的主題,在Xcode裡另外兩個“流行”的主題是Midnight 和 Presentation。下面第一個展示的主題在昏暗燈光環境下很好,而預設主題的白色背景對眼睛真的有害:

t30_10_midnight_theme.png

The Presentation主題就像它的名字介紹的那樣在展示時是很好的,當你向一個並非坐在你正前方顯示器前的人展示程式碼時非常好,因為它有大的字型尺寸。

05.png

始終記住,如果你不喜歡一個主題的任何設定資訊,你都可以根據自己的喜好來改變它。

現在讓我來告訴你怎麼新增格外的主題到Xcode中。預設的主題都很不錯,如果你有時間每個都嘗試一下將會收穫許多。但是,你會發覺有人創造的主題的集合非常有趣。我不會介紹你去任何指定的網站下載主題,我只是指點你去網上搜尋“Xcode themes” 關鍵字。你得到的第一個答案就足夠了。

當你下載了一個主題包後,解壓縮它,接下來的安裝它的步驟是:

1. 第一,在Finder裡定位到接下來的地址: USER_ACCOUNT/Library/Developer/Xcode/UserData/FontAndColorThemes.

2. 複製-貼上下載下來的主題到該目錄。

t30_12_themes_folder.png

兩件事情需要注意:如果FontAndColorThemes 目錄不存在,可以通過一個小技巧來建立它;簡單的在Xcode裡 複製一個已存在的主題,這個目錄就會被建立了。然後就可以繼續以上步驟了。

第二,確保在你的系統裡隱藏檔案是可見的。要達到目的,既可以在網上搜尋解決方法,或者在Terminal裡輸入下面的兩行命令:

以上步驟都完成後,又返回Xcode, 你就可以在列表裡看到所有的新的主題了。通過一個一個的選擇它們來檢視它們是怎樣影響你的原始碼編輯器的。以下是一些例子:

06.png

07.png

告訴我,現在你們是不是都感覺更開心了?工作再也不像以前那樣無聊了!

新增自定義字型

當開發應用時,一個普遍的情形就是給應用新增自定義字型。使用自定義字型可以讓你的應用脫穎而出,而且還可以讓作品有更專業的感覺。假使以前你從未給應用新增過自定義字型,這事兒聽起來很疑惑且困難重重。但是,在這部分你會看到給你的工程新增一個自定義字型是件多麼容易的事。

首先我們需要的是一個可以使用的字型包(一個 .ttf包 或一個 .oft包),因此到Google Fonts 或者其它網站去下載一個。確保你將選擇的字型有不止一個型別。例如,我下載了Yanone_Kaffeesatz 字型(好吧,我其實可以找到一個有更簡單名字的包),它一共有4個型別。這些字型都可以在你下載的資源zip文件裡找到。

t30_16_font_files.png

現在來看看具體步驟。在Xcode裡,定位到先前建立的demo工程,在 Project Navigator裡建立一個新的group命名為Custom Fonts(或者你喜歡的名稱)。這個方法能讓你把東西儲存的更有條理。

t30_17_custom_fonts_group.png

現在你必須給工程新增字型了,有兩種方法可以達到目的:要麼開啟選單File > Add Files to “TipsTricks”… 然後選中字型文件,要麼簡單的在Finder裡選中所有的字型文件然後把它們拖到Xcode的 Custom Fonts group目錄下。我比較喜歡第二種方法因為它更簡單更快速。當接下來的視窗彈出時,確保一定選中Copy items if needed 和 TipsTricks目標,否則字型不會被加入到工程當中。

t30_18_add_fonts_options.png

字型包會在Project Navigator中列舉出來。現在你需要確保字型包已經包含在了app bundle裡而且你正確的新增了它們,因此定位到目標的Build Phases標籤,然後展開 Copy Bundle Resources區域。在這裡,你應該可以看到字型包的名字。

t30_19_fonts_in_bundle.png

一旦字型被成功的加入了工程,下一步就是讓工程知道它包含了額外的字型,而且可以像提供系統字型一樣也為我們提供它們。這個步驟發生在工程的 Info.plist 檔案裡。因此,開啟它,定位到 Editor > Add Item選單並且新增一個新的專案。

在新的目錄中選中Fonts provided by the application 鍵值,這個會把新的目錄變為一個列表。你必須新增字型檔名來作為這個列表的專案,正如下面展示的那樣。除非名字非常簡單,最好避免手動鍵盤輸入檔名字以防止你犯輸入錯誤。下面是我的新專案的.plis檔案。

t30_21_plist_font_entries.png

現在是時間弄清楚真正的字型名字是什麼了。這裡說的真正的名字,我指的是在程式碼裡要使用的字型名字。很顯然,我們不能使用字型文件的名字,因為他們只是…文件名字。我們需要確定真實的字型名字。我們將會寫一小段程式碼,之後就可以在debugger裡看到所有可用的字型名字。 開啟ViewController.swift檔案,定位到viewDidLoad 方法。在這個方法裡,新增下面的語句:

在上面的程式碼段裡,我們首先獲取到每個字型家族的名字並且在console上展示出來,並且是被減號(-)符號包圍著。之後,對於每一個字型家族我們獲取到可用的字型名稱,也展示出來。如果執行上面的程式碼,將會得到以下類似的結果,這裡你就會找到(記住)我們感興趣的真實的字型名稱。

t30_22_font_list.png

非常好!

現在我們知道了真實的字型名字了,現在就開始使用他們。在ViewController.swift檔案的viewDidLoad 方法裡,新增下面的程式碼段。現在可以刪除或者註釋掉先前的程式碼段了:

正如你所看到的,上面我使用的名字是跟前面的圖片裡展示的一串字型名稱所匹配的。當然,如果你正使用其他的字型,只要確保替換上面的字型名字然後設定成合適的資訊就可以了。

如果現在我們簡單地執行app就可以馬上檢視字型的顯示結果了。這裡就是我的模擬器上展示的使用了自定義字型的兩個標籤裡的文字:

t30_23_custom_fonts_sample.png

程式碼片段

Xcode功能裡我真的非常喜歡而且發現非常有用的一個(這一功能也組成了這個教程裡我最喜愛的部分),就是有可能幾乎不花時間的建立和重用程式碼段。使用這個功能可以節約大量的時間,因為可以顯著避免在並不重要的任務上消耗太多精力。回想一下,舉個例子,有多少次你已經寫下了最基本的必要的tableview delegate和datasource 方法,感覺自己在浪費不必要的時間來試圖記住這些方法的語法和定義。還有,你已經花費了多少時間在網上搜尋怎樣獲取APP檔案目錄的方法,每次都需要在工程中使用那個路徑。這些任務都是普遍要用到的,而且他們有標準的編寫技術。因此,為什麼不在Xcode裡儲存和管理一些可重用的程式碼,隨時隨地當需要的時候就使用它們,

Xcode預設儲存了許多預先定義好的可以在工程裡使用的程式碼片段。你所要做的,就是當你在一個原始檔裡時,開啟Utilities皮膚,然後展示 Code Snippets庫。

t30_24_code_snippets_library.png

在上面的列表裡可以找到一串非常棒的標準片段,比如類定義, if-else語句,迴圈 等等許多。說老實話,你將要使用的程式碼片段數量跟已經在類裡存在的程式碼數量比比要少很多。並不是所有的程式碼段都是Swift或者Objective-C。你也可以找到用C 和C++寫的程式碼段。只需記住一件事,就是使用每個程式碼段時它需要的合適的上下文環境。例如,一個類定義程式碼段不能被加到一個方法的body裡,或著一個for 迴圈不能被直接加到一個類的method 方法外的body裡。這個必須牢記,當然若你沒有記得,compiler也會提醒你的。

為了在程式碼裡使用一個預定義好的程式碼段,你只需要把它拖到文字編輯器上,就如下圖展示那樣:

t30_25_drag_drop_snippet.png

馬上,程式碼段就出現在你放置的位置那裡並且等待你補齊缺失的部分:

t30_26_snippet_sample.png

有趣的部分是當你建立自己的程式碼段時。我們來通過一個例子來看怎樣實現它,這個例子就是建立一個程式碼段來獲取檔案路徑。在ViewController.swift 檔案裡,建立一個下面展示的新方法:

在上面的方法里加入下面的一行程式碼來達到目的:

現在,選中那條語句(只是那條語句,不是整個方法),點選它然後把它拖到snippets庫裡。如下圖展示的一個彈出框就會出現:

t30_27_new_snippet_popup.png

注意:以防彈出視窗沒有自動展示,你可以在library裡搜尋My Code Snippet 程式碼片段,然後雙擊它。

在這裡你可以指定一些細節,而這也是它能做的所有。讓我們來看看這些細節。首先,在視窗的底部你會看到程式碼本身,如果你想的話也可以在這裡做一些改變。在上面的區域裡你可以指定下面的內容:

1.Title:這裡你可以給程式碼段設定一個合適的標題。在這個例子裡,我們命名它為Documents Directory.

2.Summary: 這裡是這個程式碼的簡要描述資訊。我們設定它的值為指定了到documents directory的路徑。

3.Platform: 選擇合適的platform,iOS或者MacOS。當然,如果你保留預設的值也沒什麼關係。

4.Language: 在這個選單裡你設定程式碼段的語言。預設情況下,當前使用的語言是被選中的。、

5.Completion Shortcut: 這是個非常有用的功能,因為你可以指定一個特定的關鍵值,每次你在編輯器裡輸入這個值,它就會被程式碼段給替換。這裡我們設定關鍵值為mydocdir。

6.Completion Scopes: 在這裡你實際上定義了程式碼段的適用範圍,代表它是否應該在一個類裡,方法裡等被替換。如果點選這個區域你可以看到所有可能的選項,而這裡預設的值是合適的(Function or Method)。使用加號和減號按鈕,你可以新增或者刪除適用範圍。

下面的圖片展示了關於新程式碼片段的上面所有的選項:

t30_28_doc_dir_snippet_setup.png

當你完成了,點選Done按鈕。這個程式碼段就儲存在了library裡了,在它上面有一個寫著User的標示,意味著它是一個自定義的程式碼段。

t30_29_custom_snippet_library.png

如果你雙擊它,彈出視窗又會展示出來。點選Edit按鈕你可以隨時修改上面的設定資訊。

現在到fakeMethod() 方法然後刪除掉它裡面的內容。接下來,把自定義的程式碼段拖進這個方法裡。程式碼就在那裡了!是不是很酷?還有更好的。把程式碼再刪掉,然後輸入mydocdir關鍵值,正如下面展示那樣:

t30_30_my_docdir_type.png

只要Xcode自動匹配並且推薦給你,點選Return 值。這個關鍵值馬上被程式碼段裡自定義的程式碼替換了。太棒了!想想用了這個你可以節約多少時間!你所需要的僅僅是為最普遍的任務建立一般的程式碼段,然後你將永遠不用再敲入任何程式碼了。

下面的將會給你展示自定義程式碼段在這兩種方式下使用的動畫:

snippet_usage-1024x131.gif

在進入下一節之前,我們再建立一個程式碼段;這個程式碼段是我最欣賞的,因為它真的讓我省去了許多不斷寫tableview相關方法時的麻煩。如果你想要,你可以刪除掉 fakeMethod() 方法,然後在ViewController類裡新增下面的方法定義:

接下來,選擇它們所有,然後把它們拖到程式碼段library裡。在彈出框裡,設定下面的選項:

t30_31_tableview_snippet_options.png

這裡的關鍵值(為快捷方式)設定為mytableview。

在編輯器裡刪除上面所有程式碼,然後只輸入關鍵值。方法又馬上回來了!是不是太酷了?

32.gif

當然,你可以在上面的集合中新增更多的方法,或者分開它們一個個成為獨立的程式碼段。當然,可隨意更改關鍵值也就是快捷鍵的名字。現在你知道這個方法了,趕快從中受益吧!

自定義調色盤

現在我們已經把純程式設計放在腦後,繼續專注於徹底的設計方面。在這個部分我會給你展示怎樣新增和建立新的調色盤,以便你在Interface Builder裡設計時有更多選擇可以使用。當然,我必須指出我們將新增的新調色盤不光對Xcode有效;它們對所有安裝在你係統裡的支援改變文字或背景色的所有應有都有效。但是你也不需擔心如果你不想保留它們的話怎麼辦。我也會告訴你怎樣刪除它們。

因此,我的目的是向你展示三種怎樣在你的數字生活中新增額外顏色的方法,在最先的兩個方法中中我們會下載一些東西,在第三種方法中我還會向你展示怎樣建立一個新的調色盤的方法。新調色盤裡的顏色存在於FlatUI.clr檔案中。我們開始吧。

第一個就是 Skala 調色盤,它對於所有人免費。有一個安裝器必須下載,你可以在 這裡 下載到。僅僅點選 Free Download 按鈕,等待直到下載完畢。

解壓下載的檔案,雙擊Skala Color Installer安裝包來初始化安裝程式。在彈出視窗中,正如下面展示的那樣點選Install按鈕。

安裝完成花不了1秒鐘。安裝完畢後,點選 Quit按鈕退出安裝程式。現在,你必須退出Xcode然後從新拉起,這樣才能看到新的調色盤。當Xcode重新開啟後,定位Main.storyboard檔案然後點選任何你想點的檢視或子檢視,只要他們有選項可以改變前景色或背景色。例如,點選View Controller 的主檢視,這時就會在Utilities皮膚上展示Attributes選擇項。

現在點選背景顏色好讓調色盤展示出來。在預設的調色盤旁邊就能找到Skala調色盤。

t30_35_skala_palette.png

如果你使用它,將會發現它是一個很強大和好用的調色盤。通過拉動中間的滾動條,可以通過改變hue值來在顏色中變換。通過滑動,另一個顏色選擇條出現在上方用來更精確的展示當前選中的顏色。把圓圈移動到上方視窗區域這樣你就可以瀏覽當前選擇顏色的所有可變的相似顏色。如果你不想使用顏色條或者圓圈來選擇一種顏色,而想使用一個顏色值,你也可以這麼做。僅僅需要從視窗中間區域的顏色展示型別列表當中選擇一個合適的型別(預設是選擇的HTML Hex RGB格式),然後在當中填入合適的顏色數值。

t30_36_skala_color_representations.png

如果注意點,你會發現你甚至可以直接設定一個UIColor的數值!

現在,你有了一個新的強大的調色盤; 當設計你的介面時使用它來得到更好的結果。

現在繼續,讓我們見識一個新的調色盤。這個即將看到的調色盤很簡單,但在我看來當你要跟hex colors打交道,或者你發現網站的顏色都是用的hex格式而你不想一直轉換它,那這個調色盤真的很有用。我們討論的這個調色盤名字就叫Hex Color Picker, 你可以在 這裡 找到它.

t30_37_hex_picker_website.png

正如先前做過的,使用下載按鈕來獲取這個顏色板。只要拿到壓縮檔案,解壓它然後到新建立的目錄。在那裡你能找到不同語言型別的Readme檔案,和一個檔名為HexColorPicker.colorPicker的檔案。選擇這個檔案然後複製它。然後,回到Finder,定位到下面的目錄:

UserName/Library/ColorPickers

UserName就是你的賬戶名。

當你開啟這個目錄後貼上剛才複製的檔案。通常,你會看到下面的兩個檔案:

t30_38_color_pickers_dir.png

現在,在進一步前,我告訴你如果你想移除Skala調色盤,或者當前調色盤(或者兩個),你可以通過在這個目錄下移除相對應的檔案(多個檔案)。而且,如果你看不到Library目錄,那你需要讓隱藏檔案可見,具體方法在這個教程的Changing Themes部分有描述。

再次退出然後重新開啟Xcode. 又回到Interface Builder, 然後點選View Controller的預設檢視。點選背景顏色來開啟調色盤視窗,在這裡你就可以看到新的顏色選擇器了!

t30_39_hex_color_picker.png

正如你所見的,這個選擇器的介面跟Skala的比要簡單的多。但是,正如我先前說的,如果你發現web顏色是Hex模式而你不想做轉換,這個顏色選擇器就是你想要的工具。僅僅複製或者填入一個顏色的hex值,這個顏色就會被應用了。不需要轉換為RGB或者其它任何形式!

在這個部分的最後一步我們將不會再下載其它任何的顏色選擇器。我會展示給你兩件事情:第一,怎樣得到一些扁平化UI顏色以及僅僅通過一個簡單的點選來複制他們的value值,第二,怎樣建立一個新的調色盤來使用這些顏色。

因此,正如我們之前所做的,先訪問另一個網站,這次是Flat UI Colors.

t30_40_flat_ui_website.png

首先要做的就是點選 Choose Format下拉框,然後選擇合適你的顏色展示標準:

t30_41_flatui_color_representations.png

例如,這裡我們選擇第一個Hex選擇。接下來,點選任何你想要的顏色(這裡你會看到一個友好的資訊提示你這個顏色已經被複制了),然後回到Xcode. 使用你有的兩個新調色盤的任何一個,然後貼上以Hex值形式展示的新的顏色。馬上這個顏色就會應用到所選擇的檢視上!當然,你可以複製顏色值然後貼上到任何其他的應用,不僅僅是Xcode。

提示:假如你使用的是Safari,當點選顏色時顏色值沒有被複制,這時你需要換一個瀏覽器。

現在,我將展示給你怎樣建立你自己的顏色合集,可以使用Flat UI Colors網站的所有顏色,或者使用任何其他你想使用的顏色。在Xcode裡(或者其他任何可以展示調色盤的應用裡,最好使用Xcode)確保調色盤視窗是可用的。點選Color Palettes 標籤,然後點選選中的調色盤名字旁邊的小齒輪圖示。在彈出的小選單裡,選擇New選項:

t30_42_create_palette.png

一個新的調色盤將會被建立,命名為Unnamed。為了重新命名它,再次使用小齒輪圖示,然後選擇Rename…選項。正如你所見的,當前選擇的顏色被自動的新增到了新的自定義的調色盤裡。如果你喜歡它,就保留它;如果不喜歡,就用上面的減號按鈕來刪除它。

下一步就是新增你想要的顏色到集合裡。使用任何你想要用的顏色板,或者從網站上覆制一個顏色。在寫這個教程的時候我所做的就是從 Flat UI Colors網站上覆制顏色,然後把它們複製到 Hex 選擇器(我們先前建立的)。假定你按照步驟這樣做,把新顏色加入到 Hex 選擇器裡,回到你的自定義調色盤。這時,僅僅點選加號(+)按鈕,這個選擇的顏色就會被加入到集合裡。這裡是我的自定義調色盤的例子:

t30_43_my_custom_palette.png

在這個教程裡提到的資源zip檔案,有一個名為FlatUI.clr的檔案。它包含了所有作為一個調色盤的 扁平化UI 顏色。為了使用它,你可以到UserName/Library/Colors 目錄下,把它貼上到這個目錄下(再次的,把UserName 替換為你電腦的使用者名稱)。當你這樣做了後,就可以在Xcode的調色盤裡找到它。

t30_44_flatui_palette.png

使用向量圖

為你的應用設計素材是開發程式的一部分。毫無疑問,圖片可以使應用更生動和吸引人。最高到iOS7,對於應用的任何一個圖片素材都需要在工程裡有兩份圖片:一份是普通尺寸 (@1x),另一份是雙倍尺寸(@2x),這樣才能讓同一個圖片在高清螢幕和非高清螢幕當中正確展示。隨著iPhone6 和6plus的到來,這要求變的更苛刻,一份原圖三倍尺寸(@3x)的備份圖片也被要求提供。對一個圖片製作3種尺寸,特別是對於應用來說要用到很多的圖片,這個工作會變得煩人且勞累,但是看起來沒有其它辦法,但是這樣嗎?

從Xcode6開始,使用向量圖來代替對圖片製作所有的尺寸成為可能,而且這個方法使製作素材變得更加輕鬆。如果你想了解什麼是向量圖,可訪問這個網站, 或者在網上搜尋。好訊息是當使用向量圖作為素材時,沒有必要對同一個圖片製作三個不同尺寸的副本。只需要一個檔案,而Xcode做了對這個圖片輸出合適尺寸的工作。

總的來說,使用向量圖替代普通圖片包括兩個步驟:

1.利用最喜歡的向量圖編輯工具把向量圖(Sketch, Photoshop, Illustrator, Inkscape, 或其他)輸出成一個PDF檔案。

2.在Xcode裡應用一些配置。

讓我們看看上面的步驟的詳細資訊。我不會討論怎樣把向量圖輸出成一個PDF檔案,因為這是一個應用相關的任務,而我不打算把重點放在那上面。如果你不知道怎樣做,簡單地在網上搜尋一下,你就會發現有趣的答案。在任何情況下,如果你想建立一個自己的向量圖,確保使它的尺寸為預設的值(@1x),而不要做任何按比例增大的 @2x 或 @3x 尺寸。

現在開始行動,對這個教程我將使用下面的圖片:

t30_45_vector_sample.png

你可以在最初下載的資原始檔集裡找到這個PDF檔案,然後把它作為一個示例。

現在,返回Xcode然後點選 Images.xcassets 

t30_46_xcassets_group.png

然後,從資料夾裡選擇這個PDF檔案,然後把它拖拉到Xcode裡。正如你所看到的,Xcode建立了一個新的圖片集然後把這個圖片放到了 @1 位置,而另外兩個位置任然為空:

t30_47_slots.png

通過點選圖片來選中這個圖片集,然後開啟Utilities 皮膚然後選中Attributes inspector。不同的選項將會在那裡展現出來,最重要的選項就是標題為Types的選項。點選下拉框選單,然後選中Vectors選項。這個圖片集將會變成這樣:

t30_48_change_image_set.png

把圖片拖拉到上面的空位置上,然後再點選它來選中它。現在在inspector裡再次檢查選項是否正確,保證它們跟下面圖片上的匹配一致:

t30_49_vector_settings_xcode.png

當然,你可以改變目標裝置,但是讓他保持Universal 可以讓你省去額外的配置步驟。

好了,這就是全部了。上面的描述由很少的需要做的配置步驟組成,現在我們來試試吧。到ViewController.swift檔案,然後新增下面的一行程式碼到viewDidLoad方法。


在不同螢幕(高清和 非高清)的真機上執行這個應用,或者用模擬器來執行。你將看到,圖片在不同的螢幕型別和尺寸上完美的展示出來了。太棒了!

管理你的原始碼

目前為止我們看到了提高生產力的不同方法,以及怎樣在Xcode裡工作的更加輕鬆,有趣和愉快。在這個部分我不會給你展示任何複雜的或新的東西,但是我將要把重點放在怎樣在工程裡管理原始碼和檔案的方法。在不同的檔案裡編輯程式碼,特別是在大型工程裡,是件麻煩的事情,反覆的從一個檔案跳到另一個檔案會變成很困擾的過程。毫無疑問,能夠輕鬆的找到你使用最多的檔案不僅可以幫助你保持頭腦清醒,還可以當你不停在Project Navigator裡找到想要的檔案時節約很多時間。

幸運的是,Xcode在這個方面有很好的設計,因為它提供了兩個主要方法來快速進入到多個的檔案。可能你已經在使用它們了,如果沒有,下面的內容肯定會在你將來寫程式碼時給你額外的收穫。

第一個就是使用標籤(tabs)。這個跟Safari 或其他瀏覽器裡的標籤很像。如果你在鍵盤裡按下Command + T 組合鍵,一個標籤頁就可以非常快速的在Xcode裡新增。預設情況下,當前編輯的檔案會在新建立的標籤頁裡展示,現在你僅僅要做的就是選中那個標籤頁,然後在Project Navigator裡選中你想被展示的檔案。很顯然,你可以建立幾個標籤頁然後在經常使用的檔案當中跳轉,但是也別過分增加標籤頁,因為這樣你將會在眾多標籤頁中找到你想使用的那個。下面的圖片展示了標籤頁的使用:

t30_50_use_of_tabs.png

從不同的標籤頁中跳轉不僅僅可以使用滑鼠也可以使用快捷鍵。你需要做的僅僅是按下Command + Shift + ] 組合鍵來從一個跳到下一個,按下Command + Shift + [來跳回到前一個。我這裡展示的組合鍵是Xcode裡預設的,當然,如果它們不適合你,你也可以改變它們然後設定自己的組合鍵。這個操作可以在Xcode Preferences 視窗中完成,在Key Bindings 標籤下。在搜尋框裡也可以找到它們,寫下“tab” 搜尋詞這樣就可以不用上下滑動來找到相應的行了。選中你想要的行為,然後設定一個新的組合鍵。只要保證這個新的鍵值跟其他的沒有衝突就可以。

t30_51_key_bindings.png

一般來講,標籤對於小螢幕的電腦來說非常有用(例如,手提電腦)。在這種情況下你就可以輕鬆找到感興趣的檔案,而它們的內容又覆蓋了大部分的螢幕區域(只要你想,也或者是全部區域)。但是,如果是更大的螢幕尺寸,那麼下面的方法就比標籤更適合了。

這個方法依賴於使用Assistant Editor. 通過它,你可以讓不止一個原始碼或者檔案在任何時間開啟。使用Xcode裡的工具欄上的中間的按鈕, assistant editor可以被開啟或關閉。

當然,assistant editor對你來說肯定不是新東西。相反,我猜它對你來說不僅僅是熟悉,因為它經常用來展示 Interface Builder 中的view controller的相對應的類檔案,然後用來建立不同的連結(IBOutlet 屬性 和 IBAction 方法)。然而,assistant editor也可以輕鬆地在普通編輯器旁邊展示原始碼,這樣你就可以讓兩個檔案的內容並排展示。除此之外,如果你關掉所有旁邊的皮膚 (Navigator 和 Utilities),螢幕寬度就會被分配給兩個編輯器。

302.png

好的,這非常棒,而且你已經知道它了,但是還可以更好,因為可以同時開啟多個assistant editors。你需要做的僅僅是點選預設assistant editor右上角的加號按鈕,一個新的assistant editor就會馬上在下方出現。一般來講,建立一個新的assistant editor僅僅需要點選當前assistant editor的加號按鈕,而刪除一個assistant editor,僅僅需要點選加號按鈕旁邊的X按鈕。

303.png

在一個assistant editor裡展示一個檔案可以使用兩種方法:第一個,就是使用每個編輯器上方的下拉框選項,如下圖展示的:

304.png

第二個,非常快速且好用的方法就是在鍵盤上按住Option (Alt)鍵,然後點選 Project Navigator裡的一個檔案。這個選擇檔案的內容就會馬上在 assistant editor中展示。但是,這裡有一個非常重要且有用的細節:如果你開啟了好多個assistant editor,那麼Option + 選中檔案的方法不會直接開啟選中的檔案,它會讓Xcode展示下圖中的視窗給你:

305.png

這個視窗中你可以選中讓哪個編輯器來展示你選中的檔案。如果你點選右下角未知的加號圖示,一個新的assistant editor會被建立而且展示你選擇的檔案內容。最後,如果你選中的檔案已經在一個編輯器中(或幾個)被展示了,一個星號圖示將會在相應的區域展示出來。

如果你想要定製我剛剛描述的過程,你可以使用Xcode偏好設定裡的Navigation標籤用來指定當你按住Option鍵+點選檔案的組合行為時Xcode將會做的反應,或者當你雙擊時的反應。預設情況下,當你雙擊一個檔案時,它將會在一個新的視窗中展示出來。

306.png

最後,我想說說關於摺疊和展開你的程式碼。當原始碼在檔案當中很多時,“隱藏”不經常編輯的方法的實現部分是很有用的,或者隱藏那些你已經開發完成的方法。這樣做,會使上下滑動程式碼變得簡單,最後方便的定位到你想要編輯的程式碼部分。摺疊一個方法,意味著隱藏它的內容,首先確保游標是在方法體裡面的然後使用Option + Command + 左箭頭  組合鍵或者使用Editor > Code Folding > Fold選單。展開它,按住Option + Command + 右箭頭  組合鍵,使用Editor > Code Folding > Unfold選單。下面展示了一個在Xcode中摺疊了的方法:

t30_58_folded_method.png

當然,你可以同時摺疊和展開一個類裡的所有方法。你所需要做的就是在上面描述的組合鍵裡再加一個Shift 鍵,或者使用 Editor > Code Folding > Fold Methods and Functions (or Unfold Methods and Functions)選單。相信我,在大型工程和當源程式檔案中有上千行程式碼時,摺疊一部分的程式碼會讓你的生活更加簡單,讓你的工作更有效率。

總結

通過超額使用Xcode以及不僅僅是隻使用它的預設設定,iOS和Mac OS程式設計可以變得更加有趣。 不管你是為你自己開發應用或者為其他人開發,不管你是不是屬於一個小組,在你每天花費數個小時的程式設計環境裡設定你自己的獨特style會讓你工作在更好的環境下,而且這個事實會讓你如獲新生。畢竟,定製化Xcode,像其他的電腦應用程式一樣,是一件很愉快的工作。除此之外,在這篇教程裡所有的指導方針,小貼士和訣竅,從最小的到最有用的,都可以幫助你在使用Xcode時的每天的生活。 毫無疑問肯定還有更多的東西是我在這裡沒展示出來的,等待你的發掘。最後,如果有任何討論的主題是讓你使用Xcode時有更好的經驗,請跟我們一起分享。定製愉快!

相關文章