autolayout 后,我怎么js获得页面宽高宽高

要了解autolayout 首先要知道程序视图启动顺序:
-(void)viewWillAppear:(BOOL)animated
[super viewWillAppear:animated];
NSLog(@&1&);
-(void)updateViewConstraints
[super updateViewConstraints];
NSLog(@&2&);
-(void)viewDidLayoutSubviews
//调用不止一次 跟子视图的数量有关
[super viewDidLayoutSubviews];
NSLog(@&3&);
-(void)viewDidAppear:(BOOL)animated
[super viewDidAppear:animated];
NSLog(@&4&);
}updateViewConstraints方法中进行视图上布局计算,得出各个控件的frame.但是此时并没有将这些frame赋值给各个控件。在viewDidLayoutSubviews方法中,各个控件的frame赋值已经完成,但是并不是在这个方法中赋值的。如果我们要代码添加控件和约束,别忘了先去除控件的autoresizing ,否则会报出警告,因为二者会存在约束冲突。translatesAutoresizingMaskIntoConstraints=NO 代码添加控件还应注意,控件的创建和添加应在updateViewConstraints 方法之前。否则 每次添加控件都会触发updateViewConstraints方法,导致界面会抖动,以及出现不期望的结果。当我们使用自动布局时还应注意,控件分为两种,一种是固定宽高的,另一种是不固定的依靠自身内容决定宽高的。比如 开关控件就是个固定大小的,它的大小就是那么大,不会改变。对于这种控件,我们只需要设定它的左边和上边的位置就可以了,设置好之后,这个控件还可以作为其他控件的约束参照。但是比如label 这样根据内容决定宽高的控件,虽然在有内容时候,它也可以只设置左边和上边的距离,但是它不能作为其他控件的参照了,除非锁定了它的宽高。比如 我们设定label ,距离左边父控件 20 ,距离上边父控件20.那么假如我们有另一个控件(假定为button)我们不可以设定button 距离左边这个label 20。&span style=&font-family: Arial, Helvetica, sans-&&自动布局中大多数控件都是好设定的,但是比较难搞的时scrollview 。因为它是靠自身内容的大小来决定它的大小的。比如,我们设定了scrollview
距离左上下右的距离都是20 ,那么它会提示警告。解决的办法之一就是在scrollView内部再添加一个容器view,将这个view设定为与scrollview 完全贴近。然后将这个view的大小改为我们所需要的contentView的大小。最后再这个view中添加控件即可实现滚动。&/span&总体来说自动布局很好地解决了屏幕适配 ,尤其是横竖屏切换的问题。大大简化了我们的计算代码,但是我们又有多少应用是同时支持横竖屏的呢?而且自动布局使我们界面的动画及控件的动态创建都收到了极大的影响,尽管这些影响都能解决,但是还是不如计算frame方便。而且自动布局尽管引入了vfl 语言简化代码,但是约束设置错误的话真的是很难查,如果我们需要使用动画的话,需要将约束设置为属性。设置成属性的话,不如计算frame方便。如果你数学不是很差的话,建议你还是使用计算frame 来布局吧&/span&
本文已收录于以下专栏:
相关文章推荐
一、相关注意事项
1. 使用范围:AutoLayout 定义一个视图和另一个视图之间的位置关系,这两个视图可以完全没有关系。
2. AutoLayout自动布局作用原理:
自动布局的核心就是约束。约束...
他的最新文章
讲师:姜飞俊
讲师:汪木铃
您举报文章:
举报原因:
原文地址:
原因补充:
(最多只允许输入30个字)标签:至少1个,最多5个
这篇不是autolayout教程,只是autolayout动员文章和经验之谈,在本文第五节友情链接和推荐中,我将附上足够大家熟练使用autolayout的教程。这篇文章两个月前就想写下来,但因为一直工作较多,没有时间来完成。今天终于狠下心,丢下代码不写,来完成他吧!
一、别和我提Autolayout,我想死!!
从iOS6/xcode4开始,苹果开始提供了autolayout——一种对不同屏幕尺寸有更好兼容的自动布局机制,但我相信大多数人在刚接触autolayout时,一定和我一样,几乎快被其折磨致死!
autolayout因为布局思路与传统frame有所不同,国内关于autolayout的教程有过少,且autolayout在刚上手时灵活性不易掌控,导致大家更多选择了放弃。
二、为啥我要用autolayout?
随着3.5寸/4寸iPhone在市面同时使用越来越多,以及即将上市的iPhone6、iPhone6 Plus,不同尺寸、不同分辨率的iOS设备将会越来越多,使用传统frame布局的工作量必将越来越大;加上苹果发出的信号,使用autolayout势在必行。
好了,我该来表扬表扬autolayout了,它到底能解决什么问题,给我们带来哪些好处?1)你基本上可以不用考虑3.5寸和4寸以及即将上市的x.x寸屏幕不同分辨率的问题,你终于可以不用在viewDidLoad方法里判断不同分辨率下,不同控件应该放在哪里,或者针对不同分辨率写不同的storyboard和xib;
2)你可以抛弃那些根据不同文字来计算tableViewCell、UILabel高度的代码了,因为autolayout会帮你自动计算好;
3)如果你的布局在横屏竖屏下变化不是特别大,你不用再为横着竖着写两套代码或者写两个storyboard/xib了;
4)对于即将上市的4.7寸和5.5寸iPhone,你基本上能很快甚至不用动一行代码就完成他们的自适应屏幕布局,不用每次来了新分辨率,你只能say f*ck,然后改两个通宵。
再看看苹果的态度,默认就是选择了使用autolayout。虽然我现在仍有时会骂autolayout,但我还是会坚决地选择走上这条道路。
三、Autolayout之折腾二三事
刚刚表扬完autolayout,那我得为和我一样,愿意选择走上这条道的同志们提点醒了,你究竟要做好哪些折腾的准备。
3.1.布局思维的转变
传统布局思路中,一个view在哪里有多大,那就写清楚它的坐标位置和宽高就定了,平时用CGRect和CGPoint这两种模型就足够了,而且它一定非常听你的话,写的是多少,它绝对就是多少;但是autolayout的思路却变化了,或者说改进了,它囊括了传统frame布局思路,除了可以告诉view的坐标和宽高,它更提供了一种相对的概念,比如:
1)view相对于屏幕视图左边5点,右边10点,上面15点,下面20点,如果屏幕的长宽比例发生了改变(比如从3.5寸的320:480变成了4寸的320:568,或者从横屏切换到了竖屏),view仍然会随着屏幕的比例而拉伸改变,仍然保持离屏幕视图左边5点,右边10点,上面15点,下面20点;
2)view1和view2之间相距10点,当屏幕尺寸发生改变或者旋转时,他俩仍然可以通过改变自身的尺寸或位置改变来保证它们中间就是相距10点;
所以,使用autolayout的第一步是你需要考虑它相对于superView或者brotherView的上下左右的距离,改变自己布局的思维。
3.2.使用autolayout可能会经常得到自己不想看到的样子,而且你改变frame还没用
frame时代,是你写的多少位置点就是多少位置点,view不会被自动的拉伸或者改变位置,但是autolayout中的view却会根据屏幕长宽比或者其他view的改变而改变,你经常就会看到被自动布局成了不是你想的样子,这也是太多人被折磨的原因。只要你考虑的相对的位置不正确,它真的就可能会乱掉。
3.3.autolayout的VFL(Visual Format Language)语法初看起来真蛋疼
好吧,既然使用了autolayout,使用frame来改变位置不起作用了,那我也用代码来完成autolayout总行了吧。但是,让我选一段最普通的VFL代码给你看看:
NSString *vfl = @"V:|-5-[_view]-10-[_imageView(20)]-10-[_backBtn]-5-|";
纳尼?!这是什么地干活?!我又要付出学习成本了啊!!!其实这段话就是说,在垂直方向从上到下,view离父视图5点,imageView距离view 10点,同时imageView是20点高,backBtn离imageView底部10点,距离父视图底部5点。
3.4.手动Constraint书写,那个长长长啊~~
当然,你还可以一个一个的写布局约束Constraint,就和frame分别指定origin和size类似,但是却像这样:
[self.view addConstraint: [NSLayoutConstraint constraintWithItem:blueView
attribute:NSLayoutAttributeLeft
relatedBy:NSLayoutRelationEqual
toItem:redView
attribute:NSLayoutAttributeLeft
multiplier:1
constant:0]];
而上文中的“view离父视图5点,imageView距离view 10点,同时imageView是20点高,backBtn离imageView底部10点,距离父视图底部5点”每一个逗号短句都是像这样的一个constraint。
四、你是不是已经准备放弃了?NO!说好的爱上Autolayout呢!
写到这里,我忽然觉得我是在黑autolayout了,不,看我的题目,我是真的已经爱上使用autolayout了。就让我来说说应该怎么使用autolayout。
4.1.autolayout一般应用步骤和最适宜场景
当你的页面不会变更整体布局和设计,只有在不同屏幕尺寸、不同文字和内容下有适应性的变化,那这种情况使用autolayout就再适宜不过了。不会在像frame的时代,苦逼的要为不同屏幕尺寸计算各自的位置点坐标和大小了。通常使用xcode-&Editor-&Pin/Align菜单为视图添加约束即可。一般通过InterfaceBuilder确定控件位置,当存在需要自动被拉伸、适应或位移的控件时就要添加constraint;具体使用教程可参考
4.2.你的视图有比较简单的布局改变
当需要产生比较简单动画或动态添加视图时,autolayout还算好用。通常有两种方式:
1.在Controller中像声明UIView的IBOutlet一样,声明一个Constraint属性,例如XXViewTopConstraint.当进行布局变化时,直接修改XXViewTopConstraint的constant属性,即可改变其相对位置。然后再来一句
[self.view layoutIfNeeded];
2.通过Constraint的优先级(Priority)来变更视图相对布局。如过是两条同样描述距离superview上边缘距离的约束,如果这两个约束的数值不同,但是优先级一样,则autolayout将报布局冲突,将会丢弃某一条约束(这时可能就会丢弃你想要的约束,而恰恰保留了你不想看到的布局)。所以,当我们发生布局变化时,无法像frame的绝对定位,直接改变,并且只有唯一的位置信息。那么,我们该怎么处理这种布局冲突呢?那就是让描述相同但数值不同的这两个约束采用不同的优先级。autolayout默认将使用数值较大的优先级约束。
通常1就能搞定大部分问题,2的情况较少,但有时有奇效!
4.3.你的视图有较为复杂的动画效果或者较大的布局改变
虽然autolayout可以完成所有的布局问题,但它仍然在某些情况下是不方便的,就像4.2节描述的,你的每一行代码只能改变一个constraint,但要知道每个视图通常需要4个甚至更多constraint来约束,所以一旦有较为复杂的布局改变和动画,那你可能需要写好几行,但是frame一行代码就可以搞定。
并且,好几行代码还不是最要命的,要命的是你可能还需要给这每一个约束声明IBOutlet,或者通过view的constraints属性,从constraints数组里判断出对应方向、大小的约束,再改值,真心好折腾!
所以,当你需要非常频繁的变更控件布局,并且变更的位置是不确定的(例如通过手势拖动一个视图到屏幕任意位置),那么,我建议此视图不要使用autolayout,而使用frame的所写即所得的绝对定位方式更好,你只需要充分考虑各种屏幕适配,并为其计算适合的坐标点即可。同时,我还建议这种频繁变更的视图甚至不要InterfaceBuilder来绘制,最好直接代码书写,因为一旦你勾选了autolayout,那么storyboard中的所有视图都将autolayout。当你需要变更视图布局时,则必须使用view.translatesAutoresizingMaskIntoConstraints = NO;superview.translatesAutoresizingMaskIntoConstraints = NO;
来避免为你的视图新增默认autolayout约束。
五、友情链接和推荐
这个教程看完基本上可以比较熟悉的使用autolayout,再结合本文的一些经验,应该能够解决大部分问题了。而该文的教程2没有中文翻译,只有英文原版:
这篇文章以较简单的描述囊括了VFL使用方法和常用的autolayout技巧。足够大家使用了。
这篇文章精简的囊括了autolayout的代码操作方式。
作者JohnLui囊括了autolayout最常用的使用场景,描述清晰详细,使用swift实现,实用性超强。
如果在通读了本文和以上链接后还无法灵活运用autolayout,欢迎给我留言,大家一起讨论!同时欢迎关注我的博客和微博
4 收藏&&|&&48
你可能感兴趣的文章
3 收藏,506
8 收藏,1.9k
本作品采用 署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可
推荐一个系列教程:Auto Layout 使用心得
推荐一个系列教程:Auto Layout 使用心得 /ios/430.html
作者,写的挺棒的哦!而且还是swift的
作者,写的挺棒的哦!而且还是swift的
哈哈,谢谢~
哈哈,谢谢~
我把你的教程也加到我文章里的:五、友情链接和推荐,可以吗?
我把你的教程也加到我文章里的:五、友情链接和推荐,可以吗?
行啊,多谢~
行啊,多谢~
已加。以后多多交流 :)
已加。以后多多交流 :)
支持作者,这里有个AutoLayout开源项目:基于系统API封装,用法比较简单。
支持作者,这里有个AutoLayout开源项目:/linjinzhu/AutoLayout
基于系统API封装,用法比较简单。
分享到微博?
你好!看起来你挺喜欢这个内容,但是你还没有注册帐号。 当你创建了帐号,我们能准确地追踪你关注的问题,在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助,记得点赞 (????)? 表示感谢。
明天提醒我
我要该,理由是:Autolayout - 简书
Autolayout
在以前的iOS程序中,经常编写大量的坐标计算代码,为了保证在3.5 inch和4.0 inch屏幕上都能有完美的UI界面效果,有时还需要分别为2种屏幕编写不同的坐标计算代码,即传说中的“屏幕适配”。
那什么是Autolayout呢?Autolayout是一种“自动布局”技术,专门用来布局UI界面的。Autolayout自iOS6开始引入,由于Xcode4的不给力,当时并没有得到很大推广。自iOS7(Xcode5)开始,Autolayout的开发效率得到很大的提升。苹果官方也推荐开发者尽量使Autolayout来布局UI界面,它能很轻松地解决屏幕适配的问题。
在Autolayout之前,有Autoresizing可以作屏幕适配,但局限性较大,有些任务根本无法完成,相比之下,Autolayout的功能比Autoresizing强大很多。
如何使用呢?Autolayout有2个核心概念:参照和约束。它通过内定的Constraint(约束)和各项条件来计算出合理的布局.而这个合理的布局,符合我们的的预期和意图。将我们想象中的结果展现出来。Constraint的设定非常灵活,实现一种布局的方法可以通过多Constraint来完成.以下几点是我们在开始使用之前必须弄清楚的事情:
我们要抛弃以往旧的布局方式不再去关注ViewFrame,center,和autoresizing,因为这些坐标和大小的定位都可以通过来Auto Layout完成。
理解每一种Constraint的含义,否则,当你去看别人的实现的Constraint时,就会有种看天书的感觉。
按意图设计,一切按我们理想中的效果去布局,只要约束设定的合理,就一定能够完成目标布局。
二、用xib或者storyboard来实现Autolayout
先从Interface Builder开始吧. 打开某个xib或者storyboard,在右侧Show in file inspector里面找到Ues Autolayout,将其勾选。如下图:
自此,Autolayout便启用成功,autoresizingMask被废弃.其所有以往的功能和特性都被Autolayout取代.注意:现在我们定位控件位置的方式,不再像以前一样,计算好每一个控件具体的位置,x是多少,y是多少。而是思考,这个控件离左边是相隔多少距离,或者离顶部或底部相隔多少距离。而有些规则性的事情还是类似的,比如我们定位一个控制的位置,一定要有x,y两个坐标点同时有值,少一个都不能正常显示。同样Autolayout在创建约束时也一样,在思考完离顶部距离以后,还需要思考离顶部距离,否则控件的显示位置一样无法正常显示.换言之,要让Autolayout计算出合理的位置,需要保证水平距离和垂直距离同时存在. 否则IDE,都会给出警告,提示这样的布局Ambiguous Layout(模凌两可)
Interface Builder提供Autolayout的功能:
2.1如下图:
详解:(选择两个view时可设置)Leading Edges:左边对齐Trailing Edges:右边对齐Top Edges:顶部对齐Bottom Edges:底部对齐Horizontal Centers:水平居中Vertical Centers:垂直居中Baselines:文本底标线对齐
(单选择一个view时可设置)Horizontal Center in Container:对于父view的水平居中Vertical Center in Container:对于父view的垂直居中
2.2如下图:
(选择框)None:添加完约束后不进行任何操作,Items of New Constraints:在添加约束后重新摆放约束涉及到的viewAll Frames in Container:在添加约束后重新摆放所有这个容器内的view
2.3如下图:
详解:上面的十字是"与最近的邻居的约束", 填上数字, 单击虚线变成实线就是要添加这个约束.这里的"邻居"是将一个包含子view的父view看做一个装了一堆积木的盒子, 积木相对于盒子的边框和其他的积木都作为"邻居"。
(定义的宽高数据约束) Widths:宽度指定, Height:高度指定,
(定义多个view之间的宽高约束)Equal Widths:宽度相同,Equal Heights:高度相同,
(定义多个view之间的宽高约束)Align:多个view之间的对齐约束
详解:(上半部分菜单的操作对象是当前选中的view, 下半部分的操作对象是选中view内的view)Update Frames:刷新frame(使用当前已经设置的所有约束),Update Constraints:刷新约束(根据当前的约束和frame, 更新约束的constant值),Add Missing Constraints:添加缺失的约束(自动添加系统认为你应该添加却忘记添加的约束, 测试中经常搞出冲突)Reset to Suggested Constraints:重置为系统建议的约束(清理系统认为重复/冲突的约束, 测试中经常搞出问题)Clear Constraints:清理所有约束(删除对象上绑定的所有约束)
三、代码创建AutoLayout
代码创建的约束有两种方式:1:常规约束,写法非常冗长,但能实现所有的约束方式以及非常特殊的约束方式,代码如下:
// 添加两个控件到父控件上添加蓝色View
UIView *blueView = [[UIView alloc] init];
blueView.backgroundColor = [UIColor blueColor];
[self.view addSubview:blueView];
self.blueView = blueV
// 添加红色View
UIView *redView = [[UIView alloc] init];
redView.backgroundColor = [UIColor redColor];
[self.view addSubview:redView];
// 禁用auturezing
blueView.translatesAutoresizingMaskIntoConstraints = NO;
//注意, 这里设置父控件无效,要设置自己的translatesAutoresizingMaskIntoConstraints属性为NO。
redView.translatesAutoresizingMaskIntoConstraints = NO;
// 添加约束
// 添加蓝色VIew距离父控件左边的距离固定为20
NSLayoutConstraint *leftCos = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:20];
[self.view addConstraint:leftCos];
// 红色的顶部和蓝色的底部距离固定 Y
NSLayoutConstraint *redTopCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:20];
[self.view addConstraint:redTopCos];
如果是从代码层面开始使用Autolayout,需要对使用的View的translatesAutoresizingMaskIntoConstraints的属性设置为NO.
添加约束之前一定要将子视图优先addSubview到父视图中,否则在添加约束时会产生编译器警告.而我们在理解的时候,可以通过这种方式来理解.Item == first item 需要设置约束的控件attribute == 需要设置的约束relatedBy == relation
等于toItem == second item
被参照的控件attribute == 需要设置的约束multiplier == multiplier
乘以constant = constant
2.可视化格式语言约束(VFL)所谓可视化格式语言约束,是一种很直观的理解方式,当然,前提是你已经熟练理解这套语言的规则.VFL是苹果公司为了简化Autolayout的编码而推出的抽象语言。通过可视化语言可以一次性创建多个约束. 这对于第一次方式来说,是相当方面和容易理解的.但可视化语言不是所有约束都能满足.我们可以用正则表达式的学习方式来学习这项可视化格式语言.举例代码如下:
// 添加两个控件到父控件上
// 添加蓝色View
UIView *blueView = [[UIView alloc] init];
blueView.backgroundColor = [UIColor blueColor];
[self.view addSubview:blueView];
// 添加红色View
UIView *redView = [[UIView alloc] init];
redView.backgroundColor = [UIColor redColor];
[self.view addSubview:redView];
// 禁用Autoresizing
blueView.translatesAutoresizingMaskIntoConstraints = NO;
redView.translatesAutoresizingMaskIntoConstraints = NO;
// 添加约束
// 设置蓝色View距离左边和右边有20的的间距 X 和 宽度
NSArray *blueViewH = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[blueView]-20-|" options:0 metrics:nil views:@{@"blueView" : blueView}];
[self.view addConstraints:blueViewH];
// 设置蓝色View距离顶部有20的间距, 并且高度等于50 Y 和高度
// 设置红色View距离蓝色底部有20的间距, 并且红色View的高度等于蓝色View的高度 Y 和高度
// 并且设置红色和蓝色右对齐
NSArray *blueViewV = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[blueView(50)]-20-[redView(==blueView)]" options:NSLayoutFormatAlignAllRight metrics:nil views:@{@"blueView" : blueView, @"redView": redView}];
[self.view addConstraints:blueViewV];
NSLayoutConstraint *redVeiwW = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0];
[self.view addConstraint:redVeiwW];
注意: 在VFL语句中, 是不支持乘除法
H:[cancelButton(72)]-12-[acceptButton(50)]canelButton宽72,acceptButton宽50,它们之间间距12
H:[wideView(&=60@700)]wideView宽度大于等于60point,该约束条件优先级为700(优先级最大值为1000,优先级越高的约束越先被满足)
V:[redBox][yellowBox(==redBox)]竖直方向上,先有一个redBox,其下方紧接一个高度等于redBox高度的yellowBox
H:|-10-[Find]-[FindNext]-[FindField(&=20)]-|水平方向上,Find距离父view左边缘默认间隔宽度,之后是FindNext距离Find间隔默认宽度;再之后是宽度不小于20的FindField,它和FindNext以及父view右边缘的间距都是默认宽度。(竖线“|” 表示superview的边缘)
四、VFL的使用
使用VFL来创建约束数组
+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)
详解:lFormat: VFL语句options: 对齐方式metrics:VFL语句中用到的变量值views:VFL语句中用到的控件metrics:可以把VFL语句中的常量,抽取成为变量。由于是个字典,要包装成对象类型
五、AutoLayout实现动画
1.约束也可以在storyboard里面进行连线,只需要修改控件的约束,也能实现动画。
[UIView animateWithDuration:1.0 animations:^{
[添加了约束的view layoutIfNeeded];
可以在UIView中让多个约束一起执行动画如果控件有默认的高度,只需要设置autoLayout的X值和Y值,autoLayout会自动计算出控件的宽高。
六、Autolayout的警告与错误
1.警告控件的frame不匹配所添加的约束,比如约束控件的宽度为100,而控件现在的宽度是110.
2.错误(1).缺乏必要的约束,只约束了宽度和高度,没有约束具体的位置。(2).两个约束冲突,比如1个约束控件的宽度为100,一个约束控件的宽度为110
七、特殊情况
UILabelUILabel不用约束宽度,会自动根据文字多少自动改变宽度——不用添加宽度约束(不会报错)
UISearchbarsearchbar添加到navigationBar的titleView中时,会自动伸长到整个navigationBar,对其添加的任何约束和frame属性都没有用。解决方法:添加searchBar到另外一个普通的view中再设置为titleView
一路上的收获。。。9763人阅读
IOS App(19)
在新项目中使用Xib有一段时间了,遇到了不少的问题,也收获了很多的奇迹,最让我惊叹的就是使用熟练之后的界面开发速度,完胜Android那种XML方式的半吊子可视化界面开发工具。这里把使用心得汇总一下,希望能帮到大家。一、Xib的使用深度StoryBoard不是我的菜,毕竟VC之间的逻辑关系和跳转都比较复杂,甚至有时还得实现自己的栈管理,我更喜欢只是纯页面开发的时候使用可视化工具,就像Android的XML一样。感谢苹果,XCode的可视化工具比Android那个半吊子强太多了。Xib中页面元素与VC中的事件关联我通常自己来通过addTarget的方式手动做,一方面是因为Android中这么做习惯了,另一方面事件注册的可变性太大,VC下面有时候还会分成更小单元粒度的Controller,就像Android中的Fragment一样。二、Xib的基本原则1、怎么样唯一确定一个View的布局?只要直接或者间接确定x,y,width,height这四个值就可以了。这就是Xib的中心思想。确定x和y的方式有很多种,这里举几个常见的例子:指定View在Parent中横向居中就是确定x的值,竖向居中则是确定y的值。指定相对于上方或下方View的距离就是确定View的y值,相对于左方或右方View的距离,就是确定View的x值。同时指定View距离其左方和右方View的距离,就可以同时确定x和width,而同时指定View距离其上方和下方的View的距离,就可以同时确定y和height。2、支持定制对于Xib中的一个View,可以指定其Custome类,这样就把具体实现交给继承了UIView的那个类了。这样,就可以对系统提供的任何View进行扩展,再通过Xib布局在页面上。3、代码与Xib混排Xib中可以包含定制的View,而代码生成的View中也可以添加通过Xib而Load进内存的View。4、Xib中View的确切布局时机在Xib中做页面布局时,只是指定了一系列的Constraints,并由IB对这些Contraints进行预览。那这些页面中的View到底是在什么时间点布局呢?准确地说,是viewWillAppear之后和viewDidAppear之前。在这之前,Xib文件的根View默认是600*600的,并没有根据Constraints在不同的Size Class下的表现进行layout计算。也就是说,想得到布局完成的View树并进行查看或操作,至少要到viewDidAppear中。补充于在一个使用AutoLayout布局的ALView中,使用代码增加了一些计算好frame的subView,等效果出来后,subView的frame可能会被ALView改变,因此,有必要把ALView的AutoResizesSubViews设置为NO。对于通过loadNamedXib加载到内存中的View,必须手动指定其frame中的width和height,然后再通过addSubView的方式添加到现有的View树中,使用Xib表示的View在布局时,是以600*600的默认宽高进行的。5、根View宽高不确定我们在使用xib要时刻牢记。对于做过Android的同学来说,可以简单地把xib的根View理解成一个RelativeLayout。xib的根View的宽高是在真正程序运行到布局时才会参考当前的Size Class确定下来。所以,除非特别必要,不要使用绝对值来确定x,y,width,height的值。6、Size Class根据当前设备横屏、竖屏,还是手机、Pad,Xib把它们归为不同的Size Class,我们可以通过切换Size Class,让View在不同Size Class下展现不同的特性。比如,手机横屏和竖屏下,用户头像的位置分别位于屏幕上方和屏幕左方。三、工具可以看看这篇文章“”,通过这个调试工具可以看到View的层级关系、边界等很详细的信息。四、动态位置调整这方面有一个很经典的场景,就是在经典的登录界面中,页面中主要的View从上往下依次是用户名输入框、密码输入框、校验码输入框、登录按钮。默认情况是没有校验码输入框的,这个时候登录按钮要紧挨密码输入框,一旦用户的登录触发安全策略,导致校验码输入框弹出来之后,登录按钮就要下移,给校验码输入框腾出位置来。这在Android中可以使用Vertical的LinearLayout很轻松地布局出来,但在IOS中是没有现成的View可以做到动态调整子View位置的。只能使用稍微笨一点儿的方式,在代码中找到对应的Constraints,修改其Constant值。这个时候需要注意,如果明确指定一个View的width和height等Constraints,那这个Constraints是属于这个View的。决定View的x、y,或间接决定width、height的其它Constraints都是在View的superView中的。不要找错了地方。五、动态宽高有的时候,我们可能需要根据View中的内容来动态调用一个View的宽高,如文章的Title,字数越多,Label越宽。这种情况就需要使用content hugging和content compression resistance这两个属性了。其详细的解释可以看看官方文档。六、多练这个是最高原则。我在新项目中除了少数几个很特殊的控件自己实现之外,99%的布局都使用Xib来完成,一开始不太熟悉稍微有些慢,等熟悉了之后,开发速度非常快。如今屏幕尺寸这么多,这AutoLayout比手工通过代码获取屏幕宽高计算View布局的方式快了岂止一个数量级。多练习,会出现奇迹的。
&&相关文章推荐
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
访问:1596289次
积分:14956
积分:14956
排名:第795名
原创:167篇
译文:37篇
评论:450条
农场老马,与CSDN博客同步更新
基于ffmpeg的mp4视频文件压缩工具
(window.slotbydup = window.slotbydup || []).push({
id: '4740881',
container: s,
size: '200,200',
display: 'inlay-fix'

我要回帖

更多关于 js获得页面宽高 的文章

 

随机推荐