zoukankan      html  css  js  c++  java
  • iOS 8 UI布局 AutoLayout及SizeClass(二)

    一、新特性Size Class介绍

    随着iOS8系统的公布,一个全新的页面UI布局概念出现,这个新特性将颠覆包含iOS7及之前版本号的UI布局方式,这个新特性就是Size Class。

    Size Class配合Auto Layout能够解决全部(包含iPhone及iPad)iOS设备屏幕尺寸及屏幕旋转时候的UI适配问题 。


    二、为什么要使用Size Class

    直到iPhone6公布后。眼下iOS设备的屏幕尺寸已经有4种了,如图:



    iPhone6没出现之前,还能够通过代码来适配两种尺寸的UI,但iPhone6公布后。渐渐的发现曾经的方式可能真的要淘汰了,由于以后可能还要面对很多其它的屏幕尺寸。显然硬编码UI的Frame的时代要过去了。要使用Auto Layout了。

    自从iOS6開始就引入了Auto Layout。但一直没用推广使用,原因有非常多(比如:Auto Layout本身不是非常成熟、硬编码能够解决iPhone仅有两种屏幕尺寸的UI适配、iPhone项目和iPad项目分开来进行等)。

    Size Class是配合Auto Layout来使用的。让Auto Layout方式变得不那么复杂。


    三、该怎样使用Size Class

    要使用Size Class。首先要安装最新的Xcode6,新建一个Single View Application template项目,选择Main.storyboard-> View,查看Inspector属性:



    默认Size Classes就已经使用了,当然假设不想使用它也能够关掉,然后使用旧的布局方式。但假设选择使用Size Class。然后关掉Auto Layout。Xcode会弹出一个警告框:(稍后就会明确为什么!)


    选择cancel,由于接下来要使用Size Classes。


    Size Classes事实上就是将iOS设备屏幕的Size进行分类。怎样分类的呢?

    对于iOS设备(不管iPhone还是iPad)。宽度和高度都各分为3种情况:紧凑(Compact)、规则(Regular)、不论什么(Any)



    当中“不论什么”(Any)包括紧凑(Compact)、规则(Regular)类型。假设屏幕宽度用w表示。高度用h表示,那么w(Regular)/h(Regular)组合就是iPad屏幕尺寸(size)的类别(class),不管iPad横屏还是竖屏,屏幕尺寸类别都是w(Regular)/h(Regular)。上图能够非常清楚的表达。


    官网也列举了一些:

       


     


    到这里应该明确了。Size Classes是将屏幕尺寸的种类做了进一步的抽象。

    那有一个问题,分类的有什么用?该怎么用啊?

    曾经为不同的iOS设备尺寸或者同尺寸横竖屏不同适配UI,都要依据实际情况而去计算frame。

    使用Size Classes是依据当前的屏幕size类型而使用Auto Layout方式进行布局了,要摒弃之前计算frame的思路。而改用相对布局的思维去思考(实际上还是要计算frame)。

    并且Xcode6最大的突破也是这里,不在须要建立不同尺寸的storyboard了。仅仅要建立一个。然后改动其view的size就能够做各种屏幕尺寸的适配。例如以下:


    比如我要做iPad页面设计,就设置成w (Regular)/h(Regular)



    然后相同的project,又要兼容横屏的iPhone6 plus。就能够把view的size class设置成:w (Regular)/h(Compact),然后继续适配



    然后当程序跑在不同的设备上。或者设备横屏和竖屏切换。就能显示对应的UI了。


    说了这么多。还是动手实验一下吧:

    适配iPhone6,在RootViewController的view上加入一个新的view。让这个新的view不管屏幕横屏还是竖屏时候都距离其superview的边缘50点宽,而且横屏时候为绿颜色,竖屏时候为红颜色。

    1、新建项目(刚刚已经新建了一个AL8的项目,不反复步骤了)

    2、切换size class为wCompact/hRegular模式



    而且加入一个view,不用管其frame。并设置其背景色为红色



    接下来选中红色的view。然后点击Xcode顶部工具栏的Editor-Pin,然后分别加入红色view相对superview边框的约束(上下左右)



    加入约束的过程中会看到约束的线是黄颜色。表明当前的约束还不能确定view的frame。须要继续加入,当加入完4个约束后。约束线的颜色是蓝色的。表明当前约束是正确的。




    然后选中约束,设定约束的值(我们不是想让新的view距离其superview边界50点宽吗。),4个约束都要设置。



    设置完后点击下view会自己主动更新frame,应该是这种:



    3、切换size class为wRegular/hCompact模式,然后反复第二步中的设置,差别是新加入的view背景颜色设置为绿色。



    4、大功告成,用模拟器执行下吧,模拟器要选择iPhone6 plus哦!然后旋转屏幕看看是不是我们想要的效果!

    思考:把模拟器切换为iPhone6、iPhone5、iPhone4s、iPad会有什么现象!下一篇会解释!


    Demo下载 

  • 相关阅读:
    了解 DICOM 基本协议与其相关
    C# PropertyInfo 反射实体部分字段
    ref(引用参数) 和 out(输出参数) 区别
    Linq Where Expression<Func<T,bool>> 查询条件
    随笔规范
    C# 集合分析
    C# 几种常用的数据类型
    关于 C# 方法参数的理解
    打算开始写博客了
    有趣的算法、逻辑面试题
  • 原文地址:https://www.cnblogs.com/jhcelue/p/7102327.html
Copyright © 2011-2022 走看看