iOS开发之蜂窝布局—Swift

前言

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