Question

我想创建一个如图所示的UICollectionview。在这里，我有18个正方形。集合视图的宽度是6倍正方形宽度和3条边界线宽度的和。同样，高度也是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
    }
}

在UICollectionView中嵌入UICollectionViewLayout：

选择squareCollectionVw，然后单击Attributes Inspector，

将Layout中的Custom从Flow更改为Class
SquareLayout为{{1}} [对我来说，正方形]

Answer 2

您只需在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
}

Answer 3

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

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

我认为，您必须创建2个相同的单元格，并在UICollectionViewFlowLayoutDelegate中对其进行配置，使每个单元格宽度为screen.width / 2，并为这2个单元格添加边框。在边框的一部分中，您可能必须使用图层（CALayer）才能使它等于4面

Collectionview单元格后的间距

4 个答案: