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
update file header
2021-08-17 19:03:13 +02:00 · 2021-08-02 19:10:46 +02:00 · 2021-07-23 13:54:10 +00:00 · 2021-07-23 15:52:52 +02:00 · 2021-07-13 11:51:26 +00:00 · 2021-07-13 13:50:06 +02:00
12 changed files with 61 additions and 24 deletions
@@ -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"/>
@@ -7,8 +7,8 @@ GEM
      minitest (~> 5.1)
      thread_safe (~> 0.3, >= 0.3.4)
      tzinfo (~> 1.1)
-    addressable (2.6.0)
-      public_suffix (>= 2.0.2, < 4.0)
+    addressable (2.8.0)
+      public_suffix (>= 2.0.2, < 5.0)
    atomos (0.1.3)
    babosa (1.0.2)
    claide (1.0.2)
@@ -39,7 +39,6 @@ Enjoy it! 🙂
  - [🔠 Texts](#-texts)
  - [🦋 Appearance](#-appearance)
  - [🎨 Custom colors](#-custom-colors)
-        - [Image captured from website https://flatuicolors.com](#image-captured-from-website-httpsflatuicolorscom)
  - [🏃‍♀️ Animations](#️-animations)
  - [🏄 Transitions](#-transitions)
 - [✨ Miscellaneous](#-miscellaneous)
@@ -1,6 +1,6 @@
 Pod::Spec.new do |s|
  s.name         = "SkeletonView"
-  s.version      = "1.20.0"
+  s.version      = "1.21.2"
  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.
@@ -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>
@@ -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"
@@ -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)
@@ -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
    }
 }
@@ -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 }
@@ -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)
@@ -363,9 +363,9 @@ extension UIView {
            let skeletonLayer = skeletonLayer,
            let transitionStyle = currentSkeletonConfig?.transition else { return }
        skeletonLayer.stopAnimation()
+        status = .off
        skeletonLayer.removeLayer(transition: transitionStyle) {
            self.skeletonLayer = nil
-            self.status = .off
            self.currentSkeletonConfig = nil
        }
    }
@@ -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).
Author	SHA1	Message	Date
Sofia Silva	ae44d9f07a	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	2021-08-17 19:03:13 +02:00
Juanpe Catalán	25c47d3029	update file header	2021-08-02 19:10:46 +02:00
Juanpe	11c90283ff	Bump version 1.21.2	2021-07-23 13:54:10 +00:00
Juanpe Catalán	49fafccd3f	set status off before the transition is finished (#423 )	2021-07-23 15:52:52 +02:00
Juanpe	1f70ee4573	Bump version 1.21.1	2021-07-13 11:51:26 +00:00
dependabot[bot]	d13369a0dd	Bump addressable from 2.6.0 to 2.8.0 (#420 ) Bumps [addressable](https://github.com/sporkmonger/addressable) from 2.6.0 to 2.8.0. - [Release notes](https://github.com/sporkmonger/addressable/releases) - [Changelog](https://github.com/sporkmonger/addressable/blob/main/CHANGELOG.md) - [Commits](https://github.com/sporkmonger/addressable/compare/addressable-2.6.0...addressable-2.8.0) --- updated-dependencies: - dependency-name: addressable dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2021-07-13 13:50:06 +02:00
Juanpe Catalán	35d63041d2	Update README.md	2021-07-05 20:01:41 +02:00
Juanpe	4514b509cc	Bump version 1.21.0	2021-07-02 14:10:57 +00:00