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

转自:http://www.cocoachina.com/industry/20140825/9450.html

(via:玉令天下的Blog)

?

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

?

背景

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

  1. UIFontTextStyleHeadline?
  2. UIFontTextStyleBody?
  3. UIFontTextStyleSubheadline?
  4. UIFontTextStyleFootnote?
  5. UIFontTextStyleCaption1?
  6. 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预计高度的方法:

  1. -?tableView:estimatedHeightForRowAtIndexPath:?
  2. -?tableView:estimatedHeightForHeaderInSection:?
  3. -?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上下载源码:

  1. import?UIKit?
  2. ?
  3. class?DynamicCell:?UITableViewCell?{?
  4. ?
  5. ????required?init(coder:?NSCoder)?{?
  6. ????????super.init(coder:?coder)?
  7. ????????if?textLabel?!=?nil?{?
  8. ????????????textLabel.font?=?UIFont.preferredFontForTextStyle(UIFontTextStyleHeadline)?
  9. ????????????textLabel.numberOfLines?=?0?
  10. ????????}?
  11. ????????if?detailTextLabel?!=?nil?{?
  12. ????????????detailTextLabel.font?=?UIFont.preferredFontForTextStyle(UIFontTextStyleBody)?
  13. ????????????detailTextLabel.numberOfLines?=?0?
  14. ????????}?
  15. ????}?
  16. ?????
  17. ????override?func?constraints()?->?[AnyObject]?{?
  18. ????????var?constraints?=?[AnyObject]()?
  19. ????????if?textLabel?!=?nil?{?
  20. ????????????constraints.extend(constraintsForView(textLabel))?
  21. ????????}?
  22. ????????if?detailTextLabel?!=?nil?{?
  23. ????????????constraints.extend(constraintsForView(detailTextLabel))?
  24. ????????}?
  25. ????????constraints.append(NSLayoutConstraint(item:?contentView,?attribute:?NSLayoutAttribute.Height,?relatedBy:?NSLayoutRelation.GreaterThanOrEqual,?toItem:?contentView,?attribute:?NSLayoutAttribute.Height,?multiplier:?0,?constant:?44))?
  26. ????????contentView.addConstraints(constraints)?
  27. ????????return?constraints?
  28. ????}?
  29. ?????
  30. ????func?constraintsForView(view:UIView)?->?[AnyObject]{?
  31. ????????var?constraints?=?[NSLayoutConstraint]()?
  32. ????????constraints.append(NSLayoutConstraint(item:?view,?attribute:?NSLayoutAttribute.FirstBaseline,?relatedBy:?NSLayoutRelation.Equal,?toItem:?contentView,?attribute:?NSLayoutAttribute.Top,?multiplier:?1.8,?constant:?30.0))?
  33. ????????constraints.append(NSLayoutConstraint(item:?contentView,?attribute:?NSLayoutAttribute.Bottom,?relatedBy:?NSLayoutRelation.GreaterThanOrEqual,?toItem:?view,?attribute:?NSLayoutAttribute.Baseline,?multiplier:?1.3,?constant:?8))?
  34. ????????return?constraints?
  35. ????}?
  36. ?????
  37. }?

上面的代码需要注意的是,Objective-C中的类在Swift中都可以被当做AnyObject,这在类型兼容问题上很管用。

?

别忘了在相应的 UITableViewController 中的 viewDidLoad 方法中加上:

  1. self.tableView.estimatedRowHeight?=?44?

自适应效果如下:

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 时代,有的人会“聪明地”这样做:

  1. -?(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds?
  2. {?
  3. ????CGRect?oldBounds?=?self.collectionView.bounds;?
  4. ????if?(CGRectGetWidth(newBounds)?!=?CGRectGetWidth(oldBounds))?{?
  5. ????????return?YES;?
  6. ????}?
  7. ????????return?NO;?
  8. }?

而 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 失效:

  1. invalidateItemsAtIndexPaths:?
  2. invalidateSupplementaryElementsOfKind:atIndexPaths:?
  3. invalidateDecorationElementsOfKind:atIndexPaths:?

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

  1. invalidatedItemIndexPaths?
  2. invalidatedSupplementaryIndexPaths?
  3. invalidatedDecorationIndexPaths?

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

?

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

?

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

  1. shouldInvalidateLayoutForPreferredLayoutAttributes:withOriginalAttributes:?
  2. invalidationContextForPreferredLayoutAttributes:withOriginalAttributes:?

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

?

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

时间: 2024-10-12 03:23:50

[转]iOS8 自动调整UITableView和UICollectionView布局的相关文章

iOS8自动调整UITableView和UICollectionView布局

本文讲述了UITableView.UICollectionView实现self-sizing cell布局的知识,以及如何用InvalidationContext优化UICollectionView布局的更新. 背景 iOS越来越人性化了,用户可以在设置-通用-辅助功能中动态调整字体大小了.你会发现所有iOS自带的APP的字体大小都变了,可惜我们开发的第三方APP依然是以前的字体.在iOS7之后我们可以用UIFont的preferredFontForTextStyle:类方法来指定一个样式,并让

iOS 8自动调整UITableView和UICollectionView布局

本文讲述了UITableView.UICollectionView实现 self-sizing cell 布局的知识,以及如何用 InvalidationContext 优化 UICollectionView 布局的更新. 背景 iOS 越来越人性化了,用户可以在设置-通用-辅助功能中动态调 “” 阅读器 UITableViewUICollectionView (via:玉令天下的Blog) 本文讲述了UITableView.UICollectionView实现 self-sizing cell

RumTime实践之--UITableView和UICollectionView缺省页的实现

有关RunTime的知识点已经看过很久了,但是一直苦于在项目中没有好的机会进行实际运用,俗话说"光说不练假把式",正好最近在项目中碰到一个UITableView和UICollectionView在数据缺省的情况下展示默认缺省页的需求,这个时候RunTime大展拳脚的时候就到了. 大致的实现思路是这样的,因为UITableView和UICollectionView都是继承自系统的UIScrollView,所以为了同时实现UITableView和UICollectionView的缺省页,我

IOS开发UI篇--UITableView的自定义布局==xib布局

利用Xib进行实现 应用场景:像团购网站的列表数据显示,新闻列表显示等(由于该类的显示的数据单元格内容格式相同) (1)主控制器文件,在文件中实现了自己自定义的代理,加载数据, 1 #import "SLViewController.h" 2 #import "SLTgDatas.h" 3 #import "SLTableViewCell.h" 4 #import "SLFooterView.h" 5 #import &quo

IOS开发UI篇--UITableView的自定义布局==纯代码布局

UITableView中除了利用系统的UItableViewCell不能完成需求进行布局时,还可以进行自定义布局: 自定义布局分为两类:(1)利用代码进行创建 (2)利用xib进行实现: 下面对利用代码进行创建分析: 应用场景:像微博,等列表数据展示(由于微博的每个单元格的数据大小不一致,所以得计算每个单元格的大小) 分析:前提是获取列表数据,然后建立每个单元格的模型(建立单元格模型应继承UITableViewCell)复写 - (id)initWithStyle:(UITableViewCel

iOS中UITableView和UICollectionView的默认空态页

项目中想实现空态页风格统一控制的效果,就封装了一个默认空态页,使用的技术点有:1 方法替换 ,2 给分类(Category)添加属性. 我们知道,扩展(extension)可以给类添加私有变量和方法.但是分类(Category)不可以,但是我们又想在原生的UITableView和UICollectionView上添加空态页,所以使用了黑科技runtime中提供的对象关联.objc_setAssociatedObject/objc_getAssociatedObject. 懒得说明了,具体看代码.

IOS-给UIScrollView(包括继承它的UITableView、UICollectionView)添加下拉刷新-上拉加载更多

IOS里面用到的下拉刷新.上拉加载更多控件,开源的第三方框架很多,我们可以直接拿过来用,别人造好的轮子我们就没有必要再造一遍了,这里推荐几款下拉刷新.上拉加载更多控件 只有下拉刷新的: 一.EGOTableViewPullRefresh 这个使用起来比较麻烦,需要实现其各种协议,github地址为: https://github.com/enormego/EGOTableViewPullRefresh 这个貌似有个扩展上拉加载更多的,有时间补上 二.PullToRefresh  这个使用起来比E

iOS8中 UITableView section 分区头部视图不显示

最近自己使用了UITableView写了一个通讯录,但是在编写过程还算顺利,但是后来测试的时候,发现在iOS8中TableView的分区头不能正常显示,使用 - (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section 方法可以正常的设置分区的Title,但是如果你使用了 - (UIView *)tableView:(UITableView *)tableView viewF

自定义UICollectionView布局-01

自定义UICollectionView布局-01 0.应用场景: 项目中经常会用到各种各样的cell,有时自定义cell已经无法满足产品的需求,我们可以选择复杂并且开发难度大的开发方式解决问题,当然也可以选择简单但是有技巧的解决方案,其中自定义UICollectionView布局就是一种很好的方式,这节就探讨如何使用自定义UICollectionView布局做出漂亮的界面. 1.继承方案 1> 继承UICollectionViewLayout 2> 继承UICollectionViewFlow