本文转载自:http://tech.techweb.com.cn/thread-635784-1-1.html

本文讲述了UITableView、UICollectionView实现 self-sizing cell 布局的知识,以及如何用 InvalidationContext 优化 UICollectionView 布局的更新。

背景
iOS 越来越人性化了,用户可以在设置-通用-辅助功能中动态调整字体大小了。你会发现所有 iOS 自带的APP的字体大小都变了,可惜我们开发的第三方APP依然是以前的字体。在 iOS 7 之后我们可以用 UIFont 的preferredFontForTextStyle: 类方法来指定一个样式,并让字体大小符合用户设定的字体大小。目前可供选择的有六种样式:

        UIFontTextStyleHeadline
UIFontTextStyleBody
UIFontTextStyleSubheadline
UIFontTextStyleFootnote
UIFontTextStyleCaption1
UIFontTextStyleCaption2

iOS会根据样式的用途来合理调整字体。

问题来了,诸如字体大小这种“动态类型”,我们需要对其进行动态的UI调整,否则总是觉得我们的界面怪怪的:

我们想要让Cell 的高度随着字体大小而作出调整:

总之,还会有其他动态因素导致我们需要修改布局。

解决方案
UITableView
有三种策略可以调节Cell(或者是Header和Footer)的高度:

a.调节Height属性
b.通过委托方法tableView: heightForRowAtIndexPath:
c.Cell的“自排列”(self-sizing)

前两种策略都是我们所熟悉的,后面将介绍第三种策略。UITableViewCell 和 UICollectionViewCell 都支持 self-sizing。

在 iOS 7 中,UITableViewDelegate新增了三个方法来满足用户设定Cell、Header和Footer预计高度的方法:

        - tableView:estimatedHeightForRowAtIndexPath:
- tableView:estimatedHeightForHeaderInSection:
- tableView:estimatedHeightForFooterInSection:

当然对应这三个方法 UITableView 也 estimatedRowHeight、estimatedSectionHeaderHeight 和 estimatedSectionFooterHeight 三个属性,局限性在于只能统一定义所有行和节的高度。

以 Cell 为例,iOS 会根据给出的预计高度来创建一个Cell,但等到真正要显示它的时候,iOS 8会在 self-sizing 计算得出新的 Size 并调整 table 的 contentSize 后,将 Cell 绘制显示出来。关键在于如何得出 Cell 新的 Size,iOS提供了两种方法:

自动布局
这个两年前推出的神器虽然在一开始表现不佳,但随着 Xcode 的越来越给力,在iOS7中自动布局俨然成了默认勾选的选项,通过设定一系列约束来使得我们的UI能够适应各种尺寸的屏幕。如果你有使用约束的经验,想必已经有了解决思路:向 Cell 的 contentView 添加约束。iOS 会先调用 UIView 的 systemLayoutSizeFittingSize: 方法来根据约束计算新的Size,如果你没实现约束,systemLayoutSizeFittingSize: 会接着调用sizeThatFits:方法。

人工代码
我们可以重写sizeThatFits:方法来自己定义新的Size,这样我们就不必学习约束相关的知识了。

下面我给出了一个用 Swift 语言写的 Demo-HardChoice ,使用自动布局来调整UITableViewCell的高度。我通过实现一个UITableViewCell的子类DynamicCell来实现自动布局,你可以再GitHub上下载源码:

import UIKit

        class DynamicCell: UITableViewCell {

            required init(coder: NSCoder) {
super.init(coder: coder)
if textLabel != nil {
textLabel.font = UIFont.preferredFontForTextStyle(UIFontTextStyleHeadline)
textLabel.numberOfLines =
}
if detailTextLabel != nil {
detailTextLabel.font = UIFont.preferredFontForTextStyle(UIFontTextStyleBody)
detailTextLabel.numberOfLines =
}
} override func constraints() -> [AnyObject] {
var constraints = [AnyObject]()
if textLabel != nil {
constraints.extend(constraintsForView(textLabel))
}
if detailTextLabel != nil {
constraints.extend(constraintsForView(detailTextLabel))
}
constraints.append(NSLayoutConstraint(item: contentView, attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.GreaterThanOrEqual, toItem: contentView, attribute: NSLayoutAttribute.Height, multiplier: , constant: ))
contentView.addConstraints(constraints)
return constraints
} func constraintsForView(view:UIView) -> [AnyObject]{
var constraints = [NSLayoutConstraint]()
constraints.append(NSLayoutConstraint(item: view, attribute: NSLayoutAttribute.FirstBaseline, relatedBy: NSLayoutRelation.Equal, toItem: contentView, attribute: NSLayoutAttribute.Top, multiplier: 1.8, constant: 30.0))
constraints.append(NSLayoutConstraint(item: contentView, attribute: NSLayoutAttribute.Bottom, relatedBy: NSLayoutRelation.GreaterThanOrEqual, toItem: view, attribute: NSLayoutAttribute.Baseline, multiplier: 1.3, constant: ))
return constraints
} }

上面的代码需要注意的是,Objective-C中的类在Swift中都可以被当做AnyObject,这在类型兼容问题上很管用。
别忘了在相应的 UITableViewController 中的 viewDidLoad 方法中加上:

self.tableView.estimatedRowHeight =  

自适应效果如下:

UICollectionView
UITableView 和 UICollectionView 都是 data-source 和 delegate 驱动的。UICollectionView 在此之上进行了进一步抽象。它将其子视图的位置,大小和外观的控制权委托给一个单独的布局对象。通过提供一个自定义布局对象,你几乎可以实现任何你能想象到的布局。布局继承自 UICollectionViewLayout 抽象基类。iOS 6 中以 UICollectionViewFlowLayout 类的形式提出了一个具体的布局实现。在 UICollectionViewFlowLayout 中,self-sizing 同样适用:

采用self-sizing后:

UICollectionView 实现 self-sizing 不仅可以通过在 Cell 的 contentView 上加约束和重写 sizeThatFits: 方法,也能在 Cell 层面(以前都是在 contentSize 上进行 self-sizing)上做文章:重写 UICollectionReusableView 的preferredLayoutAttributesFittingAttributes: 方法来在 self-sizing 计算出 Size 之后再修改,这样就达到了对Cell布局属性(UICollectionViewLayoutAttributes)的全面控制。

PS:preferredLayoutAttributesFittingAttributes: 方法默认调整Size属性来适应 self-sizing Cell,所以重写的时候需要先调用父类方法,再在返回的 UICollectionViewLayoutAttributes 对象上做你想要做的修改。

由此我们从最经典的 UICollectionViewLayout 强制计算属性(还记得 UICollectionViewLayoutAttributes 的一系列工厂方法么?)到使用 self-sizing 来根据我们需求调整属性中的Size,再到重写UICollectionReusableView(UICollectionViewCell也是继承于它)的 preferredLayoutAttributesFittingAttributes: 方法来从Cell层面对所有属性进行修改:

下面来说说如何在 UICollectionViewFlowLayout 实现 self-sizing:
首先,UICollectionViewFlowLayout 增加了estimatedItemSize 属性,这与 UITableView 中的 ”estimated...Height“ 很像(注意我用省略号囊括那三种属性),但毕竟 UICollectionView 中的 Item 都需要约束 Height 和 Width的,所以它是个 CGSIze,除了这点它与 UITableView 中的”estimated...Height“用法没区别。
其...没有其次,在 UICollectionView 中实现 self-sizing,只需给 estimatedItemSize 属性赋值(不能是 CGSizeZero ),一行代码足矣。

InvalidationContext
假如设备屏幕旋转,或者需要展示一些其妙的效果(比如 CoverFlow ),我们需要将当前的布局失效,并重新计算布局。当然每次计算都有一定的开销,所以我们应该谨慎的仅在我们需要的时候调用 invalidateLayout 方法来让布局失效。

在 iOS 6 时代,有的人会“聪明地”这样做:

        - (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
CGRect oldBounds = self.collectionView.bounds;
if (CGRectGetWidth(newBounds) != CGRectGetWidth(oldBounds)) {
return YES;
}
return NO;
}

而 iOS 7 新加入的 UICollectionViewLayoutInvalidationContext 类声明了在布局失效时布局的哪些部分需要被更新。当数据源变更时,invalidateEverything 和 invalidateDataSourceCounts 这两个只读 Bool 属性标记了UICollectionView 数据源“全部过期失效”和“Section和Item数量失效”,UICollectionView会将它们自动设定并提供给你。

你可以调用invalidateLayoutWithContext:方法并传入一个UICollectionViewLayoutInvalidationContext对象,这能优化布局的更新效率。

当你自定义一个 UICollectionViewLayout 子类时,你可以调用 invalidationContextClass 方法来返回一个你定义的 UICollectionViewLayoutInvalidationContext 的子类,这样你的 Layout 子类在失效时会使用你自定义的InvalidationContext 子类来优化更新布局。

你还可以重写 invalidationContextForBoundsChange: 方法,在实现自定义 Layout 时通过重写这个方法返回一个 InvalidationContext 对象。

综上所述都是 iOS 7 中新加入的内容,并且还可以应用在 UICollectionViewFlowLayout 中。在 iOS 8 中,UICollectionViewLayoutInvalidationContext 也被用在self-sizing cell上。

iOS8 中 UICollectionViewLayoutInvalidationContext 新加入了三个方法使得我们可以更加细致精密地使某一行某一节Item(Cell)、Supplementary View 或 Decoration View 失效:

        invalidateItemsAtIndexPaths:
invalidateSupplementaryElementsOfKind:atIndexPaths:
invalidateDecorationElementsOfKind:atIndexPaths:

复制代码
对应着添加了三个只读数组属性来标记上面那三种组件:

        invalidatedItemIndexPaths
invalidatedSupplementaryIndexPaths
invalidatedDecorationIndexPaths

iOS自带的照片应用会将每一节照片的信息(时间、地点)停留显示在最顶部,实现这种将 Header 粘在顶端的功能其实就是将那个 Index 的 Supplementary View 失效,就这么简单。

UICollectionViewLayoutInvalidationContext 新加入的 contentOffsetAdjustment 和 contentSizeAdjustment 属性可以让我们更新 CollectionView 的 content 的位移和尺寸。

此外 UICollectionViewLayout 还加入了一对儿方法来帮助我们使用self-sizing:

        shouldInvalidateLayoutForPreferredLayoutAttributes:withOriginalAttributes:
invalidationContextForPreferredLayoutAttributes:withOriginalAttributes:

当一个self-sizing Cell发生属性发生变化时,第一个方法会被调用,它询问是否应该更新布局(即原布局失效),默认为NO;而第二个方法更细化的指明了哪些属性应该更新,需要调用父类的方法获得一个InvalidationContext 对象,然后对其做一些你想要的修改,最后返回。

试想,如果在你自定义的布局中,一个Cell的Size因为某种原因发生了变化(比如由于字体大小变化),其他的Cell会由于 self-sizing 而位置发生变化,你需要实现上面两个方法来让指定的Cell更新布局中的部分属性;别忘了整个 CollectionView 的 contentSize 和 contentOffset 因此也会发生变化,你需要给 contentOffsetAdjustment 和 contentSizeAdjustment 属性赋值。

iOS 8自动调整UITableView和UICollectionView布局的更多相关文章

  1. [转]iOS8 自动调整UITableView和UICollectionView布局

    转自:http://www.cocoachina.com/industry/20140825/9450.html (via:玉令天下的Blog)   本文讲述了UITableView.UICollec ...

  2. UITableView和UICollectionView的Cell高度的几种设置方式

    UITableViewCell 1.UITableView的Cell高度默认由rowHeight属性指定一个低优先级的隐式约束 2.XIB中可向UITableViewCell的contentView添 ...

  3. iOS电商常见动画与布局、微信悬浮窗、音乐播放器、歌词解析、拖动视图等源码

    iOS精选源码 MXScroll 介绍 混合使用UIScrollView ios 电商demo(实现各种常见动画效果和页面布局) 一行代码集成微信悬浮窗 可拖动,大小的视图,可放置在屏幕边缘. 在使用 ...

  4. iOS全埋点解决方案-UITableView和UICollectionView点击事件

    前言 在 $AppClick 事件采集中,还有两个比较特殊的控件: UITableView •UICollectionView 这两个控件的点击事件,一般指的是点击 UITableViewCell 和 ...

  5. iOS中UITableView和UICollectionView的默认空态页

    项目中想实现空态页风格统一控制的效果,就封装了一个默认空态页,使用的技术点有:1 方法替换 ,2 给分类(Category)添加属性. 我们知道,扩展(extension)可以给类添加私有变量和方法. ...

  6. 常用几个UITableView,UICollectionView  UIScrollView关键点

    UITableView   UITableView 在Ios中大量使用,我们对UITableview中的有关知识进行整理     UITAbleView是表视图控制器    1 UITableView ...

  7. UITableView、UICollectionView行高/尺寸自适应

    UITableView 我们都知道UITableView从iOS 8开始实现行高的自适应相对比较简单,首先必须设置estimatedRowHeight给出预估高度,设置rowHeight为UITabl ...

  8. iOS开发系列--UITableView全面解析

    --UIKit之UITableView 概述 在iOS开发中UITableView可以说是使用最广泛的控件,我们平时使用的软件中到处都可以看到它的影子,类似于微信.QQ.新浪微博等软件基本上随处都是U ...

  9. iOS开发 纯代码创建UICollectionView

    转:http://jingyan.baidu.com/article/eb9f7b6d8a81a5869364e8a6.html iOS开发 纯代码创建UICollectionView 习惯了使用xi ...

随机推荐

  1. 51nod1199 Money out of Thin Air

    链剖即可.其实就是利用了链剖后子树都在一段连续的区间内所以可以做到O(logn)查询和修改. 线段树细节打错了..要专心!肉眼差错都能找出一堆出来显然是不行的!. #include<cstdio ...

  2. HDFS 整体把握

    对于HDFS这样一个分布式文件系统,它的目的是为了实现在多台廉价X86服务器上实现大文件存储.     HDFS 是仿造GFS 设计出来的. 如图所示, 这种实现方案是一种采取有一个中心节点, 多个数 ...

  3. NBUT 1121 Sakuya's Fly Knife 飞刀(暴力)

    题意:给出一个带有n*m个格子的矩阵,部分格子中有靶子target,现在要从一个没有靶子的格子中射出飞刀数把,飞刀是可穿透靶子的,同一直线上都可以一刀全射掉.现在问在哪个格子射出飞刀,可以在全部射中的 ...

  4. QCon 2015 阅读笔记 - 移动开发最佳实践

    所有ppt下载地址:http://pan.baidu.com/s/1mg9o4TM 下面是移动开发实践部分的阅读笔记. 移动开发网络性能优化实践 - 陈浩然 (携程) 携程是非常标准的移动App架构, ...

  5. JAVA规则引擎 -- Drools

    Drools是一个基于java的规则引擎,开源的,可以将复杂多变的规则从硬编码中解放出来,以规则脚本的形式存放在文件中,使得规则的变更不需要修正代码重启机器就可以立即在线上环境生效. 本文所使用的de ...

  6. USACO 2013 Nov Silver Pogo-Cow

    最近因为闲的蛋疼(停课了),所以开始做一些 USACO 的银组题.被完虐啊 TAT 貌似 Pogo-Cow 这题是 2013 Nov Silver 唯一一道可说的题目? Pogo-Cow Descri ...

  7. kdtree备份

    库在这里 这个很好用. 例子: /*! gcc -Wall -g -o test test.c libkdtree.a */ #include <stdio.h> #include < ...

  8. MAC OSX 下安装 CTAGS

    由于本子跟风换了骚货MBP,因而开发要迁移到MAC OSX下,mac os 下的ctags不一样,所以需要自己编译一个   Lion内置了ctags,但是不我所需要,因此得在网上去弄,最新的版本是 5 ...

  9. EIG集团简单介绍

    有朋友会问为什么要介绍EIG集团,他们是干什么的?与域名.主机.IDC行业资讯等有啥关系?EIG集团很牛逼么?带着这些疑问,简单的给大家做个介绍,希望能帮助大家了解这个IDC行业里面的“魔鬼”! EI ...

  10. ACCESS中的窗体、报表、宏模块等(ACCESS 2000)

    窗体: 分为数据操作窗体,它包括单页.多页.连续.子窗口 控制窗体 信息交互窗体 窗体三种视图:“设计”视图.“窗体”视图.“数据表”视图 窗体建立的五种方式: 一:自动创建窗体 二:窗体向导(一对多 ...