AutoLayout(Ⅱ):遇到的几个小问题(Keng)
AutoLayout(Ⅱ):遇到的几个小问题(Keng)
hejunbinlan 发表于1年前
AutoLayout(Ⅱ):遇到的几个小问题(Keng)
  • 发表于 1年前
  • 阅读 11
  • 收藏 0
  • 点赞 0
  • 评论 0
摘要: AutoLayout(Ⅱ):遇到的几个小问题(Keng)

团队采用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的动画问题,打算下篇介绍。

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

共有 人打赏支持
粉丝 38
博文 528
码字总数 21018
×
hejunbinlan
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: