Frame Layout mit runden Ecken und automatischer Größe

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Frame Layout mit runden Ecken und automatischer Größe

    Hi,

    ich habe folgendes Problem. Ich habe gerade meiner erstes AR feature gestaltet. So weit so gut. Die jeweilige Information wird in 2 Labeln ausgegeben (das obere Label für den Titel, das untere für die Distanz). Es sieht aus wie eine Einheit, so soll es auch sein. Wenn ich jetzt versuche, dem Frame abgerundete Ecken zuzuweisen, ist nur die rechte Seite abgerundet.

    Mein 2. Problem ist, dass ich das Label, aber eigentlich den ganzen Frame dynamisch an die Länge des Textes anpassen möchte.

    Vielen Dank für jeden Tipp.

    Das ist die Klasse AnnotationView.

    Quellcode

    1. import UIKit
    2. //1
    3. protocol AnnotationViewDelegate {
    4. func didTouch(annotationView: AnnotationView)
    5. }
    6. //2
    7. class AnnotationView: ARAnnotationView {
    8. //3
    9. var titleLabel: UILabel?
    10. var distanceLabel: UILabel?
    11. var delegate: AnnotationViewDelegate?
    12. override func didMoveToSuperview() {
    13. super.didMoveToSuperview()
    14. loadUI()
    15. }
    16. //4
    17. func loadUI() {
    18. titleLabel?.removeFromSuperview()
    19. distanceLabel?.removeFromSuperview()
    20. let label = UILabel(frame: CGRect(x: 10, y: 0, width: self.frame.size.width, height: 30))
    21. label.font = UIFont.systemFont(ofSize: 16)
    22. label.numberOfLines = 0
    23. label.backgroundColor = UIColor(white: 0.3, alpha: 0.7)
    24. label.textColor = UIColor.white
    25. //label.layer.cornerRadius = 10
    26. // label.clipsToBounds = true
    27. self.addSubview(label)
    28. self.titleLabel = label
    29. distanceLabel = UILabel(frame: CGRect(x: 10, y: 30, width: self.frame.size.width, height: 20))
    30. distanceLabel?.backgroundColor = UIColor(white: 0.3, alpha: 0.7)
    31. distanceLabel?.textColor = UIColor.white
    32. distanceLabel?.font = UIFont.systemFont(ofSize: 12)
    33. //distanceLabel?.layer.cornerRadius = 10
    34. //distanceLabel?.clipsToBounds = true
    35. self.addSubview(distanceLabel!)
    36. if let annotation = annotation as? Place {
    37. titleLabel?.text = annotation.placeName
    38. distanceLabel?.text = String(format: "%.2f km", annotation.distanceFromUser / 1000)
    39. }
    40. }
    41. //1
    42. override func layoutSubviews() {
    43. super.layoutSubviews()
    44. titleLabel?.frame = CGRect(x: 10, y: 0, width: self.frame.size.width, height: 30)
    45. distanceLabel?.frame = CGRect(x: 10, y: 30, width: self.frame.size.width, height: 20)
    46. }
    47. //2
    48. override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
    49. delegate?.didTouch(annotationView: self)
    50. }
    51. }
    Alles anzeigen


    Das ist der Teil des ViewControllers:


    Quellcode

    1. extension ViewController: ARDataSource {
    2. func ar(_ arViewController: ARViewController, viewForAnnotation: ARAnnotation) -> ARAnnotationView {
    3. let annotationView = AnnotationView()
    4. annotationView.annotation = viewForAnnotation
    5. annotationView.delegate = self
    6. annotationView.frame = CGRect(x: 0, y: 0, width:200, height: 50)
    7. annotationView.layer.cornerRadius = 12
    8. annotationView.clipsToBounds = true
    9. return annotationView
    10. }
    11. }
    Alles anzeigen
    Hier ist der Screenshot, wie es zur Zeit aussieht.
    Bilder
    • IMG_4588 copy.jpg

      32,86 kB, 640×360, 40 mal angesehen
  • Ok, ich habe jetzt masked Corner gefunden und das macht nur vereinzelte Ecken rund.

    Quellcode

    1. override func layoutSubviews() {
    2. super.layoutSubviews()
    3. titleLabel?.frame = CGRect(x: 10, y: 0, width: self.frame.size.width, height: 30)
    4. titleLabel?.layer.cornerRadius = 12
    5. titleLabel?.clipsToBounds = true
    6. if #available(iOS 11.0, *) {
    7. titleLabel?.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]
    8. } else {
    9. // Fallback on earlier versions
    10. }
    11. distanceLabel?.frame = CGRect(x: 10, y: 30, width: self.frame.size.width, height: 20)
    12. distanceLabel?.layer.cornerRadius = 12
    13. distanceLabel?.clipsToBounds = true
    14. if #available(iOS 11.0, *) {
    15. distanceLabel?.layer.maskedCorners = [.layerMaxXMaxYCorner,.layerMinXMaxYCorner]
    16. } else {
    17. // Fallback on earlier versions
    18. }
    19. }
    Alles anzeigen
    Mein 2. Problem habe ich noch nicht geloest.
  • Hi,

    ich habe das gerade mal getestet, wenn du dem Layer der ARAnntoationView z.B. in loadUI() den entsprechenden cornerRadius verpasst und masksToBounds auf true setzt kommt eigentlich das gewünschte Ergebnis.

    Daher gehe ich mal davon aus, dass du den Code noch an einer anderen Stelle geändert hast.

    Um die Breite anzupassen kannst du dir von deinem Titelstring mittels boundingRectWithSize: ... den entsprechenden Frame holen und dann die Breite der AnnotationView anpassen.

    P.S:
    Schön zu sehen, dass das Tutorial noch für einige Leute hilfreich ist.
    Das Herz besitzt Gründe, die die Vernunft nicht kennt.