Интервал после ячейки Collectionview

Question

Я хочу создать UICollectionview, как на картинке.Здесь у меня 18 квадратов.Ширина представления «Коллекция» представляет собой добавление 6-кратной ширины квадрата и трех линий ширины границы. Аналогичным образом, высота также является добавлением 3-кратной высоты квадрата и двух линий границы.

В collectionView как добавитьграницы спереди, а также между ячейками, как на рисунке.

Answer 1

Вывод

Вы можете получить макет выше указанного дизайна из UICollectionViewLayout.

Три файла: 1. SquareViewController 2. SquareCollectionViewCell 3. SquareLayout

SquareViewController ----

class SquareViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {

// CONSTRAINTS: top 20, left 0, right 0, height 100.
@IBOutlet weak var squareCollectionVw: UICollectionView!

// SET squareCollectionVw HEIGHT CONSTRAINT OUTLET
@IBOutlet weak var collectionVwHeightConst: NSLayoutConstraint!

override func viewDidLoad() {
    super.viewDidLoad()

    collectionVwHeightConst.constant = (UIScreen.main.bounds.width / 6) * 3 + 1
    squareCollectionVw.backgroundColor = UIColor.darkGray

    // Do any additional setup after loading the view.
}
func numberOfSections(in collectionView: UICollectionView) -> Int {

    return 1
}

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {

    return 18
}

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

    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "square", for: indexPath) as! SquareCollectionViewCell

    cell.backgroundColor = UIColor.white
    cell.layer.borderColor = UIColor.lightGray.cgColor
    cell.layer.borderWidth = 1.0

    return cell
}
}

SquareCollectionViewCell

class SquareCollectionViewCell: UICollectionViewCell {

}

SquareLayout [UICollectionViewLayout]

class Square: UICollectionViewLayout {

    var CELL_HEIGHT = 0.0
    var CELL_WIDTH = 0.0

    var portrait_Ypos : Double = 0.0
    var portrait_Xpos : Double = 0.0
    var contentSize = CGSize.zero

    var cellAttrsDictionary = Dictionary<IndexPath, UICollectionViewLayoutAttributes>()

    override var collectionViewContentSize : CGSize {
        return self.contentSize
    }

    override func prepare() {

        CELL_WIDTH = (Double(UIScreen.main.bounds.width) / 6) - 0.5
        CELL_HEIGHT = CELL_WIDTH


        if let sectionCount = collectionView?.numberOfSections, sectionCount > 0 {

            for section in 0...sectionCount-1 {

                if let rowCount = collectionView?.numberOfItems(inSection: section), rowCount > 0 {

                    for item in 0...rowCount-1 {

                        let cellIndex = IndexPath(item: item, section: section)

                        if item <= 5
                        {
                            portrait_Ypos = 1

                            if item == 0
                            {

                                portrait_Xpos = 1
                            }
                            else
                            {

                                if item == 3
                                {

                                    portrait_Xpos = portrait_Xpos + CELL_WIDTH + 1
                                }
                                else
                                {

                                    portrait_Xpos = portrait_Xpos + CELL_WIDTH
                                }

                            }
                        }
                        else
                        {
                            if item == 6
                            {
                                portrait_Ypos = 1 + CELL_HEIGHT
                                portrait_Xpos = 1
                            }
                            else
                            {
                                if item % 6 == 0
                                {
                                    portrait_Ypos = portrait_Ypos + CELL_HEIGHT
                                    portrait_Xpos = 1
                                }
                                else
                                {
                                    if item % 6 == 3
                                    {
                                        portrait_Xpos = portrait_Xpos + CELL_WIDTH + 1
                                    }
                                    else
                                    {
                                        portrait_Xpos = portrait_Xpos + CELL_WIDTH
                                    }

                                }
                            }


                        }

                        let cellAttributes = UICollectionViewLayoutAttributes(forCellWith: cellIndex)
                        cellAttributes.frame = CGRect(x: portrait_Xpos, y: portrait_Ypos, width: CELL_WIDTH, height: CELL_HEIGHT)

                        if section == 0 && item == 0 {
                            cellAttributes.zIndex = 4
                        } else if section == 0 {
                            cellAttributes.zIndex = 3
                        } else if item == 0 {
                            cellAttributes.zIndex = 2
                        } else {
                            cellAttributes.zIndex = 1
                        }
                        cellAttrsDictionary[cellIndex] = cellAttributes

                    }

                }

            }
        }

        let contentWidth = UIScreen.main.bounds.width
        let contentHeight = CGFloat(portrait_Ypos) + CGFloat(CELL_HEIGHT)
        self.contentSize = CGSize(width: contentWidth, height: contentHeight)

        print("sPort.contentSize     ", self.contentSize)
    }

    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {

        var attributesInRect = [UICollectionViewLayoutAttributes]()

        for cellAttributes in cellAttrsDictionary.values {
            if rect.intersects(cellAttributes.frame) {

                attributesInRect.append(cellAttributes)
            }
        }

        return attributesInRect
    }

    override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {

        return cellAttrsDictionary[indexPath]!

    }

    override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
        return true
    }
}

Встроить UICollectionViewLayout в UICollectionView:

Выберите squareCollectionVw и нажмите Attributes Inspector,

1. Изменить Layout как Custom с Flow

2. Class как SquareLayout [Для меня, Квадрат]

Answer 2

Для добавления пространства между ячейками

Предположим, что в одной строке UICollectionView есть 2 ячейки

Например:

 func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

        let width = (self.view.frame.size.width - 15) / 2.0 //total view width and 15 space between each cell
        let height = CGFloat(70.0) //Height is 70. (you can take same as width also)
        return CGSize(width: width, height: height)
    }

Это будетпоможет вам добавить пространство между ячейками.

Для добавления границы между ячейками

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

    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CollectionCell
    cell.layer.borderWidth = 1.0
    cell.layer.borderColor = UIColor.black

}

Answer 3

По моему мнению, вы должны создать 2 идентичные ячейки и настроить их в UICollectionViewFlowLayoutDelegate, чтобы ширина каждой ячейки составляла screen.width / 2, и поставить границу для этих двух ячеек.В части границы вам, возможно, придется поиграть со слоем (CALayer), чтобы сделать его равным для 4 сторон

Answer 4

Вы можете просто поместить два UICollectionViewCell с девятью квадратами внутри в свой UICollectionView и в метод cellForItem

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cellID", for: indexPath) as! CustomCell

    cell.layer.borderWidth = 2
    cell.layer.borderColor = .black

    return cell
}