Как нарисовать линии сетки для ячеек UICollectionView, которые не зависят от размера устройства?

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 различных типа пользовательских ячеек, один для левой и один для правой с метками, заполненными цветом рамки, чтобы посмотреть.

Вы можете посмотреть на этот образец

В контроллере представления коллекции можно проверить ячейку и создать соответствующую ячейку.

 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);
    }

Добавить соответствующие ограничения, чтобы метки границ всегда сохраняли нулевое поле справа