iOS 8自動調整UITableView和UICollectionView布局

標籤：style   blog   http   ar   io   color   os   使用   sp   

本文轉載自: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 = 0                }                if detailTextLabel != nil {                    detailTextLabel.font = UIFont.preferredFontForTextStyle(UIFontTextStyleBody)                    detailTextLabel.numberOfLines = 0                }            }                         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: 0, constant: 44))                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: 8))                return constraints            }                     }

 

上面的代碼需要注意的是，Objective-C中的類在Swift中都可以被當做AnyObject，這在類型相容問題上很管用。
別忘了在相應的 UITableViewController 中的 viewDidLoad 方法中加上：

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 的一系列Factory 方法嗎？）到使用 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布局