美文网首页iOS开发部落iOS开发常用iOS
xcode8使用的Trait Variations适配布局

xcode8使用的Trait Variations适配布局

作者: Lucifron | 来源:发表于2016-11-13 16:44 被阅读7776次

    升级xcode8之后,打开storyboard发现xcode7适配界面的size class被Trait Variations所取代,尽管看起来变化很大,但实际原理是一样的。

    下面通过一个简单的例子来看下如何使用Trait Variations适配
    先看效果图,类似音乐播放界面,竖屏封面在顶部,横屏封面在左侧,同时label位置也对应变化:


    1.png 2.png

    1 为竖屏添加约束

    这里就要用到新版本的选择器了,没有了原来的600*600的大方块布局,换成了可供选择的机型


    3.png

    点击右侧的Vary for Traits 会弹出选择Width还是Height,通过组合, 左边显示的设备也会变化,这里如果只选width,会发现约束会同时应用到iPhone的横竖屏,和需求不符


    4.png

    选中了Height之后(这里Width选不选中都是可以的),会发现左侧横屏的设备消失,接下来添加的约束就只会运用到竖屏界面上了

    5.png

    接下来为竖屏状态的界面添加约束,完成之后点击Done Varying按钮完成对约束的添加


    6.png

    2 为横屏添加约束

    下面的做法和上面如出一辙, 选中横屏的机型,然后Vary for Traits点击后勾选Height选项


    7.png

    然后添加约束,完成之后点击Done Varying

    8.png

    这样对iPhone的横竖屏约束就添加完成了,切换orientaion也会实时显示对应的布局,相比size class更加直观。如果同时需要适配iPad,只需要注意区分开iPad和iPhone机型就可以了

    2017-2-10 Update

    最近好多人留言有关iPad横竖屏适配的问题,这里提及一下。
    首先Trait Variations只是size class的直观表现方式,改善了原本九宫格选取过于抽象的问题,直接选机型很清晰直观,但本质未变。在iPhone上横竖屏很方便的设置了不同约束,但同样的流程放到iPad上为何就走不通了呢?

    iPhone横竖屏之所以可以方便横竖屏俩套UI是由于横竖屏的size class是不同的,竖屏状态是wC:hR 横屏下是wC:hC (w是width h是height,C是Compact R是Regular) 。而iPad横竖屏都是wR:hR, 所以在竖屏设置的约束同样会应用到横屏上。


    上图来自这这篇文章: https://makeapppie.com/2016/09/05/an-introduction-to-size-classes-for-xcode-8/

    所以iPad横竖屏布局还得监听屏幕旋转更改约束,或者在layoutSubview中修改frame了。所以就目前而言一套界面同时适配iPhone与iPad横竖屏这4种界面还是有些困难,也很少(没有?)有应用这样干,大多数应用还是单独做了HD版本,或者直接用iPhone的布局方案。

    相关文章

      网友评论

      • 萧旭:楼主,只有iPhoneX横屏是wChC,其它机型都是wRhC
      • ed5f813c1894:请问下 我手机 横竖屏适配 没问题 到ipad 就不行了
      • f65f495fe3b2:ipad横竖屏我怎么组合都是不行!教教我,手机是可以设置不同的约束
        Lucifron:@哈利噜丘丘 @ed5f813c1894 因为iPad横竖屏都是“Regular width 和 Regular Height” 只有在分屏情况下才会出现“Compact”;而iPhone横竖屏不同才可以利用这个区分约束。iPad横竖屏适配应该还得在layoutSubviews中更新frame这样思路。
        哈利噜丘丘:@不要说话666 请问iPad 这个问题你解决了没有,怎么解决的
        ed5f813c1894:我也遇到同样的问题了
      • 帅气的阿斌:一开始设置约束没有分横竖屏,那现在添加横竖屏是不是要把原来的约束全删了 再区别添加约束呢? 如果这样 好麻烦呀...
        Lucifron:@帅气的阿斌 没有分横竖屏的约束默认加在了所有布局里,假如横屏需要修改,先在“Vary for Traits" 中选中横屏的设备,然后删除不需要的约束,添加新的约束,再次点击 “Vary for Traits"后就完成了对横屏约束的更改,之前设置的不会有影响的。
      • sun_sx:请问Trait Variations能否只对某些设备设置约束 比如我想在竖屏的iPhone4s下和竖屏的iPhone5s下设置不同的约束
        Lucifron:@sun_sx 目前用sb没法细分到具体机型,写进代码又会难以维护,其实UI布局差不多的情况下设置约束前多考虑下也可以同时兼顾这俩款机型。

      本文标题:xcode8使用的Trait Variations适配布局

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