美文网首页uniApp
uniapp 使用storyboard文件制作启动图

uniapp 使用storyboard文件制作启动图

作者: GloryMan | 来源:发表于2021-01-04 16:21 被阅读0次

    下面先放官方文档:

    使用说明

    此 storyboard 文件适用于各种 iPhone 及 iPad 设备的横竖屏,支持自定义界面元素包括

    • 页面背景图片或背景颜色
    • 中间显示图片
    • 底部显示文字及颜色

    注:每一项都是可选的(比如只显示背景图片,按照下面的方法只提供背景图片即可)

    默认效果如下:

    image

    自定义方法:使用 HBuilderX 打开 LaunchScreen.storyboard 文件,作为xml文件编辑自定义修改部分样式。

    自定义界面背景

    页面背景支持设置背景色或设置背景图片默认为使用背景色,值为systemBackgroundColor,会跟随系统设置的模式自动修改颜色,正常模式为白色暗黑模式为黑色

    自定义背景色

    替换第42行 color 节点为下面的代码,并将 red、green、blue 属性值修改为自己需要的颜色,取值范围为0到1

    <color key="backgroundColor" red="0.83516160100000003" green="0.88008347600000003" blue="0.88008347600000003" alpha="1" colorSpace="calibratedRGB"/>
    

    自定义背景图

    图片要求
    设备 尺寸要求 命名规范 说明
    iPhone 竖屏 以iPhoneX的尺寸设计 dc_launchscreen_portrait_background@2x.pngdc_launchscreen_portrait_background@3x.png 以 iPhoneX 竖屏为模板设计图片,并输出@2x、@3x图片,注意命名规范
    iPhone 横屏 以iPhoneX的尺寸设计 dc_launchscreen_landscape_background@2x.pngdc_launchscreen_landscape_background@3x.png 以 iPhoneX 横屏为模板设计图片,并输出@2x、@3x图片,注意命名规范
    iPad(不区分横竖屏) 以 iPad 9.7 的尺寸设计 dc_launchscreen_pad_background@2x.pngdc_launchscreen_pad_background@3x.png 以 iPad 9.7 设备为模板设计图片,并输出@2x、@3x图片,注意命名规范

    将设计好的图片放到根目录即可;

    注:如果您不需要背景图片,不存放相应的图片即可;

    自定义中间显示的图片

    请将目录中的dc_launchscreen_icon@2x.pngdc_launchscreen_icon@3x.png图片替换为您自己的图片

    注:如果您不需要中间的图片,不存放相应的图片即可;

    自定义底部文字

    • 修改文字
      修改第35行 label节点的 text 属性值即可,设置为空字符串则不显示文字
    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="xxx提供计算服务" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="QBH-Ne-rcx">
    
    • 修改文字颜色
      替换第38行 color节点为下面的代码,并将 red、green、blue属性值修改为自己需要的颜色,取值范围为0到1
    <color key="textColor" red="0.83516160100000003" green="0.88008347600000003" blue="0.88008347600000003" alpha="1" colorSpace="calibratedRGB"/>
    

    遇到的问题及解决方法

    • 修改背景图,由于此storyboard文件背景图显示模式使用的Aspect Fill,在一些尺寸上会被拉伸填充整个屏幕,所以在实际设置中要处理好边缘显示的内容
    • 如果你想使用uniapp做一个启动图会视频播放的话,这种方式将会出现问题,启动图和视频衔接出现闪黑问题。原生的闪黑可以忽略不计,这里会有很明显的闪黑问题(目前处理方法是自定义启动图设置背景颜色为黑色或者白色这样不会出现衔接闪黑问题,根据app主题颜色自己选择)
    • 由于官方给出的storyboard文件中只能修改特定的部分内容,不能实现高度自定义。解决方法,自己使用xcode创建文件添加内容或者联系我帮大家去做QQ506907778
    • 有些人的会出现设置背景图没有充满整个屏幕,上下有留白,这种情况一般是非iOS开发人员自己创建storyboard 文件时出现的,解决方法将布局的Safe Area修改为Superview就可以了
    • 有些人使用官方的文件没有生效,可能是你图片的名称没有按照官方的来,要和官方的图片名称相同才能生效

    如有其它问题可以在下方评论留言,我会在看到的第一时间回复大家

    相关文章

      网友评论

        本文标题:uniapp 使用storyboard文件制作启动图

        本文链接:https://www.haomeiwen.com/subject/bievoktx.html