文档章节

AutoLayout(Ⅱ):遇到的几个小问题(Keng)

hejunbinlan
 hejunbinlan
发布于 2016/07/29 17:41
字数 1611
阅读 14
收藏 0

团队采用AutoLayout已经有小半年的时间了,基本上已经非常熟练的运用这个技术,其实搞几天搞会了也就没啥了。
总结一些常用的情况和遇到的几个小问题,顺便给刚用这个技术的童鞋一个参考。

1.等分布局问题

这是一种常遇到的场景:屏幕上的一排控件均匀排列。这种运用的思想就是先确定中心参考系,以中心参考系为参考进行具体的约束。下面以在屏幕上均匀排列3个控件为例子:

需求是:3个控件均匀分布在屏幕上,并且控件和控件之间以及控件与屏幕边缘之间的间隔固定为10。

先找到中心点,很显然这点是屏幕中心点,在这个点上先放置一个View2控件。然后一次在其左右分别放置View1,View3。三个控件拖上去完成基本的摆设之后开始连线,按照经验来讲,如果一开始摆的越规则,连线越不容易乱。

现在,先从View1连线,点击Xcode右下角的图标()。可以看到如下,

这里特别注意“Constrain to margins”这个选项。关于margin:边缘,一开始我也不理解问题,从而导致了实际出来的效果和预期的不一致。

苹果默认每个View都有margin,即边缘。也就是说subView在连线它的superView是并不是从0这个点开始的,而是从边缘线这个点开始的。而我们的设计师,一般都是默认从0开始,所以在实际项目中,我们总是把这个选项默认不选中。这里面有个技巧,如果我们用Pin如下图:

Pin进行约束时“Constrain to margins”这个选项是不选中的,而当我们用Ctrl连线时是默认选中的。(开发环境为:Xcode6,MacOS 10.10.3)

这里说的有点玄乎了,在stackOverFlow上有一段具体的讨论:

http://stackoverflow.com/questions/25807545/what-is-constrain-to-margin-in-storyboard-in-xcode-6

这里讲的很清楚,感兴趣的童鞋可以深入了解下。而且以我的经验来讲,这个边缘的默认值在iOS8和iOS6上还是不同的。

等分的另一个重要约束就是Equal Width or Equal Height。下图是具体的约束连线:

2.UIScrollView的多ContentView的问题

这种场景最多的就是翻页,例如网易新闻客户端的滑动翻页等。没有用autoLayout时可以通过设置contentSize解决翻页的问题。用了autoLayout也可以用比较方便的方法解决。

这个例子的需求是:两个页面滑动。

下面直接上例子:

新建一个工程,名为AutoLayout+UIScrollView,和之前的一样把Use Size Classes取消掉(因为还要兼容iOS6)。选中Main.stroyboard,拖动一个ScrollView到self.view上,设置scrollView的上下左右约束,拖动contentView到scrollView上,设置上下左右的约束,但是要注意将Width的约束写死为640(因为模拟器中为320,而需求是2页,所以为640),这个时候在stroyboard上看不下contentView(因为640已经超过了320了),可以设置Simulated Metrics下的Size为 Freedom

这样就可以调整self.view的显示尺寸了。

注意到前面写死的640了,这个值在iPhone5s以下都是正确的,但是iPhone6及以上都是错了。所以我们需要将这个约束单独的作为一个property,如下所示设置为

@property (weak, nonatomic) IBOutlet NSLayoutConstraint *contentSizeWidth;

//不要忘了在viewDidLoad中设置:
self.contentSizeWidth.constant = self.view.bounds.size.width * 2;

展开之后的视图是这个样子的:

这样就比较直观了,然后通过等分布局的思想,往各自的contentView上加各种视图。最终的各种约束是下面的样子:

上图的中间一条白色的view,是作为中心参考view的,这样方便整个contentView的布局。

之所以把这个作为例子是因为UIScrollView在AutoLayout下是个特殊的view,因为scrollView的subView的约束是针对contentSize而不是bounds,所以scrollView的subView是不能简单的通过和scrollView之间的各种约束来决定大小的,实际操作中可能会出现Has ambiguous scrollable content width/height的warning,如果出现这个warning,说明有错了。在网上有看到其他人用新建一个参考View的方法来解决这个问题,我在这里是通过先写死Width约束后改其具体的值来实现的。

3.UITableViewCell的高度自适应的问题

网上有很多文章讲到了cell高度自适应的问题。推荐的下面三篇,思想和代码都是一样的,我看好多中文讲自适应高度的文章也是换汤不换药。

  1. http://stackoverflow.com/questions/18746929/using-auto-layout-in-uitableview-for-dynamic-cell-layouts-variable-row-heights

  2. AutoLayout深入浅出五[UITableView动态高度]

  3. 使用Autolayout xib实现动态高度的TableViewCell

本人在实际做项目的时候参看了很多的文章,虽然有不少中文教程讲了怎么实现,但是或多或少都存在问题。这里面最主要的问题是iOS8,iOS7和iOS6上表现出来自适应高度都是不一样的。在iOS8上好使的在iOS6上不好使,上面的第一个链接文章是第一个讲iOS8和iOS7的差异的(老外才是搞第一把交易的啊,国内的真的只是翻译一下罢了)。

最后讲下我们最终是怎么解决这个自适应的问题。由于这个自适应在iOS8,iOS7,iOS6上表现的真的很不一样(甚至在iOS8.1.3和iOS8.0.x版本上面表现的都有不同),而且如果真的要做自适应的话需要写一些if版本判断,这样维护的代码反而多了起来。所以我们最终的解决方法仍然是用代码去计算高度,最原始的方法,但是很好的解决了这个问题并且各个iOS版本下都能适用。

上面的3个问题是我在用AutoLayout时遇到的问题,相对来讲花了我一定的时间去研究。除了这些问题,还有一个AutoLayout的动画问题,打算下篇介绍。

本文的例子都已经上传的这里

本文转载自:http://www.vienta.me/2015/05/14/AutoLayout-%E9%81%87%E5%88%B0%E7%9A%84%E5%87%A0%E4%B8%AA%E5%B0%8F...

共有 人打赏支持
hejunbinlan
粉丝 41
博文 586
码字总数 21569
作品 0
浦东
高级程序员
私信 提问
AutoLayout(III):浅析动画

前面讲过了AutoLayout的基本概念和遇到的一些问题,这篇讲的是AutoLayout下的动画。自动布局已经比传统的Frame复杂,动画也会稍微更复杂些。期望通过这篇文章,能够对AutoLayout下的动画有理...

hejunbinlan
2016/07/29
24
0
iOS开发tips-UIScrollView的Autlayout布局

UIScrollViewj尽管继承于UIView,但它是一个相对比较特殊的视图,特别是当它遇到了AutoLayout之后。在UIScrollView中使用AutoLayout的目的除了使用相对约束确定子控件的位置和大小外,更重要...

jianxin160
2017/02/25
0
0
Autolayout使用小结(一)

Autolayout使用小结(一) 最近做项目时,因为iPhone6和iPhone6Plus的兼容,我们启用了Autolayout. 以前是因为不用也能满足需求,也是因为懒,没有认真使用,只是了解过。经过一段时间的使用...

法斗斗
2015/10/14
22
0
Autolayout小结(二)

Autolayout小结(二) 在Autolayout小结(一)中介绍了在Autolayout学习中一些基本的注意点,本文会针对一些布局上常见的问题进行分析。 如何自动适应cell的高度 如何在ScrollView中使用Autol...

法斗斗
2015/10/14
47
0
防止浏览器记住用户名和密码

解决方案 下面列出了几个比较常用的解决方案,都有各自的优缺点,和不同的适用场景,先大概的看一下吧: Ⅰ、 针对浏览器记住密码 首先大部分浏览器都是根据表单域的type="password"来判断密...

ForingY
2015/12/07
35
0

没有更多内容

加载失败,请刷新页面

加载更多

python中sort和sorted函数小结

L.sort(cmp=None, key=None, reverse=False) sorted(iterable, cmp=None, key=None, reverse=False) 这样看,sorted函数只比sort函数多一个iterable参数,其余没什么不同,iterable是一个迭代......

上官夏洛特
31分钟前
2
0
thinkphp 常用SQL执行语句总结

第一条:Db::tablera('vr_panomas')->where(['delete_time'=>0,'id'=>['in',$pids]])->field(['id'=>'id','post_thumb'=>'thumb','post_title'=>'title','post_tags'=>'tags','post_price'=>......

koothon
40分钟前
1
0
支付宝返回状态resultStatus意思

上一篇集成支付宝的时候,会有一些支付宝返回的resultStatus,具体意思是: 9000 订单支付成功 8000 正在处理中 4000 订单支付失败 6001 用户中途取消 6002 网络连接出错 还有memo,意思就是...

RainOrz
45分钟前
2
0
electron webview 页面加载事件顺序

1.did-start-loading 页面开始加载 2.load-commit 主页面文档加载 3.page-title-updated title 4.dom-ready 主页面 dom 加载完成 5.load-commit frame文档加载 6.did-frame-finish-load fram......

dubox
50分钟前
2
0
cron语法格式

Seconds Minutes Hours DayofMonth Month DayofWeek Year或 Seconds Minutes Hours DayofMonth Month DayofWeek...

JavaSon712
50分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部