文档章节

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

hejunbinlan
 hejunbinlan
发布于 2016/07/29 17:41
字数 1611
阅读 30
收藏 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
博文 595
码字总数 21569
作品 0
浦东
高级程序员
私信 提问
加载中

评论(0)

iOS开发tips-UIScrollView的Autlayout布局

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/jianxin160/article/details/57075059 UIScrollViewj尽管继承于UIView,但它是一个相对比较特殊的视图,特别是...

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

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

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

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

法斗斗
2015/10/14
59
0
Nike Ambassador 11 kengät halpa mutta reaktiivista

Erittäin harvoin se voi olla korkeampi, joka todella vetoaa omaan huomioihini, mutta meillä on Adidas Yung-96 Chasm -kenkiä tai -saappaita, joissa ilmoitetaan, missä Asics-......

osc_f6s7vbbf
2019/11/09
1
0
在Swift中使用AutoLayout-VFL(AutoLayout-VFL笔记)

1.背景 iOS开发这几年, UI布局工具从frame到Masonry到SnapKit, sb和xib的AutoLayout也用过, 但是代码版本的AutoLayout倒是没用过, 最近一年, 频频发现一些三方UI组件布局的bug, 作为三方组件...

walden00
2018/07/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

如何使用正则表达式验证电子邮件地址? - How to validate an email address using a regular expression?

问题: Over the years I have slowly developed a regular expression that validates MOST email addresses correctly, assuming they don't use an IP address as the server part. 多年来......

技术盛宴
33分钟前
5
0
grep一个文件,但显示几个周围的行? - grep a file, but show several surrounding lines?

问题: I would like to grep for a string, but also show the preceding five lines and the following five lines as well as the matched line. 我想grep一个字符串,但也显示前五行和以......

fyin1314
今天
36
0
运维告警管理—多渠道的通知必达

睿象云智能告警平台CA中通知策略实现了被分派人接收告警的通知方式,确保告警发生/认领/关闭时,能以用户习惯的接收告警的方式,实时收到告警通知,同时,尽可能减少告警遗漏。 如果你想实现...

睿象云
今天
35
0
方法区的回收

方法区中主要回收:1.废弃常量;2.无用的类。 但是判断它们废弃或无用了并不一定会被回收。 1.废弃常量: 对于常量池中的常量a,如果没有任何对象引用该常量的话,就表示它是一个废弃常量。 ...

曦鱼violet
今天
26
0
功能测试(手工测试)转向软件测试工程师的进阶之路

今天在爱码小哥的知乎上看到一个网友提问说,功能测试(手工测试)想要提升自己应该怎么做,有哪些主要职责,正好今天有时间,明天是周六了。我整理了软件测试进阶各方面的资料。初衷于帮助大...

爱码小哥
今天
32
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部