UIButton的绘制下划线隐藏在视图后面

Question

我有一个3 UIButtons的viewcontroller，它具有相同的Y位置，但水平相距20px。当选择一个按钮时，我想在按钮下方画一条线。我尝试添加下划线属性，但该行不是真正可自定义的。我有一个UIImageView顶部的按钮，它包含在名为SectionView的UIView的子类中。

在我的视图控制器中，我有以下按下按钮时调用的功能：

@IBOutlet weak var sectionView: SectionView!

func sectionButtonPressed(sender: UIButton) {
    self.sectionView.selectedButton = sender
    self.sectionView.setNeedsDisplay()
}

在我的UIView子类中，我有以下内容：

class SectionView: UIView {

    var selectedButton: UIButton?

    override func drawRect(rect: CGRect) {

        let linePath = UIBezierPath()

        linePath.moveToPoint(CGPoint(x:(self.selectedButton?.frame.origin.x)! - 3, y: (self.selectedButton?.frame.origin.y)! + 35))
        linePath.addLineToPoint(CGPoint(x: (self.selectedButton?.frame.origin.x)! + (self.selectedButton?.frame.width)! + 3, y: (self.selectedButton?.frame.origin.y)! + 35))
        linePath.closePath()
        UIColor.purpleColor().set()
        linePath.stroke()
        linePath.fill()
    }
}

我可以在我想要的位置和长度上绘制线条，但它在UIButton和UIImageView下面。我怎样才能让它出现在上面？

Answer 1

func addLine(button:UIButton)// pass button object as a argument
{
    let length = button.bounds.width
    let x  =  button.bounds.origin.x
    let y = button.bounds.origin.y + button.bounds.height - 5
    let path = UIBezierPath()
    path.move(to: CGPoint(x: x, y: y))
    path.addLine(to: CGPoint(x: x + length , y:y))
    //design path in layer
    let lineLayer = CAShapeLayer()
    lineLayer.path = path.cgPath
    lineLayer.strokeColor = UIColor.red.cgColor
    lineLayer.lineWidth = 1.0
    lineLayer.fillColor  = UIColor.clear.cgColor
    button.layer.insertSublayer(lineLayer, at: 0)
}`

//此代码将在按钮下方创建一行（使用UIBezierPath和Layers）

Answer 2

我不得不改变它。我没有使用bezier路径，而是创建了一个UIView并将其放在其他视图之上。

func sectionButtonPressed(sender: UIButton) {
    let lineView = createView(sender)
    self.sectionView.addSubview(lineView)
}

func createView(sender:UIButton) -> UIView {

    let customView = UIView(frame: CGRect(x: sender.frame.origin.x, y: sender.frame.origin.y + 12, width: sender.frame.width, height: 2.0))
    customView.backgroundColor = UIColor.purpleColor()
    return customView

}

请记住，我的按钮位于UIImageView中的UIView之上。当我尝试将线视图作为子视图添加到imageview时，该线不会与按钮的x原点对齐。因此，我将线视图作为子视图添加到UIView，它看起来是正确的。

Answer 3

我们可以使用CALayer绘制线条。在按钮操作中添加以下代码，这可能有所帮助。

@IBAction func sectionButtonPressed(sender: AnyObject) {
    let border = CALayer()
    border.borderColor = UIColor.purpleColor().CGColor
    border.frame = CGRect(x: 0, y: sender.frame.size.height - 2,
                           width:  sender.frame.size.width, height: 2)
    border.borderWidth = 2.0
    sender.layer.addSublayer(border)
    sender.layer.masksToBounds = true
}

结果：