iT邦幫忙

2021 iThome 鐵人賽

DAY 21
0
Mobile Development

Re: 從零開始用 Xamarin 技術來復刻過去開發的一個 App : TopStore系列 第 21

EP 21: Custom Launch Screen for iOS

Hello, 各位 iT邦幫忙 的粉絲們大家好~~~

本篇是 Re: 從零開始用 Xamarin 技術來複刻過去開發的一個 App: TopStore 系列文的 EP21。

本篇是來介紹一下如何設定 App 的 "自訂啟動畫面" 的部分唷!

在 EP20 已經介紹完畢 Android 平台的部分,本篇 EP21 就來針對 iOS 平台要進行的處理來做介紹囉!

過去在 iOS 當中處理到 "App 自訂啟動畫面" 大致上都得透過 LaunchScreen.storyboard 這個檔案處理。
iOS 專案

微軟官方的 Xamairin.iOS 文件大致上也就是這樣教學:
https://docs.microsoft.com/en-us/xamarin/ios/app-fundamentals/images-icons/launch-screens
(有興趣的朋友可以參考看看)

不過,由於後來在 Xcode 12 後已經能透過設定 Info.plist 的方式,指定使用 Assets 內容設定來完成 "App 自訂啟動畫面" 的部分,不需要再仰賴 *.storyboard。

那本篇就來看看怎麼在 Xamarin 當中透過 Visual Studio 當中處理這部分囉~~~

始動!


透過 Visual Studio 的方案總管,展開 iOS 平台的專案,並且打開 info.plist。
iOS 專案

右鍵選單可選擇 "開啟方式",並設定要使用哪種方式開啟。
iOS 專案 info.plist 開啟方式 1

如果是用 "iOS 權利編輯器" 中開啟的話。
iOS 專案 info.plist 開啟方式 2

開啟後應該是會呈現成這樣。
iOS 權利編輯器 開啟 info.plist

如果是用 "Generic PList Editor" 中開啟的話。
iOS 專案 info.plist 開啟方式 3

開啟後應該是會呈現成這樣。
Generic PList Editor 開啟 info.plist
(大部分的機會都會用 "Generic PList Editor" 處理,所以就把此開啟方式設定為預設值)。

本篇介紹裡就選擇使用 "Generic PList Editor" 的開啟方式會比較方便調整。

找到其中的 "Launch screen interface file base name" 這個 Key 值,右鍵點選 "Delete"。
iOS 專案開啟 info.plist

"刪除" 後的畫面。
刪除 info.plist 當中的 Launch screen interface file base name 的 Key 值

接著請在 info.plist 增加一個 "UILaunchScreen" 的 Key 值並且將 Type 指定為 Dictionary。
設定 LaunchScreen 的 Key 值
(請注意大小寫與拼字)

在 UILaunchScreen 底下繼續增加 "UIColorName" 跟 "UIImageName" 的 Key 值,這兩個 Key 值的 Type 維持為 String 即可。
設定 LaunchScreen 底下用到的 Key 值

後續要針對這兩個 Key 值的 Value 設定資料,請在 iOS 專案當中找到 "資源目錄" 底下的 "Assets",打開後會呈現如下。
打開 "資源目錄" 底下的 "Assets"

點選新增 Assets 內容,並且選擇到 "新增影像集"。
Assets 中新增影像集 1
(不要問,為什麼提示文字的翻譯跟選單當中的文字翻譯不同)

新增出 Images(影像集)。
Assets 中新增影像集 2

接著右鍵選單點選 "重新命名"。
Assets 中新增影像集 3

變更原本的影像集名稱為 "LaunchImages"。
Assets 中新增影像集 3

選擇 "適合" 的影像大小放到各個 1x, 2x, 3x 設定當中。
Assets 中新增影像集 4

點選新增 Assets 內容,並且選擇到 "新增色彩設定"。
Assets 中新增色彩設定 1
(不要問,為什麼提示文字的翻譯跟選單當中的文字翻譯不同)

新增出 Color(色彩設定)。
Assets 中新增色彩設定 2

接著右鍵選單點選 "重新命名"。
Assets 中新增色彩設定 3

變更原本的影像集名稱為 "LaunchColor",有需要就自行選擇 "適合" 的色彩到此設定當中(預設值為白色)。
Assets 中新增色彩設定 4

變更完成後請記得 "存檔"。
Assets 設定完成後 存檔

再次回到 Info.plist 的編輯,將先前設定的 UIColorName 與 UIImageName,設定其資料值。
設定 LaunchScreen 底下用到的 Key 值

變更完成後請記得 "存檔"。
Assets 設定完成後 存檔

iOS 平台的 App 啟動畫面撰寫完成,執行效果如下。
iOS 平台的 App 執行自訂啟動畫面效果

唷~~最基本的自 App 自訂啟動畫面效果完成囉!

下一篇 EP22 再見囉~~

呦悉!!!


上一篇
EP 20: Custom Launch Screen for Android
下一篇
EP 22: Create SQLite DB for TopStore App
系列文
Re: 從零開始用 Xamarin 技術來復刻過去開發的一個 App : TopStore32

尚未有邦友留言

立即登入留言