CALayer — UIImage modifizieren

Im ersten Teil zum Thema CALayer habe ich anhand eines Playground-Demos eine kleine Einführung zu CALayer gegeben. Im zweiten Teil geht es nun um die Modifizierung eines Bildes.

Hinweis: Zu diesem Thema gibt es einen aktuelleren Beitrag, der sich mit der Anpassung des Aussehens eines Bildes in SwiftUI befasst.

Einführung

Zunächst ein kurzer Rückblick auf den ersten Teil zu CALayer:

Ein CALayer-Objekt kann mit

var myLayer = CALayer()

erzeugt werden. Anschließend kann man mittels der zur Verfügung stehenden Properties zahlreiche Anpassungen vornehmen

layer.bounds = CGRect(x: 0, y: 0, width: 190, height: 190)
layer.position = CGPoint(x: 300/2, y: 300/2)
layer.backgroundColor = UIColor.white.cgColor
layer.borderWidth = 3
layer.borderColor = UIColor.black.cgColor

und schließlich das Objekt zur View hinzufügen:

demoView.layer.addSublayer(layer)

Was ich im ersten Teil nicht erwähnt habe: Man kann auch auf den Layer einer View zugreifen:

myView.layer

Anhand eines Playground-Demos möchte ich zeigen, wie damit auf eine View mit einem Bild zugegriffen werden kann. Dieses Bild wird dann mithilfe der CALayer-Properties modifiziert.

Playground-Demo

Zunächst erstellt Ihr ein neues Playground-Projekt und achtet darauf, dass XCPlayground importiert wird.

import UIKit
import PlaygroundSupport

Quasi als Container-View erzeugen wir dann eine View mit einem weißen Hintergrund:

var backgroundView = UIView(frame: CGRect(x: 0, y: 0, width: 400, height: 400))
backgroundView.backgroundColor = UIColor.white

Dabei darf man nicht vergessen, die View zu rendern, andernfalls wird nichts angezeigt. Dafür existiert die Funktion PlaygroundPage:

PlaygroundPage.current.liveView = backgroundView

Falls Ihr in Eurem Playground keine View zu Gesicht bekommt, liegt das daran, dass der Assistant Editor nicht geöffnet ist. Ihr findet ihn unter:

> View > Assistant Editor > Show Assistant Editor

Damit sind die Vorbereitungen abgeschlossen und es ist an der Zeit, die View zu erzeugen, die unser Bild beinhalten soll:

var imageView = UIView(frame: CGRect(x: 0, y: 0, width: 250, height: 250))
imageView.center = backgroundView.center
let myImage = UIImage(named: "nature.jpg")
backgroundView.addSubview(imageView)

Anmerkungen: In meinem Fall hat die imageView eine Größe von 250×250 Pixeln. Dies entspricht den Abmessungen des Bildes (nature.jpg), das ich verwendet habe. Wenn Ihr meinen Code im Playground ausprobiert, ersetzt Ihr mein Bild durch das von Euch verwendete Bild und ändert die Abmessungen auf die entsprechende Bildgröße. — Damit stellt sich nur noch die Frage: Wie bekomme ich das Bild in mein Playground-Projekt? Das ist sehr leicht: Drückt cmd + 1 zum Öffnen des Project Navigators. Nun zieht Ihr ein Bild in den Ordner “Resources”. Mit cmd + 0 wird der Navigator wieder geschlossen.

Als Ergebnis habt Ihr nun eine weiße Fläche. Denn das Bild wurde bisher gar nicht hinzugefügt. Mit der Property contents ändern wir das:

imageView.layer.contents = myImage?.cgImage

Als nächstes soll das Bild einen grünen Rahmen erhalten:

imageView.layer.borderWidth = 4
imageView.layer.borderColor = UIColor.green.cgColor

Und zum Abschluss möchten wir keine quadratische Darstellung haben, sondern ein rundes Bild. Die dafür verantwortliche Property lautet cornerRadius:

imageView.layer.cornerRadius = imageView.bounds.height/2.0

Das Bild ragt aber noch über den grünen Kreis hinaus. Deswegen müssen wir nun noch die Property masksToBounds verwenden. Damit wird der außerhalb des Kreises liegende Bereich quasi “abgeschnitten”.

imageView.layer.masksToBounds = true

Dies führt schließlich zu folgendem Ergebnis:

Auch den Code des zweiten Teils gibt es bei Github, so dass Ihr damit in Eurem Playground experimentieren könnt.

Den “Ecken-abrunden-Effekt” mit cornerRadius kann übrigens auch auf Buttons angewendet werden.

Zuletzt aktualisiert am 7. April 2021