Merge pull request #241 from Skyline-23/master

Add feature for Gap

Author: lucdion

README.md

@@ -681,6 +681,23 @@ This property takes the same values as the width and height properties, and spec
 
 <br>
 
+### gap
+- Applies to: `flex containers`
+- CSS name: `gap`
+
+**Method:**
+
+* **`columnGap(_ value: CGFloat)`**
+This property set distance between columns.
+
+* **`rowGap(_ value: CGFloat)`**
+This property set distance between rows.
+
+* **`gap(_ value: CGFloat)`**
+This property set distance between both of rows and columns.
+
+<br/>
+
 ### isIncludedInLayout()
 - Applies to: `flex items`
 

Sources/Swift/FlexLayout.swift

@@ -1213,6 +1213,49 @@ public final class Flex {
         return self
     }
 
+    //
+    // MARK: Gap
+    //
+
+    /**
+     Set distance between columns.
+     
+     - Parameters:
+       - value: distance
+     - Returns: flex interface
+    */
+    @discardableResult
+    public func columnGap(_ value: CGFloat) -> Flex {
+        yoga.columnGap = value
+        return self
+    }
+    
+    /**
+     Set distance between rows.
+     
+     - Parameters:
+       - value: distance
+     - Returns: flex interface
+    */
+    @discardableResult
+    public func rowGap(_ value: CGFloat) -> Flex {
+        yoga.rowGap = value
+        return self
+    }
+    
+    /**
+     Set distance between both of rows and columns.
+     
+     - Parameters:
+       - value: distance
+     - Returns: flex interface
+    */
+    @discardableResult
+    public func gap(_ value: CGFloat) -> Flex {
+        yoga.gap = value
+        return self
+    }
+    
     //
     // MARK: UIView Visual properties
     //

Sources/YogaKit/include/YogaKit/YGLayout.h

@@ -115,6 +115,10 @@ typedef NS_OPTIONS(NSInteger, YGDimensionFlexibility) {
 // Yoga specific properties, not compatible with flexbox specification
 @property(nonatomic, readwrite, assign) CGFloat aspectRatio;
 
+@property(nonatomic, readwrite, assign) CGFloat columnGap;
+@property(nonatomic, readwrite, assign) CGFloat rowGap;
+@property(nonatomic, readwrite, assign) CGFloat gap;
+
 /**
  Get the resolved direction of this node. This won't be YGDirectionInherit
  */

Tests/FlexLayoutTests/WidthSizeContentTests.swift

@@ -18,6 +18,8 @@ final class WidthSizeContentTests: XCTestCase {
     var viewController: UIViewController!
     var rootFlexContainer: UIView!
     var aView: UIView!
+    var bView: UIView!
+    var cView: UIView!
 
     override func setUp() {
         super.setUp()
@@ -29,6 +31,8 @@ final class WidthSizeContentTests: XCTestCase {
         viewController.view.addSubview(rootFlexContainer)
 
         aView = UIView()
+        bView = UIView()
+        cView = UIView()
     }
 
     func test_basis_adjust_aView_size_and_position() {
@@ -159,4 +163,49 @@ final class WidthSizeContentTests: XCTestCase {
         rootFlexContainer.flex.layout()
         XCTAssertEqual(aView.frame, CGRect(x: 0.0, y: 0.0, width: 400.0, height: 200.0))
     }
+    
+    func test_row_gap() {
+        rootFlexContainer.flex.direction(.row).define { flex in
+            flex.addItem(aView).height(100).width(100)
+            flex.addItem(bView).height(100).width(100)
+            flex.alignItems(.start)
+            
+            flex.columnGap(50)
+        }
+
+        rootFlexContainer.flex.layout()
+        XCTAssertEqual(bView.frame, CGRect(x: 150.0, y: 0.0, width: 100.0, height: 100.0))
+    }
+
+    func test_column_gap() {
+        rootFlexContainer.flex.direction(.column).define { flex in
+            flex.addItem(aView).height(100).width(100)
+            flex.addItem(bView).height(100).width(100)
+            flex.alignItems(.start)
+            
+            flex.rowGap(50)
+        }
+
+        rootFlexContainer.flex.layout()
+        XCTAssertEqual(bView.frame, CGRect(x: 0.0, y: 150.0, width: 100.0, height: 100.0))
+    }
+    
+    func test_gap() {
+        rootFlexContainer.flex.direction(.column).define { flex in
+            flex.addItem().direction(.row).define { flex in
+                flex.addItem(aView).height(100).width(100)
+                flex.addItem(bView).height(100).width(100)
+                flex.gap(50)
+            }
+            flex.addItem(cView).height(100).width(100)
+            
+            flex.alignItems(.start)
+            flex.gap(50)
+        }
+
+        rootFlexContainer.flex.layout()
+
+        XCTAssertEqual(bView.frame, CGRect(x: 150.0, y: 0.0, width: 100.0, height: 100.0))
+        XCTAssertEqual(cView.frame, CGRect(x: 0.0, y: 150.0, width: 100.0, height: 100.0))
+    }
 }