XAML in Xamarin.Forms 基礎篇 電子書

XAML in Xamarin.Forms 基礎篇 電子書
XAML in Xamarin.Forms 基礎篇 電子書

Xamarin.Forms 快速入門 電子書

Xamarin.Forms 快速入門 電子書
Xamarin.Forms 快速入門 電子書

特別說明

2019/06/26

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

如何在 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 字型圖示,選擇 [寬度] 選項
  • 此時,可以來查看這樣的設計是否可以正常在 橫向 模式下來顯示,結果是沒有問題的,如下圖所示。
  • 現在,請將 Label 控制項也依據這樣的方式來設定
  • 請滑鼠雙擊 info.plist 這個檔案,點選該視窗的 [視覺資產] 標籤頁次,在下方的 [啟動畫面] 下拉選單中,選擇 [MySplash] 項目
  • 請執行這個專案,分別將裝置轉向成為 直向與橫向 模式,這樣的啟動畫面就不會跑版囉
     



沒有留言:

張貼留言