iOS swift-UICollectionView实现照片浏览

目标:使用collectionView实现照片水平滚动

属性

private lazy var collectionView : UICollectionView = UICollectionView(frame: CGRectZero, collectionViewLayout: UICollectionViewFlowLayout())

数据源方法

// MARK:- 实现collectionView的数据源方法
extension PhotoBrowserController : UICollectionViewDataSource {
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return picURLs.count
}

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
// 1.创建cell
let cell = collectionView.dequeueReusableCellWithReuseIdentifier(PhotoBrowserCell, forIndexPath: indexPath)

// 2.给cell设置数据
cell.backgroundColor = indexPath.item % 2 == 0 ? UIColor.orangeColor() : UIColor.blueColor()

return cell
}
}

效果图



可以看到我们的这个UICollectionView的item尺寸太小了,如果我们想要设置item的frame,就得对UICollectionViewLayout进行设置,而对UICollectionViewLayout进行设置有两种方式:

第一种:直接取出当前collectionView的layout进行设置

// 1.设置collectionView的layout
let layout = self.collectionViewLayout as! UICollectionViewFlowLayout
layout.itemSize = UIScreen.mainScreen().bounds.size
layout.minimumLineSpacing = 0
layout.minimumInteritemSpacing = 0<pre name="code" class="plain">

// 2.设置collectionView的属性collectionView?.pagingEnabled = truecollectionView?.showsHorizontalScrollIndicator = falsecollectionView?.showsVerticalScrollIndicator = false

第二种:自定义UICollectionViewLayout (推荐)

class PhotoBrowserCollectionViewLayout: UICollectionViewFlowLayout {
override func prepareLayout() {
super.prepareLayout()

// 1.设置itemSize
itemSize = UIScreen.mainScreen().bounds.size
minimumLineSpacing = 0                          // 设置最小行间距
minimumInteritemSpacing = 0                     // 设置最小item间距
scrollDirection = .Horizontal                   // 设置滚动方向

// 2.设置collectionView的属性
collectionView?.pagingEnabled = true<span style="white-space:pre">			</span>// 使用分页
collectionView?.showsHorizontalScrollIndicator = false<span style="white-space:pre">	</span>// 隐藏水平滚动条
collectionView?.showsVerticalScrollIndicator = false<span style="white-space:pre">	</span>// 隐藏垂直滚动条
}
}

这时collectionView使用的Layout改为我们自定义的PhotoBrowserCollectionViewLayout

private lazy var collectionView : UICollectionView = UICollectionView(frame: CGRectZero, collectionViewLayout: PhotoBrowserCollectionViewLayout())

效果图