Skip to content

Commit

Permalink
Percent padding support. Solves #186
Browse files Browse the repository at this point in the history
  • Loading branch information
@albertocsouto
albertocsouto committed Nov 22, 2021
1 parent 437483a commit cf5e2f7
Show file tree
Hide file tree
Showing 3 changed files with 176 additions and 14 deletions.
83 changes: 83 additions & 0 deletions FlexLayoutTests/PaddingSpec.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@

import Quick
import Nimble
import FlexLayout

class PaddingSpec: QuickSpec {
override func spec() {
Expand Down Expand Up @@ -41,6 +42,15 @@ class PaddingSpec: QuickSpec {
rootFlexContainer.flex.layout()
expect(aView.frame).to(equal(CGRect(x: 0.0, y: 10.0, width: 400.0, height: 390.0)))
}

it("adjust the aView size and position") {
rootFlexContainer.flex.paddingTop(10%).define { (flex) in
flex.addItem(aView).grow(1)
}

rootFlexContainer.flex.layout()
expect(aView.frame).to(equal(CGRect(x: 0.0, y: 40.0, width: 400.0, height: 360.0)))
}

it("adjust the aView size and position") {
rootFlexContainer.flex.paddingLeft(10).define { (flex) in
Expand All @@ -49,6 +59,14 @@ class PaddingSpec: QuickSpec {
rootFlexContainer.flex.layout()
expect(aView.frame).to(equal(CGRect(x: 10.0, y: 0.0, width: 390.0, height: 400.0)))
}

it("adjust the aView size and position") {
rootFlexContainer.flex.paddingLeft(10%).define { (flex) in
flex.addItem(aView).grow(1)
}
rootFlexContainer.flex.layout()
expect(aView.frame).to(equal(CGRect(x: 40.0, y: 0.0, width: 360.0, height: 400.0)))
}

it("adjust the aView size and position") {
rootFlexContainer.flex.paddingBottom(10).define { (flex) in
Expand All @@ -57,6 +75,14 @@ class PaddingSpec: QuickSpec {
rootFlexContainer.flex.layout()
expect(aView.frame).to(equal(CGRect(x: 0.0, y: 0.0, width: 400.0, height: 390.0)))
}

it("adjust the aView size and position") {
rootFlexContainer.flex.paddingBottom(10%).define { (flex) in
flex.addItem(aView).grow(1)
}
rootFlexContainer.flex.layout()
expect(aView.frame).to(equal(CGRect(x: 0.0, y: 0.0, width: 400.0, height: 360.0)))
}

it("adjust the aView size and position") {
rootFlexContainer.flex.paddingRight(10).define { (flex) in
Expand All @@ -65,6 +91,14 @@ class PaddingSpec: QuickSpec {
rootFlexContainer.flex.layout()
expect(aView.frame).to(equal(CGRect(x: 0.0, y: 0.0, width: 390.0, height: 400.0)))
}

it("adjust the aView size and position") {
rootFlexContainer.flex.paddingRight(10%).define { (flex) in
flex.addItem(aView).grow(1)
}
rootFlexContainer.flex.layout()
expect(aView.frame).to(equal(CGRect(x: 0.0, y: 0.0, width: 360.0, height: 400.0)))
}

it("adjust the aView size and position") {
rootFlexContainer.flex.padding(10).define { (flex) in
Expand All @@ -73,6 +107,14 @@ class PaddingSpec: QuickSpec {
rootFlexContainer.flex.layout()
expect(aView.frame).to(equal(CGRect(x: 10.0, y: 10.0, width: 380.0, height: 380.0)))
}

it("adjust the aView size and position") {
rootFlexContainer.flex.padding(10%).define { (flex) in
flex.addItem(aView).grow(1)
}
rootFlexContainer.flex.layout()
expect(aView.frame).to(equal(CGRect(x: 40.0, y: 40.0, width: 320.0, height: 320.0)))
}

it("adjust the aView size and position") {
rootFlexContainer.flex.padding(10, 20, 30, 40).define { (flex) in
Expand All @@ -81,6 +123,14 @@ class PaddingSpec: QuickSpec {
rootFlexContainer.flex.layout()
expect(aView.frame).to(equal(CGRect(x: 20.0, y: 10.0, width: 340.0, height: 360.0)))
}

it("adjust the aView size and position") {
rootFlexContainer.flex.padding(10%, 20%, 30%, 40%).define { (flex) in
flex.addItem(aView).grow(1)
}
rootFlexContainer.flex.layout()
expect(aView.frame).to(equal(CGRect(x: 80.0, y: 40.0, width: 160.0, height: 240.0)))
}

it("adjust the aView size and position") {
rootFlexContainer.flex.paddingStart(10).define { (flex) in
Expand All @@ -89,6 +139,14 @@ class PaddingSpec: QuickSpec {
rootFlexContainer.flex.layout()
expect(aView.frame).to(equal(CGRect(x: 10.0, y: 0.0, width: 390.0, height: 400.0)))
}

it("adjust the aView size and position") {
rootFlexContainer.flex.paddingStart(10%).define { (flex) in
flex.addItem(aView).grow(1)
}
rootFlexContainer.flex.layout()
expect(aView.frame).to(equal(CGRect(x: 40.0, y: 0.0, width: 360.0, height: 400.0)))
}

it("adjust the aView size and position") {
rootFlexContainer.flex.paddingEnd(10).define { (flex) in
Expand All @@ -97,6 +155,14 @@ class PaddingSpec: QuickSpec {
rootFlexContainer.flex.layout()
expect(aView.frame).to(equal(CGRect(x: 0.0, y: 0.0, width: 390.0, height: 400.0)))
}

it("adjust the aView size and position") {
rootFlexContainer.flex.paddingEnd(10%).define { (flex) in
flex.addItem(aView).grow(1)
}
rootFlexContainer.flex.layout()
expect(aView.frame).to(equal(CGRect(x: 0.0, y: 0.0, width: 360.0, height: 400.0)))
}

it("adjust the aView size and position") {
rootFlexContainer.flex.paddingVertical(10).define { (flex) in
Expand All @@ -105,6 +171,14 @@ class PaddingSpec: QuickSpec {
rootFlexContainer.flex.layout()
expect(aView.frame).to(equal(CGRect(x: 0.0, y: 10.0, width: 400.0, height: 380.0)))
}

it("adjust the aView size and position") {
rootFlexContainer.flex.paddingVertical(10%).define { (flex) in
flex.addItem(aView).grow(1)
}
rootFlexContainer.flex.layout()
expect(aView.frame).to(equal(CGRect(x: 0.0, y: 40.0, width: 400.0, height: 320.0)))
}

it("adjust the aView size and position") {
rootFlexContainer.flex.paddingHorizontal(10).define { (flex) in
Expand All @@ -113,6 +187,15 @@ class PaddingSpec: QuickSpec {
rootFlexContainer.flex.layout()
expect(aView.frame).to(equal(CGRect(x: 10.0, y: 0.0, width: 380.0, height: 400.0)))
}

it("adjust the aView size and position") {
rootFlexContainer.flex.paddingHorizontal(10%).define { (flex) in
flex.addItem(aView).grow(1)
}
rootFlexContainer.flex.layout()
expect(aView.frame).to(equal(CGRect(x: 40.0, y: 0.0, width: 320.0, height: 400.0)))
}

}
}
}
30 changes: 16 additions & 14 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -959,27 +959,29 @@ Padding specify the **offset children should have** from a certain edge on the c

**Methods:**

* `paddingTop(_ value: CGFloat)`
* `paddingLeft(_ value: CGFloat)`
* `paddingBottom(_ value: CGFloat)`
* `paddingRight(_ value: CGFloat)`
* `paddingStart(_ value: CGFloat)`
* `paddingEnd(_ value: CGFloat)`
* `paddingHorizontal(_ value: CGFloat)`
* `paddingVertical(_ value: CGFloat)`
* `padding(_ insets: UIEdgeInsets)`
* **`paddingTop(_ value: CGFloat)`, `paddingTop(_ percent: FPercent)`**
* **`paddingLeft(_ value: CGFloat)`, `paddingLeft(_ percent: FPercent)`**
* **`paddingBottom(_ value: CGFloat)`, `paddingBottom(_ percent: FPercent)`**
* **`paddingRight(_ value: CGFloat)`, `paddingRight(_ percent: FPercent)`**
* **`paddingStart(_ value: CGFloat)`, `paddingStart(_ percent: FPercent)`**
* **`paddingEnd(_ value: CGFloat)`, `paddingEnd(_ percent: FPercent)`**
* **`paddingHorizontal(_ value: CGFloat)`, `paddingHorizontal(_ percent: FPercent)`**
* **`paddingVertical(_ value: CGFloat)`, `paddingVertical(_ percent: FPercent)`**
* **`padding(_ insets: UIEdgeInsets)`**
Set all paddings using an UIEdgeInsets. This method is particularly useful to set all paddings using iOS 11 `UIView.safeAreaInsets`.
* `padding(_ insets: NSDirectionalEdgeInsets)`
* **`padding(_ insets: NSDirectionalEdgeInsets)`**
Set all paddings using an NSDirectionalEdgeInsets. This method is particularly useful to set all padding using iOS 11 `UIView. directionalLayoutMargins` when layouting a view supporting RTL/LTR languages.
* `padding(_ value: CGFloat) `
* `padding(_ vertical: CGFloat, _ horizontal: CGFloat)`
* `padding(_ top: CGFloat, _ horizontal: CGFloat, _ bottom: CGFloat)`
* `padding(_ top: CGFloat, _ left: CGFloat, _ bottom: CGFloat, _ right: CGFloat) `
* **`padding(_ value: CGFloat)`, `padding(_ percent: FPercent)`**
* **`padding(_ vertical: CGFloat, _ horizontal: CGFloat)`, `padding(_ vertical: FPercent, horizontal: FPercent`**
* **`padding(_ top: CGFloat, _ horizontal: CGFloat, _ bottom: CGFloat)`, `padding(_ top: FPercent, _ horizontal: FPercent, _ bottom: FPercent)`**
* **`padding(_ top: CGFloat, _ left: FPercent, _ bottom: FPercent, _ right: FPercent)`, `padding(_ top: FPercent, _ left: FPercent, _ bottom: FPercent, _ right: FPercent)`**



###### Usage examples:
```swift
view.flex.padding(20)
view.flex.paddingTop(20%).paddingLeft(20%)
view.flex.paddingBottom(20)
view.flex.paddingHorizontal(20)
view.flex.padding(10, 12, 0, 12)
Expand Down
77 changes: 77 additions & 0 deletions Sources/Swift/FlexLayout.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -963,6 +963,12 @@ public final class Flex {
return self
}

@discardableResult
public func paddingTop(_ percent: FPercent) -> Flex {
yoga.paddingTop = YGValue(value: Float(percent.value), unit: .percent)
return self
}

/**
Set the left padding. Left padding specify the **offset children should have** from the container's left edge.
*/
Expand All @@ -972,6 +978,12 @@ public final class Flex {
return self
}

@discardableResult
public func paddingLeft(_ percent: FPercent) -> Flex {
yoga.paddingLeft = YGValue(value: Float(percent.value), unit: .percent)
return self
}

/**
Set the bottom padding. Bottom padding specify the **offset children should have** from the container's bottom edge.
*/
Expand All @@ -981,6 +993,12 @@ public final class Flex {
return self
}

@discardableResult
public func paddingBottom(_ percent: FPercent) -> Flex {
yoga.paddingBottom = YGValue(value: Float(percent.value), unit: .percent)
return self
}

/**
Set the top padding. Top padding specify the **offset children should have** from the container's top edge.
*/
Expand All @@ -990,6 +1008,12 @@ public final class Flex {
return self
}

@discardableResult
public func paddingRight(_ percent: FPercent) -> Flex {
yoga.paddingRight = YGValue(value: Float(percent.value), unit: .percent)
return self
}

/**
Set the start padding.

Expand All @@ -1003,6 +1027,12 @@ public final class Flex {
return self
}

@discardableResult
public func paddingStart(_ percent: FPercent) -> Flex {
yoga.paddingStart = YGValue(value: Float(percent.value), unit: .percent)
return self
}

/**
Set the end padding.

Expand All @@ -1016,6 +1046,12 @@ public final class Flex {
return self
}

@discardableResult
public func paddingEnd(_ percent: FPercent) -> Flex {
yoga.paddingEnd = YGValue(value: Float(percent.value), unit: .percent)
return self
}

/**
Set the left, right, start and end paddings to the specified value.
*/
Expand All @@ -1025,6 +1061,12 @@ public final class Flex {
return self
}

@discardableResult
public func paddingHorizontal(_ percent: FPercent) -> Flex {
yoga.paddingHorizontal = YGValue(value: Float(percent.value), unit: .percent)
return self
}

/**
Set the top and bottom paddings to the specified value.
*/
Expand All @@ -1033,6 +1075,12 @@ public final class Flex {
yoga.paddingVertical = YGValue(value)
return self
}

@discardableResult
public func paddingVertical(_ percent: FPercent) -> Flex {
yoga.paddingVertical = YGValue(value: Float(percent.value), unit: .percent)
return self
}

/**
Set paddings using UIEdgeInsets.
Expand Down Expand Up @@ -1072,6 +1120,12 @@ public final class Flex {
return self
}

@discardableResult
public func padding(_ percent: FPercent) -> Flex {
yoga.padding = YGValue(value: Float(percent.value), unit: .percent)
return self
}

/**
Set the individually vertical paddings (top, bottom) and horizontal paddings (left, right, start, end).
*/
Expand All @@ -1080,6 +1134,13 @@ public final class Flex {
yoga.paddingHorizontal = YGValue(horizontal)
return self
}

@discardableResult
public func padding(_ vertical: FPercent, _ horizontal: FPercent) -> Flex {
yoga.paddingVertical = YGValue(value: Float(vertical.value), unit: .percent)
yoga.paddingHorizontal = YGValue(value: Float(horizontal.value), unit: .percent)
return self
}

/**
Set the individually top, horizontal paddings and bottom padding.
Expand All @@ -1090,6 +1151,13 @@ public final class Flex {
yoga.paddingBottom = YGValue(bottom)
return self
}

@discardableResult func padding(_ top: FPercent, _ horizontal: FPercent, _ bottom: FPercent) -> Flex {
yoga.paddingTop = YGValue(value: Float(top.value), unit: .percent)
yoga.paddingHorizontal = YGValue(value: Float(horizontal.value), unit: .percent)
yoga.paddingBottom = YGValue(value: Float(bottom.value), unit: .percent)
return self
}

/**
Set the individually top, left, bottom and right paddings.
Expand All @@ -1102,6 +1170,15 @@ public final class Flex {
yoga.paddingRight = YGValue(right)
return self
}

@discardableResult
public func padding(_ top: FPercent, _ left: FPercent, _ bottom: FPercent, _ right: FPercent) -> Flex {
yoga.paddingTop = YGValue(value: Float(top.value), unit: .percent)
yoga.paddingLeft = YGValue(value: Float(left.value), unit: .percent)
yoga.paddingBottom = YGValue(value: Float(bottom.value), unit: .percent)
yoga.paddingRight = YGValue(value: Float(right.value), unit: .percent)
return self
}

//
// MARK: UIView Visual properties
Expand Down

0 comments on commit cf5e2f7

Please sign in to comment.