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

本文說明如何使用單一整合分鏡腳本，在任何解析度和方向上，為所有 iOS 裝置建立應用程式啟動畫面。

警告

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

在 iOS 8 之前，為 iOS 應用程式建立啟動畫面時，開發人員必須為每個可以執行應用程式的各種裝置尺寸和解析度提供影像資產。 不過，自 iOS 8 發行以來，可以使用單一整合分鏡腳本來建立在所有情況下看起來正確的啟動畫面。

本簡短逐步解說說明如何建立啟動畫面，其中包含新項目中預設提供的分鏡腳本，或是手動新增至現有專案的分鏡腳本。 接著會示範如何使用 iOS 設計工具，將影像檢視和標籤新增至分鏡腳本、設定這些檢視的條件約束，以及確認分鏡腳本在各種裝置和方向上看起來正確。

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

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

Visual Studio for Mac

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

   

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

   

   • 將檔案 命名為 LaunchScreen 或您選擇的其他名稱。

2. 將項目設定為其啟動畫面使用適當的分鏡腳本：

   • 按兩下 Solution Pad 中的 Info.plist 檔案，以開啟它進行編輯。
   • 在 [ 啟動影像] 區段中，確定 [啟動畫面 ] 設定為適當的分鏡腳本名稱：

   

   • 根據預設，新的項目會設定為使用 LaunchScreen.storyboard 做為其啟動畫面。

3. 將影像新增至 Assets.xcassets Asset Catalog，使其可在啟動畫面上使用。 如需詳細資訊，請參閱顯示影像指南的<將影像新增至資產類別目錄映像集>一節。

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

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

   

   • 請注意，選取裝置和方向只會變更 iOS 設計工具預覽設計的方式。 不論此處所做的選取範圍為何，新新增的條件約束都會套用到所有裝置和方向，除非已使用 [ 編輯特性 ] 按鈕來指定否則。

6. 設定檢視控制器主要檢視的背景色彩。 點選單擊 [檢視控制器] 中間的 [檢視]，並使用 Properties Pad 調整背景色彩，以選取 [檢視] ：

   

7. 將影像檢視新增至 [啟動畫面]，並設定其來源影像：

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

   

8. 在影像檢視下方新增標籤，並使用 Properties Pad 來設定其屬性：

   

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

   

10. 將條件約束新增至 影像檢視，設定其高度和寬度，並以水平和垂直方式置中：

    

    • 如需如何新增條件約束的詳細資訊，請參閱 使用 Xamarin Designer for iOS 自動版面配置。

11. 將條件約束新增至標籤，水準置中，給予其高度和寬度，並將它與影像檢視垂直定位固定距離：

    

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

    

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

Visual Studio

1. 建立新的 專案。 在 Visual Studio 中，選取 [檔案新專案 > Visual C# > i 電話 & iPad > iOS 應用程式 （Xamarin）：>>

   

   選取 [ 單一檢視應用程式 ] 範本，然後按下 [ 確定]：

   

2. 如果資源 > LaunchScreen.xib 存在於 方案總管 中，請以滑鼠右鍵按兩下檔案並選擇 [刪除]，將其刪除。 下一個步驟中，此檔案將會取代為分鏡腳本。

3. 建立分鏡腳本以作為啟動畫面使用。 在 方案總管 中，以滑鼠右鍵按兩下 [專案]，然後選擇 [新增>專案...]，後面接著 [空白分鏡腳本]。 將此分鏡腳本 命名為 LaunchScreen.storyboard ，然後按兩下 [ 新增]：

   

4. 將 Project 設定為使用 LaunchScreen.storyboard 作為啟動畫面分鏡腳本：

   • 在 [方案總管] 中，按兩下 [Info.plist] 檔案以開啟它進行編輯。
   • 在 [視覺資產] 索引標籤上，將 [啟動畫面] 設定為 LaunchScreen。

   

5. 將影像新增至專案中的資產目錄，使其可在啟動畫面上使用：

   • 在 方案總管 中，以滑鼠右鍵按兩下 [資產目錄]，然後選取 [新增資產目錄]。 將此新的資產目錄 資產命名為：

   

   • 將新的映射集新增至資產資產目錄，如顯示影像指南的將影像新增至資產類別目錄映像集一節所述。

6. 在 方案總管 中按兩下 LaunchScreen.storyboard 進行編輯。

   • 若要編輯分鏡腳本檔案，Visual Studio 需要與 Mac 組建主機的作用中連線。 如需詳細資訊，請參閱 mac 指南 連線。

7. 選擇要在 iOS 設計工具中預覽啟動畫面分鏡腳本的裝置和方向。 開啟底部工具列上的裝置選取面板，然後選取 [i 電話 4S 和直向：

   

   • 請注意，選取裝置和方向只會變更 iOS 設計工具預覽設計的方式。 不論此處所做的選取範圍為何，新新增的條件約束都會套用到所有裝置和方向，除非已使用 [ 編輯特性 ] 按鈕來指定否則。

8. 將檢視控制器從工具箱拖曳至設計介面，將檢視控制器新增至分鏡腳本：

   

9. 設定檢視控制器主要檢視的背景色彩。 點選單擊 [檢視控制器] 中間的 [檢視]，並使用 [屬性視窗] 調整背景色彩，以選取 [檢視] ：

   

10. 將影像檢視新增至 [啟動畫面]，並設定其來源影像：

    • 將影像檢視從工具箱拖曳到檢視的中心。
    • 在仍然選取 [影像檢視] 之後，在 [屬性] 視窗的 [Widget] 區段中，將 [影像] 屬性設定為 [影像集] 已新增至 [資產資產目錄]。 視需要重新調整影像檢視的位置和大小：

    

11. 在影像檢視下方新增標籤：

    • 將標籤從 [工具箱] 拖曳至設計介面，並將它放在 [影像檢視] 下方。
    • 使用 [屬性視窗] 設定標籤的屬性：

    

12. 使用 [條件約束工具列] 中的右手按鈕，切換至條件約束編輯模式：

    

13. 將條件約束新增至 影像檢視，設定其高度和寬度，並以水平和垂直方式置中：

    

    • 如需新增條件約束的詳細資訊，請參閱 使用適用於 iOS 的 Xamarin 設計工具自動配置。

14. 將條件約束新增至標籤，水準置中，給予其高度和寬度，並將它與影像檢視垂直定位固定距離：

    

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

    

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

注意

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

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

移轉至啟動畫面分鏡腳本

Visual Studio for Mac

更新現有的應用程式以使用分鏡腳本作為啟動畫面時，以滑鼠右鍵按兩下 方案總管 中的 [項目名稱]，然後選取 [新增>檔案...]。選取 [iOS>啟動畫面]，然後按下 [新增] 按鈕：

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

若要使用新的分鏡腳本作為啟動畫面，請執行下列動作：

1. 按兩下 Info.plist 方案總管 中的檔案，以開啟它進行編輯。

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

   

Visual Studio

1. 以滑鼠右鍵按兩下 方案總管中的項目名稱，然後選取[新增>檔案...] ：

   

2. 輸入啟動畫面的名稱，然後按下 [ 新增 ] 按鈕：

   

3. 在 方案總管 中，按兩下新建立的分鏡腳本檔案加以開啟以進行編輯。

4. 確定 Size 類別 設定為 any：any ，而 [檢視身分] 是 [泛型]：

   

5. 從[大小類別]、簡單 UI 元素 （例如 UIImageView） 和您已包含在應用程式套件組合中的影像，將啟動畫面組合組成：

   

6. 將變更儲存至分鏡腳本。

相關連結

• 動態啟動畫面 （範例）
• 統一的分鏡腳本
• iOS 設計工具基本概念
• 將映像新增至資產類別目錄映像集
• 使用適用於 iOS 的 Xamarin 設計工具自動版面配置
• 人類介面指導方針：啟動畫面