Swift UICollectionView

UICollectionView是一种新的数据展示方式，简单来说可以把他理解成多列的UITableView(请一定注意这是UICollectionView的最最简单的形式)。

下面先通过一个简单的例子展示一下

 class SecondViewController: UIViewController,UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout {
     
    let screenWidth = UIScreen .mainScreen().bounds.width
    let screenHeight = UIScreen .mainScreen().bounds.height
    let idenContentString = "idenContentString"
    let headIdenString = "headIdenString"
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.automaticallyAdjustsScrollViewInsets = true
        self .makeUICollectionView()
        
    }
    
    func makeUICollectionView()
    {
        //  设置 layOut
        let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = UICollectionViewScrollDirection.Vertical  //滚动方向
        layout.itemSize = CGSizeMake((screenWidth - 30)/2, 80)
        // 设置CollectionView
        let ourCollectionView : UICollectionView = UICollectionView(frame: CGRectMake(0, 0, screenWidth, screenHeight), collectionViewLayout: layout)
        ourCollectionView.delegate = self
        ourCollectionView.dataSource = self
        ourCollectionView.backgroundColor = UIColor.whiteColor()
        ourCollectionView .registerClass(MyTestCollectionViewCell.self, forCellWithReuseIdentifier: idenContentString)
        
        self.view .addSubview(ourCollectionView)

    }
    
    //MARK: UICollectionViewDataSource
    
    func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
        
        return 1
    }
    
    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 60
    }
    
    func  collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        
        let cell  = collectionView.dequeueReusableCellWithReuseIdentifier(idenContentString, forIndexPath: indexPath) as! MyTestCollectionViewCell
        // 备注我们的小标题
        let indexString = String(indexPath.row)
        cell.myLabel.text = "我的小标题_" + indexString
        // 获取随机颜色
        let colorValue1 :CGFloat!  = CGFloat(CGFloat(random())/CGFloat(RAND_MAX))
        let colorValue2 :CGFloat!  = CGFloat(CGFloat(random())/CGFloat(RAND_MAX))
        let colorValue3 :CGFloat!  = CGFloat(CGFloat(random())/CGFloat(RAND_MAX))
        cell.myImageView.backgroundColor = UIColor(red: colorValue1, green: colorValue2, blue: colorValue3, alpha: 1.0)
        
        return cell;
        
    }
    //MARK:UICollectionViewDelegate
    
    func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
        print("tap ==\(indexPath.row)")
    }
    
    //MARK:UICollectionViewDelegateFlowLayout
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets{
        return UIEdgeInsetsMake(5, 10, 5, 10)
    }
 }

在自定义的CollctionViewCell中

 class MyTestCollectionViewCell: UICollectionViewCell {

    override init(frame: CGRect) {
        
        super.init(frame: frame)
    
        // 由于测试，先不考虑 自动布局 后期可以考虑 SnapKit
        self.myLabel.frame = CGRectMake(10, 60, frame.size.width - 20, 20)
        self.myImageView.frame = CGRectMake(10, 0, frame.size.width - 20, 60)
        
        self.contentView.backgroundColor = UIColor(red: 230/255.0, green: 230/255.0, blue: 230/255.0, alpha: 1.0)
        self.contentView .addSubview(self.myLabel)
        self.contentView .addSubview(self.myImageView)
  
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    
    var myLabel:UILabel = {
    
        let label = UILabel()
        label.text = "我的小标题"
        label.textAlignment = .Center
        label.font = UIFont.systemFontOfSize(12)
        return label
    
    }()
    
    var myImageView:UIImageView = {
        
        let imageView = UIImageView()
        imageView.backgroundColor = UIColor.lightGrayColor()
        return imageView
    
    }()
    
}

效果图

UICollectionViewLayout

UICollectionViewLayout 是UICollectionView和UITableView最大的不同。UICollectionViewLayout可以说是UICollectionView的大脑和中枢，它负责了将各个cell、Supplementary View和Decoration Views进行组织，为它们设定各自的属性，包括但不限于：位置、尺寸、透明度、层级关系、形状，等等。

itemSize 它定义了每一个item的大小。通过设定itemSize可以全局地改变所有cell的尺寸，如果想要对某个cell制定尺寸，可以使用- sizeForItemAtIndexPath indexPath:方法.
间隔：可以指定item之间的间隔和每一行之间的间隔，和size类似，有全局属性，也可以对每一个item和每一个section做出设定：
```
 public var minimumLineSpacing: CGFloat
 public var minimumInteritemSpacing: CGFloat
```
滚动方向：由属性scrollDirection确定scroll view的方向，将影响Flow Layout的基本方向和由header及footer确定的section之间的宽度
```
public enum UICollectionViewScrollDirection : Int {

        case Vertical
        case Horizontal
}
```
Header和Footer尺寸：同样地分为全局和部分。需要注意根据滚动方向不同，header和footer的高和宽中只有一个会起作用。垂直滚动时section间宽度为该尺寸的高，而水平滚动时为宽度起作用
```
  public var headerReferenceSize: CGSize
  public var footerReferenceSize: CGSize
  public var sectionInset: UIEdgeInsets
```

以及它的代理UICollectionViewDelegateFlowLayout

UICollectionViewCell

仔细一看它和UITableViewCell还是有很多区别的

public class UICollectionViewCell : UICollectionReusableView {

    public var contentView: UIView { get } 

    public var selected: Bool
    public var highlighted: Bool

    public var backgroundView: UIView?
    public var selectedBackgroundView: UIView?
}

首先注意它继承的是UICollectionReusableView,和TableViewCell继承UIView是不一样的。

UICollectionReusableView

状态控制要比以前灵活一些，对应的高亮和选中状态分别由highlighted和selected两个属性表示。
cell被选中时的背景更加灵活了，所有的cell中的子view，也包括contentView中的子view，在当cell被选中时，会自动去查找view是否有被选中状态下的改变。比如在contentView里加了一个normal和selected指定了不同图片的imageView，那么选中这个cell的同时这张图片也会从normal变成selected，而不需要额外的任何代码。

Header & Footer

也是先注册

//注册一个headView
 ourCollectionView .registerClass(UICollectionReusableView.self, forSupplementaryViewOfKind:UICollectionElementKindSectionHeader, withReuseIdentifier: headIdenString)

定义其大小和内容

   //返回HeadView的宽高
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize{
        
        return CGSize(width: ScreenWidth, height: 50)
    }
    
    //返回自定义HeadView或者FootView，我这里以headview为例
    func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView{
        var headView = UICollectionReusableView()
        if kind == UICollectionElementKindSectionHeader
        {
            headView = collectionView.dequeueReusableSupplementaryViewOfKind(kind, withReuseIdentifier: headIdenString, forIndexPath: indexPath)
            headView.backgroundColor = UIColor.redColor()

        }
        return headView
    }

效果图如下，当然那个numberOfSectionsInCollectionView进行了改变

效果图，section换了

记住headview也是继承UICollectionReusableView的

总的来说，UICollectionView还有很多可以挖掘的功能，我们可以在API中充分发掘，它也会是我们后期常用的View，继续加油····

备注参考

https://developer.apple.com/library/ios/documentation/UIKit/Reference/UICollectionReusableView_class/index.html#//apple_ref/occ/instm/UICollectionReusableView/
http://www.onevcat.com/2012/08/advanced-collection-view/

Swift UICollectionView

UICollectionViewLayout

UICollectionViewCell

Header & Footer

备注参考

推荐阅读更多精彩内容