Vertically center align UILabel's skeleton. (#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`

.github/workflows/CD.yml

@@ -1,7 +1,7 @@
 name: CD
 
 on:
-  pull_request:
+  pull_request_target:
     branches: [main]
     types: [closed]
         
@@ -61,4 +61,4 @@ jobs:
             🎉 New release ${{ steps.publish_release.outputs.tag_name }} is out 🚀
 
             Check out all the changes here: 
-            ${{ steps.publish_release.outputs.html_url }} 
+            ${{ steps.publish_release.outputs.html_url }} 

.github/workflows/release.yml

@@ -35,4 +35,16 @@ jobs:
         run: |
           set -eo pipefail
           pod lib lint --allow-warnings
-          pod trunk push --allow-warnings           
+          pod trunk push --allow-warnings  
+          
+      - name: Tweet the release
+        uses: ethomson/send-tweet-action@v1
+        with:
+          consumer-key: ${{ secrets.TWITTER_CONSUMER_API_KEY }}
+          consumer-secret: ${{ secrets.TWITTER_CONSUMER_API_SECRET }}
+          access-token: ${{ secrets.TWITTER_ACCESS_TOKEN }}
+          access-token-secret: ${{ secrets.TWITTER_ACCESS_TOKEN_SECRET }}
+          status: |
+            🎉 New release ${{ steps.publish_release.outputs.tag_name }} is out 🚀
+            Check out all the changes here: 
+            ${{ steps.publish_release.outputs.html_url }} 

README.md

@@ -63,9 +63,9 @@ Enjoy it! 🙂
 
 ## 🎬 Guides
 
-| [![](https://img.youtube.com/vi/75kgOhWsPNA/maxresdefault.jpg)](https://youtu.be/75kgOhWsPNA)|[![](https://img.youtube.com/vi/MVCiM_VdxVA/maxresdefault.jpg)](https://youtu.be/MVCiM_VdxVA)|[![](https://img.youtube.com/vi/Qq3Evspeea8/maxresdefault.jpg)](https://youtu.be/Qq3Evspeea8)|[![](https://img.youtube.com/vi/ZOoPtBwDRT0/maxresdefault.jpg)](https://youtu.be/ZOoPtBwDRT0)|[![](https://img.youtube.com/vi/Zx1Pg1gPfxA/maxresdefault.jpg)](https://www.youtube.com/watch?v=Zx1Pg1gPfxA)
-|:---:  | :---: |:---:  | :---: | :---:
-|[**SkeletonView Guides - Getting started**](https://youtu.be/75kgOhWsPNA)|[**How to Create Loading View with Skeleton View in Swift 5.2**](https://youtu.be/MVCiM_VdxVA)    by iKh4ever Studio|[**Create Skeleton Loading View in App (Swift 5) - Xcode 11, 2020**](https://youtu.be/Qq3Evspeea8)    by iOS Academy| [**Add An Elegant Loading Animation in Swift***](https://youtu.be/ZOoPtBwDRT0)    by Gary Tokman| [**Cómo crear una ANIMACIÓN de CARGA de DATOS en iOS**](https://www.youtube.com/watch?v=Zx1Pg1gPfxA) by MoureDev
+| [![](https://img.youtube.com/vi/75kgOhWsPNA/maxresdefault.jpg)](https://youtu.be/75kgOhWsPNA)|[![](https://img.youtube.com/vi/MVCiM_VdxVA/maxresdefault.jpg)](https://youtu.be/MVCiM_VdxVA)|[![](https://img.youtube.com/vi/Qq3Evspeea8/maxresdefault.jpg)](https://youtu.be/Qq3Evspeea8)|[![](https://img.youtube.com/vi/Zx1Pg1gPfxA/maxresdefault.jpg)](https://www.youtube.com/watch?v=Zx1Pg1gPfxA)
+|:---:  | :---:  | :---: | :---:
+|[**SkeletonView Guides - Getting started**](https://youtu.be/75kgOhWsPNA)|[**How to Create Loading View with Skeleton View in Swift 5.2**](https://youtu.be/MVCiM_VdxVA)    by iKh4ever Studio|[**Create Skeleton Loading View in App (Swift 5) - Xcode 11, 2020**](https://youtu.be/Qq3Evspeea8)    by iOS Academy| [**Cómo crear una ANIMACIÓN de CARGA de DATOS en iOS**](https://www.youtube.com/watch?v=Zx1Pg1gPfxA) by MoureDev
 
 
 ## 📲 Installation
@@ -295,6 +295,8 @@ Default values:
   - *default: `SkeletonGradient(baseColor: .skeletonDefault)`*
 - **multilineHeight**: CGFloat
   - *default: 15*
+- **useFontLineHeight**: Bool
+  - *default: true*
 - **multilineSpacing**: CGFloat
   - *default: 10*
 - **multilineLastLineFillPercent**: Int
@@ -315,6 +317,7 @@ You can also specifiy these line appearance properties on a per-label basis:
 - **linesCornerRadius**: Int
 - **skeletonLineSpacing**: CGFloat
 - **skeletonPaddingInsets**: UIEdgeInsets
+- **useFontLineHeight**: Bool
 
 
 ### 🎨 Custom colors

SkeletonView.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |s|
   s.name         = "SkeletonView"
-  s.version      = "1.24.4"
+  s.version      = "1.25.1"
   s.summary      = "An elegant way to show users that something is happening and also prepare them to which contents he is waiting"
   s.description  = <<-DESC
   Today almost all apps have async processes, as API requests, long runing processes, etc. And while the processes are working, usually developers place a loading view to show users that something is going on.

SkeletonViewCore/Sources/API/Appearance/SkeletonAppearance.swift

@@ -27,6 +27,8 @@ public class SkeletonViewAppearance {
 
     public var multilineHeight: CGFloat = 15
 
+    public var useFontLineHeight: Bool = true
+    
     public var multilineSpacing: CGFloat = 10
 
     public var multilineLastLineFillPercent: Int = 70

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)
     }

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,

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 {
@@ -50,7 +51,7 @@ extension UILabel: SkeletonTextNode {
     }
     
     var usesTextHeightForLines: Bool {
-        get { return ao_get(pkey: &SkeletonTextNodeAssociatedKeys.usesTextHeightForLines) as? Bool ?? true }
+        get { return ao_get(pkey: &SkeletonTextNodeAssociatedKeys.usesTextHeightForLines) as? Bool ?? SkeletonAppearance.default.useFontLineHeight }
         set { ao_set(newValue, pkey: &SkeletonTextNodeAssociatedKeys.usesTextHeightForLines) }
     }
     
@@ -79,6 +80,10 @@ extension UILabel: SkeletonTextNode {
         set { ao_set(newValue, pkey: &SkeletonTextNodeAssociatedKeys.backupHeightConstraints) }
     }
     
+    var shouldCenterTextVertically: Bool {
+        true
+    }
+
 }
 
 extension UITextView: SkeletonTextNode {
@@ -95,7 +100,7 @@ extension UITextView: SkeletonTextNode {
     }
     
     var usesTextHeightForLines: Bool {
-        get { return ao_get(pkey: &SkeletonTextNodeAssociatedKeys.usesTextHeightForLines) as? Bool ?? true }
+        get { return ao_get(pkey: &SkeletonTextNodeAssociatedKeys.usesTextHeightForLines) as? Bool ?? SkeletonAppearance.default.useFontLineHeight }
         set { ao_set(newValue, pkey: &SkeletonTextNodeAssociatedKeys.usesTextHeightForLines) }
     }
     
@@ -129,4 +134,7 @@ extension UITextView: SkeletonTextNode {
         set { ao_set(newValue, pkey: &SkeletonTextNodeAssociatedKeys.paddingInsets) }
     }
     
+    var shouldCenterTextVertically: Bool {
+        false
+    }
 }

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) {