前言
最近项目中用到了类似蜂窝的六边形布局，在这里分享出来抛砖引玉，供大家参考学习。本文提供了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。
