Align last line of skeleton view according to text alignment (#431)

* feature: align last line of skeleton view according to text alignment * code review changes
Juanpe · Aug 17, 2021 · ae44d9f · ae44d9f
1 parent 25c47d3
commit ae44d9f
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 17 deletions.
diff --git a/Example/TableView/Base.lproj/Main.storyboard b/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"/>

diff --git a/SkeletonView.xcodeproj/xcshareddata/xcschemes/SkeletonViewExample.xcscheme b/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"

diff --git a/Sources/Builders/SkeletonMultilineLayerBuilder.swift b/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)

diff --git a/Sources/Extensions/CALayer+Extensions.swift b/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
     }
 }

diff --git a/Sources/Multilines/ContainsMultilineText.swift b/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 }

diff --git a/Sources/SkeletonLayer.swift b/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)