Retour sur l'interface utilisateur : création d'une barre de progression rétro pour iOS à l'aide de CALayers

J'adore créer des composants d'interface utilisateur. Cela me procure une sorte de plaisir esthétique de les voir et de les utiliser après avoir réalisé une construction. Cela se combine également avec mon amour pour l’écosystème MacOS/iOS en général. Récemment, j'ai été chargé de créer une barre de progression personnalisée à l'aide de . Ce n'est pas grave, mais probablement 99 % des en ont créé un à un moment donné de leur carrière. Dans mon cas, je voulais faire un peu plus que simplement créer quelques avec des animations basées sur une plage de valeurs de 0 à 1. Je visais une solution qui conviendrait à de nombreux scénarios où une barre de progression est nécessaire . UIKit développeurs iOS CALayer Je veux me replonger dans l'époque où les composants de l'interface utilisateur du monde Apple ressemblaient à ceci : En réfléchissant à l'évolution de la conception de l'interface utilisateur, cela fait près d'une décennie que les éléments de l'interface utilisateur du monde Apple ont adopté un design plat avec l'introduction d'iOS 7 en 2014. Alors, livrons-nous à la nostalgie des versions antérieures de Mac OS et iOS et créons une belle barre de progression ensemble. Si vous aimez utiliser mais que vous ne savez toujours pas comment manipuler CALayers, cet article vous sera utile. Ici, nous passerons en revue les défis typiques de mise en page, d’animation et de dessin, en vous fournissant des informations et des solutions pour vous aider tout au long du processus. UIKit De UIView en profondeur dans l'API CALayers. La barre de progression peut sembler simple, mais si nous approfondissons les détails, vous comprendrez qu'elle nécessite de nombreuses sous-couches. Je ne vais pas approfondir ici. Vous pouvez consulter cet article dans lequel j'ai brièvement décrit ce que sont et comment ils fonctionnent : . CALayers CALayers https://hackernoon.com/rolling-numbers-animation-using-only-calayers Alors, divisons-le en petites couches : Calque d'arrière-plan général Calque de masque (partie animable) Couche d'arrière-plan de progression Couche d'éblouissement Couche chatoyante Le calque d'arrière-plan comporte deux calques enfants supplémentaires : Couche d'ombre intérieure Couche de dégradé de bordure Structureons-le correctement : RetroProgressBar [UIView] |--General background [CALayer] |--Inner Shadow [CALayer] |--Border Gradient [CALayer] |--Progress Background Layer [CALayer] |--Animated Mask Layer [CALayer] |--Glare [CALayer] |--Shimering [CALayer] En bref, voici comment cela devrait fonctionner : La barre de progression doit réagir à une valeur comprise entre 0,0 et 1,0. Lorsque la valeur change, nous devons ajuster la largeur d'un calque en fonction de cette valeur : bounds.width * value À l'aide de ce calcul simple, nous pouvons modifier la largeur à l'aide de . Mais avant de faire cela, nous devons comprendre quelles couches doivent changer lorsque la valeur change. Revoyons la structure et identifions les couches qui doivent être réactives aux changements de valeur. 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] Il semble que nous devions développer un protocole pouvant être adopté par les couches nécessitant une largeur animée en fonction de la valeur. Protocole ProgressAnimatable En protocole, nous n'avons besoin que de deux méthodes : changer la largeur du calque avec et sans 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)?) } Mise en œuvre: 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() } } Les deux méthodes utilisent . La première méthode peut paraître étrange car il suffit de modifier une valeur sans animation. Alors, pourquoi est-il nécessaire ? CATransaction CATransaction Essayez de créer un de base et de modifier sa largeur ou sa hauteur sans aucune animation. Lorsque vous exécutez une build, vous remarquerez les changements avec une animation. Comment est-ce possible? Dans Core Animation, les modifications apportées aux propriétés du calque (telles que les limites, la position, l'opacité, etc.) sont généralement animées en fonction de l'action par défaut associée à cette propriété. Ce comportement par défaut est destiné à fournir des transitions visuelles fluides sans avoir besoin d'animations explicites pour chaque changement de propriété. CALayer CALayer Cela signifie que nous devons désactiver explicitement les actions dans . En définissant , vous vous assurez que la largeur du calque est instantanément mise à jour avec la nouvelle valeur sans aucune transition animée intermédiaire. CALayer CATransaction.setDisableActions(true) La deuxième méthode offre un moyen flexible et réutilisable d'animer la largeur de n'importe quelle couche conforme au protocole . Il permet de contrôler la durée et le rythme de l'animation et inclut une option pour une action de fin. Cela le rend bien adapté à divers besoins d'animation dans le cadre UIKit. ProgressAnimatable Nos candidats pour se conformer à ce protocole seront trois couches : une couche de masque animée, une couche éblouissante et une couche chatoyante. Allons-y et mettons-le en œuvre. ProgressMaskLayer Il est temps de se conformer à notre protocole, et la couche la plus importante de cette configuration sera notre général. Pourquoi avons-nous besoin de ce masque ? Pourquoi ne peut-il pas s'agir simplement d'un avec une largeur animée ? En tant , en particulier celui qui se concentre sur le développement front-end, vous devez souvent anticiper les cas d'utilisation potentiels de vos composants. Dans mon cas, il existe un calque d'arrière-plan de progression. Ce n'est pas un animé, mais et s'il était animé avec quelque chose comme ? Si vous êtes préoccupé par les performances, vous considérerez probablement qu'un tel calque doit être rendu une fois, puis simplement effectuer son animation. C'est pourquoi ce masque peut être extrêmement utile. Il permet un rendu efficace tout en offrant la flexibilité nécessaire à divers scénarios d'animation. CAShapeLayer CALayer qu'ingénieur iOS 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") } } Jetons un coup d'œil à cette ligne : anchorPoint = CGPoint(x: 0, y: 0.5) Cette ligne est cruciale pour notre barre de progression. Par défaut, sont centrés, avec le situé au centre du calque, et non au milieu du bord gauche comme on le suppose généralement. Le est le point autour duquel se produisent toutes les transformations du calque. Pour un calque utilisé comme barre de progression, ce paramètre signifie généralement que lorsque la largeur du calque change, il s'étend de manière égale dans les deux directions à partir du . Cependant, si nous ajustons le au milieu du bord gauche, le calque s'étendra uniquement vers la droite tandis que le bord gauche restera fixe. Ce comportement est essentiel pour une barre de progression, car il garantit que la croissance de la barre apparaît d'un côté plutôt que des deux. 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 } Dans l'extrait ci-dessus, nous initialisons deux parties principales de la barre de progression : et . Jetons un coup d'œil au deuxième. 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 }) } } Comme vous pouvez le voir, il s'agit d'un comportant trois couleurs. Cette implémentation transforme une couleur injectée en dégradé vertical, améliorant la visibilité de la barre de progression et lui donnant un aspect plus volumineux. CAGradientLayer Pour rendre cela possible, j'ai préparé deux méthodes dans une extension . Pour m'amuser, j'ai choisi de ne pas reconvertir en , mais de jouer uniquement dans le domaine de : 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 } } Comme vous pouvez le constater, ce n'est pas trop compliqué. Nous avons juste besoin d'obtenir , ( , , et ) et . Cela signifie qu'en fonction de la valeur, nous pouvons calculer une nouvelle couleur : soit plus foncée, soit plus claire. colorSpace components red green blue alpha model Couche d'éblouissement Continuons à rendre notre barre de progression plus 3D. Maintenant, nous devons ajouter un autre calque, que nous appellerons Glare. C'est une implémentation simple, mais elle doit être conforme au protocole . 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") } } Pour simplifier les choses, nous avons seulement besoin que la couleur d’arrière-plan soit blanche avec un alpha de 0,3. Little Nice Shimmering (Couche chatoyante) Je sais que certains pourraient dire que MacOS X ou iOS avant la version 6 ne disposaient pas de composants d'interface utilisateur avec des effets chatoyants comme celui-ci. Mais comme je l’ai dit, c’est comme un film inspiré d’une histoire vraie. Ces reflets accentuent l'effet 3D et le rendent plus visible. 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") } } } Ici, nous avons besoin de deux animations (Opacity et Location) combinées dans un . De plus, l'utilisation nous permet d'organiser une pause entre les sessions d'animation. Cette fonctionnalité est très utile car les clients peuvent également vouloir contrôler cette propriété. CAAnimationGroup CAAnimationGroup Comme vous pouvez le voir sur l'image, cela ajoute plus d'effets 3D, mais ce n'est pas tout à fait suffisant. Allons de l'avant. Couche d'arrière-plan Nous devons travailler avec notre couche d'arrière-plan statique, qui se trouve sous la ligne de progression animée. Si vous vous en souvenez, nous y avons deux sous-couches supplémentaires : l'ombre intérieure et le dégradé de bordure. |--General background [CALayer] |--Inner Shadow [CALayer] |--Border Gradient [CALayer] Je dirais que ces deux couches étaient très populaires dans les requêtes de recherche il y a plusieurs années, probablement en raison des tendances de l'interface utilisateur. Créons nos propres versions et immortalisons-les dans cet article pour les générations futures :) Couche d'ombre intérieure La classe est conçue pour créer un calque avec un effet d’ombre interne, ce qui peut constituer un moyen visuellement attrayant d’ajouter de la profondeur aux éléments de l’interface utilisateur. 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 } } Nous avons besoin d'un car nous devons définir . Pour cela, nous devons créer un chemin pour l'ombre qui s'étend légèrement en dehors des limites du calque en utilisant frombounds. Et puis un autre — un chemin de découpe qui est l'inverse des limites du calque. CAShapeLayer shadowPath insetBy UIBezierPath Dans l'illustration, c'est déjà presque là. Mais nous avons besoin de la dernière couche, qui nous ramènera à MacOS X Leopard. Couche de dégradé de bordure C'est une sous-classe de conçue pour créer une bordure dégradée autour d'un calque. Il utilise un comme masque pour obtenir l'effet de bordure. Le est configuré avec une couleur de trait (initialement noir) et aucune couleur de remplissage et est utilisé comme masque pour le . Cette configuration permet au dégradé d'être visible uniquement là où le a un trait, créant ainsi une bordure de dégradé. 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 } } L'initialiseur de accepte un et un tableau de pour le dégradé. Il configure les couleurs du dégradé, applique la largeur de la bordure au et utilise le comme masque pour limiter le dégradé à la zone de bordure. BorderGradientLayer borderWidth UIColor shapeLayer shapeLayer La méthode garantit que le chemin de est mis à jour pour correspondre aux limites et au rayon des coins du calque, en s'assurant que la bordure s'adapte correctement au calque. La méthode permet un ajustement dynamique de la largeur de la bordure après initialisation. layoutSublayers shapeLayer setBorderWidth Beaucoup mieux. D'accord. Arrêtons de faire des trucs visuels et travaillons sur la logique. Tous ensemble Il est maintenant temps de combiner toutes ces couches et de leur donner vie. 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 } Voyons comment nous allons gérer tous les calques dont la largeur doit changer avec l'animation : 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?() } } Tout d’abord, nous devons préparer une largeur à partir d’une valeur. La valeur doit être inférieure à 0 et supérieure à 1. De plus, nous devons prendre en considération une éventuelle largeur de bordure. 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 } Pour un effet 3D correct, les calques éblouissants et chatoyants doivent être légèrement rembourrés sur les côtés droit et gauche : newWidth - WIDTH_ANIMATABLE_INSET Et enfin, la méthode utilise un groupe d'animation ( ) pour synchroniser les animations de trois calques : , et . La largeur de chaque calque est animée à la largeur calculée (ajustée par pour et pour s'adapter au design) sur la durée spécifiée et avec la courbe d'animation spécifiée. DispatchGroup shimmeringLayer progressMaskLayer glareLayer WIDTH_ANIMATABLE_INSET shimmeringLayer glareLayer Les animations sont coordonnées à l'aide du , garantissant que toutes les animations démarrent simultanément et que la clôture d'achèvement n'est appelée qu'une fois toutes les animations terminées. Cette méthode offre un moyen visuellement attrayant de mettre à jour la valeur de la barre de progression avec une animation fluide et synchronisée sur ses différentes couches décoratives. DispatchGroup Code source La dernière version existe sous forme de package Swift et de pod. Vous pouvez donc le récupérer à partir d'ici . Au fait, les contributions sont les bienvenues ! Référentiel Retro Progress Bar Usage Créez une instance de RetroProgressBar. Vous pouvez l'ajouter à votre hiérarchie de vues comme vous le feriez avec n'importe quel UIView. let progressBar = RetroProgressBar() Personnalisation : progressBar.progressColor = UIColor.systemBlue progressBar.cornerRadius = 5.0 progressBar.borderWidth = 2.0 progressBar.borderColors = [UIColor.white, UIColor.gray] Pour modifier la valeur avec une animation : progressBar.setValueWithAnimation(0.75, duration: 1.0, animationType: .easeInEaseOut) { print("Animation Completed") } Sans animation : progressBar.setValue(0.5) Dernières pensées Recréer cette barre de progression à l’ancienne a été une plongée nostalgique dans l’esthétique qui me manque profondément. Travailler avec UIKit et m'a rappelé la polyvalence et la puissance de nos outils en tant que développeurs. Ce projet ne concernait pas seulement la mise en œuvre technique ; c'était un voyage dans une époque de design bien-aimée, prouvant que nous pouvons encore créer n'importe quoi, y compris le charme intemporel des modèles plus anciens. CALayer Cette expérience a été un rappel poignant que dans , la simplicité et la nostalgie peuvent coexister à merveille, reliant le passé et le présent. la conception de l'interface utilisateur Bon codage !