使用UICollectionView实现首页的滚动效果

使用UICollectionView实现首页的滚动效果

实现类似这样的效果,可以滚动大概有两种实现方案

1. 使用scrollview来实现

2. 使用UICollectionView来实现

第一种比较简单,而且相对于性能来说不太好,于是我们使用第二种方案

UICollectionView 的基础知识再次就不做说明了,在网上随便一搜都是一大把,我们就说说这个如何实现的吧,

其实很简单

使用UICollectionView实现首页的滚动效果

就这么几个文件。

先看看控制器里边的代码

 import UIKit

 class ViewController: UIViewController,UICollectionViewDelegate,UICollectionViewDataSource {

     var myCollectionView: UICollectionView!

     override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib. view.backgroundColor = UIColor(red: /255.0, green: /255.0, blue: /255.0, alpha: 1.0) setupCollectionView() } // set up collection view
private func setupCollectionView() { let screenW = UIScreen.mainScreen().bounds.size.width;
var rect = view.bounds
rect.size.height = (screenW - * - * ) / + +
rect.origin.y =
myCollectionView = UICollectionView(frame: rect, collectionViewLayout: collectionLayout())
myCollectionView.backgroundColor = UIColor.whiteColor()
myCollectionView.pagingEnabled = true
myCollectionView.showsHorizontalScrollIndicator = true
myCollectionView.delegate = self
myCollectionView.dataSource = self
view.addSubview(myCollectionView) myCollectionView.registerClass(CollectionViewCell.self, forCellWithReuseIdentifier: "CollectionViewCell") } // set up layout
private func collectionLayout() -> UICollectionViewLayout { let layout = CustomLayout()
return layout;
} //MARK:- collection view data source
func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int { return
}
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { return
}
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell { let cell: UICollectionViewCell = collectionView.dequeueReusableCellWithReuseIdentifier("CollectionViewCell", forIndexPath: indexPath) return cell
} func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
print(indexPath.row)
} }

就是在控制器中见了一个UICollectionView 所有的设置跟我们平时使用的一模一样,唯一不同的地方就是我们自定义的布局

使用UICollectionView实现首页的滚动效果

 import UIKit

 let edgeMargin: CGFloat =    // 边界的间距
let padding: CGFloat = // 内部每个cell的间距
let column: Int = // 每页有多少列
let row: Int = // 每页有多少行 class CustomLayout: UICollectionViewLayout { private var layoutAttr: [UICollectionViewLayoutAttributes] = [] var totalCount: Int { // 有多少cell
get {
return collectionView!.numberOfItemsInSection()
}
} var page: Int {
get {
let numOfPage: Int = column * row
return totalCount / numOfPage +
}
} // 重写此方法,自定义想要的布局
override func prepareLayout() {
super.prepareLayout() // 这个方法最主要的任务是计算出每个cell的位置
layoutAttr = []
var indexPath: NSIndexPath
for index in ..<totalCount {
indexPath = NSIndexPath(forRow: index, inSection: )
let attributes = layoutAttributesForItemAtIndexPath(indexPath)! layoutAttr.append(attributes)
}
} override func collectionViewContentSize() -> CGSize { // 返回滚动的Size,根据页数计算出来
return CGSizeMake(collectionView!.frame.size.width * CGFloat(page), collectionView!.frame.size.height)
} override func shouldInvalidateLayoutForBoundsChange(newBounds: CGRect) -> Bool {
return true
} override func layoutAttributesForItemAtIndexPath(indexPath: NSIndexPath) -> UICollectionViewLayoutAttributes? { // 这个方法用来计算每一个cell的位置
let att: UICollectionViewLayoutAttributes = UICollectionViewLayoutAttributes(forCellWithIndexPath: indexPath) let collectW: CGFloat = collectionView!.frame.size.width // collection view 宽度
let numOfPage: Int = column * row
let pageIndex: Int = indexPath.row / numOfPage // 当前cell处在哪一个页
let columnInPage: Int = indexPath.row % numOfPage % column // 当前cell 在当前页的哪一列,用来计算位置
let rowInPage: Int = indexPath.row % numOfPage / column // 当前cell 在当前页的哪一行,用来计算位置
// 计算宽度
let cellW: CGFloat = (collectW - edgeMargin * - CGFloat(column - ) * padding) / CGFloat(column)
// 高度
let cellH: CGFloat = cellW
// x
let cellX: CGFloat = collectW * CGFloat(pageIndex) + edgeMargin + (cellW + padding) * CGFloat(columnInPage)
// y
let cellY :CGFloat = edgeMargin + (cellH + padding) * CGFloat(rowInPage) att.frame = CGRectMake(cellX, cellY, cellW, cellH)
return att
} override func layoutAttributesForElementsInRect(rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
return layoutAttr
} }
prepareLayout 这个方法使我们自定义布局的方法
只要我们自定义了这几个方法就是实现了上边图片中的效果, 其实到这里,就跟使用scrollviewview 差不多了。效果图如下
使用UICollectionView实现首页的滚动效果下载地址 https://github.com/agelessman/ScrollItemView
上一篇:UML,类图


下一篇:软工视频学习之尾