文档章节

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
博文 593
码字总数 21569
作品 0
浦东
高级程序员
私信 提问
AutoLayout(III):浅析动画

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

hejunbinlan
2016/07/29
24
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
22
0
Autolayout小结(二)

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

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

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

ForingY
2015/12/07
35
0

没有更多内容

加载失败,请刷新页面

加载更多

错误: 找不到或无法加载主类

在IDEA的使用过程中,经常断掉服务或者重启服务,最近断掉服务重启时突然遇到了一个启动报错: 错误:找不到或无法加载主类 猜测:1,未能成功编译; 尝试:菜单---》Build---》Rebuild Pro...

安小乐
19分钟前
1
0
vue路由传参,刷新页面,引发的bug

最近遇到一个bug 通过vue路由跳转到页面, 然后接参控制(v-if ),成功显示 而刷新页面,显示失败。 苦苦地找了半天原因,打印参数发现正确,再打印下类型......,路由跳过来会保持传参时的...

hanbb
19分钟前
0
0
【58沈剑 架构师之路】InnoDB,select为啥会阻塞insert?

MySQL的InnoDB的细粒度行锁,是它最吸引人的特性之一。 但是,如《InnoDB,5项最佳实践》所述,如果查询没有命中索引,也将退化为表锁。 InnoDB的细粒度锁,是实现在索引记录上的。 一,Inn...

张锦飞
23分钟前
0
0
冒泡,选择和插入排序比较

/** * 冒泡排序,两层嵌套循环,内层局部比较后,找出最大或者最小数据并交换数据,使其局部有序,外层用于比较剩余元素,相较于选择排序,选择排序相当于是冒泡的一个优化版本(减少了交换...

strict_nerd
23分钟前
0
0
html内联(行内)元素、块级(块状)元素和行内块元素分类

HTML可以将元素分类方式分为内联(行内)元素、块级(块状)元素和行内块元素三种。 注:HTML是标签语言,那么既然是标签,就可以自己定义一些自己元素(如<wode>自定义的元素</wode>等),自...

NB-One
29分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部