iOS使用autolayout和sizeclass 解决适配问题(一) - 巴中市万纵网络科技有限公司-新闻中心
雷竞技推荐码raybet网投雷竞技平台风控有限公司
首页 | 联系方式 | 加入收藏 | 设为首页 | 手机站
  • 网站首页
  • 公司简介
  • 产品展示
  • 新闻中心
  • 常见问题
  • 联系我们
  • 产品目录

    联系方式

    联系人:业务部
    电话: 00126-83979
    邮箱:service@q235cwfgg.com

    当前位置:首页 >> 新闻中心 >> 正文

    iOS使用autolayout和sizeclass 解决适配问题(一)

    摘要:iOS使用autolayout和sizeclass 解决适配问题(一)

    一。为啥使用autolayout?使用 autolayout 有什么好处?

    随着iPhone的种类不断增多,不同尺寸、不同分辨率的iOS设备将会越来越多,使用传统frame布局的工作量必将越来越大;加上苹果发出的信号,使用autolayout势在必行。

    好了,那么autolayout了,它到底能解决什么问题,给我们带来哪些好处?
    1)你基本上可以不用考虑苹果设备的各个屏幕不同分辨率的问题,你终于可以不用在viewDidLoad方法里判断不同分辨率下,不同控件应该放在哪里,或者针对不同分辨率写不同的storyboard和xib;
    2)你可以抛弃那些根据不同文字来计算tableViewCell、UILabel高度的代码了,因为autolayout会帮你自动计算好;
    3)如果你的布局在横屏竖屏下变化不是特别大,你不用再为横着竖着写两套代码或者写两个storyboard/xib了;
    4)对于市面上的4.7寸和5.5寸iPhone或者其他尺寸的iPhone或者苹果系列的设备,你基本上能很快甚至不用动一行代码就完成他们的自适应屏幕布局,不用每次来了新分辨率,你只能say f*ck,然后改两个通宵。

    再看看苹果的态度,默认就是选择了使用autolayout。虽然我现在仍有时会骂autolayout,但我还是会坚决地选择走上这条道路。

    二。 autolayout 和sizeclass 两者 有什么区别吗?

    首先说autolayout ,如果你选择了autolayout 而没有选择sizeclass,那么你默认的所加的约束就是在iPhone或者ipad 上运行。具体操作见下图:


    xcode 在我们创建工程的时候已经默认的为我们选了 autolayout 和sizeclass ,由此可见苹果是希望我们用两者结合 来开发应用的。

    我们不使用sizeclass 的时候 显示的是这个样子的:


    那么使用了autolayout 和sizeclass 的是么状态呢?



    ok,我们可以看到上面就是采用了autolayout和sizeclass 之后的布局了。主要分为9种:宽(正常,任意, 紧凑),高(正常,任意, 紧凑)3x3共9种Size,每种Size都可以设置特定的一套布局,如果不特殊指定,默认是在(宽任意,高任意)模式下设置,且其他8种布局继承它。因为Size Class在将屏幕分类后,执行布局的还是Autolayout。

    假如iPad和iPhone的布局有差异,老式写法是分成ipad.storyboard和iphone.storyboard来分别写,这本身就是个bug,因为大部分控件其实并没差别,新Size Class解决这个问题了没?答案是肯定的,XIB中某个View的出现与否,约束的出现与否以及约束的值都是可以根据Size Class单独设置的,也就是说现在一个storyboard是9合1的。比如有个Label,我只希望它出现在长宽紧缩的屏幕上时(脑补iwatch),这么勾选下就可以(出现或不出现被命名为”Installed”,这个选项可以从9个Size Class中多选。

    通过下图可以清楚的看到这九种不同的类型 对应 的设备。



    如上图可以看出我们installed 之后 ,我们的label 正常显示 ,左边视图的层级中label显示的是黑色。表示在当前选择的any(任何设备) 上正常显示。

    当我们取消勾选installed 之后 会看到左边视图层级中label显为灰色。 然后storybord 上面就不显示了。其实这个显示与否,只是说我们在特定的设备上显示或者隐藏。


    通过上面的例子也许你已经知道我们为什么要用sizeclass了。sizeclass的好处也是显而易见的。

    三。 我理解的autolayout

    废话不多说了,通过自己使用autolayout 总结自己理解的autolayout。仅仅是个人理解如有雷同,纯属巧合。

    这里姑且把我们的手机或者模拟器比作一个竖直方向放置的的黑板,我们的控件就相当于放在黑板上的一件东西,它可以用绳子固定在上面。我所理解的加约束就是:有一个物体悬空放到黑板上与黑板接触然后用绳子能固定住,绳子不能用多也不能用少。用得多了浪费并且还可能会产生冲突。用得少了,不能正确的固定位置然后还可能导致在你移动的时候可能会找不到位置(就是说这个物体在你的约束下不见了)。 说这么多还不如实战。下面通过一些例子来说明约束的可操作性和便捷。

    四。实践

    1.ok ,下面实现一个简单的就是一个label 在屏幕在正中间。

    我们需要加的约束是让这个label 在x轴中心 在y轴中心。

    约束见下图


    1).其中 Horizonetal Center in Controller 指的是“在水平方向居中 相对于它的父视图。后面的数字表示是偏离中心多少。

    2).下面的Vertical Center in Container 指的是 在竖直方向居中 同样相对于父视图。 后面的数字同样表示是偏离中心多少。

    我们在加完约束之后会发现出现了黄色的tips。这些黄色的tips 是怎么出现的呢。 看下图:


    1).其中 update Frame 表示的是我们根据约束来更新frame。

    2). update constraints 就是我们根据当前的frame 来更新约束。

    3).第三个reset to suggested constraints 表示是清空当前约束,然后重新设置成系统为我们建议的约束(这个约束不建议使用)

    4).下面的apply to all views in container 表示的是 把所选约束或者frame的改变应用到容器中的所有view中。

    这里选择第一个 因为约束已经加好,只需要更新下frame就好。


    补充说明一下:为什么要更新frame:因为我们在拖控件的时候不可能一下子就拖到我们想要的位置。这就需要我们先加好约束,然后根据约束来更新frame。

    我们使用了sizeclass 那我们来看下效果。 在iPhone 和ipad 上的效果


    右边是6p

    下面是ipad


    通过上面三个图 我们可以看出我们使用一套界面就可以对iphone ipad 进行适配。要做真正的适配这些是还不够的还需要图片的配置。因为不同设备下对图片对分辨率的要求是不一样的。

    2。第二弹

    这个例子实现的效果:两个视图 等高等宽间距固定(80)。并且视图距离上边界30 距离左边界/右边界 20.

    下面看下效果图: