ios - 在 uicollectionview 中的单元格下方添加水平线

Question

我正在实现类似日历布局的一些修改，如屏幕截图所示。为此，我使用了 UICollectionView。问题是，我必须画一条屏幕宽度的连续线(屏幕截图中的绿线)。 绿线应覆盖整个宽度，我知道它不会显示在圆形单元格上，因为 角半径的一半 和一条垂直线仅在第一个单元格之后(上午 10 点) ).我必须在其中添加 shapelayer，这样它看起来就像一条连续的线。这是我到目前为止尝试过的代码。

KKViewController.m

 func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {

    let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as! KKBookCollectionViewCell

    self.bookingCollectionView.backgroundColor = UIColor.whiteColor()

    let rectangularRowIndex:NSInteger = indexPath.row % 5
    if(rectangularRowIndex == 0 )
    {
        cell.userInteractionEnabled = false
        cell.layer.cornerRadius = 0
        cell.timeSlotLabel.text = "10am"
        cell.backgroundColor = UIColor.whiteColor()
        cell.layer.borderWidth = 0
        cell.layer.borderColor = UIColor.clearColor().CGColor

    }
    else
    {
        cell.userInteractionEnabled = true
        cell.layer.cornerRadius = cell.frame.size.width/2
        cell.timeSlotLabel.text = ""
        //cell.backgroundColor = UIColor.lightGrayColor()
        cell.layer.borderWidth = 1
        cell.layer.borderColor = UIColor.grayColor().CGColor

        if cell.selected == true
        {
            cell.backgroundColor = UIColor.greenColor()
        }

        else
        {
            cell.backgroundColor = UIColor.lightGrayColor()
        }
    }
    return cell
}

KKCollectionCell.m

var borderWidth:CGFloat!
var borderPath:UIBezierPath!

override func awakeFromNib() {
    super.awakeFromNib()
    drawHorizontalLine()
    dottedLine(with: borderPath, and: borderWidth)

    drawVerticalLine()
    dottedLine(with: borderPath, and: borderWidth)

func drawVerticalLine()
{
    borderPath = UIBezierPath()
    borderPath.moveToPoint(CGPointMake(self.frame.origin.x + self.frame.size.width, self.frame.origin.y))
    //borderPath.addLineToPoint(CGPointMake(self.frame.size.width - 5, self.frame.origin.y + self.frame.size.height - 50))

    borderPath.addLineToPoint(CGPointMake(self.frame.origin.x + self.frame.size.width, self.frame.origin.y + self.frame.size.height))
    borderWidth = 2.0
    print("border path is %f, %f:\(borderPath)")
}

func drawHorizontalLine()
{
    borderPath = UIBezierPath()
    borderPath.moveToPoint(CGPointMake(0, self.frame.origin.y))
    borderPath.addLineToPoint(CGPointMake(self.frame.size.width + 10, self.frame.origin.y))
    borderWidth = 2.0
    print("border path is %f, %f:\(borderPath)")
}

func dottedLine (with path:UIBezierPath, and borderWidth:CGFloat)
{
    let shapeLayer = CAShapeLayer()
    shapeLayer.strokeStart = 0.0
    shapeLayer.strokeColor = UIColor.greenColor().CGColor
    shapeLayer.lineWidth = borderWidth
    shapeLayer.lineJoin = kCALineJoinRound
    shapeLayer.lineDashPattern = [1,2]
    shapeLayer.path = path.CGPath
    self.layer.addSublayer(shapeLayer)
}

Answer 1

您可以在 Collection View 单元格内添加一个新 View ，并为该新 View 设置角半径。您还必须减少单元格之间的间距。然后该行将看起来像您预期的那样。