AutoLayout技术选型和应用
前言:这篇文章是笔者在项目中对布局技术进行技术选型和应用的相关介绍,供大家参考。
&& [self.buttonscount] > 0)
{
UIButton *button = self.buttons[0];
[button autoPinEdgesToSuperviewEdges];
}
else
{
[self.buttonsautoMatchViewsDimension:ALDimensionWidth];
[[self.buttonsfirstObject] autoPinEdgeToSuperviewEdge:ALEdgeLeft];
UIButton *previousView = nil;
for (UIButton * btn inself.buttons)
{
[btn autoAlignAxisToSuperviewAxis:ALAxisHorizontal];
[btn autoPinEdgeToSuperviewEdge:ALEdgeTop];
[btn autoPinEdgeToSuperviewEdge:ALEdgeBottom];
if (previousView)
{
[btn autoPinEdge:ALEdgeLefttoEdge:ALEdgeRightofView:previousView];
}
previousView = btn;
}
[[self.buttonslastObject] autoPinEdgeToSuperviewEdge:ALEdgeRight];
}
}
这里对一组button(其数量是变化的)设置了约束,它们宽度固定,水平排列,两两相连,左右都顶到了view的最边缘。
对于一般的view来说,4个约束可以固定一个view。可以想象一下,你的view能否同时满足这几个条件,满足这几个条件以后它是不是就动不了了。
框架使用最佳实践:
学习和研究第三方库中的示例代码和api说明,能够帮助我们快速的掌握其api使用;如果有必要可以深入其源代码了解其中的细节。一般来说,其示例代码中的api调用方式是相对标准和安全的,值得我们参考和借鉴。
One more thing(关于autolayout的错误调试:)
autolayout错误会打印如下:
Unable to simultaneously satisfy constraints. Probably at least one of the constraintsin the following list is one you don't want. Try this: (1) look at eachconstraint and try to figure out which you don't expect; (2) find the code thatadded the unwanted constraint or constraints and fix it. (Note: If you'reseeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer tothe documentation for the UIView propertytranslatesAutoresizingMaskIntoConstraints) ( "<NSAutoresizingMaskLayoutConstraint:0x887d630 h=--&v=--& V:[UIButtonLabel:0x886ed80(19)]>", "<NSAutoresizingMaskLayoutConstraint:0x887d5f0 h=--&v=--& UIButtonLabel:0x886ed80.midY == + 37.5>", "<NSAutoresizingMaskLayoutConstraint:0x887b4b0h=--& v=--& V:[UIButtonLabel:0x72bb9b0(19)]>", "<NSAutoresizingMaskLayoutConstraint:0x887b470h=--& v=--& UIButtonLabel:0x72bb9b0.midY == - 0.5>", "<NSLayoutConstraint:0x72bf860V:[UILabel:0x72bf7c0(17)]>", "<NSLayoutConstraint:0x72c2430UILabel:0x72bfad0.top == UILabel:0x72bf7c0.top>", "<NSLayoutConstraint:0x72c2370UILabel:0x72c0270.top == UILabel:0x72bfad0.top>", "<NSLayoutConstraint:0x72c22b0V:[UILabel:0x72bf7c0]-(NSSpace(8))-[UIButton:0x886efe0]>", "<NSLayoutConstraint:0x72c15b0V:[UILabel:0x72c0270]-(NSSpace(8))-[UIRoundedRectButton:0x72bbc10]>", "<NSLayoutConstraint:0x72c1570UIRoundedRectButton:0x72bbc10.baseline ==UIRoundedRectButton:0x7571170.baseline>", "<NSLayoutConstraint:0x72c21f0 UIRoundedRectButton:0x7571170.top== UIButton:0x886efe0.top>" )
这里的约束看起来很难理解,应该是打印了类似VFL的约束表示。
我在项目中引入了NSLayoutConstraint+Description,重写了其description方法,这样在出错时可以容易的阅读当前出错的约束情况,加以鉴别。
附录:Autolayout出现前的iOS布局技术
关于旋转屏:
对于iphone应用开发者来说,绝大部分应用都是不需要支持旋转屏幕的;苹果的系统应用倒是有几个支持转屏(不过也主要是简单列表的布局,支持起来比较容易)。Iphone的长宽比例相差较大,因此如果要得到一个比较良好的体验,横屏和竖屏的布局一般都需要重新设计,由此带来了巨大的工作量;从用户体验来说也看不到支持横屏的必要性。因此,对于iphone应用来说,绝大部分应用都是不支持旋转屏幕的。大家可以看一下手机里的流行应用(微信、支付宝、网易新闻等),可能只有一些视频类应用的个别页面会支持转屏(播放视频横屏体验更佳)。
而对于iPad来说,其长宽比例较为接近(4:3),且苹果一开始就建议iPad应用开发者适配横竖屏以提升用户体验(横屏使用iPad对用户来说很平常,这点和iphone差别较大)。因此,对于iPad开发者来说,因为转屏场景的存在,布局适配一直是开发中需要注意的一个重点问题。
固定frame写法:
写死frame来布局,在只有320*480一套分辨率的时候非常happy; frame无需计算; 在iphone5推出之前(2012年9月发布),写死frame来布局UI是非常方便快速的;而对于iphone开发者来说,一般不需要考虑屏幕旋转的问题(上面我们已经说了,大部分app是锁定屏幕方向的)。这个时代的iphone 开发者是非常幸福的(android开发者需要适配碎片化的分辨率)。但iphone5、iphone6、iphone6plus带来的分辨率碎片化让固定 frame写法增加了很大的工作量,且代码难以阅读和维护。
Autoresizing技术:
就是在创建视图的同时给出其相对于父视图的“对齐方式与缩放系数”,即autoresizingMask。当父视图发生变化时,通过每个子视图的 autoresizingMask即可自动得出子视图的位置。
然而autoresizingMask的问题在于:
1. 其描述界面变化规则不够灵活,很多变化规则根本无法精确描述。autoresizingMask缩放比例是UIKit内部计算的,开发者无法指定缩放比例的精确值;且一般情况下,距离往往比比例更加精确(这点大家和设计同学沟通的时候应该有体会)。
2. 变化规则只能基于父视图与子视图之间,无法建立同级视图或者跨级视图之间的关系。
总结:Autoresizing用来简单的指定和父view之间的关系还是比较方便的。其在我们当前的项目中使用的也比较多,但它的局限性决定了它只能作为frame布局的辅助,应用于一些简单场景,对于复杂多样化的布局力不从心。在autolayout问世以前,通过autoresizing也可以处理一些简单页面的旋转屏布局(在细节要求不高的情况下)。
AutoLayout技术选型和应用的更多相关文章
- #数据技术选型#即席查询Shib+Presto,集群任务调度HUE+Oozie
郑昀 创建于2014/10/30 最后更新于2014/10/31 一)选型:Shib+Presto 应用场景:即席查询(Ad-hoc Query) 1.1.即席查询的目标 使用者是产品/运营/销售 ...
- 老王讲自制RPC框架.(一.前言与技术选型)
(#)背景 随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,亟需一个治理系统确保架构有条不紊的演进. 单一应用架构 当网站流量很小时,只 ...
- Atitit 开发2d游戏的技术选型attilax总结
Atitit 开发2d游戏的技术选型attilax总结 1.1. 跨平台跨平台:一定要使用跨平台的gui技术,目前最好的就是h5(canvas,webgl,dom) +js了..1 1.2. 游戏前后 ...
- 《2016ThoughtWorks技术雷达峰会----js爆炸下的技术选型》
JS爆炸下的技术选型 刘尚奇 ThoughtWorks, 高级咨询师 JS每6个星期出现一个新框架,那么如何进行JS的选型.以下从四个方面来分析. 1.工具 NPM for all the t ...
- 手机web站点和手机app 技术选型的困惑于思考
今年一直在关注移动端技术的发展,自己也用博客园的rss接口玩了半年,关于技术选型的困惑和大家说说 一 趋势 随着手机硬件不断的升级,外加4g牌照的发放,不出2年时间移动端web站点和手机app一定会进 ...
- atitit.技术选型方法总结为什么java就是比.net有前途
atitit.技术选型方法总结为什么java就是比.net有前途 #----按照不同的需要有不铜的法... 一般有开发效率,稳定性上的需要.. 作者 老哇的爪子 Attilax 艾龙, EMAIL: ...
- 消息中间件的技术选型心得-RabbitMQ、ActiveMQ和ZeroMQ
消息中间件的技术选型心得-RabbitMQ.ActiveMQ和ZeroMQ 作者:chszs,转载需注明.博客主页:http://blog.csdn.net/chszs RabbitMQ.Active ...
- (转).net项目技术选型总结
原文作者:mcgrady 原文地址:.net项目技术选型总结 做.net开发已经几年了,也参与开发了很多大大小小的项目,所以现在希望总结出一套开发.net项目的常用技术,也为以后做项目技术选型的时候作 ...
- 【SSM之旅】Spring+SpringMVC+MyBatis+Bootstrap整合基础篇(一)项目简介及技术选型相关介绍
试水 一直想去搭建个自己的个人博客,苦于自己的技术有限,然后也个人也比较懒散.想动而不能动,想动而懒得动,就这么一直拖到了现在.总觉得应该把这几年来的所学总结一番,这样才能有所成长. 不知在何时,那就 ...
随机推荐
- java 线程的几种状态
java thread的运行周期中, 有几种状态, 在 java.lang.Thread.State 中有详细定义和说明: NEW 状态是指线程刚创建, 尚未启动 RUNNABLE 状态是线程正在正常 ...
- C Golden gun的巧克力
Time Limit:1000MS Memory Limit:65535K 题型: 编程题 语言: 无限制 描述 众所周知,13级有尊大神Golden gun,人称根叔,简称金枪!众立志进校队的 ...
- AngularJS学习笔记二:AngularJS指令
AngularJS 指令: AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 几个常用 指令: ng-app 指令 ...
- 简单几何(圆与多边形公共面积) UVALive 7072 Signal Interference (14广州D)
题目传送门 题意:一个多边形,A点和B点,满足PB <= k * PA的P的范围与多边形的公共面积. 分析:这是个阿波罗尼斯圆.既然是圆,那么设圆的一般方程:(x + D/2) ^ 2 + (y ...
- Fengshui-[SZU_B40]
Description Fengshui is an ancient subject in Chinese tradition. Someone considers it as science and ...
- BZOJ3836 : [Poi2014]Tourism
对于一个连通块,取一个点进行dfs,得到一棵dfs搜索树,则这棵树的深度不超过10,且所有额外边都是前向边. 对于每个点x,设S为三进制状态,S第i位表示根到x路径上深度为i的点的状态: 0:选了 1 ...
- JavaScript,一个超级简单的方法判断浏览器的内核前缀
先说明,此处的方法是说超级简单的方法,不是指代码超级少,而是用非常简单的知识点,只要懂得怎么写JavaScript的行内样式就可以判断. 大家应该还记得JavaScript行内样式怎么写吧?(看来我是 ...
- wp7 中 HubTile控件自定义大小。
http://blog.csdn.net/matrixcl/article/details/7057291 (转) Toolkit(http://silverlight.codeplex.com/)中 ...
- 手机开发必备技巧:javascript及CSS功能代码分享
1. viewport: 也就是可视区域.对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具栏.状态栏.滚动条等等之后用于看网页的区域,这是真正有效的区域.由于移动设备屏幕宽度不同 ...
- 【BZOJ】1303: [CQOI2009]中位数图(特殊的技巧)
http://www.lydsy.com/JudgeOnline/problem.php?id=1303 依旧是题解流,,,不看题解没法活,,,第一眼就是瞎搞,然后就是暴力,显然TLE..题解啊题解. ...