美文网首页iOSiOS学习
iOS 10可视化编程之sizeclass(Vary for T

iOS 10可视化编程之sizeclass(Vary for T

作者: 虎哥最帅 | 来源:发表于2017-01-19 15:49 被阅读12866次

    Xcode8中修改了sizeclass面板的效果,不再是以前的那种方形的选择,而是更加直观的显示了在横竖屏下适配的界面。名字也不再是sizeclass而变成了Vary for Traits。我们之前学习了约束,而约束是针对你选择的屏幕。当屏幕不一致时要显示不同的布局。随着苹果设备的不断增多,苹果对屏幕的选择不再是之前的sizeclass,可以针对某个设备进行适配,苹果认为应该针对大多数的设备,所以这里的Vary for Traits让开发人员变的更加的方便,默认不做任何操作就是全屏幕做的适配,也就是屏幕的竖屏和横屏都存在约束,大家可以去自己做测试。这里不再演示。Vary for Traits给我们提供了针对大多数设备的屏幕适配,这种效果对于开发来说是非常好的。先给大家演示下Vary for Traits是如果选择设备的

    用Trait Variations实现横竖屏不同约束

    创建工程。
    选择Main.storyboard。
    在视图层中扔进一个imageview。
    选中Vary for Traits(注意是先选)。
    选择width出现以下界面(发现在横屏竖屏之下都适应)。

    选择屏幕

    这里的屏幕选择的是14种设备,在下面是有提示的,也就说,我们在以后添加的约束是针对的这14种设备。如图26-1:

    图26-1.png

    然后我们在这里添加一个控件然后给他添加约束,在添加约束结束之前一定不要点击Done Varying,如图26-2:

    图26-2

    这个一定要在约束添加完成后再点击。然后我们拖入一个控件,然后随便给他添加一个约束。如图26-3所示:

    图26-3

    添加完成后,点击Done Varying。然后我们再选择Trait Variations如图26-4所示:

    图26-4

    大家注意看,设备由原来的14变了11,说明有部分设备不在其中,我们往后面看,发现是手机的横屏消失了。也就是说,我们现在添加的约束对手机的横屏是不支持的。我们再来添加一个控件,然后给这个控件也添加约束,随后我们看看手机横屏的样子。如图26-5所示:

    图26-5

    然后刷新Frames,我们点击Done Varying。如图26-6所示:

    图26-6

    我们运行下看效果。竖屏效果如26-7所示:

    图26-7

    横屏效果如图26-8所示:

    图26-8
    没错,就是会消失了。因为我们当初添加绿色控件的时候,当时所选的设备,没有针对手机的横屏,也就是说手机的横屏是不会显示的。
    教给大家一个小技巧
    我们所选的设备可以通过展开的效果看到,是哪些设备支持这些约束的,也就说,你添加的约束是针对哪些设备的。点击箭头按钮可以查看,如图27-1所示: 图27-1

    然后我们可以查看到是哪些设备支持的。如图27-2所示:

    图27-2

    这样一个效果后,相信大家会对sizeClass有了新的理解。这里不再一一演示,给大家举个例子,来设置设备的组合。如图28-1:先选中ipad,然后点击Vary for Traits。

    图28-1

    选中Width,这里的设备指的就是只有这8种,ipad的横竖屏,以及iPhone7Plus的横屏。如图28-2所示:

    图28-2

    其他的设备组合,大家可以自己去发现了。

    预告

    XIB和Storyboard的类关联,XIB和Storyboard类的创建方式,以及Storyboard传值。

    有什么疑问可以在评论区留言,我会及时回复你,如果喜欢我的文章,或者帮助到你,大家可以点个赞或者添加个关注。如果你能请我喝瓶可乐或者来包小浣熊,那我就再开心不过了。感谢你对开发界的支持!

    可乐or小浣熊

    相关文章

      网友评论

      • 讨厌下雨的鱼:请问这个Vary for Traits支持的最低系统版本是多少呀
      • f7139db11dcd:我想咨询一下,,在iPhone 8 ,适配view (10,10,100,100) ,然后又在iPhone 8plus 如何适配 (100,100,50,50) ?
      • ed5f813c1894:您好 我想问下 如果是 手机 和pad 横屏 一种布局 竖屏 一种布局 就这两种布局 怎么选择 我看 有的选择 横评 和 竖屏 在一起了
      • 整个夏天:也就是可以针对4寸屏幕和4.7寸屏幕设置不同的约束了?
      • Sias_Orange:请问一下 使用sizeclass(Vary for Traits) 后 如何关联对象
      • SeanPang:你那个是布局,还有一点新改动吧,就是“不同画布之间的控件的多样化”
        虎哥最帅:@SeanPang 额额 这个还没注意到,多数的内容以开发项目会注重点 谢谢提醒
        SeanPang:@虎哥最帅 可能我表达比较含糊,比如说在你的视图中选择随便一个控件,然后在它的Attributes 检查器中选择Background属性,你会发现这个Background属性旁边有一个“+”号,它可以设置控件在不同画布中的独特样式。2016WWDC Session 222 和 Session 233有相关内容
        虎哥最帅:@SeanPang 比如说?
      • Teonardo:虎哥又在装逼了

      本文标题:iOS 10可视化编程之sizeclass(Vary for T

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