啟動 Xamarin.iOS 應用程式的畫面

本文說明如何使用單一整合分鏡腳本,針對所有 iOS 裝置建立應用程式啟動畫面。

警告

iOS 設計工具在 Visual Studio 2019 16.8 版和 Visual Studio 2019 for Mac 8.8 版中已被取代,並在 Visual Studio 2019 2019 16.9 版和 Visual Studio for Mac 8.9 版中移除。 建置 iOS 使用者介面的建議方式是直接在執行 Xcode 的 Mac 上。 如需詳細資訊,請參閱 使用 Xcode 設計使用者介面

在 iOS 8 之前,建立 iOS 應用程式的啟動畫面需要開發人員針對應用程式可執行檔每個裝置尺寸和解析度提供影像資產。 不過,從 iOS 8 版本開始,可以使用單一 Unified Storyboard 來建立在所有情況下看起來正確的啟動畫面。

本簡短逐步解說說明如何使用新Project中預設提供的分鏡腳本,或使用手動新增至現有Project的 Storyboard 來建立啟動畫面。 然後,它會示範如何使用 iOS 設計工具將影像檢視和標籤新增至分鏡腳本、設定這些檢視的條件約束,以及確認分鏡腳本在各種裝置和方向上看起來正確無誤。

使用分鏡腳本管理啟動畫面

在 iOS 8 (及更新版本中) ,開發人員可以建立特殊的 Unified Storyboard 來提供啟動畫面,而不是使用一或多個靜態啟動影像。 在 iOS 設計工具中建立啟動分鏡腳本時,請使用 [大小類別] 和 [自動設定] 來定義不同顯示環境的不同版面配置。 開發人員可以使用 [大小類別] 和 [自動設定] 來建立單一啟動畫面,讓所有裝置和顯示環境看起來都不錯。

  1. 在Visual Studio for Mac中,選取 [檔案 > 新方案],然後選擇 [單一檢視應用程式],以建立新的專案:

    The New Project window, with Single View App selected

    • 根據預設,新的Project包含定義啟動畫面介面的LaunchScreen.storyboard檔案。
    • 若要改為將啟動畫面分鏡腳本新增至現有的專案,請以滑鼠右鍵按一下 Solution Pad 中的專案名稱,然後選擇 [ 新增 > 檔案...] ,然後選取 [啟動畫面]:

    The New File window, with iOS Launch Screen selected

    • 將檔案命名為 LaunchScreen 或您選擇的另一個名稱。
  2. 將Project設定為其啟動畫面使用適當的分鏡腳本:

    • 按兩下Solution Pad中的Info.plist檔案,將其開啟以供編輯。
    • 在 [ 啟動影像 ] 區段中,確定 [啟動畫面 ] 已設定為適當分鏡腳本的名稱:

    The Launch Screen selector in Info.plist

    • 根據預設,新的Project會設定為使用LaunchScreen.storyboard做為其啟動畫面。
  3. 將影像新增至 Assets.xcassets 資產目錄,使其可用於啟動畫面。 如需詳細資訊,請參閱顯示影像指南中的將影像新增至資產目錄影像集一節。

  4. Solution Pad中按兩下LaunchScreen.storyboard進行編輯。

  5. 選擇要預覽 iOS 設計工具中啟動畫面腳本的裝置和方向。 開啟底部工具列上的裝置選取面板,然後選取[iPhone 4S直向]。

    The device selection toolbar

    • 請注意,選取裝置和方向只會變更 iOS 設計工具預覽設計的方式。 不論此處所做的選擇為何,新增的條件約束都會套用到所有裝置和方向,除非已使用 [編輯特徵 ] 按鈕來指定其他選項。
  6. 設定 檢視 控制器主要檢視表的背景色彩。 按一下檢視控制器中間的 [檢視],然後使用 [屬性面板] 調整背景色彩,以選取 [檢視]:

    A single View with a purple background color

  7. 影像檢視 新增至啟動畫面,並設定其來源 影像

    • 影像檢視[工具箱] 面板 拖曳至 [檢視] 中央。
    • 選取[影像檢視] 之後,在Properties Pad[小工具] 區段中,將Image屬性設定為已新增至Assets.xcassets資產目錄的影像集。 視需要重新調整 影像檢視 的位置和大小:

    An Image View with its Image property set

  8. 影像檢視下方新增卷,並使用Properties Pad來設定其屬性:

    A Label with its text and color set

  9. 使用 條件約束工具列中的右手按鈕,切換至條件約束編輯模式:

    The Constraint Editing Mode button

  10. 將條件約束新增至 影像檢視,設定其高度和寬度,並將其水準和垂直置中:

    An Image View with layout constraints

  11. 將條件約束新增至 標籤,將它水準置中,提供高度和寬度,並將固定距離放在 影像檢視中:

    A Label with layout constraints

  12. 測試其他裝置和方向,以確認設計在所有案例中都如預期般。 如果需要針對特定裝置或方向進行調整,請使用 [ 編輯特徵 ] 按鈕來新增特定大小類別的條件約束:

    The Launch Screen rendered as an iPhone X using Landscape orientation

  13. 將變更儲存至分鏡腳本。 在模擬器或裝置上執行應用程式,且啟動畫面會在應用程式啟動時顯示。

注意

用來作為啟動畫面的分鏡腳本 只能 包含簡單、內建的 UI 元素,而且 無法 執行任何計算或衍生自自訂類別。

如需使用 Unified Storyboard 建立啟動畫面的詳細資訊,請參閱整合分鏡腳本指南的動態啟動畫面一節。

移轉至啟動畫面分鏡腳本

更新現有的應用程式以針對其啟動畫面使用分鏡腳本時,請以滑鼠右鍵按一下Project方案總管中的[名稱],然後選取 [新增][新增>檔案...]。選取[iOS>啟動畫面],然後按一下 [新增] 按鈕:

Select an iOS Launch Screen

接下來,按兩下 Info.plist方案總管中的檔案以開啟檔案以進行編輯。 在 [啟動畫面] 下,選取上面建立的新分鏡腳本檔案。

Select the new Storyboard file created above

若要使用新的 Storyboard 作為啟動畫面,請執行下列動作:

  1. 按兩下 Info.plist方案總管中的檔案,將其開啟以供編輯。

  2. 捲動至編輯器的 [ 通用啟動影像 ] 區段,開啟 [ 啟動畫面 ] 下拉式清單,然後選取上面建立的分鏡腳本名稱:

    Setting the launch screen to the storyboard