【iOS】UICollectionView补充

学习文章

一个UICollectionView自定义layout的实现
iOS6新特征：UICollectionView介绍
WWDC 2012 Session笔记——205 Introducing Collection Views
WWDC 2012 Session笔记——219 Advanced Collection Views and Building Custom Layouts

UICollectionView补充

一、 UICollectionView

标准的UICollectionView包含三个部分，它们都是UIView的子类：

Cells 用于展示内容的主体，对于不同的cell可以指定不同尺寸和不同的内容
Supplementary Views 追加视图如果你对UITableView比较熟悉的话，可以理解为每个Section的Header或者Footer，用来标记每个section的view
Decoration Views 装饰视图这是每个section的背景

CollectionView.jpg

Cells.jpg

SupplementaryViews.jpg

DecorationViews.jpg

二、 UICollectionViewDataSource

section的数量 -numberOfSectionsInCollection:
某个section里有多少个item -collectionView:numberOfItemsInSection:
对于某个位置应该显示什么样的cell -collectionView:cellForItemAtIndexPath:

实现以上三个委托方法，基本上就可以保证CollectionView工作正常了。当然，还有提供Supplementary View的方法

collectionView:viewForSupplementaryElementOfKind:atIndexPath:

对于Decoration Views，提供方法并不在UICollectionViewDataSource中，而是直接UICollectionViewLayout类中的(因为它仅仅是视图相关，而与数据无关).

三、 UICollectionViewDelegate

数据无关的view的外形啊，用户交互啊什么的，由UICollectionViewDelegate来负责：

cell的高亮
cell的选中状态
可以支持长按后的菜单

每个cell有独立的高亮事件和选中事件的delegate，用户点击cell的时候，现在会按照以下流程向delegate进行询问：

-collectionView:shouldHighlightItemAtIndexPath: 是否应该高亮？
-collectionView:didHighlightItemAtIndexPath: 如果1回答为是，那么高亮
-collectionView:shouldSelectItemAtIndexPath: 无论1结果如何，都询问是否可以被选中？
-collectionView:didUnhighlightItemAtIndexPath: 如果1回答为是，那么现在取消高亮
-collectionView:didSelectItemAtIndexPath: 如果3回答为是，那么选中cell

四、关于Cell

UICollectionViewCell不存在各式各样的默认的style，这主要是由于展示对象的性质决定的，因为UICollectionView所用来展示的对象相比UITableView来说要来得灵活，大部分情况下更偏向于图像而非文字，因此需求将会千奇百怪。因此SDK提供给我们的默认的UICollectionViewCell结构上相对比较简单，由下至上：

首先是cell本身作为容器view
然后是一个大小自动适应整个cell的backgroundView，用作cell平时的背景
再其上是selectedBackgroundView，是cell被选中时的背景
最后是一个contentView，自定义内容应被加在这个view上

UICollectionViewCell.jpg

BackgroundView.jpg

SelectedBackgroundView.jpg

ContentView.jpg

这次Apple给我们带来的好康是被选中cell的自动变化，所有的cell中的子view，也包括contentView中的子view，在当cell被选中时，会自动去查找view是否有被选中状态下的改变。比如在contentView里加了一个normal和selected指定了不同图片的imageView，那么选中这个cell的同时这张图片也会从normal变成selected，而不需要额外的任何代码。

五、 UICollectionViewLayout

这是UICollectionView和UITableView最大的不同。
UICollectionViewLayout可以说是UICollectionView的大脑和中枢，它负责了将各个cell、Supplementary View和Decoration Views进行组织，为它们设定各自的属性，包括但不限于：

位置
尺寸
透明度
层级关系
形状
等等等等…

Layout决定了UICollectionView是如何显示在界面上的。在展示之前，一般需要生成合适的UICollectionViewLayout子类对象，并将其赋予CollectionView的collectionViewLayout属性。

六、 UICollectionViewLayoutAttributes

UICollectionViewLayoutAttributes是一个非常重要的类，先来看看property列表

@property (nonatomic) CGRect frame
@property (nonatomic) CGPoint center
@property (nonatomic) CGSize size
@property (nonatomic) CATransform3D transform3D
@property (nonatomic) CGFloat alpha
@property (nonatomic) NSInteger zIndex
@property (nonatomic, getter=isHidden) BOOL hidden

可以看到，UICollectionViewLayoutAttributes的实例中包含了诸如边框，中心点，大小，形状，透明度，层次关系和是否隐藏等信息。和DataSource的行为十分类似，当UICollectionView在获取布局时将针对每一个indexPath的部件（包括cell，追加视图和装饰视图），向其上的UICollectionViewLayout实例询问该部件的布局信息,这个布局信息，就以UICollectionViewLayoutAttributes的实例的方式给出。

七、自定义的UICollectionViewLayout

UICollectionViewLayout的功能为向UICollectionView提供布局信息，不仅包括cell的布局信息，也包括追加视图和装饰视图的布局信息。实现一个自定义layout的常规做法是继承UICollectionViewLayout类，然后重载下列方法：

-(CGSize)collectionViewContentSize
- 返回collectionView的内容的尺寸
-(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
- 返回rect中的所有的元素的布局属性
- 返回的是包含UICollectionViewLayoutAttributes的NSArray
- UICollectionViewLayoutAttributes可以是cell，追加视图或装饰视图的信息，通过不同的UICollectionViewLayoutAttributes初始化方法可以得到不同类型的UICollectionViewLayoutAttributes
  - layoutAttributesForCellWithIndexPath:
  - layoutAttributesForSupplementaryViewOfKind:withIndexPath:
  - layoutAttributesForDecorationViewOfKind:withIndexPath:
-(UICollectionViewLayoutAttributes _)layoutAttributesForItemAtIndexPath:(NSIndexPath _)indexPath
- 返回对应于indexPath的位置的cell的布局属性
-(UICollectionViewLayoutAttributes _)layoutAttributesForSupplementaryViewOfKind:(NSString _)kind atIndexPath:(NSIndexPath *)indexPath
- 返回对应于indexPath的位置的追加视图的布局属性，如果没有追加视图可不重载
-(UICollectionViewLayoutAttributes * )layoutAttributesForDecorationViewOfKind:(NSString_)decorationViewKind atIndexPath:(NSIndexPath _)indexPath
- 返回对应于indexPath的位置的装饰视图的布局属性，如果没有装饰视图可不重载
-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
- 当边界发生改变时，是否应该刷新布局。如果YES则在边界变化（一般是scroll到其他地方）时，将重新计算需要的布局信息

另外需要了解的是，在初始化一个UICollectionViewLayout实例后，会有一系列准备方法被自动调用，以保证layout实例的正确。

首先，-(void)prepareLayout将被调用，默认下该方法什么没做，但是在自己的子类实现中，一般在该方法中设定一些必要的layout的结构和初始需要的参数等。

之后，-(CGSize) collectionViewContentSize将被调用，以确定collection应该占据的尺寸。注意这里的尺寸不是指可视部分的尺寸，而应该是所有内容所占的尺寸。collectionView的本质是一个scrollView，因此需要这个尺寸来配置滚动行为。

接下来-(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect被调用，这个没什么值得多说的。初始的layout的外观将由该方法返回的UICollectionViewLayoutAttributes来决定。

另外，在需要更新layout时，需要给当前layout发送 -invalidateLayout，该消息会立即返回，并且预约在下一个loop的时候刷新当前layout，这一点和UIView的setNeedsLayout方法十分类似。在-invalidateLayout后的下一个collectionView的刷新loop中，又会从prepareLayout开始，依次再调用-collectionViewContentSize和-layoutAttributesForElementsInRect来生成更新后的布局。

实现DecorationView

一、效果

DecorationView.gif

二、源码

Defination.swift

import UIKit

let screenWidth = UIScreen.mainScreen().bounds.width

DecorationView.swift

import UIKit

let decorationIdentifier = "DecorationIdentifier"

class DecorationView: UICollectionReusableView {
    
    var imageView : UIImageView?
    
    override init(frame: CGRect) {
        
        super.init(frame: frame)
        
        imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: screenWidth, height: 120))
        self.imageView!.image = UIImage(named: "SingleBookShelf")
        
        self.addSubview(imageView!)
    }

    required init?(coder aDecoder: NSCoder) {
        
        fatalError("init(coder:) has not been implemented")
    }
}

DemoCollectionViewCell.swift

import UIKit

let cellIdentifier = "CellIdentifier"

class DemoCollectionViewCell: UICollectionViewCell {
    
    var imageView : UIImageView!
    
    override init(frame: CGRect) {
        
        super.init(frame: frame)
        
        self.imageView = UIImageView(frame: self.bounds)
        
        self.addSubview(self.imageView)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

DemoLayout.swift

import UIKit

class DemoLayout: UICollectionViewFlowLayout {

    var cellCount    : Int?
    var sectionCount : Int?
    
    override func prepareLayout() {
        
        super.prepareLayout()
        
        self.cellCount               = self.collectionView?.numberOfItemsInSection(0)
        self.sectionCount            = self.collectionView?.numberOfSections()
        self.itemSize                = CGSize(width: 100, height: 100)
        self.sectionInset            = UIEdgeInsets(top: 25, left: 25, bottom: 25, right: 25)
        self.minimumInteritemSpacing = 40
        self.minimumLineSpacing      = 20
        
        self.registerClass(DecorationView.classForCoder(), forDecorationViewOfKind: decorationIdentifier)
    }
    
    override func layoutAttributesForDecorationViewOfKind(elementKind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionViewLayoutAttributes? {
        
        let attributes = UICollectionViewLayoutAttributes(forDecorationViewOfKind: elementKind, withIndexPath: indexPath)
        
        attributes.frame  = CGRect(x: 0, y: indexPath.row * 120 + 12, width: Int(screenWidth), height: 120)
        attributes.zIndex = -1
        
        return attributes
    }
    
    override func layoutAttributesForElementsInRect(rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        
        // 方法1: 通过主动调用 self.layoutAttributesForItemAtIndexPath(indexPath) 和 self.layoutAttributesForDecorationViewOfKind(decorationIdentifier, atIndexPath: indexPath) 生成全部 UICollectionViewLayoutAttributes
        var attributesArray = [UICollectionViewLayoutAttributes]()
        
        for i : Int in 0..


ViewController.swift

import UIKit

class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate {

    var collectionView : UICollectionView!
    var dataArray      : [UIImage]?
    var demoLayout     : DemoLayout!
    
    override func viewDidLoad() {
        
        super.viewDidLoad()
        
        self.buildData()
        self.buildCollectionView()

    }
    
    func buildData() {
    
        self.dataArray = [UIImage]()
        
        for imageIndex in 1...16 {
        
            let image = UIImage(named: "\(imageIndex)")
            self.dataArray?.append(image!)
        }
    }
    
    func buildCollectionView() {
    
        demoLayout = DemoLayout()
        
        self.collectionView = UICollectionView(frame: self.view.bounds, collectionViewLayout: demoLayout)
        self.collectionView.registerClass(DemoCollectionViewCell.classForCoder(), forCellWithReuseIdentifier: cellIdentifier)
        self.collectionView.dataSource = self
        self.collectionView.delegate   = self
        
        self.view.addSubview(self.collectionView)
    }
    
    // MARK: UICollectionViewDataSource
    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        
        return (self.dataArray?.count)!
    }

    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        
        let cell =
        collectionView.dequeueReusableCellWithReuseIdentifier(cellIdentifier, forIndexPath: indexPath) as! DemoCollectionViewCell
        
        cell.imageView.image = self.dataArray![indexPath.row] 
        
        return cell
    }
}

下载源码
下载地址

【iOS】UICollectionView补充

学习文章

UICollectionView补充

一、 UICollectionView

二、 UICollectionViewDataSource

三、 UICollectionViewDelegate

四、 关于Cell

五、 UICollectionViewLayout

六、 UICollectionViewLayoutAttributes

七、 自定义的UICollectionViewLayout

实现DecorationView

一、 效果

二、 源码

下载源码

你可能感兴趣的:(【iOS】UICollectionView补充)

四、关于Cell

七、自定义的UICollectionViewLayout

一、效果

二、源码