Use fontLine for skeleton in labels (#427)

Co-authored-by: Ankit Agarwal <ankit.agarwal@naukri.com>

Example/TableView/Base.lproj/Main.storyboard

@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="17701" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="Va7-1y-Tel">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="18122" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="Va7-1y-Tel">
     <device id="retina5_9" orientation="portrait" appearance="light"/>
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17703"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="18093"/>
         <capability name="Safe area layout guides" minToolsVersion="9.0"/>
         <capability name="System colors in document resources" minToolsVersion="11.0"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
@@ -50,7 +50,7 @@
                                             <userDefinedRuntimeAttribute type="boolean" keyPath="isSkeletonable" value="YES"/>
                                         </userDefinedRuntimeAttributes>
                                     </imageView>
-                                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="3" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="CJW-A4-Fb8">
+                                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" textAlignment="center" lineBreakMode="tailTruncation" numberOfLines="3" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="CJW-A4-Fb8">
                                         <rect key="frame" x="166" y="27" width="166" height="12"/>
                                         <color key="backgroundColor" red="0.92156862750000001" green="0.16862745100000001" blue="0.54901960780000003" alpha="1" colorSpace="calibratedRGB"/>
                                         <fontDescription key="fontDescription" type="system" pointSize="10"/>
@@ -89,7 +89,7 @@
                                 <color key="separatorColor" red="0.1061807256" green="0.84678786989999999" blue="0.031482450150000001" alpha="1" colorSpace="custom" customColorSpace="displayP3"/>
                                 <prototypes>
                                     <tableViewCell clipsSubviews="YES" contentMode="scaleToFill" preservesSuperviewLayoutMargins="YES" selectionStyle="default" indentationWidth="10" reuseIdentifier="CellIdentifier" rowHeight="120" id="2dN-Bd-tdy" customClass="Cell" customModule="SkeletonViewExample" customModuleProvider="target">
-                                        <rect key="frame" x="0.0" y="28" width="375" height="120"/>
+                                        <rect key="frame" x="0.0" y="24.333333969116211" width="375" height="120"/>
                                         <autoresizingMask key="autoresizingMask"/>
                                         <tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" preservesSuperviewLayoutMargins="YES" insetsLayoutMarginsFromSafeArea="NO" tableViewCell="2dN-Bd-tdy" id="7IN-F3-Mr6">
                                             <rect key="frame" x="0.0" y="0.0" width="375" height="120"/>

SkeletonView.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |s|
   s.name         = "SkeletonView"
-  s.version      = "1.21.1"
+  s.version      = "1.22.0"
   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.

SkeletonView.xcodeproj/xcshareddata/IDETemplateMacros.plist

@@ -3,6 +3,17 @@
 <plist version="1.0">
 <dict>
 	<key>FILEHEADER</key>
-	<string> ___COPYRIGHT___</string>
+	<string>
+//  Copyright SkeletonView. All Rights Reserved.
+//
+//  Licensed under the MIT License (the &quot;License&quot;);
+//  you may not use this file except in compliance with the License.
+//  You may obtain a copy of the License at
+//
+//      https://opensource.org/licenses/MIT
+//
+//  ___FILENAME___
+//
+//  Created by ___FULLUSERNAME___ on ___DATE___.</string>
 </dict>
 </plist>

SkeletonView.xcodeproj/xcshareddata/xcschemes/SkeletonViewExample.xcscheme

@@ -27,8 +27,6 @@
       selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
       selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
       shouldUseLaunchSchemeArgsEnv = "YES">
-      <Testables>
-      </Testables>
       <MacroExpansion>
          <BuildableReference
             BuildableIdentifier = "primary"
@@ -38,8 +36,8 @@
             ReferencedContainer = "container:SkeletonView.xcodeproj">
          </BuildableReference>
       </MacroExpansion>
-      <AdditionalOptions>
-      </AdditionalOptions>
+      <Testables>
+      </Testables>
    </TestAction>
    <LaunchAction
       buildConfiguration = "Debug"
@@ -61,8 +59,6 @@
             ReferencedContainer = "container:SkeletonView.xcodeproj">
          </BuildableReference>
       </BuildableProductRunnable>
-      <AdditionalOptions>
-      </AdditionalOptions>
    </LaunchAction>
    <ProfileAction
       buildConfiguration = "Release"

Sources/Builders/SkeletonMultilineLayerBuilder.swift

@@ -12,6 +12,7 @@ class SkeletonMultilineLayerBuilder {
     var cornerRadius: Int?
     var multilineSpacing: CGFloat = SkeletonAppearance.default.multilineSpacing
     var paddingInsets: UIEdgeInsets = .zero
+    var alignment: NSTextAlignment = .natural
     var isRTL: Bool = false
 
     @discardableResult
@@ -55,6 +56,12 @@ class SkeletonMultilineLayerBuilder {
         self.paddingInsets = insets
         return self
     }
+
+    @discardableResult
+    func setAlignment(_ alignment: NSTextAlignment) -> SkeletonMultilineLayerBuilder {
+        self.alignment = alignment
+        return self
+    }
     
     @discardableResult
     func setIsRTL(_ isRTL: Bool) -> SkeletonMultilineLayerBuilder {
@@ -74,9 +81,11 @@ class SkeletonMultilineLayerBuilder {
         layer.anchorPoint = .zero
         layer.name = CALayer.skeletonSubLayersName
         layer.updateLayerFrame(for: index,
+                               totalLines: layer.skeletonSublayers.count,
                                size: CGSize(width: width, height: height),
                                multilineSpacing: multilineSpacing,
                                paddingInsets: paddingInsets,
+                               alignment: alignment,
                                isRTL: isRTL)
 
         layer.cornerRadius = CGFloat(radius)

Sources/Extensions/CALayer+Extensions.swift

@@ -36,6 +36,7 @@ struct SkeletonMultilinesLayerConfig {
 	var multilineCornerRadius: Int
 	var multilineSpacing: CGFloat
 	var paddingInsets: UIEdgeInsets
+    var alignment: NSTextAlignment
     var isRTL: Bool
     
     /// Returns padding insets taking into account if the RTL is activated
@@ -69,6 +70,7 @@ extension CALayer {
 			.setMultilineSpacing(config.multilineSpacing)
             .setPadding(config.paddingInsets)
             .setHeight(height)
+            .setAlignment(config.alignment)
             .setIsRTL(config.isRTL)
     
         (0..<numberOfSublayers).forEach { index in
@@ -97,10 +99,13 @@ extension CALayer {
         for (index, layer) in currentSkeletonSublayers.enumerated() {
             let width = calculatedWidthForLine(at: index, totalLines: numberOfSublayers, lastLineFillPercent: lastLineFillPercent, paddingInsets: paddingInsets)
             layer.updateLayerFrame(for: index,
+                                   totalLines: numberOfSublayers,
                                    size: CGSize(width: width, height: height),
                                    multilineSpacing: multilineSpacing,
                                    paddingInsets: paddingInsets,
-                                   isRTL: config.isRTL)
+                                   alignment: config.alignment,
+                                   isRTL: config.isRTL
+            )
         }
     }
 
@@ -112,14 +117,18 @@ extension CALayer {
         return width
     }
 
-    func updateLayerFrame(for index: Int, size: CGSize, multilineSpacing: CGFloat, paddingInsets: UIEdgeInsets, isRTL: Bool) {
+    func updateLayerFrame(for index: Int, totalLines: Int, size: CGSize, multilineSpacing: CGFloat, paddingInsets: UIEdgeInsets, alignment: NSTextAlignment, isRTL: Bool) {
         let spaceRequiredForEachLine = size.height + multilineSpacing
         let newFrame = CGRect(x: paddingInsets.left,
                               y: CGFloat(index) * spaceRequiredForEachLine + paddingInsets.top,
                               width: size.width,
                               height: size.height)
-        
-        frame = flipRectForRTLIfNeeded(newFrame, isRTL: isRTL)
+
+        if index == totalLines - 1 && totalLines != 1 {
+            frame = alignLayerFrame(newFrame, alignment: alignment, isRTL: isRTL)
+        } else {
+            frame = newFrame
+        }
     }
     
     private func calculateNumLines(for config: SkeletonMultilinesLayerConfig) -> Int {
@@ -141,12 +150,22 @@ extension CALayer {
         
         return calculatedNumberOfLines
     }
-    
-    private func flipRectForRTLIfNeeded(_ rect: CGRect, isRTL: Bool) -> CGRect {
+
+    private func alignLayerFrame(_ rect: CGRect, alignment: NSTextAlignment, isRTL: Bool) -> CGRect {
         var newRect = rect
-        if isRTL {
+
+        switch alignment {
+        case .natural where isRTL,
+             .right:
             newRect.origin.x = (superlayer?.bounds.width ?? 0) - rect.origin.x - rect.width
+        case .center:
+            newRect.origin.x = rect.origin.x + ((superlayer?.bounds.width ?? 0) - rect.width) / 2
+        case .natural, .left, .justified:
+            break
+        @unknown default:
+            break
         }
+
         return newRect
     }
 }

Sources/Multilines/ContainsMultilineText.swift

@@ -13,6 +13,7 @@ enum MultilineAssociatedKeys {
 protocol ContainsMultilineText {
     var lineHeight: CGFloat { get }
     var numberOfLines: Int { get }
+    var textAlignment: NSTextAlignment { get }
     var lastLineFillingPercent: Int { get }
     var multilineCornerRadius: Int { get }
     var multilineSpacing: CGFloat { get }

Sources/Multilines/UILabel+Multiline.swift

@@ -29,7 +29,13 @@ public extension UILabel {
 
 extension UILabel: ContainsMultilineText {    
     var lineHeight: CGFloat {
-        backupHeightConstraints.first?.constant ?? SkeletonAppearance.default.multilineHeight
+        if let fontLineHeight = font?.lineHeight {
+            if let heightConstraints = backupHeightConstraints.first?.constant {
+                return (fontLineHeight > heightConstraints) ? heightConstraints : fontLineHeight
+            }
+            return fontLineHeight
+        }
+        return SkeletonAppearance.default.multilineHeight
     }
     
     var lastLineFillingPercent: Int {

Sources/SkeletonLayer.swift

@@ -90,6 +90,7 @@ struct SkeletonLayer {
                                                    multilineCornerRadius: textView.multilineCornerRadius,
                                                    multilineSpacing: textView.multilineSpacing,
                                                    paddingInsets: textView.paddingInsets,
+                                                   alignment: textView.textAlignment,
                                                    isRTL: holder?.isRTL ?? false)
 
         maskLayer.addMultilinesLayers(for: config)
@@ -104,6 +105,7 @@ struct SkeletonLayer {
                                                    multilineCornerRadius: textView.multilineCornerRadius,
                                                    multilineSpacing: textView.multilineSpacing,
                                                    paddingInsets: textView.paddingInsets,
+                                                   alignment: textView.textAlignment,
                                                    isRTL: holder?.isRTL ?? false)
         
         maskLayer.updateMultilinesLayers(for: config)

fastlane/README.md

@@ -28,6 +28,6 @@ fastlane release_current
 
 ----
 
-This README.md is auto-generated and will be re-generated every time [fastlane](https://fastlane.tools) is run.
+This README.md is auto-generated and will be re-generated every time [_fastlane_](https://fastlane.tools) is run.
 More information about fastlane can be found on [fastlane.tools](https://fastlane.tools).
 The documentation of fastlane can be found on [docs.fastlane.tools](https://docs.fastlane.tools).