Skip to content

Commit 50745f8

Browse files
lucdionlucdion
authored
Merge pull request #187 from nomasystems/feat/186-percent-padding
Percent padding support. Solves #186
2 parents 437483a + cf5e2f7 commit 50745f8

File tree

3 files changed

+176
-14
lines changed

3 files changed

+176
-14
lines changed

‎FlexLayoutTests/PaddingSpec.swift‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212

1313
import Quick
1414
import Nimble
15+
import FlexLayout
1516

1617
class PaddingSpec: QuickSpec {
1718
override func spec() {
@@ -41,6 +42,15 @@ class PaddingSpec: QuickSpec {
4142
rootFlexContainer.flex.layout()
4243
expect(aView.frame).to(equal(CGRect(x: 0.0, y: 10.0, width: 400.0, height: 390.0)))
4344
}
45+
46+
it("adjust the aView size and position") {
47+
rootFlexContainer.flex.paddingTop(10%).define { (flex) in
48+
flex.addItem(aView).grow(1)
49+
}
50+
51+
rootFlexContainer.flex.layout()
52+
expect(aView.frame).to(equal(CGRect(x: 0.0, y: 40.0, width: 400.0, height: 360.0)))
53+
}
4454

4555
it("adjust the aView size and position") {
4656
rootFlexContainer.flex.paddingLeft(10).define { (flex) in
@@ -49,6 +59,14 @@ class PaddingSpec: QuickSpec {
4959
rootFlexContainer.flex.layout()
5060
expect(aView.frame).to(equal(CGRect(x: 10.0, y: 0.0, width: 390.0, height: 400.0)))
5161
}
62+
63+
it("adjust the aView size and position") {
64+
rootFlexContainer.flex.paddingLeft(10%).define { (flex) in
65+
flex.addItem(aView).grow(1)
66+
}
67+
rootFlexContainer.flex.layout()
68+
expect(aView.frame).to(equal(CGRect(x: 40.0, y: 0.0, width: 360.0, height: 400.0)))
69+
}
5270

5371
it("adjust the aView size and position") {
5472
rootFlexContainer.flex.paddingBottom(10).define { (flex) in
@@ -57,6 +75,14 @@ class PaddingSpec: QuickSpec {
5775
rootFlexContainer.flex.layout()
5876
expect(aView.frame).to(equal(CGRect(x: 0.0, y: 0.0, width: 400.0, height: 390.0)))
5977
}
78+
79+
it("adjust the aView size and position") {
80+
rootFlexContainer.flex.paddingBottom(10%).define { (flex) in
81+
flex.addItem(aView).grow(1)
82+
}
83+
rootFlexContainer.flex.layout()
84+
expect(aView.frame).to(equal(CGRect(x: 0.0, y: 0.0, width: 400.0, height: 360.0)))
85+
}
6086

6187
it("adjust the aView size and position") {
6288
rootFlexContainer.flex.paddingRight(10).define { (flex) in
@@ -65,6 +91,14 @@ class PaddingSpec: QuickSpec {
6591
rootFlexContainer.flex.layout()
6692
expect(aView.frame).to(equal(CGRect(x: 0.0, y: 0.0, width: 390.0, height: 400.0)))
6793
}
94+
95+
it("adjust the aView size and position") {
96+
rootFlexContainer.flex.paddingRight(10%).define { (flex) in
97+
flex.addItem(aView).grow(1)
98+
}
99+
rootFlexContainer.flex.layout()
100+
expect(aView.frame).to(equal(CGRect(x: 0.0, y: 0.0, width: 360.0, height: 400.0)))
101+
}
68102

69103
it("adjust the aView size and position") {
70104
rootFlexContainer.flex.padding(10).define { (flex) in
@@ -73,6 +107,14 @@ class PaddingSpec: QuickSpec {
73107
rootFlexContainer.flex.layout()
74108
expect(aView.frame).to(equal(CGRect(x: 10.0, y: 10.0, width: 380.0, height: 380.0)))
75109
}
110+
111+
it("adjust the aView size and position") {
112+
rootFlexContainer.flex.padding(10%).define { (flex) in
113+
flex.addItem(aView).grow(1)
114+
}
115+
rootFlexContainer.flex.layout()
116+
expect(aView.frame).to(equal(CGRect(x: 40.0, y: 40.0, width: 320.0, height: 320.0)))
117+
}
76118

77119
it("adjust the aView size and position") {
78120
rootFlexContainer.flex.padding(10, 20, 30, 40).define { (flex) in
@@ -81,6 +123,14 @@ class PaddingSpec: QuickSpec {
81123
rootFlexContainer.flex.layout()
82124
expect(aView.frame).to(equal(CGRect(x: 20.0, y: 10.0, width: 340.0, height: 360.0)))
83125
}
126+
127+
it("adjust the aView size and position") {
128+
rootFlexContainer.flex.padding(10%, 20%, 30%, 40%).define { (flex) in
129+
flex.addItem(aView).grow(1)
130+
}
131+
rootFlexContainer.flex.layout()
132+
expect(aView.frame).to(equal(CGRect(x: 80.0, y: 40.0, width: 160.0, height: 240.0)))
133+
}
84134

85135
it("adjust the aView size and position") {
86136
rootFlexContainer.flex.paddingStart(10).define { (flex) in
@@ -89,6 +139,14 @@ class PaddingSpec: QuickSpec {
89139
rootFlexContainer.flex.layout()
90140
expect(aView.frame).to(equal(CGRect(x: 10.0, y: 0.0, width: 390.0, height: 400.0)))
91141
}
142+
143+
it("adjust the aView size and position") {
144+
rootFlexContainer.flex.paddingStart(10%).define { (flex) in
145+
flex.addItem(aView).grow(1)
146+
}
147+
rootFlexContainer.flex.layout()
148+
expect(aView.frame).to(equal(CGRect(x: 40.0, y: 0.0, width: 360.0, height: 400.0)))
149+
}
92150

93151
it("adjust the aView size and position") {
94152
rootFlexContainer.flex.paddingEnd(10).define { (flex) in
@@ -97,6 +155,14 @@ class PaddingSpec: QuickSpec {
97155
rootFlexContainer.flex.layout()
98156
expect(aView.frame).to(equal(CGRect(x: 0.0, y: 0.0, width: 390.0, height: 400.0)))
99157
}
158+
159+
it("adjust the aView size and position") {
160+
rootFlexContainer.flex.paddingEnd(10%).define { (flex) in
161+
flex.addItem(aView).grow(1)
162+
}
163+
rootFlexContainer.flex.layout()
164+
expect(aView.frame).to(equal(CGRect(x: 0.0, y: 0.0, width: 360.0, height: 400.0)))
165+
}
100166

101167
it("adjust the aView size and position") {
102168
rootFlexContainer.flex.paddingVertical(10).define { (flex) in
@@ -105,6 +171,14 @@ class PaddingSpec: QuickSpec {
105171
rootFlexContainer.flex.layout()
106172
expect(aView.frame).to(equal(CGRect(x: 0.0, y: 10.0, width: 400.0, height: 380.0)))
107173
}
174+
175+
it("adjust the aView size and position") {
176+
rootFlexContainer.flex.paddingVertical(10%).define { (flex) in
177+
flex.addItem(aView).grow(1)
178+
}
179+
rootFlexContainer.flex.layout()
180+
expect(aView.frame).to(equal(CGRect(x: 0.0, y: 40.0, width: 400.0, height: 320.0)))
181+
}
108182

109183
it("adjust the aView size and position") {
110184
rootFlexContainer.flex.paddingHorizontal(10).define { (flex) in
@@ -113,6 +187,15 @@ class PaddingSpec: QuickSpec {
113187
rootFlexContainer.flex.layout()
114188
expect(aView.frame).to(equal(CGRect(x: 10.0, y: 0.0, width: 380.0, height: 400.0)))
115189
}
190+
191+
it("adjust the aView size and position") {
192+
rootFlexContainer.flex.paddingHorizontal(10%).define { (flex) in
193+
flex.addItem(aView).grow(1)
194+
}
195+
rootFlexContainer.flex.layout()
196+
expect(aView.frame).to(equal(CGRect(x: 40.0, y: 0.0, width: 320.0, height: 400.0)))
197+
}
198+
116199
}
117200
}
118201
}

‎README.md‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -959,27 +959,29 @@ Padding specify the **offset children should have** from a certain edge on the c
959959

960960
**Methods:**
961961

962-
* `paddingTop(_ value: CGFloat)`
963-
* `paddingLeft(_ value: CGFloat)`
964-
* `paddingBottom(_ value: CGFloat)`
965-
* `paddingRight(_ value: CGFloat)`
966-
* `paddingStart(_ value: CGFloat)`
967-
* `paddingEnd(_ value: CGFloat)`
968-
* `paddingHorizontal(_ value: CGFloat)`
969-
* `paddingVertical(_ value: CGFloat)`
970-
* `padding(_ insets: UIEdgeInsets)`
962+
* **`paddingTop(_ value: CGFloat)`, `paddingTop(_ percent: FPercent)`**
963+
* **`paddingLeft(_ value: CGFloat)`, `paddingLeft(_ percent: FPercent)`**
964+
* **`paddingBottom(_ value: CGFloat)`, `paddingBottom(_ percent: FPercent)`**
965+
* **`paddingRight(_ value: CGFloat)`, `paddingRight(_ percent: FPercent)`**
966+
* **`paddingStart(_ value: CGFloat)`, `paddingStart(_ percent: FPercent)`**
967+
* **`paddingEnd(_ value: CGFloat)`, `paddingEnd(_ percent: FPercent)`**
968+
* **`paddingHorizontal(_ value: CGFloat)`, `paddingHorizontal(_ percent: FPercent)`**
969+
* **`paddingVertical(_ value: CGFloat)`, `paddingVertical(_ percent: FPercent)`**
970+
* **`padding(_ insets: UIEdgeInsets)`**
971971
Set all paddings using an UIEdgeInsets. This method is particularly useful to set all paddings using iOS 11 `UIView.safeAreaInsets`.
972-
* `padding(_ insets: NSDirectionalEdgeInsets)`
972+
* **`padding(_ insets: NSDirectionalEdgeInsets)`**
973973
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.
974-
* `padding(_ value: CGFloat) `
975-
* `padding(_ vertical: CGFloat, _ horizontal: CGFloat)`
976-
* `padding(_ top: CGFloat, _ horizontal: CGFloat, _ bottom: CGFloat)`
977-
* `padding(_ top: CGFloat, _ left: CGFloat, _ bottom: CGFloat, _ right: CGFloat) `
974+
* **`padding(_ value: CGFloat)`, `padding(_ percent: FPercent)`**
975+
* **`padding(_ vertical: CGFloat, _ horizontal: CGFloat)`, `padding(_ vertical: FPercent, horizontal: FPercent`**
976+
* **`padding(_ top: CGFloat, _ horizontal: CGFloat, _ bottom: CGFloat)`, `padding(_ top: FPercent, _ horizontal: FPercent, _ bottom: FPercent)`**
977+
* **`padding(_ top: CGFloat, _ left: FPercent, _ bottom: FPercent, _ right: FPercent)`, `padding(_ top: FPercent, _ left: FPercent, _ bottom: FPercent, _ right: FPercent)`**
978+
978979

979980

980981
###### Usage examples:
981982
```swift
982983
view.flex.padding(20)
984+
view.flex.paddingTop(20%).paddingLeft(20%)
983985
view.flex.paddingBottom(20)
984986
view.flex.paddingHorizontal(20)
985987
view.flex.padding(10, 12, 0, 12)

‎Sources/Swift/FlexLayout.swift‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -963,6 +963,12 @@ public final class Flex {
963963
return self
964964
}
965965

966+
@discardableResult
967+
public func paddingTop(_ percent: FPercent) -> Flex {
968+
yoga.paddingTop = YGValue(value: Float(percent.value), unit: .percent)
969+
return self
970+
}
971+
966972
/**
967973
Set the left padding. Left padding specify the **offset children should have** from the container's left edge.
968974
*/
@@ -972,6 +978,12 @@ public final class Flex {
972978
return self
973979
}
974980

981+
@discardableResult
982+
public func paddingLeft(_ percent: FPercent) -> Flex {
983+
yoga.paddingLeft = YGValue(value: Float(percent.value), unit: .percent)
984+
return self
985+
}
986+
975987
/**
976988
Set the bottom padding. Bottom padding specify the **offset children should have** from the container's bottom edge.
977989
*/
@@ -981,6 +993,12 @@ public final class Flex {
981993
return self
982994
}
983995

996+
@discardableResult
997+
public func paddingBottom(_ percent: FPercent) -> Flex {
998+
yoga.paddingBottom = YGValue(value: Float(percent.value), unit: .percent)
999+
return self
1000+
}
1001+
9841002
/**
9851003
Set the top padding. Top padding specify the **offset children should have** from the container's top edge.
9861004
*/
@@ -990,6 +1008,12 @@ public final class Flex {
9901008
return self
9911009
}
9921010

1011+
@discardableResult
1012+
public func paddingRight(_ percent: FPercent) -> Flex {
1013+
yoga.paddingRight = YGValue(value: Float(percent.value), unit: .percent)
1014+
return self
1015+
}
1016+
9931017
/**
9941018
Set the start padding.
9951019

@@ -1003,6 +1027,12 @@ public final class Flex {
10031027
return self
10041028
}
10051029

1030+
@discardableResult
1031+
public func paddingStart(_ percent: FPercent) -> Flex {
1032+
yoga.paddingStart = YGValue(value: Float(percent.value), unit: .percent)
1033+
return self
1034+
}
1035+
10061036
/**
10071037
Set the end padding.
10081038

@@ -1016,6 +1046,12 @@ public final class Flex {
10161046
return self
10171047
}
10181048

1049+
@discardableResult
1050+
public func paddingEnd(_ percent: FPercent) -> Flex {
1051+
yoga.paddingEnd = YGValue(value: Float(percent.value), unit: .percent)
1052+
return self
1053+
}
1054+
10191055
/**
10201056
Set the left, right, start and end paddings to the specified value.
10211057
*/
@@ -1025,6 +1061,12 @@ public final class Flex {
10251061
return self
10261062
}
10271063

1064+
@discardableResult
1065+
public func paddingHorizontal(_ percent: FPercent) -> Flex {
1066+
yoga.paddingHorizontal = YGValue(value: Float(percent.value), unit: .percent)
1067+
return self
1068+
}
1069+
10281070
/**
10291071
Set the top and bottom paddings to the specified value.
10301072
*/
@@ -1033,6 +1075,12 @@ public final class Flex {
10331075
yoga.paddingVertical = YGValue(value)
10341076
return self
10351077
}
1078+
1079+
@discardableResult
1080+
public func paddingVertical(_ percent: FPercent) -> Flex {
1081+
yoga.paddingVertical = YGValue(value: Float(percent.value), unit: .percent)
1082+
return self
1083+
}
10361084

10371085
/**
10381086
Set paddings using UIEdgeInsets.
@@ -1072,6 +1120,12 @@ public final class Flex {
10721120
return self
10731121
}
10741122

1123+
@discardableResult
1124+
public func padding(_ percent: FPercent) -> Flex {
1125+
yoga.padding = YGValue(value: Float(percent.value), unit: .percent)
1126+
return self
1127+
}
1128+
10751129
/**
10761130
Set the individually vertical paddings (top, bottom) and horizontal paddings (left, right, start, end).
10771131
*/
@@ -1080,6 +1134,13 @@ public final class Flex {
10801134
yoga.paddingHorizontal = YGValue(horizontal)
10811135
return self
10821136
}
1137+
1138+
@discardableResult
1139+
public func padding(_ vertical: FPercent, _ horizontal: FPercent) -> Flex {
1140+
yoga.paddingVertical = YGValue(value: Float(vertical.value), unit: .percent)
1141+
yoga.paddingHorizontal = YGValue(value: Float(horizontal.value), unit: .percent)
1142+
return self
1143+
}
10831144

10841145
/**
10851146
Set the individually top, horizontal paddings and bottom padding.
@@ -1090,6 +1151,13 @@ public final class Flex {
10901151
yoga.paddingBottom = YGValue(bottom)
10911152
return self
10921153
}
1154+
1155+
@discardableResult func padding(_ top: FPercent, _ horizontal: FPercent, _ bottom: FPercent) -> Flex {
1156+
yoga.paddingTop = YGValue(value: Float(top.value), unit: .percent)
1157+
yoga.paddingHorizontal = YGValue(value: Float(horizontal.value), unit: .percent)
1158+
yoga.paddingBottom = YGValue(value: Float(bottom.value), unit: .percent)
1159+
return self
1160+
}
10931161

10941162
/**
10951163
Set the individually top, left, bottom and right paddings.
@@ -1102,6 +1170,15 @@ public final class Flex {
11021170
yoga.paddingRight = YGValue(right)
11031171
return self
11041172
}
1173+
1174+
@discardableResult
1175+
public func padding(_ top: FPercent, _ left: FPercent, _ bottom: FPercent, _ right: FPercent) -> Flex {
1176+
yoga.paddingTop = YGValue(value: Float(top.value), unit: .percent)
1177+
yoga.paddingLeft = YGValue(value: Float(left.value), unit: .percent)
1178+
yoga.paddingBottom = YGValue(value: Float(bottom.value), unit: .percent)
1179+
yoga.paddingRight = YGValue(value: Float(right.value), unit: .percent)
1180+
return self
1181+
}
11051182

11061183
//
11071184
// MARK: UIView Visual properties

0 commit comments

Comments
 (0)