Wie mache ich mit dem Swift doppelte Grenzlinien im UIImage?

Dec 04 2020

Ich habe versucht, nach den "Double Border" -Tricks in Swift zu suchen, um dies zu erreichen. Ich habe das Gefühl, dass dies in UIImage wie eine "doppelte Grenze" sein könnte.

Lassen Sie mich wissen, wenn Sie die Codes kennen. :) :)

Antworten

1 AJ16 Dec 04 2020 at 14:27

Sie können einfach eine UIView nehmen und die UIImageView darin hinzufügen. Löschen Sie die Farbe der UIView, um sie zu löschen.

Das habe ich mit dem Storyboard gemacht.

  1. Wenn Sie die UIView und eine UIImageView hinzufügen, wird die Farbe der Ansicht auf klar gesetzt und die Bildansicht befindet sich an 15 Punkten von allen Seiten. Bitte ändern Sie gemäß Ihren Anforderungen (siehe Bild 1).

  2. Dies ist der Code des Ansichtscontrollers (siehe Abbildung 2).

  3. Ausgabe (siehe Bild 3).

Hinweis : Nur eine Grundidee, obwohl Sie die Farbe und die Randbreite usw. gemäß Ihren Anforderungen ändern können.

Storyboard-Layout

Controller-Code anzeigen

Ausgabe

2 SumitJain Dec 04 2020 at 11:55

Sie müssen borderColor (schwarz) und CornerRadius zur Standardebene von UIImageView hinzufügen. Außerdem müssen Sie in UIImageView eine weitere Unterebene mit borderColor als Grau hinzufügen.

imageView.layer.borderWidth = 4.0
imageView.layer.borderColor = UIColor.gray.cgColor
imageView.layer.cornerRadius = imageView.frame.width / 2

let borderLayer = CALayer()
borderLayer.frame = imageView.bounds
borderLayer.borderColor = UIColor.black.cgColor
borderLayer.borderWidth = 14.0
borderLayer.cornerRadius = borderLayer.frame.width / 2
imageView.layer.insertSublayer(borderLayer, above: imageView.layer)

Siehe die beigefügte Spielplatz-Demo.

PeterDu Dec 04 2020 at 11:09

Ich denke, Sie können 1 Kreis (UIView) als Unteransicht zwischen UIImageView und UIImage hinzufügen. Beispielsweise können Sie UIImageView mit der grayFarbe für die äußere Ecke von Radius initialisieren. Dann fügen Sie den Kreis UIView und schließlich das UIImage hinzu.

Alternativ können Sie das UIImage vor dem Kreis UIView (mit transparentem Hintergrund) hinzufügen.

Ich denke, Sie können den ähnlichen Code hier finden: Image View Double Border