ios - Collectionview 单元后的间距

Question

我想创建一个像图片一样的 UICollectionview。在这里，我有 18 个正方形。 Collection View 的宽度是正方形宽度的 6 倍和三个边框线宽度。同样高度也是正方形高度的 3 倍和两个边框线的添加。

在 collectionView 中，我如何在图片中添加前面以及单元格之间的边界线。

Answer 1

输出



您可以从 UICollectionViewLayout 获得以上设计布局.

三个文件:
1. SquareViewController
2. SquareCollectionViewCell
3.方形布局

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 {

}

方型 [UICollectionView 布局]

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

在 UICollectionView 中嵌入 UICollectionViewLayout:

选择 squareCollectionVw ，然后单击 Attributes Inspector ,

更改Layout如Custom来自 Flow

Class如SquareLayout [对我来说，Square]