2019/06/26

如何在 Xamarin.iOS 專案內建立一個啟動畫面，並且可以自動在不同裝置下，橫向與執行模式下，自動調整直向 Portrait / 橫向 Landscape

想要讓 Xamarin.Forms 開發出來的專案，不會有 iOS 應用程式一起動，就會看到一片藍色的畫面，就需要根據這篇文章來建立一個啟動螢幕 Splash Screen

這篇文章的專案原始碼，可以從 Github 取得

準備工作與建立 Storeboard

請先複製一張圖片檔案到 Resources 目錄下，這裡使用的片為 MyIcon.png
使用滑鼠右鍵點選 Resources 目錄，選擇 [加入] > [新增項目]
在 [新增項目] 對話窗中，選擇 [已安裝] > [Visual C#] > [Apple] 類別
在該對話窗的中間選擇 [分鏡腳本空白] 這個選項
在名稱欄位輸入 MySplash.storyboard
最後點選 [新增] 按鈕
此時該 Storyboard 檔案將會自動開啟，若此時該專案尚未連線到 Mac 電腦，則會產生錯誤訊息，此時，需要先連線到 Mac 電腦，再度重新打開這個 Storyboard 檔案

設計該 Storyboard 分鏡腳本

若看不到如下圖左方的 [工具箱] 與 [文件大綱] 這兩個視窗，請從 Visual Studio 的檢視視窗中找到這兩個項目，打開這兩個視窗
在 [工具箱] 視窗的搜尋文字輸入盒內，輸入 view 關鍵字，將會看到 View Controller 這個項目
請點選這個選項，並且拖拉到 Visual Studio 的中間地方，並且放開滑鼠，完成建立一個 View Controller 的操作
底下是完成後的操作螢幕截圖
現在，請在工具箱的文字輸入盒內輸入 Im 文字，將會看到出現 Image View 控制項，請將這個圖片控制項拖拉到剛剛建立的 View Controller 上
請在工具箱的文字輸入盒內輸入 lab 文字，將會看到出現 Label 控制項，請將這個文字控制項拖拉到剛剛建立的 View Controller 上
剛剛這兩個控制項可以拖拉到該 View Controller 的任何地方，不過，這裡準備要設計的構想是，要將圖片放到螢幕的最上方，而該文字將會永遠出現在螢幕的下方，因此，這兩個控制項將會拖拉成為如下圖的樣貌。
接下來要來設定圖片控制項
請先點選該圖片控制項，在右方的 [屬性] 視窗中，將會看到 [Image] 屬性項目，請在此選擇剛剛托拉進來的圖片名稱
在 [Content Mode] 屬性欄位中，選擇 [Center] 項目
最後，回到原先的圖片按鈕，透過上下左右的四個點，來調整整個圖片控制項的大小，並且將該圖片拖拉到儘量離螢幕上方一點，並且水平置中
- 請點選文字控制項，設定他的文字內容為 [我的 Xamarin.Forms] 與字體大小和文字置中等設定，最後將該文字拖移到螢幕的下方
- 現在，點選螢幕空白的地方，設定 View 控制項的背景為綠色，最後的結果將會如下圖所示
- 現在來看看這樣的設計在不同裝置與螢幕方向下，有沒有問題存在
- 在 Storyboard 視窗的左下方，將會看到一個 [正在檢視 : iPhone 8 Plus - 橫向 - 寬 R 高壓縮] 這個文字，請點選這個項目。
- 這裡將會看到不同的裝置，與最右方可以選擇直向或者橫向的顯示方式，在這裡先點選橫向選項，將會看到如下圖畫面，整個原先螢幕的下方被切割掉了，只剩下螢幕上方的圖片，現在請再度點選直向選項
在該 Storyboard 視窗的右上方將會看到有三個圖示，請點選中間的 [限制式編輯模式] 按鈕
再度點選圖片控制項，將會出現不同的設定節點項目
請點選右方的 T 字型的節點圖示，拖拉該圖示到螢幕的左方，直到出現如下圖的藍色虛線才放開，這將會這點該圖片的限制約束條件；同樣的請設定左方的 T 字型節點圖示，拖拉到螢幕右方，，直到出現如下圖的藍色虛線才放開
同樣的，請也設定上方的 T 字型的節點圖示，拖拉該圖示到螢幕的上方，直到出現如下圖的藍色虛線與有上版面配置輔助線區域才放開
請點選右方的 I 字型的節點圖示，將會彈跳出一個小視窗，請選擇 [高度] 選項，同樣的操作，點選該圖片下方的 I 字型圖示，選擇 [寬度] 選項