這里的相冊功能是基于 UIcollection 實現(xiàn)的,相比于基于 UIScrollview 來實現(xiàn),這種實現(xiàn)方式會節(jié)約更多資源,也會避免出現(xiàn)由于內(nèi)存劇增導致的閃退問題.效果如圖所示:
相冊功能
首先,你要有一個自定制的橫向滾動按鈕視圖控件.傳送門: UITableView 實現(xiàn)橫向滾動按鈕視圖
其次,你需要定制一個盛放 collectionView 的 collectionViewCell.
class CollCollectionViewCell: UICollectionViewCell,UICollectionViewDelegate,UICollectionViewDataSource {
var clickBlock:((selNum:Int)->())? //回調(diào)
var imageUrlArr:[String] = []{
didSet{
collectionView.reloadData()
}
}
var collectionView:UICollectionView!
override init(frame: CGRect) {
super.init(frame: frame)
self.setUp()
}
override func awakeFromNib() {
super.awakeFromNib()
self.setUp()
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func setUp() {
collectionView = self.createCollectionView(0, itemSize:CGSizeMake((SCREEN_WIDTH-40)/3.0, (SCREEN_WIDTH-40)/3.0), sectionInset: UIEdgeInsetsMake(10, 10, 10, 10), direction: .Vertical)
collectionView.delegate = self
collectionView.dataSource = self
self.addSubview(collectionView)
//注冊 cell
collectionView.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: "CollectionCell")
}
// MARK: - UICollectionViewDelegate
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return imageUrlArr.count
}
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier("CollectionCell", forIndexPath: indexPath)
cell.backgroundColor = UIColor.init(white: 0.8, alpha: 1)
let cellSide = cell.frame.size.width
//壓縮并裁剪圖片
let newImage = UIImage.compressAndCutImage( UIImage.init(named: "tips"), size: CGSizeMake(cellSide, cellSide))
if let newImage = newImage {
let imageV = UIImageView.init(image: newImage)
cell.addSubview(imageV)
}
return cell
}
func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
if let clickBlock = clickBlock {
clickBlock(selNum: indexPath.row)
}
}
}
同時,你需要一個實現(xiàn)圖片瀏覽功能的控件.其實也就是 cell的點擊事件,傳送門: 圖片瀏覽視圖
從而,你便可以在以上三條的基礎上基于 UICollection View 實現(xiàn)相冊功能,詳見代碼:
class PhotoGalleryView: UIView ,UICollectionViewDelegate,UICollectionViewDataSource,UIScrollViewDelegate{
var allDataArray:[[String]] = []
var clickCellBlock:((selNum:Int,urlArr:[String])->())?
var topScrollView:ScrollBtnsView!
var bottomScrollView:UICollectionView!
var curPage:Int = 0
// MARK: - system method
override init(frame: CGRect) {
super.init(frame: frame)
self.setUp()
}
override func awakeFromNib() {
super.awakeFromNib()
self.setUp()
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
// MARK: private method
func setUp() {
//添加相冊頂部滾動圖
topScrollView = ScrollBtnsView.init(frame: CGRectMake(0, 0, SCREEN_WIDTH, 50))
self.addSubview(topScrollView)
bottomScrollView = self.createCollectionView(50, itemSize:CGSizeMake(SCREEN_WIDTH, self.frame.height-50), sectionInset: UIEdgeInsetsZero , direction: .Horizontal)
bottomScrollView.delegate = self
bottomScrollView.dataSource = self
bottomScrollView.pagingEnabled = true
self.addSubview(bottomScrollView)
//注冊 cell
bottomScrollView.registerClass(CollCollectionViewCell.self, forCellWithReuseIdentifier: "CollCollectionViewCell")
}
// MARK: public method
func conPhotoGalleryView(titleArr:[String],imageUrlsArr:[[String]]) {
topScrollView.configBtnScrollView(titleArr) { (tag) in
self.bottomScrollView.contentOffset = CGPointMake(CGFloat(tag)*SCREEN_WIDTH, 0)
}
allDataArray = imageUrlsArr
}
// MARK: - UICollectionViewDelegate
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return allDataArray.count
}
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell:CollCollectionViewCell = collectionView.dequeueReusableCellWithReuseIdentifier("CollCollectionViewCell", forIndexPath: indexPath) as! CollCollectionViewCell
let images = allDataArray[indexPath.row]
cell.imageUrlArr = images
cell.clickBlock = { (selNum:Int) in
if let clickCellBlock = self.clickCellBlock{
clickCellBlock(selNum:selNum,urlArr: images)
}
}
return cell
}
// MARK: - UIScrollViewDelegate
func scrollViewDidEndDecelerating(scrollView: UIScrollView) {
let offSetFlag = Int(scrollView.contentOffset.x/SCREEN_WIDTH)
topScrollView.upDataOldAndNewBtn(offSetFlag)
}
}
當你完成了相冊這個控件之后,使用起來便是極其簡單的.
//創(chuàng)建圖片瀏覽視圖
let images = BigImageView.init(frame: CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT))
UIApplication.sharedApplication().keyWindow?.addSubview(images)
images.downloadSucBlock = {
print("保存圖片成功")
}
images.downloadFailBlock = {
print("保存圖片失敗")
}
//創(chuàng)建相冊
let photoGalleryView = PhotoGalleryView.init(frame: CGRectMake(0, 64, SCREEN_WIDTH, self.view.frame.size.height))
self.view.addSubview(photoGalleryView)
photoGalleryView.clickCellBlock = {(selNum:Int,urlArr:[String]) in
images.showBigImageView(urlArr, selCount: selNum)
}
photoGalleryView.conPhotoGalleryView(["相冊1相冊1相冊1","2","相冊三","相冊4相冊4"], imageUrlsArr: [["","","","","","","",""],["","","","",""],["","","","","","","","","","","","","","",""],["",""]])
期待你的評論建議O(∩_∩)O~