storyboard 苹果启动图_iOS平台自定义storyboard启动界面
背景
6月30日起,蘋果App Store審核要求應用在啟動時,不能使用啟動圖片,必須改為使用Storyboard來制作啟動界面。原文參考:https://developer.apple.com/news/?id=03262020b
之前使用靜態png圖片做啟動屏的方式,最大的問題是多尺寸適配,iOS設備目前不同屏幕尺寸太多,為每種屏幕做png圖片不是合理解決方案。
Android處理多屏適配問題使用了.9.png,iOS則使用了Storyboard來處理。
什么是Storyboard
Storyboard是Apple提供的一種簡化的布局界面,通過xml描述界面,不能編程。
雖然無法制作非常靈活的界面,但滿足啟動界面是沒問題的,比如設定背景色背景圖、設定前景文字、圖片的位置。
storyboard的優勢是啟動速度快。在App的真實首頁被渲染完成前,可以快速給用戶提供一個基于Storyboard的啟動屏。
其實5+App、wap2app、uni-app在iOS上,已經在兩種情況下使用了Storyboard:
如果在manifest里沒有選擇自定義啟動圖片,那么默認情況下,打包后App啟動時,會出現一個顯示著app logo和name的通用啟動界面。在iOS上,其實這個界面就是使用Storyboard實現的。
如果你的App啟用了uni-AD廣告服務,那么開屏廣告界面,iOS上也是基于Storyboard實現的。
6月30日起,如上線Appstore,iOS只能使用Storyboard做啟動圖。如果你不想自己做Storyboard文件,就選擇上述2種方式。
如果想自定義Storyboard,那么從HBuilderX 2.8起,也提供了自定義storyboard的方式。
如何自定義storyboard
HBuilderX2.8+版本開始支持配置自定義storyboard啟動界面。
概要流程是:開發者首先制作storyboard文件,然后將storyboard文件和圖片資源打包成zip,然后在HBuilderX 2.8+的項目manifest中選擇這個zip,最后打包生效。
第一步:制作storyboard文件
storyboard有兩種制作方式:
1. 直接使用附件提供的相對常用的 storyboard 模板,可在這個文件的基礎上進行自定義(不需要 Mac 及 XCode,詳情請查看附件中的 readme 教程)
此 storyboard 文件適用于各種 iPhone 及 iPad 設備的橫豎屏,支持自定義界面元素包括
頁面背景圖片或背景顏色
中間顯示圖片
底部顯示文字及顏色
注:每一項都是可選的(比如只顯示背景圖片,只提供背景圖片即可)
2. 使用xcode自行制作。xcode提供了可視化的制作storyboard的方式,但依賴于mac電腦。在xcode中制作storyboard的教程請自行網絡搜索,請注意下面的注意事項。
HBuilderX需要的自定義storyboard文件格式為zip壓縮包,里面要求包含XCode使用的.storyboard文件,以及.stroybard文件中使用的png圖,如下圖所示:
注意事項
zip壓縮包中不要包含目錄,直接包含.storyboard和.png文件
有且只有一個.storyboard文件
.storyboard文件可以通過xcode生成,也可以使用任何文本編輯器修改其源碼,比如對.storyboard文件點右鍵,使用HBuilderX打開。它本質是一個xml文件。
png文件名稱中的@2x和@3x是適配不同分辨率的圖片,系統會自動根據設備dpi選擇,可參考這里
為了避免png文件名稱與應用中內置的文件名沖突,建議以dc_launchscreen開頭
制作 storyboard 時,請將圖片資源直接拖到放工程中,不要放到 imageset 里面,并且圖片命名要保證一定的唯一性可參考附件中的示例
XCode中創建 storyboard 文件時,頁面元素添加約束時一定要相對于 Superview,不然啟動圖到 loading頁面過渡時頁面會跳動或者變形
第二步:在HBuilderX的manifest界面中選擇 自定義storyboard文件包。
把制作好的storyboard的zip包放置到硬盤中。
HBuilderX中打開項目的manifest.json文件,在“App啟動界面配置”頁面中勾選“自定義storyboard啟動界面”,并選擇自定義storyboard的zip包:
配置后需提交云端打包才能生效
附件說明
附件CustomStoryboard.zip為自定義sotyboard模板示例,默認效果如下:
此 storyboard 文件適用于各種 iPhone 及 iPad 設備的橫豎屏,支持自定義界面元素包括
頁面背景圖片或背景顏色
中間顯示圖片
底部顯示文字及顏色
注:每一項都是可選的(比如只顯示背景圖片,按照附件zip文件中的 readme.md 教程進行自定義修改,只提供背景圖片即可)
后續
為iOS和Android制作不同的屏幕適配方案,還是比較麻煩。
而通用啟動界面雖然雙端均支持,且可以上Appstore,但自定義性不足。
后續DCloud會強化通用啟動界面的靈活度,允許對背景、前景提供更多自定義性,并確保在iOS、Android雙端均支持。
暫時,開發者如覺得自定義storyboard啟動界面配置麻煩,也可以在manifest的啟動圖設置中選擇默認的通用啟動界面(或在HBuilderX2.8以前的版本刪除啟動圖片配置),也滿足App Store審核要求。
總結
以上是生活随笔為你收集整理的storyboard 苹果启动图_iOS平台自定义storyboard启动界面的全部內容,希望文章能夠幫你解決所遇到的問題。
 
                            
                        - 上一篇: 电子调谐器的主要引脚及作用
- 下一篇: debian安装MySQL
