天天看點

高效使用你的Xcode

高效使用你的Xcode

本章内容包括:

開始

日常xcode任務

快捷鍵

xcode的行為

小測驗

加速

讓設計師高興

提升和超越

代碼片段

何去何從

1.開始

要看起來很酷,是以有一些必不可少的因素.下面列出來的是其中一部分:

(1)快速執行任務

(2)精準

(3)簡潔美觀的代碼

要表現地更酷,你可以試着不用滑鼠或者觸摸闆來完成教程中的每一個任務。學習之旅将從學習一些實用的xcode功能開始,然後通過修複一些在cardtilt中的一些bug來訓練。最後你将整理一下你的代碼,使整個界面看起來更整潔。在學習該教程時,要記住:它不是教你做一個app,而是教你比以前更有效地利用xcode來開發app。這篇教程建立在你對xcode有一個基本的了解的基礎上,然後着重于提高你的工作效率。每個人都有自己的程式設計習慣,本教程并非強制你形成某種風格。自始至終,本教程中你會看到某些指令的替代品,随着本教程的學習,請集中精力在提煉和形成你自己的程式設計風格,不要讓微小的錯誤影響你。

note: 如果你對于xcode不是很熟悉,建議先學習下面兩篇教程。

2.日常xcode任務

有一些在xcode中你經常使用的技巧,這一部分讓你更近距離的接觸這些技巧,然後講解一些潇灑應對它們的一些妙招。在這個過程中,你會在這些妙招的基礎上發現使用它們的新方法。這些技巧将成為你程式設計工具腰帶上的忍者之星。在xcode中打開之前下載下傳好的工程cardtilt,先不要急着去看代碼,先将你xcode的視窗和下圖來一一對應

高效使用你的Xcode

是不是發現你的視窗和圖中并不對應,先别着急。在下面介紹的快捷鍵部分,你将會學到如何輕松地顯示以及隐藏這些對應的視窗。

下面是組成視窗的每一個獨立區域的快速浏覽:

the toolbar(工具欄): 你選擇視圖,運作app,在不同布局界面切換的地方

the navigation area(導航區): 導航你整個工程,警告,報錯等的地方

the editing area(編輯區): 所有奇迹誕生的地方,包括它上方的jump bar

the utility area(工具區): 包含檢測器和一些庫

the debugging area(調試區): 包括調試視窗和變量檢測器

上面列出的所有視圖區域都是xcode的必要組成部分,它們也是在你開發過程中可能需要用到的,開發過程中通常不需要将他們一次性同時顯示出來,下面将介紹一些快捷鍵,将會教你快速顯示/隐藏這些視圖區域。

3.快捷鍵

在這一部分,你将首先學到怎麼掌握這些快捷鍵,得益于一些模式,最有效的快捷鍵非常容易記。

第一個需要知道的是xcode的各區域與修飾鍵的關系,下面是一個快速浏覽:

用來導航,控制導航區域

控制右邊的一些東西,比如assistant editor,utility editor

control: 編輯區域上的jump bar的一些互動

第二個需要知道的時數字鍵和标簽欄的關系,将數字鍵和上面提到的修飾鍵組合可以在标簽頁之間來回切換。通常數字鍵對應标簽頁的索引位置(從1開始),0通常用來顯示/隐藏區域。它還能再直覺一點嗎?

下面是最常用的組合鍵:

command 1~ 8: 跳轉到導航區的不同位置

command 0 :顯示/隐藏導航區

command alt 1~ 6:在不同檢測器之間跳轉

command alt 0: 顯示/關閉工具區.

control command alt 1~4: 在不同庫之間跳轉

control 1~ 6: 在jump bar的不同标簽頁的跳轉。

高效使用你的Xcode

最後也是最簡單的就是Enter鍵,當它和command組合使用時,可以是你在xcode中不同編輯器來回切換。

command + enter: 顯示标準單視窗編輯器

command alt enter:你可以猜下它的作用,它的功能是打開assistant editor

command alt shift enter: 打開版本控制編輯器

同樣重要的是顯示/隐藏調試區的快捷鍵是 command + shift + y ,要記住這個你可以通過這句話來記憶 “y is my code not working?” (譯者注:y諧音why)。如果你忘記了一些快捷鍵,你可以在xcode的菜單欄navigate一項中找到大部分快捷鍵。在即将完成這一部分的學習之時,你會驚奇的發現你僅僅隻是用了鍵盤就讓xcode發生這各種變換。

高效使用你的Xcode

4.xcode的行為

使用快捷鍵來管理xcode的界面卻是挺棒,有沒有想過更棒的事情?比如讓 xcode 自動轉換到你想看到的界面。接下來我們将學到更酷的東西。

幸運的是, xcode 提供的 behaviors(行為) 可以讓你輕易地實作上面的事情。它們是一組定義好的有指定事件觸發的動作,比如 build 一個工程。這裡的動作的範圍從改變界面到運作一個自定義腳本檔案。來看一個例子,快速修改下載下傳好的工程的 ctappdelegate.m 檔案,使其運作時會生成調試視窗輸出,用下面的方法替代  didfinishlaunchingwithoptions 方法

- (bool)application:(uiapplication *)application didfinishlaunchingwithoptions:(nsdictionary *)launchoptions 

    [[uiapplication sharedapplication] setstatusbarhidden:yes]; 

    // override point for customization after application launch. 

    nslog(@"show me some output!"); 

    return yes; 

運作程式,然後仔細觀察調試區,你會發現調試區随着 app 運作而出現,如下所示:

高效使用你的Xcode

來看看是什麼定義了上面的事件,在 xcode->behaviors->edit behaviors 打開 behavior 偏好設定,在左側你将看到所有事件集合,在右邊是該事件可以觸發的一些列動作。點選 running 欄下的 generates output,然後發現它被設定成用來顯示調試區。

高效使用你的Xcode

4.1 一些推薦的行為

note: 根據你的開發環境,我推薦的兩種不同的`generates output`事件觸發動作集。如果你有多個螢幕,試着使用第一種,如果是單顯示器,試着調到第二種方法。

4.1.1 方法一

如果你在兩個或者多個螢幕上開發,把調試區放到第二螢幕是不是更加友善,你可以向下面這樣設定

高效使用你的Xcode

現在,運作程式,然後你會看到一個分離的視窗出現,将它放到你的第二螢幕上,是不是效率高了不少?

4.1.2 方法二

如果是單屏,通過隐藏工具闆以及設定輸出視窗占據整個調試區使輸出視窗的有效區域最大化,設定如下

高效使用你的Xcode

然後運作程式,然後觀察 xcode ,看它是不是按照你的指令在執行。

高效使用你的Xcode

當程式暫停的時候,你可能也想改變 xcode 的行為,到 running 欄下的 pauses 事件,然後改變其設定,向下面這樣:

高效使用你的Xcode

現在無論何時你設定了斷點,你将會得到一個新的名為fix的展示變量和輸出視窗的标簽頁,然後自動導航到第一個issue。

你将要建立的最後一個行為是我個人最喜歡的一個,它是一個自定義行為—設定一個快捷鍵。當被觸發的時候,它使 xcode 轉變到我指定的為下一次開發而優化的布局,名為 dev mode。我們可以通過點選behavior偏好設定的左下角的“+”,然後将其取名為dev mode,輕按兩下 dev mode 右邊的符号然後輸入 command . 來定義一個快捷鍵。

高效使用你的Xcode

接下來為該事件設定相應動作:

高效使用你的Xcode

現在,隻要你按下command .就會觸發上面設定的動作,即出現一個相同的整潔的開發界面。

下面将介紹 xcode tab name,和行為配合起來使用堪稱完美。

note: xcode tab names(xcode标簽名):可以通過輕按兩下标簽頁的标題來修改标簽頁的名稱,對于它本身來說是一個無用的功能,但是當它和行為結合起來使用時就變得非常強大了。在上面的第二個例子中,當改變pauses行為時,命名了一個叫fix的标簽頁,這就意味着當行為被觸發時,xcode将會使用fix标簽頁(如果存在),如果不存在,它會建立一個名為fix的标簽頁。另一個例子就是多屏starts行為,如果一個名為debug的标簽頁在之前運作時被打開,它将會複用這個标簽頁而不是重新建立一個。用這種方式,你可以建立非常有趣的行為。

到現在為止,我們可以花點時間來回顧一下剛才的行為,不要着急,本教程會等着你。

5.小測驗

在接下來的部分,你将在測驗中用到上面所學到的技巧,然後在cardtilt項目中學到一些新的技巧。

運作cardtilt項目中,你看到如下畫面

高效使用你的Xcode

它不是你期待看到的畫面?是時候消滅這些bug了!

5.1鎖定bug

app似乎在加載資料時出現了問題,你的任務就是消滅它們。打開 ctmainviewcontroller.m 檔案然後進入開發模式 dev mode,快捷鍵為之前設定的 command .。注意 viewdidload 方法中的前幾行

self.datasource = [[cttableviewdatasource alloc] init]; 

self.view.datasource = self.datasource; 

self.view.delegate = self; 

看起來 cttableviewdatasource 實作了 uitableviewdatasource 協定,為 tableview 提供了資料。是時候展現你 xcode 的技術了,按住 command 鍵,同時點選 cttableviewdatasource 在編輯器中打開cttableviewdatasource.h。cttableviewdatasource.m 應該已經在你的 assistant editor,如果不是這樣的話,打開頂部的 jump bar,像下圖一一樣切換到 assistant editor 的 counterparts 模式。

高效使用你的Xcode

翻看代碼,你會發現數組 members 裝載資料,loaddata 方法從 bundle 中加載資料至數組 members。在assistant editor 右邊任意位置滑鼠右擊,選擇 open in primary editor,就會在 primary editor 中打開 cttableviewdatasource.m 檔案,下面動畫是該步驟的展示:

高效使用你的Xcode

note: 為了看起來更酷炫,你可以在不用滑鼠的情況下完成上面的所有事情,步驟如下:

1.同時按住command + shift + o,在輸入框中輸入ctmainviewcontroller.m,然後回車來打開該檔案。

2.command + . 進入enter dev模式 。

3.将滑鼠放在 cttableviewdatasource 上,然後按住command + control + j,跳轉至cttableviewdatasource定義處。

4.按住 command + j, -> 然後按下回車,來轉換 assistant editor 的焦點

5.按住 ctrl +4 來下拉 jump bar,然後使用方向鍵和Enter鍵來選擇 counterparts

6.按住 command + alt,在 primary editor 中打開 cttableviewdatasource.m 檔案

7.上面的結果步驟看起來不呢麼高效,但是它讓你看起來很酷。

5.2 修複bug

在 self.members = json[@"team"]; 打上斷點來确定資料是否都被裝載到數組 members 當中,然後運作程式。

如果對于基本的設定斷點和調試不太熟悉,可以先看看這篇教程。

就像你之前在 xcode 行為看到的一樣,generates output 将首先被觸發,緊接着pause行為被觸發。因為你之前在 pause 有過自定義設定,是以 xcode 會建立一個名為 fix 的标簽頁,它專為調試而設。

将目光切換到變量檢測器variable inspector,你會發現數組members是nil,在loaddata方法數組members被填充,代碼如下

nsdictionary *json = [nsjsonserialization jsonobjectwithdata:data options:kniloptions error:&error]; 

self.members = json[@"team"]; 

在變量檢測器中檢視json,看其是否被正确加載,你會發現資料中的第一個值是 @"rwteam" 而不是 @"team" ,當加載數組 members 時,這個值是錯的,找到了一個bug。

讓我們按下面步驟來修複這個bug:

(1)使用 command + .來進入開發模式

(2)按住 command + option + j跳至filter bar然後輸入 teammember

(3)然後按住alt同時點選 teammembers.json 在 assistant editor 來打開它

(4)最後,使用 "team" 來替換 "rwteam"

下圖是上面四步的一個動畫

高效使用你的Xcode

現在移除斷點,然後運作程式,它看起來應該像這個樣子。

高效使用你的Xcode

是不是看起來比之前要好一點了,但是還是有一些bug,比如ray和brian的标題描述欄不見了。接下來我們通過修複這些bug來學到更多酷炫的技巧。

6.加速

你應該已經知道 uitableviewcells 在 tableview:cellforrowatindexpath: 方法中被加載,是以用 open quickly 來導航到該方法,然後按照下面步驟:

(1)按下command + shift + o來呼出 open quickly

(2)輸入cellforrow

(3)按下回車來打開它

按住 command 然後點選 setupwithdictionary 來跳轉至其定義處,然後你會發現一些用來加載描述的代碼

nsstring *abouttext = dictionary[@"about"]; // should this be aboot? 

 self.aboutlabel.text = [abouttext stringbyreplacingoccurrencesofstring:@"\\n" withstring:@"\n"]; 

它使用 dictionary[@"about"] 中的資料來加載 label。

接下來呼出 open quickly,然後打開 teammembers.json,使用 alt + command 在 assistant editor 中打開。檢查 about 的值,然後你會發現有人将 about 拼寫成了 aboot,我們可以使用全局的find and replace 來修複這個bug。當然你可以在檔案中直接做這件事,但是使用 find navigate 看起來更酷。打開 find navigate,然後通過頂部的 jump bar 切換到替換(replace)模式,輸入aboot,然後回車。

高效使用你的Xcode

在 teammembers.json 檔案之外還有一個地方使用到了aboot,别擔心,選中 ctcardcell.m 的搜尋結果,然後按下 delete,将滑鼠移至 replace filed,然後輸入about,點選 replace all,一切完成。整個過程看起來是這個樣子的:

高效使用你的Xcode

note: 進階技巧:使用 command + shift + option + f 來打開 find navigator 的替換模式,如果你嫌麻煩,也可以使用 command + shift + f 來打開 find navigator 的查找模式,如果你還嫌麻煩,使用 command + 3 來打開 find navigator,然後開啟查找或者替換模式,選擇一種最适合自己的方式就好。

運作程式,看起來是這樣的

高效使用你的Xcode

7.讓設計師高興

今天的調試任務到此就結束了,給自己一點掌聲,然後開始運作程式。在你将它展示給别人之前,需要先确定app的界面是完美的。尤其當這個人是非常認真的設計師的時候,這一部分教你一些關于interface builder的技巧,讓你變得更酷。

打開 mainstoryboard.storyboard,通常你想在打開 interface builder 的同時打開 standard editor 和工具區(utilities area),是以我們可以自定義一個新的叫做 ib mode 的行為,當你在看下面的自定義發放之前,試着自己建立一個然後自定義,不必要完全一緻。

高效使用你的Xcode

我将這個模式的快捷鍵設定為command option .,現在你将看到一個舒服的 interface builder 界面,看看 ctcardcell。首先你想讓 mainview 處于 contentview 的正中央。有兩種技巧可以完成這個需求:

按住control + shift,然後在 mainview 的任意位置滑鼠左擊,你将看到一個彈出視圖讓你選擇在光标下的所有視圖,如下圖所示:

高效使用你的Xcode

這個方法讓你輕松的就能選中 mainview,盡管 cardbg 遮住了它。選中 mainview 之後,按住alt然後在 contentview 的邊緣移動滑鼠,來看它們之間的間隔。下面是這個過程的一個動畫:

高效使用你的Xcode

原來對其并不是那麼優雅,看起來也不是很酷。為了解決這個,我們可以調整視圖的大小。點選editor->canvas->live autoresizing來使子視圖在父視圖尺寸改變的時候強制調整大小。按住alt同時拖拽mainview的一角,直到每邊的距離為15.

note: 拖拽是像素點級别的技巧,你可以嘗試不同的調整的處理方法,就像下面動畫一樣。在很多情況下,更傾向于使用`size inspector`來調整複雜的布局,而非用滑鼠來拖拽。

高效使用你的Xcode

試着使用相同的技巧來對齊titlelabel、locationlabel、aboutlabel,讓他們豎直方向上的間隔為0。按住alt來檢視滑鼠移動時,三個label之間的間隔。有發現三個label的左邊緣并沒有對齊嗎?設計師肯定想讓namelabel和weblabel靠左對齊。使用vertical guide可以昂我們輕松完成這個任務。選中cardbg,然後點選菜單欄的editor->add vertical guide,這個步驟的快捷鍵是command |,horizontal guide的快捷鍵是command -,這兩個快捷鍵是最可視化的。當視圖上有了vertical guide之後,将其從cardbg的左邊緣拖10個點。然後所有視圖将會緊貼vertical guide,對的非常整齊,繼續為其他的label進行對其操作。

note: xcode并不那麼完美,有時候可能在你建立guideline的時候出現一些問題,可以打開其他檔案然後再切回到storyboard頁面,然後storyboard會被重新加載,這個時候問題一般會自動解決。

讓你更酷的建議:所有的視圖能緊貼在guideline上才是最好的,guideline沒有必要在同一個層級。

下圖是上面對齊過程的一個回放:

高效使用你的Xcode

我敢打賭你現在迫不及待的想把你做的展示給你的設計師看!

8.提升和超越

上面的步驟讓你得到了一個實用的app,同時讓你的設計師也感到很滿意,那麼接下來我們要做的就是讓代碼變得更為簡潔。

快速打開(command + shift + o)ctcardcell.m,記得進入dev mode(command .),你應該不會忘了這些快捷鍵吧。

看下 ctcardcell.m 頂部淩亂的屬性清單

@property (weak, nonatomic) iboutlet uilabel *locationlabel; 

@property (strong, nonatomic) nsstring *website; 

@property (weak, nonatomic) iboutlet uibutton *fbbutton; 

@property (weak, nonatomic) iboutlet uiimageview *fbimage; 

@property (strong, nonatomic) nsstring *twitter; 

@property (weak, nonatomic) iboutlet uibutton *twbutton; 

@property (weak, nonatomic) iboutlet uilabel *weblabel; 

@property (weak, nonatomic) iboutlet uiimageview *profilephoto; 

@property (strong, nonatomic) nsstring *facebook; 

@property (weak, nonatomic) iboutlet uiimageview *twimage; 

@property (weak, nonatomic) iboutlet uilabel *aboutlabel; 

@property (weak, nonatomic) iboutlet uibutton *webbutton; 

@property (weak, nonatomic) iboutlet uilabel *namelabel; 

@property (weak, nonatomic) iboutlet uilabel *titlelabel; 

在這部分,你将建立一個自定義服務以執行腳本指令來實作屬性的快速整齊地排列。

note: 如果對于這些腳本指令還不熟悉,它們是相當好了解的。排序(sort)是按照字母順序來的,`uniq`是會删除所有重複的行數。`uniq`在這裡可能派不上用場,但是用它來管理`#import`,那是極好的。

mac os x允許你建立整個作業系統全局通用的服務,你将用它來建立一個用在xcode中的腳本服務,按如下步驟來設定:

(1)使用spotlight來搜尋automator,并打開它

(2)然後點選file->new,并選擇服務(service)一項

(3)在actions篩選欄,輸入shell,然後輕按兩下運作shell腳本run shell script

(4)在新添加的服務的菜單欄上,檢查output replaces selected text

(5)将腳本内容切換至sort | uniq

(6)同時按下command s,将服務儲存為 sort & uniq

最終的視窗看起來是這個樣子:

高效使用你的Xcode

切回到xcode,然後選中 ctcardcell.m 中的那片混亂的屬性區域,右擊,選擇 services -> sort & uniq,然後觀察執行之後代碼是多麼的整潔。你可以看下面的一個示意圖:

高效使用你的Xcode

9.代碼片段

進行到這裡,意味着那些基本的可以讓你看起來酷酷的調試任務已經告一段落了,接下來我希望你覺得更酷。你可定想學更多技巧,幸運的是,這是最後分享的一個技巧。

你之前可能已經使用過xcode的代碼片段(code snippets)功能了,一些常見的是for in片段和dispatch_after片段。在這一部分,你将學會如何建立自定義的代碼片段,當你重用這些代碼片段時,看起來非常棒。你将建立的是擷取單例的代碼片段。

如果你不熟悉單例模式,可以看看這個教程。

下面可能是你使用單例模式的常用代碼模闆

+ (instancetype)sharedobject { 

  static id _sharedinstance = nil; 

  static dispatch_once_t oncepredicate; 

  dispatch_once(&oncepredicate, ^{ 

    _sharedinstance = [[self alloc] init]; 

  }); 

  return _sharedinstance; 

非常酷的是這份片段也包含了dispatch_oncep片段。

在工程cardtilt建立一個名為繼承自nsobject名為singletonobject的新類,你不需要為它做任何事,除了作為拖拽代碼片段的一個地方。

按下面步驟:

(1)在 @implementation 的下一行粘貼上面的代碼到 singletonobject.m

(2)用快捷鍵command option control 2來打開代碼片段庫,在代碼片段庫中你會看到預設的包含在xcode中的代碼片段庫。

(3)選中整個+sharedobject方法,将其拖拽到代碼片段庫中。

看起來是這樣的:

高效使用你的Xcode

新建立的代碼片段将會在代碼片段庫的最底部,你可以将其拖拽到任何你想拖拽的檔案當中去,讓我們來嘗試一下。

輕按兩下剛剛建立的代碼片段,然後點選edit.彈出的視圖非常使用,實際上它們都很重要,是以做個簡短的解釋。

(1)title and summary:代碼片段庫中該代碼片段的名字和簡述

(2)platform and language:代碼片段比對的平台和程式設計語言

(3)completion shortcut:在xcode中輸入的快捷鍵

(4)completion scopes:代碼片段作用的範圍,這對于保持代碼片段庫整潔來說十極好的。

向下面一樣填充裡面的屬性:

高效使用你的Xcode

9.1令牌

當你加入令牌時,代碼片段将會變得非常強大,因為它允許你在片段中标記代碼,而不需要寫死。通過使用tab鍵使得他們非常容易修改,就像自動補全一樣。

在片段中僅僅隻要輸入 <#tokenname#> 就可以添加一個令牌,建立一個令牌使用 shared<#objectname#>替代sharedobject ,看起來像這樣:

高效使用你的Xcode

點選 done 來儲存該片段,然後來用用它。

在 singletonobject.m 檔案中輸入 singleton accessor,然後當它出現的時候使用自動補全

高效使用你的Xcode

對于經常使用的代碼來說,建立一個代碼片段是非常實用的。

10.何去何從

總結一下在這個教程中你所學到的東西:

(1)使用快捷鍵來改變xcode的布局

(2)使用自定義的行為來改變xcode的布局

(3)使用assistant editor

(4)在xcode中快速打開某檔案

(5)在find navigator删除搜尋到的結果

(6)在interface builder使用快捷鍵和guideline來對齊視圖

(7)建立一個在xcode中使用的服務

(8)建立并使用自定義的代碼片段

(9)最重要的是你知道怎麼去成為一名xcode大師

上面列出來的内容都很簡單對吧?在你的朋友面前展示這些炫酷的技巧,你的朋友一定會驚呆也會了解你的興奮。還有很多方法可以提高你的xcode的效率,比如:

使用doxygen風格的注釋

使用xcode插件