iOS uses SizeClass to adapt to different screens

1. Introduction

2. Types corresponding to different screens and orientations (wAny hAny is all types)

2.1、iPhone4S/SE/6/X

2.2、iPhone6Plus

2.3, iPad (full screen, split view)

3. How to select various types

3.1, all types

        As shown in the figure below, only the device is selected, and Vary for Traits is not selected. This type is wAny hAny, and the operation in this type is to adapt to all types

3.2, wC hC type (iPhone4S/SE/6/X landscape)

3.2.1. Select the device and orientation

        As shown in the figure below, 1 select the device iPhoneSE, 2 select the landscape screen, 3 you can see the wC hC type comes out, 4 click Vary for Traits to decide whether to adapt wC or hC

3.2.2. Select wC or hC

        As shown below. Introduce Variations Based On: If only Width is selected as wC hAny type, only Height is selected as wAny hC type, and Width and Height are selected as wC hC type

3.2.3. Enter type mode

        As shown in the figure, it has entered the wC hC type

3.2.4. Exit type mode

        When the operation is complete, the Done Varying button must be clicked to exit type mode. As shown below.

3.3, wC hR type (all iPhone devices are vertically screened, iPad part of Split View next part: refer to the above 2 knowledge points)

3.3.1. Select device and orientation

        As shown in the figure, 1 select iPhoneSE, 2 select horizontal screen, 3 see the wC hR type, 4 click Vary for Traits

3.3.2. Select wC or hR

        As shown below. Introduce Variations Based On: If only Width is selected as wC hAny type, only Height is selected as wAny hR type, and Width and Height are selected as wC hR type (the text seems familiar, haha, the same as wC hC)

3.3.3, enter type mode, exit type mode

        所有的类型模式进入和退出都是一样的,在这就不一一描述了。


3.4、wR hC类型 (iPhone6Plus/7Plus/8Plus)

        同上面类型选择


3.5、wR hR类型(iPad所有设备Full Screen)

        iPad和iPhone不同的是,iPad多了个选项adaptation,有Full Screen、Split View2/3、Split View1/3,是iPad特有的分屏模式,其他操作和前面的类型操作一样。


4、一个控件适配不同类型(wC hC、wC hR、wR hC、wR hR)

4.0、在wAny hAny类型下添加一个控件

4.1、wC hC 类型下添加约束

        首先切换到wC hC类型,就是选中iPhoneSE横屏的 Width和Height,然后添加约束上面10,左边0,如下图

4.2、wC hR类型下添加约束

        首先取消wC hC类型,再切换到wC hR类型,就是选中iPhoneSE竖屏的 Width和Height,然后添加约束上面20,左边50,如下图

4.3、wR hC类型和wR hR类型

        和前面两个类型都是一样操作的。


        iPhoneSE横竖屏适配效果:


5、在不同类型添加控件

        跟上面的操作大致相同,不同的是需要先切换到对应的类型下再添加控件。

        例:在wC hR下添加一个UILabel,在wC hC下添加一个UIButton


        效果图:


转载链接:https://www.jianshu.com/p/0b91341fead4


参考文献:

iOS8--关于regular和compact的理解

autolayout Compact,Regular,Any 解析

iOS 8 AutoLayout与Size Class自悟



Guess you like

Origin http://10.200.1.11:23101/article/api/json?id=326574260&siteId=291194637