Ios Collectionview单元后的间距

我想创建一个像图片一样的UICollectionview。这里我有18个正方形。集合视图的宽度是6倍正方形宽度和三条边框线宽度的总和。同样，高度也是3倍正方形高度和两条边框线高度的总和

---

在collectionView中，如何在前面以及单元格之间添加边框，如图所示。

您只需在UICollectionView和方法cellForItem中放置两个UICollectionViewCell，其中有九个正方形即可

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
}

---

用于在单元格之间添加空格

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

}

class SquareCollectionViewCell: UICollectionViewCell {

}

假设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

}

class SquareCollectionViewCell: UICollectionViewCell {

}

---

我认为，您必须创建两个相同的单元格，并在UICollectionViewFlowLayoutDelegate中配置每个单元格宽度为

screen.width/2

，并为这两个单元格设置边框。在部分边界中，您可能必须使用图层（CALayer）使其4边相等

输出

您可以从

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

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

}

class SquareCollectionViewCell: UICollectionViewCell {

}

方形布局[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
    }
}

class Square:UICollectionViewLayout{
可变单元高度=0.0
可变单元格宽度=0.0
风险值：双=0.0
变量：双=0.0
var contentSize=CGSize.zero
var CellAttributedDictionary=字典（）
覆盖变量collectionViewContentSize:CGSize{
返回self.contentSize
}
重写func prepare（）{
单元格宽度=（双精度（UIScreen.main.bounds.WIDTH）/6）-0.5
单元高度=单元宽度
如果让sectionCount=collectionView？.numberOfSections，sectionCount>0{
对于0…sectionCount-1中的节{
如果让rowCount=collectionView？.numberOfItems（第节），则rowCount>0{
对于0中的项目…行计数-1{
让cellIndex=IndexPath（项：项，节：节）
如果项[UICollectionViewLayoutAttribute]{
var attributesInRect=[UICollectionViewLayoutAttribute]（）
对于CellAttributesDictionary.values中的cellAttributes{
如果矩形相交（cellAttributes.frame）{
attributesInRect.append（单元格属性）
}
}
返回属性返回
}
重写func layoutAttributesForItem（在indexPath:indexPath）->UICollectionViewLayoutAttributes{
返回CellAttributedDictionary[indexPath]！
}
覆盖函数应验证布局（对于边界新边界：CGRect）->Bool{
返回真值
}
}

UICollectionView中嵌入的UICollectionViewLayout:

选择

squareCollectionVw

，然后单击

属性检查器

将

布局

更改为

自定义

自

流程

Class

as

SquareLayout

[对我来说，Square]

---

为什么选择集合视图。是否有任何重用机制？如果是，则发布完整的UIR如果您对此答案满意，请向上投票并打绿色勾。这对我们的SO追随者很有用