iOS LaunchScreen.storyboard 的使用和适配

一、苹果审核新规

背景:WWDC在2019有session提出。到2020年4月,上架APP的启动页必须使用launchscreen.storyboard,不能再使用assert方式了,后面延迟到2020年6月,现在6月已过,就来说下launchscreen.storyboard的使用以及里面遇见的坑。

二、使用LaunchScreen.storyboard搭建启动图

1、首先,要在项目中进行配置。在General—> App Icons and Launch Images—>Launch Screen File中选择LaunchScreen

 

 

项目设置

 

2、然后,在Build Settings—>Asset Catalog Launch Image Set Name 中将值置空(如果以前没用assert方式设置启动图,默认为空)

 

 

Build Settings设置


3、选中LaunchScreen.storyboard,勾选Use as Launch Screen的选项,注意此时不要取消Use Safe Area Layout Guides选项。(尽管你的项目适配iOS9.0以下会报错,先不要管,如果取消了在后面布局设置中左右会有20像素的留白)

 

LaunchScreen.storyboard配置

 

4、添加UIImageView控件

 

添加UIImageView控件

 

5、为新添加的UIImageView

 

 

添加约束

 

6、选中上下左右的约束(点击短横线),并将数值都设为0,最后点击下面的Add按钮,如下图所示:

 

设置约束

 

7、此时选中带刘海屏的手机模型,你会发现上下还是有留白

8、解决留白问题,在左窗口选中底部约束—>点击右侧的First item—>选择Superview—>将Constant设置为0,如下图所示:

 

底部约束

 

修改完的效果如下图所示:

 

 

修改完的效果

 

同样的方式,修改顶部约束:注意此时需要将 Second item—>选择Superview

9、此时将3中提到的Use Safe Area Layout Guides选项取消勾选,然后再将自己的启动图名称添加上就可以了

 

整体效果

三、图片适配

以前使用LaunchImage方式的时候,使用LaunchImage可以根据不同的屏幕设置不同的图片,现在只能用1倍、2倍、3倍图了,但是8P和11P max都是3倍图,高度却不一样了,如果不做处理用同一张图片会出现留白情况。
1、简单粗暴处理。在Content Mode—>选择Scale To Fill或者Aspect Fill,让图片自己压缩。Scale To Fill会改变图片宽高比,Aspect Fill会造成图片显示不全。

2、类似LaunchImage适配。

2.1、选择Assets.xcassets—>左下角+号—>New Image Set.然后自己命一个名字

 

 

自定义图片

 

2.2、修改图片的Contents.json文件,修改内容如下(双击图片,选择Show in Finder,文件夹里面有一个Contents.json文件,双击打开)

 

{
  "images" : [
    {
      "idiom" : "iphone",
      "scale" : "1x"
    },
    {
      "idiom" : "iphone",
      "scale" : "2x"
    },
    {
      "idiom" : "iphone",
      "scale" : "3x"
    },
    {
      "idiom" : "iphone",
      "scale" : "1x",
      "subtype" : "retina4"
    },
    {
      "idiom" : "iphone",
      "scale" : "2x",
      "subtype" : "retina4"
    },
    {
      "idiom" : "iphone",
      "scale" : "3x",
      "subtype" : "retina4"
    },
    {
      "idiom" : "iphone",
      "scale" : "3x",
      "subtype" : "736h"
    },
    {
      "idiom" : "iphone",
      "scale" : "2x",
      "subtype" : "667h"
    },
    {
      "idiom" : "iphone",
      "scale" : "3x",
      "subtype" : "2436h"
    },
    {
      "idiom" : "iphone",
      "scale" : "3x",
      "subtype" : "2688h"
    },
    {
      "idiom" : "iphone",
      "scale" : "2x",
      "subtype" : "1792h"
    }
  ],
  "info" : {
    "author" : "xcode",
    "version" : 1
  }
}

2.3、此时就可以根据不同屏幕适配不同的启动图了

 

 

屏幕适配

四:启动图没出来

可以尝试重启Xcode、删除app重装等。

五:修改启动图

在原来的文件下面替换图片,不管沙盒删启动图缓存、删除app重装、清理Xcode、重启Xcode、重启电脑都没用,只有一个办法,重启手机。所以我更换启动图就是换一个图片名称,在Assets.xcassets里面重新建一个图片文件夹,重新添加图片。

demo

 

  • retina4是对4寸屏幕的适配,也就是苹果5系列和第一代se, 这类机型只有2x图,但是这种写法会默认生成1x、2x、3x,直接用320*568图片去适配
  • 查看自己是否有步骤缺失
  • 查看自己项目以前是否使用LaunchImage,如果是,是否将LaunchImage相关已经全部删除
  • 重启手机试下



转载链接:https://www.jianshu.com/p/13fdc6a3cd41

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在Xcode中制作LaunchScreen.storyboard可以通过以下步骤进行: 1. 打开Xcode并创建一个新的项目或打开现有的项目。 2. 在项目导航栏中,找到并选中名为LaunchScreen.storyboard的文件。 3. 在Interface Builder中,你将看到一个可视化的画布,用于创建你的Launch Screen界面。 4. 你可以在右侧的对象库中选择和拖拽各种视图元素到画布上,比如标签、图像视图、按钮等等。根据你的需求,自定义你的Launch Screen界面。 5. 使用自动布局和约束来确保你的Launch Screen在各种设备和屏幕尺寸下都能正确显示。你可以使用Auto Layout来指定视图之间的关系和位置,以及对内容进行自应布局。 6. 添加所需的背景图像或启动图像。你可以在图像资源选项卡中,将你的图像文件拖拽到LaunchScreen.storyboard上,并将其设置为背景图像或者其他所需的位置。 7. 根据需要,你可以使用动画效果或过渡效果来提高Launch Screen的可视化效果。这可以通过在Launch Screen上添加动画视图或切换视图的方式来实现。 8. 在你完成Launch Screen的设计和布局后,你可以选择在应用程序设置中将其设置为你的项目的主要启动界面。进入“General”选项卡,找到“App Icons and Launch Images”部分,选择“Launch Screen File”并选择你的Launch Screen.storyboard文件。 通过以上步骤,你可以使用Xcode中的Interface Builder创建和设计Launch Screen.storyboard,以实现你想要的启动界面效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值