Zeichnung Unterstreichung für UIButton ist hinter Ansichten versteckt

Question

Ich habe eine Viewcontroller mit 3 UIButtons, die die gleiche Y-Position haben aber 20px getrennt voneinander horizontal. Wenn eine Schaltfläche ausgewählt ist, möchte ich eine Linie unter der Schaltfläche zeichnen. Ich habe versucht, nur das Unterstreichungsattribut hinzuzufügen, aber die Zeile ist nicht wirklich anpassbar. Ich habe die Schaltflächen oben auf einer UIImageView, die in einer Unterklasse von UIView I namens SectionView enthalten ist.

Meiner Ansicht Controller Ich habe die folgende Funktion, die aufgerufen wird, wenn eine Taste gedrückt wird:

@IBOutlet weak var sectionView: SectionView! 

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

In meinem UIView Unterklasse, habe ich die folgenden:

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

ich bekommen kann die Linie, um an der Position und Länge zu zeichnen, die ich wünsche, aber es ist unter dem UIButton und UIImageView. Wie kann ich es oben erscheinen lassen?

Answer 1

Ich musste es ändern. Anstatt einen Bezier-Pfad zu verwenden, habe ich am Ende einen UIView erstellt und über den anderen Ansichten platziert.

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 

} 

Denken Sie daran, meine Knöpfe sind auf einem UIImageView, die innerhalb eines UIView enthalten ist. Wenn ich versuchte, die Linienansicht als Unteransicht zur Bildansicht hinzuzufügen, würde die Linie nicht mit dem x-Ursprung der Schaltfläche übereinstimmen. Also habe ich stattdessen die Linienansicht als Unteransicht zu der UIView hinzugefügt und es kam richtig aus.

Answer 2

Wir können CALayer verwenden, um Linien zu zeichnen. Fügen Sie den folgenden Code in Ihrer Schaltflächenaktion hinzu, dies kann hilfreich sein.

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

ERGEBNIS:

Answer 3

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

// Dieser Code wird eine Zeile weiter unten Ihre Schaltfläche erstellen (mit UIBezierPath und Layers)