Storyboard 中用户界面适配问题

  • 需求说明
    1. UI界面布局通过 Storyboard 实现,要求对界面进行横竖屏的适配;
  • 使用了 Autolayout 后适配的屏幕情况
    1. Vary for Traits中的Vary canvas edits for中选择Width
      01.png
    2. 所适配的屏幕,如图02.png、03.png所示
      02.png

      03.png
  • 情况说明
    1. iPhone 11 Pro Max wChRSizeClass下,横屏并没有适配全部机型,iPhone 8 Plus、iPhone11、iPhone 11 Pro Max 在 Light 和 Dark模式下的横屏并未进行适配;
  • 剩余横屏界面的适配,如图04.png所示
    04.png

    05.png

    05.pngSizeClass中适配的就是剩余机型,有一点需要注意:当切换SizeClass的时候,上一个SizeClass中的控件会出现在Canvas中,对这些控件的处理办法是首先将不在屏幕中的控件通过 Size Inspect 面板中的x、y坐标调整到屏幕中,然后开启SizeClass后重新添加。如果不删除的话初始化控制器的时候会抛异常导致程序Crash,另外不同SizeClass下的控件是不同的,因此需要有不同的 outlet。

在不同SizeClass下可以有不同的控件和不同的界面布局,高亮的控件(如图06.png中绿色框选中内容)是在当前SizeClass下显示的控件,可以给这些控件添加相应的约束;红色框中的控件是另一个SizeClass下添加的控件。

06.png

你可能感兴趣的:(Storyboard 中用户界面适配问题)