前言
最近項目中用到了類似蜂窩的六邊形布局，在這里分享出來拋磚引玉，供大家參考學習。本文提供了2種思路實現效果，第一種方式使用UICollectionView實現，第二種方式使用UIScrollView實現，兩種方式底層核心思想是一致的。
效果圖
效果圖
一、UICollectionView
由于UICollectionView自身提供很多屬性，所以只需要自定義UICollectionViewFlowLayout布局，內部計算每個控件的位置就可以很輕松的實現。
核心代碼
override func prepare() {
super.prepare()
guard let collectionView = collectionView else { return }
scrollDirection = .vertical
attributesArray = nil
itemWidth = (collectionView.bounds.width - minimumInteritemSpacing * CGFloat(itemsPerRow - 1) - collectionView.contentInset.left - collectionView.contentInset.right) / CGFloat(itemsPerRow)
itemSideLength = itemWidth / sqrt(3)
itemHeight = itemSideLength * 2
itemSize = CGSize(width: itemWidth, height: itemHeight)
heightOfGroup = itemSideLength + itemSize.height + 2 * minimumLineSpacing
itemsPerGroup = itemsPerRow + itemsPerRow - 1
items = collectionView.numberOfItems(inSection: 0)
contentSize = {
let group = CGFloat(items / itemsPerGroup)
let groupModulo = items % itemsPerGroup
let residualRow = (groupModulo <= (itemsPerRow - 1)) ? 1 : 2
let residualHeight: CGFloat = {
if groupModulo == 0 {
return itemHeight * 0.25
}else if residualRow == 2 {
return heightOfGroup + itemHeight * 0.25
}else {
return itemHeight
}
}()
return CGSize(width: collectionView.bounds.width - collectionView.contentInset.left - collectionView.contentInset.right, height: group * heightOfGroup + residualHeight)
}()
}
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
if let attributesArray = attributesArray {
return attributesArray
}else {
attributesArray = Array(0..<items).compactMap({layoutAttributesForItem(at: IndexPath(item: $0, section: 0))})
return attributesArray
}
}
override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
let groupIndex: Int = indexPath.row / itemsPerGroup
let indexInGroup: Int = indexPath.row % itemsPerGroup
let isFirstLine: Bool = indexInGroup < Int(itemsPerGroup / 2)
let indexInLine: Int = isFirstLine ? indexInGroup : indexInGroup - Int(itemsPerGroup / 2)
let x = (itemSize.width) * (CGFloat(indexInLine) + (isFirstLine ? 0.5 : 0)) + CGFloat(indexInLine) * minimumInteritemSpacing + (isFirstLine ? minimumInteritemSpacing * 0.5 : 0)
let y = (itemSize.height) * (isFirstLine ? 0 : 0.75) + heightOfGroup * CGFloat(groupIndex) + (isFirstLine ? 0 : minimumLineSpacing)
let attributes = UICollectionViewLayoutAttributes(forCellWith: indexPath)
attributes.frame = CGRect(x: x, y: y, width: itemSize.width, height: itemSize.height)
return attributes
}
二、UIScrollView
UIScrollView實現相對比較復雜，內部主要涉及到控件的復用、位置計算、點擊事件。
1.復用
考慮到大量數據源，我們內部需要一個復用機制來保障性能，參考UITableView的Cell復用原理和源碼分析，自己在內部完成一個復用池。
復用池核心代碼
func pushCell(_ cell: CLHoneycombCell, forReuseIdentifier identifier: String) {
semaphore.wait()
defer {
semaphore.signal()
}
if cacheCells[identifier] == nil {
cacheCells[identifier] = []
}
cacheCells[identifier]?.add(cell)
}
func popCell(forReuseIdentifier identifier: String) -> CLHoneycombCell? {
semaphore.wait()
defer {
semaphore.signal()
}
if let cell = cacheCells[identifier]?.anyObject() as? CLHoneycombCell {
cacheCells[identifier]?.remove(cell)
return cell
}
return nil
}
func removeAll() {
semaphore.wait()
defer {
semaphore.signal()
}
cacheCells.removeAll()
}
2.位置計算
根據蜂窩布局特性，將控件進行分組，然后計算每一組中的每一個控件位置。滑動的時候需要先計算出新出現的控件，對其布局進行修正，然后需要找出滑出屏幕的控件，將其加入到復用池中。
核心代碼
func invalidateLayout() {
guard let delegation = delegate, let dataSource = dataSource else { return }
cellRects.filter({displayingContentRect.containsVisibleRect($0.1) && visibleCells[$0.0] == nil}).forEach { (i, cellRect) in
let cell = dataSource.honeycombView(self, cellForRowAtIndex: i)
cell.frame = cellRect
delegation.honeycombView(self, willDisplayCell: cell, forIndex: i)
contentView.addSubview(cell)
visibleCells[i] = cell
}
visibleCells.filter({!displayingContentRect.containsVisibleRect(cellRects[$0.0] ?? .zero)}).forEach { (index, cell) in
cell.removeFromSuperview()
cell.setHighlighted(false)
cell.setSelected(false)
visibleCells[index] = nil
delegation.honeycombView(self, didEndDisplayingCell: cell, forIndex: index)
reusePool.pushCell(cell, forReuseIdentifier: cell.identifier)
}
}
3.點擊事件
通過點擊的位置在可見的控件數組中找出對應的控件索引，然后處理后續的事件。
核心代碼
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
super.touchesBegan(touches, with: event)
guard let touchPoint = touches.first?.location(in: contentView) else { return }
let containingRects = visibleCellRects.filter({$0.1.contains(touchPoint)})
if containingRects.count >= 2 {
var nearestIndexRect = containingRects.first!
for currentIndexRect in containingRects where distanceBetween(centerForRect(currentIndexRect.1), touchPoint) < distanceBetween(centerForRect(nearestIndexRect.1), touchPoint) {
nearestIndexRect = currentIndexRect
}
let indexForHighlight = nearestIndexRect.0
let explicit = delegate?.honeycombView(self, shouldHightlightItemAtIndex: indexForHighlight) ?? true
highlightItemAtIndex(indexForHighlight, explicit: explicit)
}else if containingRects.count == 1 {
let indexForHighlight = containingRects.first!.0
let explicit = delegate?.honeycombView(self, shouldHightlightItemAtIndex: indexForHighlight) ?? true
highlightItemAtIndex(indexForHighlight, explicit: explicit)
}
}
override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
super.touchesEnded(touches, with: event)
let index = currentHighlightedIndex
guard index >= 0, let honeycomDelegate = delegate else { return }
unhighlightItemAtIndex(index)
let isSelected = visibleCells[index]?.isSelected ?? false
if isSelected, honeycomDelegate.honeycombView(self, shouldDeselectItemAtIndex: index) {
deselectItemAtIndex(index)
}else if !isSelected, honeycomDelegate.honeycombView(self, shouldSelectItemAtIndex: index) {
selectItemAtIndex(index)
}
}
override func touchesCancelled(_ touches: Set<UITouch>, with event: UIEvent?) {
super.touchesCancelled(touches, with: event)
guard currentHighlightedIndex >= 0 else { return }
unhighlightItemAtIndex(currentHighlightedIndex)
}
4.內部細節
UIScrollView實現其實就是相當于自己寫了一個UICollectionView，內部思想基本上差不多，只是通過自己實現能夠更好的自定義。其中還是有很多細節可以借鑒，這里為了保障自己的代理和滑動視圖的代理不沖突，內部增加了一層contentView。
總結
核心代碼已經貼出，完整代碼請查看----->>>CLDemo，如果對你有所幫助，歡迎Star。
