UI-Rückblick: Erstellen einer Retro-Fortschrittsleiste für iOS mit CALayers

Ich liebe es, UI-Komponenten zu erstellen. Es bereitet mir eine Art ästhetisches Vergnügen, sie nach der Erstellung eines Bauwerks zu sehen und zu verwenden. Dazu passt auch meine Liebe zum MacOS/iOS-Ökosystem insgesamt. Kürzlich wurde ich damit beauftragt, mit einen benutzerdefinierten Fortschrittsbalken zu erstellen. Es ist keine große Sache, aber wahrscheinlich haben 99 % der irgendwann in ihrer Karriere eines von Grund auf erstellt. In meinem Fall wollte ich etwas mehr tun, als nur ein paar s mit Animationen basierend auf einem Wertebereich von 0 bis 1 zu erstellen. Ich strebte eine Lösung an, die für viele Szenarien geeignet ist, in denen ein Fortschrittsbalken benötigt wird . UIKit iOS-Entwickler CALayer Ich möchte mich in die Zeit zurückversetzen, als UI-Komponenten in der Apple-Welt so aussahen: Wenn wir über die Entwicklung des UI-Designs nachdenken, ist es fast ein Jahrzehnt her, seit UI-Elemente in der Apple-Welt mit der Einführung von iOS 7 im Jahr 2014 ein flaches Design angenommen haben. Lassen Sie uns also in der Nostalgie für die früheren Versionen von Mac OS und iOS schwelgen und kreativ sein ein schöner Fortschrittsbalken zusammen. Wenn Sie gerne verwenden, sich aber noch nicht sicher sind, wie Sie CALayers manipulieren, ist dieser Artikel hilfreich für Sie. Hier gehen wir typische Layout-, Animations- und Zeichenherausforderungen durch und bieten Einblicke und Lösungen, die Sie dabei unterstützen. UIKit Von UIView bis tief in die CALayers-API. Der Fortschrittsbalken mag einfach erscheinen, aber wenn wir uns eingehend mit den Details befassen, werden Sie verstehen, dass dafür viele Unterebenen erforderlich sind. Ich werde hier nicht näher auf eingehen. Sie können diesen Artikel lesen, in dem ich kurz beschrieben habe, was sind und wie sie funktionieren: . CALayers CALayers https://hackernoon.com/rolling-numbers-animation-using-only-calayers Teilen wir es also in kleine Schichten auf: Allgemeine Hintergrundebene Maskenebene (animierbarer Teil) Fortschrittshintergrundebene Blendschicht Schimmernde Schicht Die Hintergrundebene verfügt über zwei zusätzliche untergeordnete Ebenen: Innere Schattenebene Randverlaufsebene Lassen Sie es uns richtig strukturieren: RetroProgressBar [UIView] |--General background [CALayer] |--Inner Shadow [CALayer] |--Border Gradient [CALayer] |--Progress Background Layer [CALayer] |--Animated Mask Layer [CALayer] |--Glare [CALayer] |--Shimering [CALayer] Kurz gesagt, so sollte es funktionieren: Der Fortschrittsbalken sollte auf einen Wert zwischen 0,0 und 1,0 reagieren. Wenn sich der Wert ändert, müssen wir die Breite einer Ebene basierend auf diesem Wert anpassen: bounds.width * value Mit dieser einfachen Berechnung können wir die Breite mit ändern. Bevor wir dies tun, müssen wir jedoch verstehen, welche Ebenen sich ändern sollen, wenn sich der Wert ändert. Schauen wir uns die Struktur noch einmal an und identifizieren wir die Schichten, die auf Wertänderungen reagieren müssen. CATransaction RetroProgressBar [UIView] |--General background [CALayer] |--Inner Shadow [CALayer] |--Border Gradient [CALayer] |--Progress Background Layer [CALayer] |--Animated Mask Layer [CALayer] : [Animated Width] |--Glare [CALayer] : [Animated Width] |--Shimering [CALayer] : [Animated Width] Es scheint, dass wir ein Protokoll entwickeln müssen, das von den Ebenen übernommen werden kann, die eine animierte Breite basierend auf dem Wert benötigen. ProgressAnimatable-Protokoll Im Protokoll benötigen wir nur zwei Methoden: Ändern der Ebenenbreite mit und ohne Animation. protocol ProgressAnimatable: CALayer { /// Sets the layer's width instantly to the specified value. func setToWidth(_ width: CGFloat) /// Animates the layer's width to the specified value. func animateToWidth(_ width: CGFloat, duration: TimeInterval, animationType: CAMediaTimingFunctionName, completion: (() -> Void)?) } Implementierung: extension ProgressAnimatable { func setToWidth(_ width: CGFloat) { guard width >= 0 else { return } removeAllAnimations() CATransaction.begin() CATransaction.setDisableActions(true) self.bounds.size.width = width CATransaction.commit() } func animateToWidth(_ width: CGFloat, duration: TimeInterval, animationType: CAMediaTimingFunctionName = .easeInEaseOut, completion: (() -> Void)? = nil) { guard width >= 0, width != self.bounds.width else { completion?() return } let animation = CABasicAnimation(keyPath: "bounds.size.width") animation.fromValue = bounds.width animation.toValue = width animation.duration = duration animation.fillMode = .forwards animation.isRemovedOnCompletion = false animation.timingFunction = CAMediaTimingFunction(name: animationType) CATransaction.begin() CATransaction.setCompletionBlock { self.bounds.size.width = width completion?() } self.add(animation, forKey: "widthChange") CATransaction.commit() } } Beide Methoden verwenden . Die erste Methode mag seltsam erscheinen, da wir nur einen Wert ohne Animation ändern müssen. Warum ist notwendig? CATransaction CATransaction Versuchen Sie, einen einfachen zu erstellen und seine Breite oder Höhe ohne Animation zu ändern. Wenn Sie einen Build ausführen, werden Sie die Änderungen anhand einer Animation bemerken. Wie ist das möglich? In Core Animation werden Änderungen an Ebeneneigenschaften (z. B. Grenzen, Position, Deckkraft usw.) normalerweise basierend auf der dieser Eigenschaft zugeordneten Standardaktion animiert. Dieses Standardverhalten soll reibungslose visuelle Übergänge ermöglichen, ohne dass für jede Eigenschaftsänderung explizite Animationen erforderlich sind. CALayer CALayer Das bedeutet, dass wir Aktionen in explizit deaktivieren müssen. Durch Festlegen von stellen Sie sicher, dass die Breite der Ebene sofort und ohne zwischenzeitlichen animierten Übergang auf den neuen Wert aktualisiert wird. CALayer CATransaction.setDisableActions(true) Die zweite Methode bietet eine flexible und wiederverwendbare Möglichkeit, die Breite jeder Ebene entsprechend dem Protokoll zu animieren. Es bietet Kontrolle über die Dauer und das Tempo der Animation und enthält eine Option für eine Abschlussaktion. Dadurch eignet es sich gut für verschiedene Animationsanforderungen innerhalb des UIKit-Frameworks. ProgressAnimatable Unsere Kandidaten für die Einhaltung dieses Protokolls werden drei Ebenen sein: Animierte Maskenebene, Blendebene und Schimmerebene. Lassen Sie uns weitermachen und es umsetzen. ProgressMaskLayer Es ist Zeit, sich an unser Protokoll anzupassen, und die wichtigste Ebene in diesem Setup wird unser allgemeiner sein. Warum brauchen wir diese Maske? Warum kann es nicht einfach ein mit einer animierten Breite sein? Als , insbesondere als jemand, der sich auf die Front-End-Entwicklung konzentriert, müssen Sie häufig potenzielle Anwendungsfälle für Ihre Komponenten vorhersehen. In meinem Beispiel gibt es eine Fortschrittshintergrundebene. Dies ist kein animierter , aber was wäre, wenn er mit etwas wie animiert wäre? Wenn Sie sich Gedanken über die Leistung machen, würden Sie wahrscheinlich darüber nachdenken, dass eine solche Ebene einmal gerendert werden sollte und dann einfach ihre Animation ausgeführt werden sollte. Deshalb kann diese Maske äußerst nützlich sein. Es ermöglicht ein effizientes Rendering und bietet gleichzeitig die Flexibilität, die für verschiedene Animationsszenarien erforderlich ist. CAShapeLayer CALayer iOS-Ingenieur CALayer CAReplicatorLayer final class ProgressMaskLayer: CAShapeLayer, ProgressAnimatable { override init() { super.init() backgroundColor = UIColor.black.cgColor anchorPoint = CGPoint(x: 0, y: 0.5) } override init(layer: Any) { super.init(layer: layer) } required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") } } Werfen wir einen Blick auf diese Zeile: anchorPoint = CGPoint(x: 0, y: 0.5) Diese Zeile ist entscheidend für unseren Fortschrittsbalken. Standardmäßig sind zentriert, wobei sich der in der Mitte der Ebene befindet und nicht wie allgemein angenommen in der Mitte des linken Randes. Der ist der Punkt, um den herum alle Transformationen der Ebene stattfinden. Bei einer Ebene, die als Fortschrittsbalken verwendet wird, bedeutet diese Einstellung normalerweise, dass sich die Ebene bei einer Änderung ihrer Breite vom aus gleichmäßig in beide Richtungen ausdehnt. Wenn wir jedoch den auf die Mitte des linken Rands anpassen, wird die Ebene nur nach rechts erweitert, während der linke Rand an seinem Platz bleibt. Dieses Verhalten ist für einen Fortschrittsbalken wichtig und stellt sicher, dass das Wachstum des Balkens von einer Seite und nicht von beiden Seiten angezeigt wird. CALayers anchorPoint anchorPoint anchorPoint anchorPoint private let progressMaskLayer = ProgressMaskLayer() private let progressBackgroundLayer = ProgressBackgroundLayer() public init() { super.init(frame: .zero) layer.addSublayer(progressMaskLayer) layer.addSublayer(progressBackgroundLayer) progressBackgroundLayer.mask = progressMaskLayer } Im obigen Snippet initialisieren wir zwei Hauptteile der Fortschrittsleiste: und . Werfen wir einen Blick auf den zweiten. ProgressMaskLayer ProgressBackgroundLayer final class ProgressBackgroundLayer: CAGradientLayer { override init() { super.init() locations = [0, 0.5, 1] } override init(layer: Any) { super.init(layer: layer) } required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") } override func layoutSublayers() { super.layoutSublayers() colors = [ backgroundColor?.lightened(by: 0.3), backgroundColor, backgroundColor?.darkened(by: 0.5) ].compactMap({ $0 }) } } Wie Sie sehen, handelt es sich um einen mit drei Farben. Diese Implementierung wandelt eine injizierte Farbe in einen vertikalen Farbverlauf um, wodurch die Sichtbarkeit des Fortschrittsbalkens verbessert und ihm ein voluminöseres Aussehen verliehen wird. CAGradientLayer Um dies zu ermöglichen, habe ich zwei Methoden in einer Erweiterung vorbereitet. Aus Spaß habe ich beschlossen, nicht zurück in zu konvertieren, sondern ausschließlich im Bereich von zu spielen: CGColor CGColor UIColor CGColor extension CGColor { func darkened(by value: CGFloat) -> CGColor { guard let colorSpace = self.colorSpace, let components = self.components, colorSpace.model == .rgb, components.count >= 3 else { return self } let multiplier = 1 - min(max(value, 0), 1) let red = components[0] * multiplier let green = components[1] * multiplier let blue = components[2] * multiplier let alpha = components.count > 3 ? components[3] : 1.0 return CGColor( colorSpace: colorSpace, components: [red, green, blue, alpha] ) ?? self } func lightened(by value: CGFloat) -> CGColor { guard let colorSpace = self.colorSpace, let components = self.components, colorSpace.model == .rgb, components.count >= 3 else { return self } let red = min(components[0] + value, 1.0) let green = min(components[1] + value, 1.0) let blue = min(components[2] + value, 1.0) let alpha = components.count > 3 ? components[3] : 1.0 return CGColor( colorSpace: colorSpace, components: [red, green, blue, alpha] ) ?? self } } Wie Sie sehen, ist es nicht allzu kompliziert. Wir müssen nur , ( , , und ) und abrufen. Das bedeutet, dass wir anhand des Wertes eine neue Farbe berechnen können: entweder dunkler oder heller. colorSpace components red green blue alpha model Blendschicht Lassen Sie uns dazu übergehen, unseren Fortschrittsbalken dreidimensionaler zu gestalten. Jetzt müssen wir eine weitere Ebene hinzufügen, die wir Glare nennen. Es handelt sich um eine unkomplizierte Implementierung, die jedoch dem Protokoll entsprechen sollte. ProgressAnimatable final class ProgressGlareLayer: CALayer, ProgressAnimatable { override init() { super.init() backgroundColor = UIColor.white.withAlphaComponent(0.3).cgColor anchorPoint = CGPoint(x: 0, y: 0.5) } override init(layer: Any) { super.init(layer: layer) } required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") } } Der Einfachheit halber benötigen wir hier nur eine Hintergrundfarbe mit Weiß und einem Alpha von 0,3. Little Nice Shimmering (schimmernde Schicht) Ich weiß, dass einige vielleicht sagen würden, dass MacOS X oder iOS vor Version 6 keine UI-Komponenten mit solchen schimmernden Effekten hatten. Aber wie gesagt, das ist wie ein Film, der von einer wahren Geschichte inspiriert ist. Dieses Schimmern verstärkt den 3D-Effekt und macht ihn besser sichtbar. final class ShimmeringLayer: CAGradientLayer, ProgressAnimatable { let glowColor: UIColor = UIColor.white private func shimmerAnimation() -> CABasicAnimation { let animation = CABasicAnimation(keyPath: "locations") animation.fromValue = [-1.0, -0.5, 0.0] animation.toValue = [1.0, 1.5, 2.0] animation.duration = 1.5 animation.repeatCount = Float.infinity return animation } private func opacityAnimation() -> CABasicAnimation { let animation = CABasicAnimation(keyPath: "opacity") animation.fromValue = 1.0 animation.toValue = 0.0 animation.duration = 0.1 // Quick transition to transparent animation.beginTime = shimmerAnimation().duration animation.fillMode = .forwards animation.isRemovedOnCompletion = false return animation } private func animationGroup() -> CAAnimationGroup { let pauseDuration = 3.0 // Duration of pause between shimmering let shimmerAnimation = shimmerAnimation() let opacityAnimation = opacityAnimation() let animationGroup = CAAnimationGroup() animationGroup.animations = [shimmerAnimation, opacityAnimation] animationGroup.duration = shimmerAnimation.duration + pauseDuration animationGroup.repeatCount = Float.infinity return animationGroup } override init() { super.init() setupLayer() } override init(layer: Any) { super.init(layer: layer) } required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") } override func layoutSublayers() { super.layoutSublayers() startAnimation() } private func setupLayer() { let lightColor = UIColor.white.withAlphaComponent(0.7).cgColor let darkColor = UIColor.white.withAlphaComponent(0).cgColor colors = [ darkColor, lightColor, darkColor ] anchorPoint = CGPoint(x: 0, y: 0.5) locations = [0.0, 0.5, 1.0] startPoint = CGPoint(x: 0.0, y: 0.5) endPoint = CGPoint(x: 1.0, y: 0.5) shadowColor = glowColor.cgColor shadowRadius = 5.0 shadowOpacity = 1 shadowOffset = .zero } private func startAnimation() { if animation(forKey: "shimmerEffect") == nil { let animationGroup = animationGroup() add(animationGroup, forKey: "shimmerEffect") } } } Hier benötigen wir zwei Animationen (Opacity und Location), die in einer zusammengefasst sind. Außerdem können wir durch die Verwendung eine Pause zwischen Animationssitzungen einrichten. Diese Funktion ist sehr nützlich, da Clients diese Eigenschaft möglicherweise auch steuern möchten. CAAnimationGroup CAAnimationGroup Wie Sie auf dem Bild sehen können, werden dadurch weitere 3D-Effekte hinzugefügt, aber das reicht nicht ganz aus. Lassen Sie uns weitermachen. Hintergrundebene Wir müssen mit unserer statischen Hintergrundebene arbeiten, die unter der animierten Fortschrittslinie liegt. Wenn Sie sich erinnern, haben wir dort zwei zusätzliche Unterebenen: den inneren Schatten und den Randverlauf. |--General background [CALayer] |--Inner Shadow [CALayer] |--Border Gradient [CALayer] Ich würde sagen, dass diese beiden Ebenen vor einigen Jahren bei Suchanfragen recht beliebt waren, möglicherweise aufgrund von UI-Trends. Lasst uns unsere eigenen Versionen erstellen und sie in diesem Artikel für zukünftige Generationen verewigen :) Innere Schattenschicht Die Klasse soll eine Ebene mit einem inneren Schatteneffekt erstellen, der eine optisch ansprechende Möglichkeit sein kann, UI-Elementen Tiefe zu verleihen. final class InnerShadowLayer: CAShapeLayer { override init() { super.init() masksToBounds = true shadowRadius = 3 shadowColor = UIColor.black.cgColor shadowOffset = CGSize(width: 0.0, height: 1.0) shadowOpacity = 0.5 } required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") } override func layoutSublayers() { super.layoutSublayers() // Creates a path for the shadow that extends slightly outside the bounds of the layer. let shadowPath = UIBezierPath(roundedRect: bounds.insetBy(dx: -5, dy: -5), cornerRadius: cornerRadius) // Creates a cutout path that is the inverse of the layer's bounds. let cutoutPath = UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius).reversing() shadowPath.append(cutoutPath) self.shadowPath = shadowPath.cgPath } } Wir brauchen einen weil wir festlegen müssen. Dazu müssen wir mithilfe von from Bounds“ einen Pfad für den Schatten erstellen, der leicht über die Grenzen der Ebene hinausgeht. Und dann ein weiterer – ein Ausschnittpfad, der das Gegenteil der Ebenengrenzen ist. CAShapeLayer shadowPath insetBy UIBezierPath In der Abbildung ist es schon fast da. Aber wir brauchen die letzte Ebene, die uns zurück zu MacOS X Leopard bringt. Randverlaufsebene Es handelt sich um eine Unterklasse von , die dazu dient, einen Verlaufsrahmen um eine Ebene zu erstellen. Es verwendet einen als Maske, um den Randeffekt zu erzielen. Der ist mit einer Strichfarbe (ursprünglich Schwarz) und ohne Füllfarbe konfiguriert und wird als Maske für den verwendet. Durch diese Einrichtung ist der Farbverlauf nur dort sichtbar, wo der einen Strich aufweist, wodurch effektiv ein Farbverlaufsrand entsteht. CAGradientLayer CAShapeLayer shapeLayer BorderGradientLayer shapeLayer final class BorderGradientLayer: CAGradientLayer { let shapeLayer: CAShapeLayer = { let layer = CAShapeLayer() layer.strokeColor = UIColor.black.cgColor // Temporary color layer.fillColor = nil return layer }() init(borderWidth: CGFloat, colors: [UIColor]) { super.init() self.mask = shapeLayer self.colors = colors.map { $0.cgColor } self.setBorderWidth(borderWidth) } required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") } override func layoutSublayers() { super.layoutSublayers() shapeLayer.path = UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius).cgPath } func setBorderWidth(_ borderWidth: CGFloat) { self.shapeLayer.lineWidth = borderWidth } } Der Initialisierer von akzeptiert eine und ein Array von s für den Farbverlauf. Es richtet die Verlaufsfarben ein, wendet die Rahmenbreite auf den an und verwendet den als Maske, um den Verlauf auf den Randbereich zu beschränken. BorderGradientLayer borderWidth UIColor shapeLayer shapeLayer Die Methode stellt sicher, dass der Pfad von so aktualisiert wird, dass er mit den Grenzen und dem Eckenradius der Ebene übereinstimmt, sodass der Rand korrekt zur Ebene passt. Die Methode ermöglicht die dynamische Anpassung der Rahmenbreite nach der Initialisierung. layoutSublayers shapeLayer setBorderWidth Viel besser. OK. Hören wir auf, visuelle Dinge zu machen, und arbeiten wir an der Logik. Alle zusammen Jetzt ist es an der Zeit, all diese Schichten zu kombinieren und zum Leben zu erwecken. private lazy var backgroundLayer = BackgroundLayer( borderWidth: borderWidth, colors: borderColors ) private let glareLayer = ProgressGlareLayer() private let shimmeringLayer = ShimmeringLayer() private let progressMaskLayer = ProgressMaskLayer() private let progressBackgroundLayer = ProgressBackgroundLayer() public init() { super.init(frame: .zero) layer.backgroundColor = UIColor.white.cgColor layer.masksToBounds = true layer.addSublayer(progressMaskLayer) layer.addSublayer(progressBackgroundLayer) layer.insertSublayer(backgroundLayer, at: 0) progressBackgroundLayer.addSublayer(shimmeringLayer) progressBackgroundLayer.addSublayer(glareLayer) progressBackgroundLayer.mask = progressMaskLayer } Werfen wir einen Blick darauf, wie wir mit allen Ebenen umgehen, deren Breite sich durch Animation ändern soll: public func setValueWithAnimation(_ value: Double, duration: TimeInterval = 1.0, animationType: CAMediaTimingFunctionName = .easeInEaseOut, completion: (() -> Void)? = nil) { let newWidth = calculateProgressWidth(value) let animationGroup = DispatchGroup() animationGroup.enter() shimmeringLayer.animateToWidth( newWidth - WIDTH_ANIMATABLE_INSET, duration: duration, animationType: animationType, completion: animationGroup.leave ) animationGroup.enter() progressMaskLayer.animateToWidth( newWidth, duration: duration, animationType: animationType, completion: animationGroup.leave ) animationGroup.enter() glareLayer.animateToWidth( newWidth - WIDTH_ANIMATABLE_INSET, duration: duration, animationType: animationType, completion: animationGroup.leave ) animationGroup.notify(queue: .main) { completion?() } } Zuerst müssen wir eine Breite aus einem Wert vorbereiten. Der Wert sollte kleiner als 0 und größer als 1 sein. Außerdem müssen wir eine mögliche Rahmenbreite berücksichtigen. fileprivate func normalizeValue(_ value: Double) -> Double { max(min(value, 1), 0) } private func calculateProgressWidth(_ value: Double) -> CGFloat { let normalizedValue = normalizeValue(value) let width = bounds.width * normalizedValue - borderWidth return width } Für den richtigen 3D-Effekt sollten Glanz- und Schimmerschichten auf der rechten und linken Seite etwas gepolstert sein: newWidth - WIDTH_ANIMATABLE_INSET Und schließlich verwendet die Methode eine Animationsgruppe ( ), um die Animationen von drei Ebenen zu synchronisieren: , und . Die Breite jeder Ebene wird über die angegebene Dauer und mit der angegebenen Animationskurve auf die berechnete Breite animiert (angepasst durch für und , um sie an das Design anzupassen). DispatchGroup shimmeringLayer progressMaskLayer glareLayer WIDTH_ANIMATABLE_INSET shimmeringLayer glareLayer Die Animationen werden mithilfe der koordiniert, um sicherzustellen, dass alle Animationen gleichzeitig starten und der Abschlussabschluss erst aufgerufen wird, nachdem alle Animationen abgeschlossen sind. Diese Methode bietet eine optisch ansprechende Möglichkeit, den Wert des Fortschrittsbalkens mit einer reibungslosen, synchronisierten Animation über die verschiedenen dekorativen Ebenen hinweg zu aktualisieren. DispatchGroup Quellcode Die neueste Version liegt als Swift-Paket und Pod vor. Sie können es also hier im herunterladen. Übrigens, Beiträge sind willkommen! Retro Progress Bar-Repository Verwendung Erstellen Sie eine Instanz von RetroProgressBar. Sie können es wie jedes andere UIView zu Ihrer Ansichtshierarchie hinzufügen. let progressBar = RetroProgressBar() Anpassung: progressBar.progressColor = UIColor.systemBlue progressBar.cornerRadius = 5.0 progressBar.borderWidth = 2.0 progressBar.borderColors = [UIColor.white, UIColor.gray] So ändern Sie den Wert mit Animation: progressBar.setValueWithAnimation(0.75, duration: 1.0, animationType: .easeInEaseOut) { print("Animation Completed") } Ohne Animation: progressBar.setValue(0.5) Abschließende Gedanken Die Neuerstellung dieses Fortschrittsbalkens im alten Stil war ein nostalgischer Tauchgang in die Ästhetik, die ich zutiefst vermisse. Die Arbeit mit UIKit und hat mich als Entwickler an die Vielseitigkeit und Leistungsfähigkeit unserer Tools erinnert. Bei diesem Projekt ging es nicht nur um die technische Umsetzung; Es war eine Reise zurück in eine beliebte Design-Ära und bewies, dass wir immer noch alles herstellen können, auch den zeitlosen Charme älterer Designs. CALayer Diese Erfahrung war eine ergreifende Erinnerung daran, dass beim Einfachheit und Nostalgie wunderbar nebeneinander existieren können und eine Brücke zwischen Vergangenheit und Gegenwart schlagen. UI-Design Viel Spaß beim Codieren!