Question

目前，我正在使用UICollectionView来制作物品网格。我想画出在iPhone和iPad上都可以使用的屏幕截图中的网格线。

在iPad上，标签或网格线未正确放置。在iPhone上，调整效果很好。

override func viewDidLoad() {
    self.automaticallyAdjustsScrollViewInsets = false
    let layout = UICollectionViewFlowLayout()
    layout.scrollDirection = .vertical
    layout.minimumLineSpacing = 1.0
    layout.minimumInteritemSpacing = 0.0
    collectionView.setCollectionViewLayout(layout, animated: false)
    collectionView.layoutIfNeeded()
    collectionView.contentOffset = CGPoint.zero
}

private let foundationScreenElems = ["ABOUT US", "CHAIRMAN'S MESSAGE", "MESSAGE OF CEO", "OUR GOALS", "PILLARS", "VISION AND MISSION", "QUALITY POLICY", "TERMS & CONDITIONS"]
var foundationGridLayers: [CALayer] = []

func drawHorizontalLines(rowsCount: Int) {
    var pos = UIDevice.current.userInterfaceIdiom == .pad ? collectionView.frame.width / 3.5 - 0.5 : collectionView.frame.width / 2.5 - 0.5
    var i = 1
    while i < rowsCount {
        if (viewId == .foundation && foundationGridLayers.count < 4) {
            let layer = CALayer()
            if (i == 3 && UIDevice.current.userInterfaceIdiom == .pad) {
                pos = pos + 10
            }
            layer.frame = CGRect(x: 10, y: CGFloat(i) * pos, width: self.view.frame.width - 20, height: 1.0)
            layer.backgroundColor = gridColor
            foundationGridLayers.append(layer)
            collectionView.layer.addSublayer(layer)
        }
        i += 1
    }
}

func drawVerticalLine(rowsCount: Int) {
    let top = getTop()
    let pos = UIDevice.current.userInterfaceIdiom == .pad ? collectionView.frame.width / 3.5 - 0.5 : collectionView.frame.width / 2.5 - 0.5
    let width = self.view.frame.width / 2
    let layer = CALayer()
    if (UIDevice.current.userInterfaceIdiom == .pad) {
        layer.frame = CGRect(x: width, y: top + 10, width: 1.0, height: pos * CGFloat(rowsCount) + 30)
    } else {
        layer.frame = CGRect(x: width, y: top - 10, width: 1.0, height: pos * CGFloat(rowsCount) - 10)
    }

    layer.backgroundColor = gridColor
    collectionView.layer.addSublayer(layer)
}

func getTop() -> CGFloat {
    let pos = UIDevice.current.userInterfaceIdiom == .pad ? collectionView.frame.width / 3 - 0.5 : collectionView.frame.width / 2.5 - 0.5
    let height = collectionView.frame.height
    let rowCount: CGFloat = CGFloat(foundationScreenElems.count / 2)
    let emptySpace = height - (pos * rowCount)
    return UIDevice.current.userInterfaceIdiom == .pad ? emptySpace / 2  : emptySpace / 4
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
    let top = getTop()
    return UIEdgeInsets(top: top, left: 0, bottom: 10, right: 0)
}

extension GridViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let width = collectionView.frame.width / 2 - 0.5
        let height = UIDevice.current.userInterfaceIdiom == .pad ? collectionView.frame.width / 3 - 0.5 : collectionView.frame.width / 2.5 - 0.5
        return CGSize(width: width, height: height)
    }
}

在iPad上，Pillars行未正确对齐或网格线不在正确的位置，但在iPhone上可以正常工作。

有没有办法绘制与设备无关的网格线？

Answer 1

您可以尝试创建2种不同类型的自定义单元格，一种用于左边，一种用于右边，带有填充边框颜色的标签。

您可以看看这个sample

在集合视图控制器中，您可以检查单元格并创建适当的单元格。

 override func collectionView(
        _ collectionView: UICollectionView,
        cellForItemAt indexPath: IndexPath
        ) -> UICollectionViewCell {

        var reuseIdentifier :String = "leftCell"

        let  itemsPerRow = 2;
        let column = indexPath.item % itemsPerRow;

        if(column == 1)
        {
            reuseIdentifier = "rightCell"
        }
        let cell = collectionView
            .dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath)

        // Configure the cell
        return cell
    }

使单元格适合任何设备屏幕

  func collectionView(_ collectionView: UICollectionView,
                        layout collectionViewLayout: UICollectionViewLayout,
                        sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: UIScreen.main.bounds.width/2, height: UIScreen.main.bounds.width/3);
    }

添加适当的约束，以使边框标签始终在右侧保持零边距

如何绘制与设备大小无关的UICollectionView单元格的网格线？

1 个答案: