iOS開發UI篇--使用UICollectionView實現一個列表頭部拉伸效果的案例
一、案例演示
本案例Demo演示的是列表頭部具有拉伸的效果，具有良好的使用者體驗。
當列表的offsetY小於0的時候，頂部的圖片會跟隨手勢的下拉將頭部的寬高進行相應地縮放。如下圖所示：
1.gif
二、知識儲備
2.1、自定義UICollectionViewFlowLayout
自定義UICollectionViewFlowLayout就是UICollectionView功能強大的精髓所在，它負責了將各個Cell、Supplementary View和Decoration Views進行組織和管理，可以高度定製內容的展現。
2.2、layoutAttributesForElementsInRect:方法
這是UICollectionViewFlowLayout佈局類中最重要的方法了，同時可能也是最容易讓人迷惑的方法。collection view呼叫這個方法並傳遞一個自身座標系統中的矩形過去。這個矩形代表了這個檢視的可見矩形區域（也就是它的bounds），你需要準備好處理傳給你的任何矩形。
你的實現必須返回一個包含UICollectionViewLayoutAttributes物件的陣列，為每一個cell包含這樣的一個物件，supplementary view或decoration view在矩形區域內是可見的。UICollectionViewLayoutAttributes類包含了collection view內item的所有相關佈局屬性。預設情況下，這個類包含frame，center，size，transform3D，alpha，zIndex屬性(properties)，和hidden特性(attributes)。如果你的佈局想要控制其他檢視的屬性（比如，背景顏色），你可以建一個UICollectionViewLayoutAttributes的子類，然後加上你自己的屬性。
佈局屬性物件通過indexPath屬性和他們對應的cell，supplementary view或者decoration view關聯在一起。collection view為所有items從佈局物件中請求到佈局屬性後，它將會例項化所有檢視，並將對應的屬性應用到每個檢視上去。
注意！這個方法涉及到所有型別的檢視，也就是cell，supplementary views和decoration views。一個幼稚的實現可能會選擇忽略傳入的矩形，並且為collection view中的所有檢視返回佈局屬性。在原型設計和開發佈局階段，這是一個有效的方法。但是，這將對效能產生非常壞的影響，特別是可見cell遠少於所有cell數量的時候，collection view和佈局物件將會為那些不可見的檢視做額外不必要的工作。
2.3、- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds;
當collection view的bounds改變時，佈局需要告訴collection view是否需要重新計算佈局。
三、關鍵程式碼分析
自定義UICollectionViewFlowLayout的實現
#import "StretchyHeaderCollectionViewLayout.h"
@implementation StretchyHeaderCollectionViewLayout
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds{
return YES;
}
- (UICollectionViewScrollDirection)scrollDirection{
return UICollectionViewScrollDirectionVertical;
}
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect{
UICollectionView *collectionView = [self collectionView];
CGPoint offset = [collectionView contentOffset];
NSArray *attributes = [super layoutAttributesForElementsInRect:rect];
if (offset.y<0) {
CGFloat deltaY = fabs(offset.y);
for (UICollectionViewLayoutAttributes *attrs in attributes ) {
NSString *kind = [attrs representedElementKind];
if (kind == UICollectionElementKindSectionHeader) {
CGSize headerSize = [self headerReferenceSize];
CGRect headRect = [attrs frame];
headRect.size.height = headerSize.height+deltaY;
headRect.size.width = headerSize.width +deltaY;
headRect.origin.y = headRect.origin.y - deltaY;
headRect.origin.x = headRect.origin.x - deltaY/2;
[attrs setFrame:headRect];
break;
}
}
}
return attributes;
}
@end
四、Demo下載地址
Demo下載地址：這是一個我的iOS交流群：624212887，群檔案自行下載，不管你是小白還是大牛熱烈歡迎進群 ，分享面試經驗，討論技術， 大家一起交流學習成長！希望幫助開發者少走彎路。
如果覺得對你還有些用，就關注小編+喜歡這一篇文章。你的支援是我繼續的動力。
下篇文章預告： 使用UICollectionView實現一個傾斜列表效果
文章來源於網路，如有侵權，請聯絡小編刪除。012v++++++++++++++++++++++++++++++++++++++