前言

最近項目中用到了類似蜂窩的六邊形布局，在這里分享出來拋磚引玉，供大家參考學(xué)習(xí)。本文提供了2種思路實現(xiàn)效果，第一種方式使用UICollectionView實現(xiàn)，第二種方式使用UIScrollView實現(xiàn)，兩種方式底層核心思想是一致的。

效果圖

效果圖

一、UICollectionView

由于UICollectionView自身提供很多屬性，所以只需要自定義UICollectionViewFlowLayout布局，內(nèi)部計算每個控件的位置就可以很輕松的實現(xiàn)。

核心代碼

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實現(xiàn)相對比較復(fù)雜，內(nèi)部主要涉及到控件的復(fù)用、位置計算、點擊事件。

1.復(fù)用

考慮到大量數(shù)據(jù)源，我們內(nèi)部需要一個復(fù)用機制來保障性能，參考UITableView的Cell復(fù)用原理和源碼分析，自己在內(nèi)部完成一個復(fù)用池。

復(fù)用池核心代碼

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.位置計算

根據(jù)蜂窩布局特性，將控件進(jìn)行分組，然后計算每一組中的每一個控件位置?；瑒拥臅r候需要先計算出新出現(xiàn)的控件，對其布局進(jìn)行修正，然后需要找出滑出屏幕的控件，將其加入到復(fù)用池中。

核心代碼

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.點擊事件

通過點擊的位置在可見的控件數(shù)組中找出對應(yīng)的控件索引，然后處理后續(xù)的事件。

核心代碼

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.內(nèi)部細(xì)節(jié)

UIScrollView實現(xiàn)其實就是相當(dāng)于自己寫了一個UICollectionView，內(nèi)部思想基本上差不多，只是通過自己實現(xiàn)能夠更好的自定義。其中還是有很多細(xì)節(jié)可以借鑒，這里為了保障自己的代理和滑動視圖的代理不沖突，內(nèi)部增加了一層contentView。

總結(jié)

核心代碼已經(jīng)貼出，完整代碼請查看----->>>CLDemo，如果對你有所幫助，歡迎Star。