前言

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

巴特西

iOS开发之蜂窝布局—Swift

前言

效果图

一、`UICollectionView`

二、`UIScrollView`

1.复用

2.位置计算

3.点击事件

4.内部细节

总结

最新文章

热门文章

巴特西

iOS开发之蜂窝布局—Swift

前言

效果图

一、UICollectionView

二、UIScrollView

1.复用

2.位置计算

3.点击事件

4.内部细节

总结

最新文章

热门文章

一、`UICollectionView`

二、`UIScrollView`