显示简单的UICollectionView
import UIKit
class ViewController: UICollectionViewController {
let allSectionColors = [
UIColor.redColor(),
UIColor.greenColor(),
UIColor.blueColor()]
override init(collectionViewLayout layout: UICollectionViewLayout) {
super.init(collectionViewLayout: layout)
collectionView!.registerClass(UICollectionViewCell.classForCoder(),
forCellWithReuseIdentifier: "cell")
collectionView!.backgroundColor = UIColor.whiteColor()
}
convenience required init(coder aDecoder: NSCoder) {
let flowLayout = UICollectionViewFlowLayout()
flowLayout.minimumLineSpacing = 20
flowLayout.minimumInteritemSpacing = 10
flowLayout.itemSize = CGSize(width: 80, height: 120);
flowLayout.scrollDirection = .Vertical
flowLayout.sectionInset =
UIEdgeInsets(top: 10, left: 20, bottom: 10, right: 20)
self.init(collectionViewLayout: flowLayout)
}
override func numberOfSectionsInCollectionView(
collectionView: UICollectionView) -> Int{
return allSectionColors.count
}
override func collectionView(collectionView: UICollectionView,
numberOfItemsInSection section: Int) -> Int{
return 3
}
override func collectionView(collectionView: UICollectionView,
cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell{
let cell = collectionView.dequeueReusableCellWithReuseIdentifier(
"cell",
forIndexPath: indexPath) as UICollectionViewCell
cell.backgroundColor = allSectionColors[indexPath.section]
return cell
}
override func prefersStatusBarHidden() -> Bool {
return true
}
}
效果如下:
xib文件定制Cell
import UIKit
class ViewController: UICollectionViewController {
let allImages = [
UIImage(named: "1"),
UIImage(named: "2"),
UIImage(named: "3")
]
func randomImage() -> UIImage{
return allImages[Int(arc4random_uniform(UInt32(allImages.count)))]!
}
override init(collectionViewLayout layout: UICollectionViewLayout) {
super.init(collectionViewLayout: layout)
let nib = UINib(nibName: "MyCollectionViewCell", bundle: nil)
collectionView!.registerNib(nib, forCellWithReuseIdentifier: "cell")
collectionView!.backgroundColor = UIColor.whiteColor()
}
convenience required init(coder aDecoder: NSCoder) {
let flowLayout = UICollectionViewFlowLayout()
flowLayout.minimumLineSpacing = 20
flowLayout.minimumInteritemSpacing = 10
flowLayout.itemSize = CGSize(width: 80, height: 120);
flowLayout.scrollDirection = .Vertical
flowLayout.sectionInset =
UIEdgeInsets(top: 10, left: 20, bottom: 10, right: 20)
self.init(collectionViewLayout: flowLayout)
}
override func numberOfSectionsInCollectionView(
collectionView: UICollectionView) -> Int {
return 3
}
override func collectionView(collectionView: UICollectionView,
numberOfItemsInSection section: Int) -> Int {
return 3
}
override func collectionView(collectionView: UICollectionView,
cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier(
"cell", forIndexPath: indexPath) as! MyCollectionViewCell
cell.imageViewBackgroundImage.image = randomImage()
cell.imageViewBackgroundImage.contentMode = .ScaleAspectFit
return cell
}
}
xib文件如下:
效果如下:
触发事件
override func collectionView(collectionView: UICollectionView,
didSelectItemAtIndexPath indexPath: NSIndexPath){
let selectedCell = collectionView.cellForItemAtIndexPath(indexPath)
as UICollectionViewCell!
UIView.animateWithDuration(animationDuration, animations: {
selectedCell.alpha = 0
}, completion: {[weak self] (finished: Bool) in
UIView.animateWithDuration(self!.animationDuration, animations: {
selectedCell.alpha = 1
})
})
}
override func collectionView(collectionView: UICollectionView,
didHighlightItemAtIndexPath indexPath: NSIndexPath) {
let selectedCell = collectionView.cellForItemAtIndexPath(indexPath)
as UICollectionViewCell!
UIView.animateWithDuration(animationDuration, animations: {
selectedCell.transform = CGAffineTransformMakeScale(4, 4)
})
}
override func collectionView(collectionView: UICollectionView,
didUnhighlightItemAtIndexPath indexPath: NSIndexPath){
let selectedCell = collectionView.cellForItemAtIndexPath(indexPath)
as UICollectionViewCell!
UIView.animateWithDuration(animationDuration, animations: {
selectedCell.transform = CGAffineTransformIdentity
})
}
效果如下:
有一个大小和透明度的变化动画效果。
添加Header和Footer
/* Register the header's nib */
let headerNib = UINib(nibName: "Header", bundle: nil)
collectionView!.registerNib(headerNib,
forSupplementaryViewOfKind: UICollectionElementKindSectionHeader,
withReuseIdentifier: "header")
/* Register the footer's nib */
let footerNib = UINib(nibName: "Footer", bundle: nil)
collectionView!.registerNib(footerNib,
forSupplementaryViewOfKind: UICollectionElementKindSectionFooter,
withReuseIdentifier: "footer")
/* Set the reference size for the header and the footer views */
flowLayout.headerReferenceSize = CGSize(width: 300, height: 50)
flowLayout.footerReferenceSize = CGSize(width: 300, height: 50)
override func collectionView(collectionView: UICollectionView,
viewForSupplementaryElementOfKind kind: String,
atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView {
var identifier = "header"
if kind == UICollectionElementKindSectionFooter{
identifier = "footer"
}
let view = collectionView.dequeueReusableSupplementaryViewOfKind(kind,
withReuseIdentifier: identifier,
forIndexPath: indexPath) as UICollectionReusableView
if kind == UICollectionElementKindSectionHeader{
if let header = view as? Header{
header.label.text = "Section Header \(indexPath.section+1)"
}
}
else if kind == UICollectionElementKindSectionFooter{
if let footer = view as? Footer{
let title = "Section Footer \(indexPath.section+1)"
footer.button.setTitle(title, forState: .Normal)
}
}
return view
}
效果如下: