2014年12月24日 星期三

XCode Project Template

XCode Project Templae

在XCode中新增Project,可以選擇多種的iOS Application,本文對於這些類型分享;之後在選擇開發的專案類型會較有概念。

螢幕快照 2014-12-25 12.17.54.png
螢幕快照 2014-12-25 12.16.22.png

Mater-Detail Application

Mater-Detail Application提供了兩種檢視(View),一種是List View,包含了項目列表,而Detial View則是在點選了List View中的項目後會出現其中的內容;在iPhone上會以兩個畫面來呈現,而在iPad上則會以分割畫面來呈現。範例是Mail App。
  • iPhone
IMG_0106.PNG IMG_0105.PNG
  • iPad
IMG_2109.PNG

Page-Based Application

Page-Based Application提供了以頁面為基礎的檢視,開始可以看到所有頁面列表,點入後可以看到頁面內容,並且可以左右滑動看到其他頁面。範例是Weather App。





Single-View Application

Single-View Application是最單純的模式,只有單一畫面;範例是Calculator App。




Tabled Application

Tabled Application與Single View Application很接近,可視為多個Single View的組合,可在下方切換;範例是Clock App。





Game

若要開始遊戲程式,需要使用Game Application;範例是Angry Birds

IMG_0104.PNG

2014年12月9日 星期二

Xcode Workspace Window簡介

工欲善其事,必先利其器,本文介紹Xcode Workspace Window,我們主要的開發工作在其中進行,當我們開啟一個Xcode Project時會將其載入至Workspace Window中。

Toolbar



Toolbar提供了對於專案最常用的功能,簡介如下。
  • Run Button用來執行專案、Stop Button用來停止專案。
  • Scheme menu左方是用來管理專案Scheme,Scheme中可以設定專案如何被建置、執行、除錯…等選項,右方是可選取執行的模擬器(iPhone iPad...等)選項。
  • Activity viewer用來顯示建置、執行及其他關於專案的資訊。
  • Editor configuration buttons用來顯示編輯器選項。
    • XC_O_editor_buttons_standard_2x.png:顯示Standard Editor(標準編輯器)
    • XC_O_editor_buttons_assistant_2x.png:顯示Assistant Editor(輔助編輯器),當開啟時Standard Editor也會同時存在。
    • XC_O_editor_buttons_version_2x.png:顯示Version Editor(版本編輯器)
  • Workspace configuration buttons
    • XC_O_area_button_navigator_2x.png:顯示Navigator Area
    • XC_O_area_button_debug_2x.png:顯示Debug Area
    • XC_O_area_button_utilities_2x.png:顯示Utilities Area

Nagivation Area


使用Nagivation Area來存取專案不同面向的元素,例如專案檔案、除錯點、專案測試案例…等;Nagivation Area分為Nagivator bar用來選取專案不同面向、Content Area則是其中內容、Filter bar則是用來篩選Content Area中的內容。


  • Project navigator (../Art/XC_O_navigator_project_button_2x.png): 用來選取專案檔案,當選取檔案時,右方的Editor Area會出現對應的檔案內容;也可以新增、刪除及分類專案檔案。
  • Symbol navigator (../Art/XC_O_navigator_symbol_button_2x.png): 瀏覽專案中的Symbol定義,Symbol包括了Classes、Protocol、Function、Struct、Union、Enum、Type、Global Variable。
  • Search navigator (../Art/XC_O_navigator_find_button_2x.png): 用來搜尋及取代專案中的程式碼。
  • Issue navigator (../Art/XC_O_navigator_issue_button_2x.png): 當開啟或建置專案時,顯示警告或錯誤信息。
  • Test navigator (../Art/XC_O_navigator_test_button_2x.png): 建立、管理及執行測試案例,並且檢視他們的狀態。
  • Debug navigator (../Art/XC_O_navigator_debug_button_2x.png): 用來檢視執行緒的狀態,及使用的CPU、Memory、Disk、Network狀態。
  • Breakpoint navigator (../Art/XC_O_navigator_breakpoint_button_2x.png): 新增、刪除及檢視中斷點的狀況。
  • Log navigator (../Art/XC_O_navigator_report_button_2x.png): 檢視建置、執行、除錯及原始碼控制的歷程。

Debug Area


Debug Area用來檢視除錯相關資料,包括程式變數、Console輸出,並與Debugger互動。

  • Debug Bar:用來控制程式執行,可以暫停/執行程式或是逐步偵錯。
  • Content Panel:左方是Variables View,用來檢視程式變數;右方是Console,主要用來檢視除錯輸出資訊。
  • View Buttons:用來顯示或隱藏Variables View或Console。
debug_area-c_debugging_2x.png

Utilities Area


Utilities Area包含了Inspector Pane及Library Pane。
  • Inspector Pane主要用來檢視檔案及介面物件屬性,例如TextField(文字方塊)的內容、大小、位置都可在此調整
  • Library Pane可用來快速新增專案資源,最常用的是新增Storyboard上的介面物件,例如TextField、Label…等,另外也可新增專案檔案(Playground、Swift File)及程式碼片段(Code Snippet)。

XC_O_Util_area_2x.png

File Inspector及Quick Help一定會出現在Inspector Bar上,而其他的會依選取的Editor而定,最常見的是Interface Builder。
  • File inspector (../Art/XC_O_inspector_file_button_2x.png): 用來查看及管理檔案的資訊,例如檔案名稱、檔案路徑 …等。
  • Quick Help (../Art/XC_O_inspector_quick_help_button_2x.png):用來查看選取Symbol的說明。
  • Identity inspector (../Art/XC_O_inspector_identity_button_2x.png): 用來檢視及管理物件的資訊,包括類別名稱、執行時期屬性…等。
  • Attributes inspector (../Art/XC_O_inspector_attributes_button_2x.png): 用來設定選取物件的屬性,例如TextField包括文字的對齊、顏色…等。
  • Size inspector (../Art/XC_O_inspector_size_button_2x.png): 指定物件的初始位置及長寬。
  • Connections inspector (../Art/XC_O_inspector_connections_button_2x.png): 檢視物件的outlets及actions,建立或移除現有連結。
使用Library pane去存取可馬上用於專案的資源。
  • File templates (../Art/XC_O_library_file_templates_button_2x.png): 新增常用的檔案,直接拖到project navigator。
  • Code snippets (../Art/XC_O_library_code_templates_button_2x.png): 新增程式碼片段,直接拖到程式碼中即可。
  • Objects (../Art/XC_O_library_objects_button_2x.png):新增介面物件,直接拖到Interface Builder編輯視窗。
  • Media files (../Art/XC_O_library_media_button_2x.png): 圖形及聲音檔案,直接拖到Interface Builder編輯視窗。
在下方的text field可以搜尋選取library中的內容。

Reference