UICollectionView 自定義簡述
寫作目的
UICollectionView是一個十分強(qiáng)大的控件定血，其所有的實現(xiàn)效果都是依賴于UICollectionViewLayout和UICollectionViewFlowLayout赔癌。我這里做一些簡單的總結(jié)，希望能幫助大家澜沟，也是自己對知識的梳理灾票。
UICollectionViewLayout、UICollectionViewFlowLayout介紹
由于系統(tǒng)自帶的實現(xiàn)效果可能在真正的開發(fā)過程當(dāng)中無法滿足我們的需求茫虽，這時候我們就會想到自定義刊苍，而自定義UICollectionView其實就是自定義UICollectionViewLayout。
UICollectionViewLayoutAttributes
它的主要作用是負(fù)責(zé)存儲每一個Cell位置濒析、大小屬性等班缰。在一個CollectionView中可能有很多個這樣的屬性，我們也通過這個屬性獲取到每個cell存儲的信息來進(jìn)行布局
open class UICollectionViewLayoutAttributes : NSObject, NSCopying, UIDynamicItem {
open var frame: CGRect //獲取到cell的frame
open var center: CGPoint // 獲取噠cell的center
open var size: CGSize // size
open var transform3D: CATransform3D // 設(shè)置動畫
@available(iOS 7.0, *)
open var bounds: CGRect
@available(iOS 7.0, *)
open var transform: CGAffineTransform // 動畫
open var alpha: CGFloat
open var zIndex: Int // default is 0
open var isHidden: Bool // As an optimization, UICollectionView might not create a view for items whose hidden attribute is YES
open var indexPath: IndexPath
open var representedElementCategory: UICollectionElementCategory { get }
open var representedElementKind: String? { get } // nil when representedElementCategory is UICollectionElementCategoryCell
public convenience init(forCellWith indexPath: IndexPath)
public convenience init(forSupplementaryViewOfKind elementKind: String, with indexPath: IndexPath)
public convenience init(forDecorationViewOfKind decorationViewKind: String, with indexPath: IndexPath)
}
- UICollectionViewLayoutAttributes 的實例中包含了邊框悼枢、中心埠忘、大小、形狀馒索、透明度莹妒、層次關(guān)系等信息
- 一個cell對應(yīng)一個UICollectionViewLayoutAttributes對象
開始工作
首先創(chuàng)建一個工程，并且 pod 需要的一些第三方庫
添加UI等
自定義UICollectionViewCell
class photoCell: UICollectionViewCell {
var photoImageView: UIImageView?
var photoImageS: String?{
didSet{
self.photoImageView?.image = UIImage(named: self.photoImageS!)
}
}
override init(frame: CGRect) {
super.init(frame: frame)
photoImageView = UIImageView(frame: CGRect.zero)
photoImageView?.layer.borderColor = UIColor.white.cgColor
photoImageView?.layer.borderWidth = 10
self.contentView.addSubview(self.photoImageView!)
photoImageView?.snp.makeConstraints({ (make) in
make.edges.equalTo(self.contentView)
})
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
class ViewController: UIViewController {
var collectionView: UICollectionView!
var dataSource: [String] = {
var array: [String] = []
for index in 0..<20 {
array.append(String(index + 1))
}
return array
}()
let suqareLayout: SquareLayout = {
let layout = SquareLayout()
return layout
}()
let customFlow: ScrollFlowLayout = {
let flowlayout = ScrollFlowLayout()
flowlayout.itemSize = CGSize(width: 150, height: UIScreen.height / 2)
return flowlayout
}()
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
initSubView()
view.backgroundColor = UIColor.white
let button = UIButton()
button.frame = CGRect(x: 200, y: 300, width: 80, height: 80)
button.setBackgroundImage(UIImage.init(named: "sub_add"), for: .normal)
button.setBackgroundImage(UIImage.init(named: "sub_add_h"), for: .highlighted)
button.addTarget(self, action: #selector(changeLayout), for: .touchUpInside)
view.addSubview(button)
}
func changeLayout() {
if self.collectionView.collectionViewLayout == suqareLayout {
self.collectionView.setCollectionViewLayout(customFlow, animated: true)
} else {
self.collectionView.setCollectionViewLayout(suqareLayout, animated: true)
}
}
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
}
}
extension ViewController{
// MARK:-- UI
func initSubView(){
collectionView = UICollectionView(frame: CGRect.zero, collectionViewLayout: suqareLayout)
collectionView.delegate = self
collectionView.dataSource = self
collectionView.backgroundColor = UIColor.clear
collectionView.isScrollEnabled = true
collectionView.showsVerticalScrollIndicator = false
collectionView.showsHorizontalScrollIndicator = false
collectionView.register(photoCell.self, forCellWithReuseIdentifier: NSStringFromClass(photoCell.self))
view.addSubview(collectionView)
collectionView.snp.makeConstraints { (make) in
make.edges.equalTo(view)
}
}
}
extension ViewController: UICollectionViewDelegate {
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: NSStringFromClass(photoCell.self), for: indexPath) as? photoCell
cell?.photoImageS = self.dataSource[indexPath.row]
return cell!
}
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
self.dataSource.remove(at: indexPath.row)
self.collectionView.deleteItems(at: [indexPath])
}
}
extension ViewController: UICollectionViewDataSource {
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 1
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return dataSource.count
}
}
大家先不要看我自定義的UICollectionViewLayout绰上，稍后我會給大家詳細(xì)介紹旨怠。實現(xiàn)了UICollectionView的代理設(shè)置等。接下來就自定義UICollectionViewLayout
自定義UICollectionViewLayout
- 介紹layout的一些方法
prepare（）
override func prepare() {
super.prepare()
AttribuArray.removeAll()
let count = self.collectionView?.numberOfItems(inSection: 0)
guard count != 0 else {
print("沒有數(shù)據(jù)")
return
}
for index in 0..<Int(count!){
let indexpath = NSIndexPath(item: index, section: 0)
let attributes = self.layoutAttributesForItem(at: indexpath as IndexPath)
self.AttribuArray.append(attributes!)
}
}
當(dāng)前方法的作用是初始化布局蜈块，獲得所有cell的Attributes屬性
contensize
<font color = #DC143C> 注意：這里的contentSize 是整個CollectionView的size鉴腻，這個還要得益于UICollectionView繼承與UIScrollView</font>
// 設(shè)置ContentSize 這樣才可以滑動
override var collectionViewContentSize: CGSize{
get{
let count = self.collectionView?.numberOfItems(inSection: 0)
let rows = (count! + 2) / 3
let rowH: CGFloat = (self.collectionView?.width)! / 2
if Int(rowH) * rows > Int(UIScreen.height) {
return CGSize(width: 0, height: rowH * CGFloat(rows))
} else {
return CGSize(width: 0, height: rowH * CGFloat(rows) - rowH / 2)
}
} set{
self.collectionViewContentSize = newValue
}
}
設(shè)置展示樣式 獲得 Attributes
<font color = #DC143C> 注意：
layoutAttribsForItem(at indexpath: Indexpath) 和
layoutAttributesInRect(In rect: CGRect)
這兩方法，前者返回的是indexpath的Attributes屬性百揭，而后者返回的是當(dāng)前Rect中所有元素的布局爽哎，返回的是包含UICollectionViewLayoutAttris的Array
</font>
override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
let width: CGFloat = (self.collectionView?.width)! * 0.5
let attributes = UICollectionViewLayoutAttributes.init(forCellWith: indexPath)
let height: CGFloat = width
let i = indexPath.item
switch i {
case 0:
attributes.frame = CGRect(x: 0, y: 0, width: width, height: height)
break
case 1:
attributes.frame = CGRect(x: width, y: 0, width: width, height: height / 2)
break
case 2:
attributes.frame = CGRect(x: width, y: height / 2, width: width, height: height / 2)
break
case 3:
attributes.frame = CGRect(x: 0, y: height, width: width, height: height / 2)
break
case 4:
attributes.frame = CGRect(x: 0, y: height + height / 2, width: width, height: height / 2)
break
case 5:
attributes.frame = CGRect(x: width, y: height, width: width, height: height)
break
default:
let last = self.AttribuArray[i - 6]
var frame = last.frame
frame.origin.y += 2 * height
attributes.frame = frame
}
return attributes
}
- 賦上代碼
class SquareLayout: UICollectionViewLayout {
// 存放相關(guān)的屬性
var AttribuArray : [UICollectionViewLayoutAttributes] = []
override init() {
super.init()
}
// 設(shè)置ContentSize 這樣才可以滑動
override var collectionViewContentSize: CGSize{
get{
let count = self.collectionView?.numberOfItems(inSection: 0)
let rows = (count! + 2) / 3
let rowH: CGFloat = (self.collectionView?.width)! / 2
if Int(rowH) * rows > Int(UIScreen.height) {
return CGSize(width: 0, height: rowH * CGFloat(rows))
} else {
return CGSize(width: 0, height: rowH * CGFloat(rows) - rowH / 2)
}
} set{
self.collectionViewContentSize = newValue
}
}
//初始化 布局
override func prepare() {
super.prepare()
AttribuArray.removeAll()
let count = self.collectionView?.numberOfItems(inSection: 0)
guard count != 0 else {
print("沒有數(shù)據(jù)")
return
}
for index in 0..<Int(count!){
let indexpath = NSIndexPath(item: index, section: 0)
let attributes = self.layoutAttributesForItem(at: indexpath as IndexPath)
self.AttribuArray.append(attributes!)
}
}
override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
let width: CGFloat = (self.collectionView?.width)! * 0.5
let attributes = UICollectionViewLayoutAttributes.init(forCellWith: indexPath)
let height: CGFloat = width
let i = indexPath.item
switch i {
case 0:
attributes.frame = CGRect(x: 0, y: 0, width: width, height: height)
break
case 1:
attributes.frame = CGRect(x: width, y: 0, width: width, height: height / 2)
break
case 2:
attributes.frame = CGRect(x: width, y: height / 2, width: width, height: height / 2)
break
case 3:
attributes.frame = CGRect(x: 0, y: height, width: width, height: height / 2)
break
case 4:
attributes.frame = CGRect(x: 0, y: height + height / 2, width: width, height: height / 2)
break
case 5:
attributes.frame = CGRect(x: width, y: height, width: width, height: height)
break
default:
let last = self.AttribuArray[i - 6]
var frame = last.frame
frame.origin.y += 2 * height
attributes.frame = frame
}
return attributes
}
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
return AttribuArray
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
import UIKit
import Foundation
class ScrollFlowLayout: UICollectionViewFlowLayout {
/*
注意： 在初始化一個UICollectionViewLayout實例吼，會有一系列準(zhǔn)備方法被自動調(diào)用器一，保證layout實例的正確
1.prepare
2.CollectionViewContentSize
3.layoutAttributesForElementInRect -> 初始化的layout的外觀將由該方法返回的UICollectionViewLayoutAttributes決定
*/
override init() {
super.init()
self.minimumLineSpacing = 0.7 * self.itemSize.width
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
// MARK:-- 特別注意课锌，布局的初始化操作，不要在init中做布局的初始化操作
override func prepare() {
super.prepare()
self.scrollDirection = .horizontal
let insert: CGFloat = ((self.collectionView?.width)! - self.itemSize.width) / 2
self.sectionInset = UIEdgeInsetsMake(0, insert, 0, insert)
}
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
let array = super.layoutAttributesForElements(in: rect)
let centerX = (self.collectionView?.contentOffset.x)! + (self.collectionView?.width)! / 2
// print("layoutAttributesForElementsInRect==\(rect)=======\(centerX)")
for attribute in array! {
// print("第 \(attribute.indexPath.item) cell --距離：\(attribute.center.x - centerX)")
let delta = abs(attribute.center.x - centerX);
let scale = 1 - delta/(self.collectionView?.width)!
attribute.transform = CGAffineTransform(scaleX: scale, y: scale)
}
return array!
}
override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
return true
}
override func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint {
var rect = CGRect()
rect.origin.x = proposedContentOffset.x
rect.origin.y = proposedContentOffset.y
rect.size = (self.collectionView?.frame.size)!
let array = super.layoutAttributesForElements(in: rect)
let centerX = (self.collectionView?.width)! / 2 + proposedContentOffset.x
print("=====\(proposedContentOffset.x)")
//存放的最小間距
//TODO: 注意研究一下：
var minDelta = MAXFLOAT
for attribute in array! {
if Float(abs(minDelta)) > Float(abs(attribute.center.x - centerX)) {
minDelta = Float(attribute.center.x - centerX)
}
}
// 修改原有的偏移量
//如果返回的時zero 那個滑動停止后 就會立刻回到原地
return CGPoint.init(x: CGFloat(proposedContentOffset.x + CGFloat(minDelta)), y: proposedContentOffset.y)
}
}
<font color = #DC143C> 方法調(diào)用的先后順序
1.prepare()
2.collectionViewContentSize
3.layoutAttributesFoeItem
4.layoutAttributesInRect
