Vertically center align UILabel's skeleton. (Juanpe#456)

- Introduce `shouldCenterTextVertically` in `SkeletonTextNode` to center align UILabels and keep UITextViews unaltered. - Shift down CALayers after assigning frames in `updateMultilinesLayers` function in `CALayer+Extensions.swift`
liric28 · Oct 21, 2021 · ff1a7e2 · ff1a7e2
1 parent 4994907
commit ff1a7e2
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 3 deletions.
diff --git a/SkeletonViewCore/Sources/Internal/Models/SkeletonLayer.swift b/SkeletonViewCore/Sources/Internal/Models/SkeletonLayer.swift
@@ -67,7 +67,8 @@ struct SkeletonLayer {
                                                    multilineSpacing: textView.multilineSpacing,
                                                    paddingInsets: textView.paddingInsets,
                                                    alignment: textView.textAlignment,
-                                                   isRTL: holder?.isRTL ?? false)
+                                                   isRTL: holder?.isRTL ?? false,
+                                                   shouldCenterVertically: textView.shouldCenterTextVertically)
 
         maskLayer.addMultilinesLayers(for: config)
     }
@@ -82,7 +83,8 @@ struct SkeletonLayer {
                                                    multilineSpacing: textView.multilineSpacing,
                                                    paddingInsets: textView.paddingInsets,
                                                    alignment: textView.textAlignment,
-                                                   isRTL: holder?.isRTL ?? false)
+                                                   isRTL: holder?.isRTL ?? false,
+                                                   shouldCenterVertically: textView.shouldCenterTextVertically)
 
         maskLayer.updateMultilinesLayers(for: config)
     }

diff --git a/SkeletonViewCore/Sources/Internal/SkeletonConfigs/SkeletonMultilinesLayerConfig.swift b/SkeletonViewCore/Sources/Internal/SkeletonConfigs/SkeletonMultilinesLayerConfig.swift
@@ -24,7 +24,8 @@ struct SkeletonMultilinesLayerConfig {
     var paddingInsets: UIEdgeInsets
     var alignment: NSTextAlignment
     var isRTL: Bool
-
+    var shouldCenterVertically: Bool
+
     /// Returns padding insets taking into account if the RTL is activated
     var calculatedPaddingInsets: UIEdgeInsets {
         UIEdgeInsets(top: paddingInsets.top,

diff --git a/SkeletonViewCore/Sources/Internal/SkeletonExtensions/SkeletonTextNode.swift b/SkeletonViewCore/Sources/Internal/SkeletonExtensions/SkeletonTextNode.swift
@@ -23,6 +23,7 @@ protocol SkeletonTextNode {
     var multilineSpacing: CGFloat { get }
     var paddingInsets: UIEdgeInsets { get }
     var usesTextHeightForLines: Bool { get }
+    var shouldCenterTextVertically: Bool { get }
 }
 
 enum SkeletonTextNodeAssociatedKeys {
@@ -79,6 +80,10 @@ extension UILabel: SkeletonTextNode {
         set { ao_set(newValue, pkey: &SkeletonTextNodeAssociatedKeys.backupHeightConstraints) }
     }
 
+    var shouldCenterTextVertically: Bool {
+        true
+    }
+
 }
 
 extension UITextView: SkeletonTextNode {
@@ -129,4 +134,7 @@ extension UITextView: SkeletonTextNode {
         set { ao_set(newValue, pkey: &SkeletonTextNodeAssociatedKeys.paddingInsets) }
     }
 
+    var shouldCenterTextVertically: Bool {
+        false
+    }
 }
diff --git a/SkeletonViewCore/Sources/Internal/UIKitExtensions/CALayer+Extensions.swift b/SkeletonViewCore/Sources/Internal/UIKitExtensions/CALayer+Extensions.swift
@@ -188,6 +188,19 @@ extension CALayer {
                                    isRTL: config.isRTL
             )
         }
+
+        guard config.shouldCenterVertically,
+              let maxY = currentSkeletonSublayers.last?.frame.maxY else {
+            return
+        }
+        let verticallyCenterAlignedFrames = currentSkeletonSublayers.map { layer -> CGRect in
+            let moveDownBy = (bounds.height - (maxY + paddingInsets.top + paddingInsets.bottom)) / 2
+            return layer.frame.offsetBy(dx: 0, dy: moveDownBy)
+        }
+
+        for (index, layer) in currentSkeletonSublayers.enumerated() {
+            layer.frame = verticallyCenterAlignedFrames[index]
+        }
     }
 
     func updateLayerFrame(for index: Int, totalLines: Int, size: CGSize, multilineSpacing: CGFloat, paddingInsets: UIEdgeInsets, alignment: NSTextAlignment, isRTL: Bool) {