iOS8 storyboard中Use A…

什么是Size Classes
      iOS8 中加入了一个新的特性-Size Classes,可以对于任何设备来说,界面的宽、高都只分了两种:正常、紧凑。这样就方便我们iOS程序猿们无视设备的具体尺寸,而是针对这两类和它们的组合进行适配。这样不论在设计时还是在代码上,我们都可以不再受限于具体的尺寸,而是变成遵循尺寸的视觉来进行适配。
      当然iOS8快出来1年了,大家都已经很熟悉了Size Classes了,再此我主要记录下w:Any h:Any下,iPhone、iPad的横竖屏的问题。
下图为这篇文章准备的4各Button,One、Two、Three、Four。
      最终目的:想让这4个Button能够在iPhone、iPad的横竖屏的条件下,根据屏幕大小来显示。
      步骤:
                1、思想:确定【One】相对于屏幕的top、Leading约束。
                操作:选中【One】,点击右下角 键:如下图:
            2、思想:确定【Two】相对于屏幕的top、Trailing约束,而这里我的【Two】的top和【One】的top一样的,所以直接两个的Top一样高就行了。
                  操作:1)、选中【Two】鼠标右键拖动到【One】上,选中Top就OK,如下图:
                            2)、选中【Two】像第一步一样,点击右下角 ,设置Trailing为20。如下图:
          3、思想:确定【One】、【Two】之间的Horizontal Spacing约束。  
                  操作:选中【One】、【Two】任意一个,右键拖动到未中的那个,我这里选中【One】拖约束到【Two】上,然后点击Horizontal Spacing。如下图:
            4、思想:设置【One】、【Two】的宽度等宽、设置【Two】的Bottom等于【One】。
                  操作:1)、如步骤3,设置Equal Widths,如下图:
                            2)、如步骤3,设置Bottom。如下图:
            5、思想:设置【Three】的Leading等于【One】的Leading、设置他们俩之间的距离、设置他们俩的Top距离,设置【Three】和【Four】水平距离,设置【Three】到屏幕底部的距离。
                  操作:1)、选中【Three】右键拉约束线到【One】,然后选中Left、Vertical Spacing、Top,如下图:
                         2)、 选中【Three】右键拉约束线到【Four】,然后选中 Horizontal  Spacing,如下图:
                            3)、选中【Three】点击右下角 设置Bottom如下图:
                            4)、选中【Three】右键拉线到【Three】自己身上,设置起Width。如下图:
            6、思想:设置【Four】到屏幕右边的距离、到底部距离,和Top距离。
                  操作:1)、选中【Four】点击右下角 设置右边、底部距离,如下图:
                            2)、选中【Four】右键拉线到【Two】选择Right,如下图:
                      3)、选中【Four】右键拉线到【Three】选择top,如下图:
到这里,xcode不会包警告和错误了,是我们设置成功了吗?我们运行看看效果。
     
为什么横屏的【Four】不见了呢?回到Storyboard,看看【Four】到屏幕底部的距离这个约束,如下图:
从约束条件来看,【Four】到底部的距离为176。那为什么在竖屏下能够正常显示、在横屏下就不能显示呢?原因应该是176超出了范围了,简单的说横屏下,同样的高度情况下,Four底部到屏幕底部的距离小于176。这样的话,我们就去这个约束条件下,修改一个属性,把Equal换成Less than or Equal。如下图:
现在再来看看效果:
现在成功跟随屏幕来显示高宽了。现在这是在iPhone6上面,那在iPhone4、5、6+上呢?
      客官,表急,请看下图:
可能标题党们可能要问了,说好的iPad的呢?嘿嘿,有准备,请看下图:
到这里,最初的目的已经达到了,当然我这个也纯粹是为了目的而做的。很多开发过程中,可能用不到这个自适应改变view的大小的,特别是【Four】View。很多横屏了就会改变相应的展示位置,如果想要这种效果的,
请移步:

转载请注明出处。

原问地址:​http://blog.sina.com.cn/s/blog_4aacd7af0102vw1j.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值