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/
