Hinzufügen eines anklickbaren Randes zu UILabel

Question

So erstellen ich mehrere UILabel s programmatisch, die innerhalb einer sitzt und UILongPressGestureRecognizer verwenden, um die Berührungen zu erkennen. Zum Schreiben verwende ich die Option s spacing, um den Etiketten einen gewissen Spielraum zu geben, aber ich möchte die Totzonen entfernen, vorausgesetzt, dass Berührungen nicht sehr genau sind.

stackView = UIStackView() 
stackView.axis = .vertical 
stackView.alignment = .center 
stackView.distribution = .fillEqually 
stackView.spacing = 12 
let recognizer = UILongPressGestureRecognizer(target: self, action:#selector(self.handleGesture)) 
stackView.isUserInteractionEnabled = true 
recognizer.delegate = self as? UIGestureRecognizerDelegate 
stackView.addGestureRecognizer(recognizer) 
view.addSubview(stackView) 

let label = UILabel() 
label.textColor = UIColor.gray 
label.textAlignment = .center 
label.font = UIFont.boldSystemFont(ofSize: 11.0) 
label.text = "A" 
label.backgroundColor = UIColor(white: 0.15, alpha: 0.8) 
label.roundedButton() 
stackView.addArrangedSubview(label) 

.roundedButton ist eine Erweiterung wie folgt:

extension UILabel { 
    func roundedButton(){ 
     self.layer.cornerRadius = 6 
     self.layer.borderWidth = 1 
     self.layer.masksToBounds = true 
    } 
} 

Ich habe versucht, das Hinzufügen Polsterung mit inset, aber das sitzt im Hintergrund. Irgendwelche Gedanken?

Eine Möglichkeit, dies zu erreichen, ist das Etikett in einem UIView platzieren, aber es muss ein Weg sein, es nur mit der UILabel

Answer 1

Wrap UILabel innen UIView und erkennen Berührungen innerhalb containerView zu tun.

let stackView = UIStackView() 
stackView.axis = .vertical 
stackView.alignment = .center 
stackView.distribution = .fillEqually 
stackView.spacing = 0 
view.addSubview(stackView) 

let label = UILabel() 
label.textColor = UIColor.gray 
label.textAlignment = .center 
label.font = UIFont.boldSystemFont(ofSize: 11.0) 
label.text = "A" 
label.backgroundColor = UIColor(white: 0.15, alpha: 0.8) 
label.roundedButton() 

let containerView = UIView() 
containerView.backgroundColor = UIColor.clear 
containerView.translatesAutoresizingMaskIntoConstraints = false 
containerView.addSubview(label) 
label.leadingAnchor.constraint(equalTo: containerView.leadingAnchor).isActive = true 
label.trailingAnchor.constraint(equalTo: containerView.trailingAnchor).isActive = true 
label.topAnchor.constraint(equalTo: containerView.topAnchor, constant: 6).isActive = true 
label.bottomAnchor.constraint(equalTo: containerView.bottomAnchor, constant: -6).isActive = true 
stackView.addArrangedSubview(containerView) 

Zweite Lösung - Subklassen UILabel Unterschicht hinzuzufügen, mit Ihnen Form benötigen, und Einstellung label.backgroundColor = UIColor.clear:

class MyLabel: UILabel { 

    let subLayer: CALayer = { 
     let subLayer = CALayer() 
     subLayer.backgroundColor = UIColor(white: 0.15, alpha: 0.8).cgColor 
     subLayer.cornerRadius = 6 
     subLayer.borderWidth = 1 
     return subLayer 
    }() 

    override init(frame: CGRect) { 
     super.init(frame: frame) 
     commonInit() 
    } 

    required init?(coder aDecoder: NSCoder) { 
     super.init(coder: aDecoder) 
     commonInit() 
    } 

    private func commonInit() { 
     layer.addSublayer(subLayer) 
     subLayer.frame = CGRect(x:0, y:6, width: bounds.width, height: bounds.height - 12) 
    } 

    override func layoutSubviews() { 
     super.layoutSubviews() 
     subLayer.frame = CGRect(x:0, y:6, width: bounds.width, height: bounds.height - 12) 
    } 
} 

Mit zweite Lösung, die Sie Polsterung und wahrscheinlich sollte hinzufügen, aber das ist in anderen Antworten/Kommentaren zur Verfügung gestellt.

Answer 2

ein Etikett individuelle Erstellen und die UIEdgeInset wie pro Ihre Anforderung geändert werden (so viel Platz wollen Sie zeigen)

class CustomLabel: UILabel { 


    override func drawText(in rect: CGRect) { 
     let insets = UIEdgeInsets(top: topInset, left: leftInset, bottom: bottomInset, right: rightInset) 
     super.drawText(in: UIEdgeInsetsInsetRect(rect, insets)) 
    } 
} 

Answer 3

Dank Predag ​​konnte ich genau erreichen, was ich wollte. Teilen des Endergebnisses, als ich ein paar Helfer zum Einstellen von Hintergrund und Rahmen hinzugefügt habe.

class SuperUILabel : UILabel { 
    var spacing: CGFloat = 5 

    var subLayer: CALayer! = { 
     let subLayer = CALayer() 
     subLayer.cornerRadius = 6 
     subLayer.borderWidth = 1 
     return subLayer 
    }() 

    func setBorderColor(color: CGColor) 
    { 
     self.subLayer.borderColor = color 
    } 

    func setBackgroundColor(color: UIColor) { 
     self.subLayer.backgroundColor = color.cgColor 
    } 

    override init(frame: CGRect) { 
     super.init(frame: frame) 
     commonInit() 
    } 

    required init?(coder aDecoder: NSCoder) { 
     super.init(coder: aDecoder) 
     commonInit() 
    } 

    private func commonInit() { 
     self.layer.borderWidth = 0 
     layer.addSublayer(subLayer) 
     subLayer.frame = CGRect(x: self.spacing/2, y: self.spacing/2, width: bounds.width - self.spacing, height: bounds.height) 

    } 

    override func layoutSubviews() { 
     super.layoutSubviews() 
     subLayer.frame = CGRect(x: self.spacing/2, y: self.spacing/2, width: bounds.width - self.spacing, height: bounds.height - self.spacing) 
    } 
}