1. 程式人生 > >Swift官方入門教程系列--一--使用Swift建立UI【翻譯版,原始碼】

Swift官方入門教程系列--一--使用Swift建立UI【翻譯版,原始碼】

本課程讓您熟悉Xcode,這是您用來編寫應用程式的工具。您將熟悉Xcode中專案的結構,並學習如何在基本專案元件之間導航和使用。在課程中,您將開始製作一個簡單的FoodTracker應用程式,並檢視它在模擬器。完成後,您的應用程式將如下所示:

image:../Art/BBUI_sim_finalUI_2x.png

學習目標

在課程結束時,您將能夠:

  • 在Xcode中建立專案

  • 標識使用Xcode專案模板建立的金鑰檔案的目的

  • 開啟並在專案中的檔案之間切換

  • 在iOS模擬器中執行應用程式

  • 在故事板中新增,移動和調整UI元素

  • 使用“屬性”檢查器編輯故事板中的UI元素的屬性

  • 使用大綱檢視檢視和重新排列UI元素

  • 使用Assistant編輯器的預覽模式預覽故事板UI

  • 使用自動佈局來佈置自動適應使用者裝置尺寸的使用者介面

  • 原始碼

建立新專案

Xcode包括幾個內建的應用程式模板,用於開發常見型別的iOS應用程式,例如遊戲,基於標籤的導航應用程式和基於表檢視的應用程式。大多數這些模板具有預配置的介面和原始碼檔案。在本課程中,您將從最基本的模板開始:Single View Application。

建立新專案

  1. 從開啟的Xcode /Applications目錄。

    如果這是您第一次啟動Xcode,它可能會要求您同意使用者協議並下載其他元件。

    按照提示通過這些螢幕,直到Xcode完全設定並準備啟動。

    一旦Xcode啟動,就會出現歡迎視窗。

    image:../Art/BBUI_welcomewindow_2x.png

    如果出現專案視窗而不是歡迎視窗,不要擔心,你可能先前在Xcode中建立或打開了一個專案。只需使用下一步中的選單項建立專案。

  2. 在歡迎視窗中,單擊“建立新的Xcode專案”(或選擇檔案>新建>專案)。

    Xcode開啟一個新視窗,並顯示一個對話方塊,您可以在其中選擇模板。

  3. 選擇對話方塊頂部的iOS。

  4. 在應用程式部分中,選擇單一檢視應用程式,然後單擊下一步。

    image:../Art/BBUI_singleviewapp_template_2x.png
  5. 在顯示的對話方塊中,使用以下值為您的應用命名,併為您的專案選擇其他選項:

    • 產品名稱: 

      FoodTracker

      Xcode使用您輸入的產品名稱來命名您的專案和應用程式。

    • 團隊:如果未自動填寫,請將團隊設定為無。

    • 組織名稱:組織的名稱或您自己的名稱。您可以將此留空。

    • 組織識別符號:您的組織識別符號(如果有)。如果你不這樣做,使用com.example

    • 捆綁識別符號:此值根據您的產品名稱和組織識別符號自動生成。

    • 語言:Swift

    • 裝置:通用

      通用應用程式是在iPhone和iPad上執行的應用程式。

    • 使用核心資料:未選擇。

    • 包括單元測試:選擇。

    • 包含UI測試:未選擇。

    image:../Art/BBUI_newproject_2x.png
  6. 點選下一步。

  7. 在出現的對話方塊中,選擇要儲存專案的位置,然後單擊建立。

    Xcode中打開了新的專案工作區視窗

    image:../Art/BBUI_workspacewindow_2x.png

在工作空間視窗中,您可能會看到一個錯誤圖示,並顯示一條訊息:“Signing for FoodTracker需要一個開發團隊”。此警告表示您尚未設定Xcode for iOS開發,但不要擔心,你可以完成這些課程,而不這樣做。你不需要一個開發團隊在模擬器中執行應用程式。

探索進一步

在iOS裝置上執行應用程式之前,您需要設定一個有效的小組,以便可以對應用程式進行簽名。如果您是個人或屬於Apple開發人員計劃成員的組織的一部分,您可以在此處選擇該小組。否則,您的Apple ID會分配給可用於在裝置上啟動應用的個人小組。但是,您需要先加入Apple開發人員計劃,然後才能將您的應用提交到App Store。

有關詳細資訊,請選擇幫助> Xcode幫助,然後搜尋“簽名工作流程”。

熟悉Xcode

Xcode包括建立應用程式所需的一切。它組織了建立應用程式所需的所有檔案和資源。它為您的程式碼和使用者介面提供編輯器。此外,Xcode允許您構建,執行和除錯您的應用程式 - 為iOS裝置提供模擬器和一個強大的整合偵錯程式。

花一點時間熟悉Xcode工作區的主要部分。在整個課程中,您將使用下面視窗中標識的區域。不要被所有的碎片淹沒; 每個區域在需要使用它時會更詳細地描述。

image:../Art/BBUI_workspacewindow_callouts_2x.png

執行iOS模擬器

因為您的專案基於Xcode模板,所以基本的應用程式環境會自動為您設定。即使您沒有編寫任何程式碼,也可以構建和執行單一檢視應用程式模板,而無需任何其他配置。

要構建並執行你的應用程式中,使用的iOS 模擬器是隨機配備在Xcode應用程式。模擬器讓您瞭解應用程式在裝置上執行時的外觀和行為。

模擬器可以模擬許多不同型別的硬體 - 所有的螢幕尺寸和解析度的iPad和iPhone - 所以你可以模擬你的應用程式在你正在開發的每個裝置。在本課中,使用iPhone 7選項。

在模擬器中執行您的應用程式

  1. 在Xcode工具欄的Scheme彈出選單中,選擇iPhone 7。

    “方案”彈出式選單允許您選擇要執行應用程式的模擬器或裝置。確保您選擇iPhone 7模擬器,而不是iOS裝置。

    image:../Art/BBUI_schememenu_2x.png
  2. 單擊位於Xcode工具欄左上角的執行按鈕。

    image:../Art/BBUI_toolbar_2x.png

    或者,選擇產品>執行(或按Command-R)。

    如果您是第一次執行應用程式,Xcode會詢問您是否要在Mac上啟用開發人員模式。開發人員模式允許Xcode訪問某些除錯功能,而不需要每次都輸入密碼。決定是否要啟用開發人員模式並按照提示操作。

    image:../Art/BBUI_developermode_2x.png

    如果您選擇不啟用開發人員模式,稍後可能會要求您輸入密碼。這些課程假設開發人員模式已啟用。

  3. 構建過程完成後,觀察Xcode工具欄。

    Xcode中顯示關於構建過程的資訊活動瀏覽器,這是在工具欄的中間。

Xcode完成專案構建後,模擬器自動啟動。可能需要一段時間才能第一次啟動。

模擬器在你指定的iPhone模式下開啟,然後啟動你的應用程式。最初,模擬器顯示您的應用程式的啟動螢幕,然後它轉換到您的應用程式的主介面。在未修改的單一檢視應用程式模板中,啟動螢幕和主介面是相同的。

image:../Art/BBUI_sim_blank_2x.png

現在,單一檢視應用程式模板做的不多,它只是顯示一個白色螢幕。其他模板具有更復雜的行為。在擴充套件模板的用途以製作自己的應用之前,瞭解模板的用法很重要。在模擬器中執行你的應用程式沒有任何修改是開始發展這種理解的好方法。

通過選擇Simulator> Quit Simulator(或按Command-Q)退出模擬器。

檢視原始碼

單一檢視應用程式模板包含幾個設定應用程式環境的原始碼檔案。首先,來看看該AppDelegate.swift檔案。

檢視AppDelegate.swift原始檔

  1. 確保專案導航器在導航器區域中開啟。

    專案導航顯示專案中的所有檔案。如果專案導航器未開啟,請單擊導航器選擇器欄中最左側的按鈕。(或者,選擇“檢視”>“導航器”>“顯示專案導航器”。)

    image:../Art/BBUI_projectnavigator_2x.png
  2. 如有必要,通過單擊專案導航器中的FoodTracker資料夾旁邊的公開三角形來開啟它。

  3. 選擇AppDelegate.swift

    Xcode在視窗的主編輯器區域中開啟原始檔。

    image:../Art/BBUI_appdelegate_file_2x.png

    或者,雙擊該AppDelegate.swift檔案在一個單獨的視窗中開啟它。

應用程式委託原始檔

AppDelegate.swift原始檔有兩個主要功能:

  • 它定義您的AppDelegate類。應用程式的委託建立您的應用內容繪製,並提供了一個場所內的應用程式的狀態過渡響應視窗。

  • 它建立入口點到你的應用程式和執行迴圈,提供輸入事件到您的應用程式。這項工作是由完成的UIApplicationMain屬性(@UIApplicationMain),它向檔案的頂部出現。

    使用UIApplicationMain屬性相當於呼叫UIApplicationMain函式並傳遞你的AppDelegate類的名稱作為委託類的名稱。作為響應,系統建立一個應用程式物件應用程式物件負責管理應用程式的生命週期。該系統還為您建立的例項AppDelegate類,並將其分配給應用程式物件。最後,系統啟動您的應用程式。

AppDelegate當你建立一個新的專案自動建立的類。