`
zhengjj_2009
  • 浏览: 148576 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

iOS的UI元素布局的问题

阅读更多

我花了一个晚上和一个早上的时间研究了iOSUI元素布局的问题

一、iOSUI元素布局的历程 

 

代码计算frame >> iOS6之前的autoreszing(父控件和子控件的关系)>> iOS6以后autolayout(任何控件都可以设置约束) >> sizeclass(ios8)。

 

1iOS6之前,UIView有个autoresizingMask属性:

意思是自动调整子控件与父控件中间的位置、宽高。它对应的是一个枚举的值。

enum {

   UIViewAutoresizingNone                 = 0,            ---0

   UIViewAutoresizingFlexibleLeftMargin   = 1 << 0,       ---1

   UIViewAutoresizingFlexibleWidth        = 1 << 1,       ---2

   UIViewAutoresizingFlexibleRightMargin  = 1 << 2,       ---4

   UIViewAutoresizingFlexibleTopMargin    = 1 << 3,       ---8

   UIViewAutoresizingFlexibleHeight       = 1 << 4,       ---16

   UIViewAutoresizingFlexibleBottomMargin = 1 << 5        ---32

};

 

2iOS6以后才有的AutoLayout弥补以往的autoresizing在布局方面的不足之处,同时未来面对更多尺寸适配时界面布局可以更好的适应。

AutoLayout意译为自动布局,通过各项约束条件来计算出合理的布局来达到我们的的预期和意图,将我们想象中的结果展现出来。constraint设定非常灵活,可以通过多种约束来实现一种布局。

    使用之前必须弄清楚的事情:

    1)我们要抛弃以往旧的布局方式,不再去关注ViewFrameCenterautoresizing。因为这些坐标和大小的定位都可以通过来AutoLayout完成。

    2)理解每一种Constraint的含义。否则,当你去看别人的实现的Constraint时,就会有种看天书的感觉。

    3)只要约束设定的合理,就一定能够完成我们理想中目标布局。

打开某个Xib或者StoryBoard在右侧Show in file inspector里面找到Ues Autolayout,将其选中,则Autolayout便启用成功,autoresizingMask被废弃,其所有以往的功能和特性都被Autolayout取代。

 

3sizeclass的作用:iOS8为了解决屏幕适配问题,引入了sizeclass概念,不需要判断屏幕的尺寸,也没有横屏和竖屏的概念,只有(CompactAnyRegular)的概念(storyboard界面下面有个屏幕选择器)Compact——紧凑、小、Any——任意,Regular——宽松、大

sizeclass仅仅是对屏幕进行了分类真正实现UI元素的自动布局还得使用autolayout。 在sizeclass不再有横竖屏的概念只有屏幕尺寸的概念,也不再有具体尺寸的概念只有抽象尺寸的概念;

4sizeclassautolayout的作用

sizeclass: 仅仅是对屏幕进行了分类(判断屏幕)

autolayout: 对屏幕中各种元素进行约束(位置\尺寸)。

 

 

以上就是讲了一些布局的发展历程和相关技术。问题来了,现在iOS8出来以后,但大部分程序是以iOS7开发的呢,我们要学什么呢?建议把AutoLayout的技术掌握扎实了,以下是我整理AutoLayout的入门和提高的文章

AutoLayout 使用心得1、初体验  http://lvwenhan.com/ios/430.html

AutoLayout 使用心得2、实现三等分 http://lvwenhan.com/ios/431.html

3、自定义cell并使用 Auto Layout http://lvwenhan.com/ios/441.html

4、通过 22 行代码实现拖动回弹效果http://lvwenhan.com/ios/442.html

5、自动计算UITableViewCell高度http://lvwenhan.com/ios/449.html

6、制造炫酷的下拉刷新动画 http://lvwenhan.com/ios/450.html

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics