Separate spacing between action button and first action item (#262)

* Separate spacing between action button and first action item from inter item spacing * update tests * improve code complexity in AnimationConfiguration * rename spacing method * move selectSpacing to correct extension Co-authored-by: Jochen Pfeiffer <[email protected]>
jjochen · Apr 18, 2020 · 2ac2870 · 2ac2870
1 parent 6adbbbd
commit 2ac2870
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 9 deletions.
diff --git a/Example/JJFloatingActionButton/ConfigurationExampleViewController.swift b/Example/JJFloatingActionButton/ConfigurationExampleViewController.swift
@@ -55,7 +55,7 @@ internal class ConfigurationExampleViewController: UIViewController {
         actionButton.buttonImageSize = CGSize(width: 30, height: 30)
 
         actionButton.buttonAnimationConfiguration = .transition(toImage: #imageLiteral(resourceName: "X"))
-        actionButton.itemAnimationConfiguration = .slideIn(withInterItemSpacing: 14)
+        actionButton.itemAnimationConfiguration = .slideIn(withInterItemSpacing: 14, firstItemSpacing: 28)
 
         actionButton.layer.shadowColor = UIColor.black.cgColor
         actionButton.layer.shadowOffset = CGSize(width: 0, height: 1)

diff --git a/Example/Tests/AnimationConfigurationSpec.swift b/Example/Tests/AnimationConfigurationSpec.swift
@@ -75,6 +75,19 @@ class AnimationConfigurationSpec: QuickSpec {
                 }
             }
 
+            context("when using pop up style with separate first item spacing") {
+                beforeEach {
+                    actionButton.itemAnimationConfiguration = .popUp(withInterItemSpacing: 10, firstItemSpacing: 50)
+                    actionButton.buttonAnimationConfiguration = .transition(toImage: #imageLiteral(resourceName: "Owl"))
+                }
+
+                it("it looks correct") {
+                    actionButton.open(animated: false)
+
+                    expect(superview) == snapshot()
+                }
+            }
+
             context("when using slide in style") {
                 beforeEach {
                     actionButton.itemAnimationConfiguration = .slideIn(withInterItemSpacing: 10)

diff --git a/...en_using_pop_up_style_with_separate_first_item_spacing__it_looks_correct@2x.png b/...en_using_pop_up_style_with_separate_first_item_spacing__it_looks_correct@2x.png
diff --git a/...en_using_pop_up_style_with_separate_first_item_spacing__it_looks_correct@3x.png b/...en_using_pop_up_style_with_separate_first_item_spacing__it_looks_correct@3x.png
diff --git a/...nButton__looks_correct_when_placed_in_view_controller_iPhone13_4_414x896@3x.png b/...nButton__looks_correct_when_placed_in_view_controller_iPhone13_4_414x896@3x.png
diff --git a/Sources/AnimationConfiguration.swift b/Sources/AnimationConfiguration.swift
@@ -209,13 +209,17 @@ import UIKit
     ///   - `itemLayout = .verticalLine()`
     ///   - `closedState = .scale()`
     ///
-    /// - Parameter interItemSpacing: The distance between two adjacent items.
+    /// - Parameter interItemSpacing: The distance between two adjacent items. Default is `12`.
+    /// - Parameter firstItemSpacing: The distance between the action button and the first action item.
+    ///                               When `firstItemSpacing` is `0` or less `interItemSpacing` is used instead.
+    ///                               Default is `0`.
     ///
     /// - Returns: An item animation configuration object.
     ///
-    @objc static func popUp(withInterItemSpacing interItemSpacing: CGFloat = 12) -> JJItemAnimationConfiguration {
+    @objc static func popUp(withInterItemSpacing interItemSpacing: CGFloat = 12,
+                            firstItemSpacing: CGFloat = 0) -> JJItemAnimationConfiguration {
         let configuration = JJItemAnimationConfiguration()
-        configuration.itemLayout = .verticalLine(withInterItemSpacing: interItemSpacing)
+        configuration.itemLayout = .verticalLine(withInterItemSpacing: interItemSpacing, firstItemSpacing: firstItemSpacing)
         configuration.closedState = .scale()
         return configuration
     }
@@ -224,13 +228,17 @@ import UIKit
     ///   - `itemLayout = .verticalLine()`
     ///   - `closedState = .horizontalOffset()`
     ///
-    /// - Parameter interItemSpacing: The distance between two adjacent items.
+    /// - Parameter interItemSpacing: The distance between two adjacent items. Default is `12`.
+    /// - Parameter firstItemSpacing: The distance between the action button and the first action item.
+    ///                               When `firstItemSpacing` is `0` or less `interItemSpacing` is used instead.
+    ///                               Default is `0`.
     ///
     /// - Returns: An item animation configuration object.
     ///
-    @objc static func slideIn(withInterItemSpacing interItemSpacing: CGFloat = 12) -> JJItemAnimationConfiguration {
+    @objc static func slideIn(withInterItemSpacing interItemSpacing: CGFloat = 12,
+                              firstItemSpacing: CGFloat = 0) -> JJItemAnimationConfiguration {
         let configuration = JJItemAnimationConfiguration()
-        configuration.itemLayout = .verticalLine(withInterItemSpacing: interItemSpacing)
+        configuration.itemLayout = .verticalLine(withInterItemSpacing: interItemSpacing, firstItemSpacing: firstItemSpacing)
         configuration.closedState = .horizontalOffset()
         return configuration
     }
@@ -290,15 +298,21 @@ import UIKit
     /// Returns an item layout object that places the items in a vertical line with given inter item spacing.
     ///
     /// - Parameter interItemSpacing: The distance between two adjacent items.
+    /// - Parameter firstItemSpacing: The distance between the action button and the first action item.
+    ///                               When `firstItemSpacing` is 0 or less `interItemSpacing` is used instead.
+    ///                               Default is 0.
     ///
     /// - Returns: An item layout object.
     ///
-    @objc public static func verticalLine(withInterItemSpacing interItemSpacing: CGFloat = 12) -> JJItemLayout {
+    @objc public static func verticalLine(withInterItemSpacing interItemSpacing: CGFloat = 12,
+                                          firstItemSpacing: CGFloat = 0) -> JJItemLayout {
         return JJItemLayout { items, actionButton in
             var previousItem: JJActionItem?
             for item in items {
                 let previousView = previousItem ?? actionButton
-                item.bottomAnchor.constraint(equalTo: previousView.topAnchor, constant: -interItemSpacing).isActive = true
+                let isFirstItem = (previousItem == nil)
+                let spacing = selectSpacing(forFirstItem: isFirstItem, defaultSpacing: interItemSpacing, firstItemSpacing: firstItemSpacing)
+                item.bottomAnchor.constraint(equalTo: previousView.topAnchor, constant: -spacing).isActive = true
                 item.circleView.centerXAnchor.constraint(equalTo: actionButton.centerXAnchor).isActive = true
                 previousItem = item
             }
@@ -467,6 +481,15 @@ internal extension JJItemAnimationConfiguration {
     }
 }
 
+fileprivate extension JJItemLayout {
+    static func selectSpacing(forFirstItem isFirstItem: Bool, defaultSpacing: CGFloat, firstItemSpacing: CGFloat) -> CGFloat {
+        if isFirstItem && firstItemSpacing > 0 {
+            return firstItemSpacing
+        }
+        return defaultSpacing
+    }
+}
+
 fileprivate extension JJActionItem {
     func scale(by factor: CGFloat, translationX: CGFloat = 0, translationY: CGFloat = 0) {
         let scale = scaleTransformation(factor: factor)