- 
+
- 
- 
+
+
+ 
-
- 
- 
+ 
+
-
- 
- 
- 
-
+
-**PinLayout** is a companion of **[FlexLayout](https://github.com/layoutBox/FlexLayout)**. They share a similar syntax and method names. FlexLayout is a flexbox implementation. A view can layouts its subviews using PinLayout, FlexLayout, or both! FlexLayout it is particularly useful in situations where you need to layouts many views but don't require the PinLayout's finest control nor complex animations.
+**PinLayout** is part of the **layoutBox** organization containing few Open Source projects related to layout using Swift. See **[layoutBox](https://github.com/layoutBox)**.
### PinLayout + Autolayout
You don't need to choose, you can layout some views using PinLayout and some other with autolayout. Your views just to need to implement the autolayout `intrinsicContentSize` properties.
@@ -100,7 +104,7 @@ This example layout an image, a UISegmentedControl, a label and a line separator
* **Separator** is below the UIImageView and the UILabel, i.e. below the tallest one. The separator has a top margin of 10 pixels, left-aligned to the UIImageView and right-aligned to the UISegmentedControl.
-
+
```swift
override func layoutSubviews() {
@@ -117,7 +121,7 @@ override func layoutSubviews() {
* 4 views, 4 lines
* PinLayout expose the `safeAreaInsets` through [`UIView.pin.safeArea`](#safeAreaInsets), this property support not only iOS 11, but is also backward compatible for earlier iOS releases (7/8/9/10). See [safeAreaInsets support](#safeAreaInsets) for more information.
* PinLayout doesn't use auto layout constraints, it is a framework that manually layout views. For that reason you need to update the layout inside either `UIView.layoutSubviews()` or `UIViewController.viewDidLayoutSubviews()` to handle container size's changes, including device rotation. You'll also need to handle UITraitCollection changes for app's that support multitasking. In the example above PinLayout's commands are inside UIView's `layoutSubviews()` method.
-* This example is available in the [Examples App](#examples_app). See example complete [source code](https://github.com/mirego/PinLayout/blob/master/Example/PinLayoutSample/UI/Examples/Intro/IntroView.swift)
+* This example is available in the [Examples App](#examples_app). See example complete [source code](https://github.com/layoutBox/PinLayout/blob/master/Example/PinLayoutSample/UI/Examples/Intro/IntroView.swift)
@@ -127,14 +131,14 @@ This example shows how easily PinLayout can adjust its layout based on the view' * If the container's width is smaller than 500 pixels, the label takes the full width and the UISegmentedControl is placed below it. * If the container's width is greater or equal to 500 pixels, the UISegmentedControl is at the top-right corner and the label takes the remaining horizontal space. -
+
```swift
let margin: CGFloat = 12
if frame.width < 500 {
- textLabel.pin.top().left().right().margin(margin).sizeToFit(.width)
+ textLabel.pin.top().horizontally().margin(margin).sizeToFit(.width)
segmentedControl.pin.below(of: textLabel).right().margin(margin)
} else {
segmentedControl.pin.top().right().margin(margin)
@@ -142,7 +146,7 @@ This example shows how easily PinLayout can adjust its layout based on the view'
}
```
-:pushpin: This example is available in the [Examples App](#examples_app). See example complete [source code](https://github.com/mirego/PinLayout/blob/master/Example/PinLayoutSample/UI/Examples/AdjustToContainer/Subviews/ChoiceSelectorView.swift)
+:pushpin: This example is available in the [Examples App](#examples_app). See example complete [source code](https://github.com/layoutBox/PinLayout/blob/master/Example/PinLayoutSample/UI/Examples/AdjustToContainer/Subviews/ChoiceSelectorView.swift)
@@ -153,7 +157,7 @@ This example shows how easily PinLayout can adjust its layout based on the view'
* Full control: You're in the middle of the layout process, no magic black box.
* Layout one view at a time. Make it simple to code and debug.
* Concise syntax. Layout most views using a single line.
-* [See the complete list here....](docs/PinLayout_principles.md)
+* [**See the complete list here....**](docs/PinLayout_principles.md)
# PinLayout's Performance
@@ -162,11 +166,11 @@ PinLayout's performance has been measured using the [Layout Framework Benchmark]
As you can see in the following chart, PinLayout are faster or equal to manual layouting, and **between 8x and 12x faster than auto layout**, and this for all types of iPhone (5S/6/6S/7/8/X)
-[See here for more details, results and explanation of the benchmark](docs/Benchmark.md).
+#### [See here for more details, results and explanation of the benchmark](docs/Benchmark.md).
@@ -176,75 +180,92 @@ As you can see in the following chart, PinLayout are faster or equal to manual l
### UIKit safeAreaInsets support
PinLayout can easily handle iOS 11 `UIView.safeAreaInsets`, but it goes even further by supporting safeAreaInsets for previous iOS releases (including iOS 7/8/9/10) by adding a property `UIView.pin.safeArea`. [See here for more details](#safeAreaInsets)
-
-
### macOS support
PinLayout support macOS 10.9+.
:pushpin: In this documentation, any methods with parameters of type UIView or UIEdgeInsets are also supported on macOS, using NSView and NSEdgeInsets. See [macOS Support](#macos_support) for more information.
+
### Right to left languages (RTL) support
-PinLayout supports left-to-right (LTR) and right-to-left (RTL) languages. [See here for more details](docs/rtl_support.md).
+PinLayout supports left-to-right (LTR) and right-to-left (RTL) languages.
+#### [See here for more details](docs/rtl_support.md).
+ - -## Layout using distances from superview’s edges + +## Edges layout PinLayout can position a view’s edge relative to its superview edges. +###### Example: +This example layout the view A to fit its superview frame with a margin of 10 pixels. It pins the top, left, bottom and right edges. + +
+
+
+```swift
+ viewA.pin.top(10).bottom(10).left(10).right(10)
+```
+
+Another shorter possible solution using `all()`:
+
+```swift
+ view.pin.all(10)
+```
+
**Methods**:
-* **`top(:CGFloat)`** / **`top(:Percent)`** / **`top()`** / **`top(:UIEdgeInsets)`**
-The value specifies the top edge distance from the superview's top edge in pixels (or in percentage of its superview's height). `top()` is similar to calling `top(0)`, it position the view top edge directly on its superview top edge. `top(:UIEdgeInsets)` use the `UIEdgeInsets.top` property, is particularly useful with [`UIView.pin.safeArea`](#safeAreaInsets) or `UIView.safeAreaInsets`.
+The following methods are used to position a view’s edge relative to its superview edges.
+
+:pushpin: The offset/margin parameter in the following methods can be either positive and negative. In general cases positive values are used.
+
+* **`top(_ offset: CGFloat)`** / **`top(_ offset: Percent)`** / **`top()`** / **`top(_ margin: UIEdgeInsets)`**
+Position the top edge. The offset specifies the top edge distance from the superview's top edge in pixels (or in percentage of its superview's height). `top()` is similar to calling `top(0)`, it position the view top edge directly on its superview top edge. `top(:UIEdgeInsets)` use the `UIEdgeInsets.top` property, is particularly useful with [safeArea, readable and layout margins](#safeAreaInsets).
+
+* **`bottom(_ offset: CGFloat)`** / **`bottom(_ offset: Percent)`** / **`bottom()`** / **`bottom(_ margin: UIEdgeInsets)`**
+Position the bottom edge. The offset specifies the bottom edge **distance from the superview's bottom edge** in pixels (or in percentage of its superview's height). `bottom()` is similar to calling `bottom(0)`, it position the view bottom edge directly on its superview top edge. `bottom(:UIEdgeInsets)` use the `UIEdgeInsets.bottom` property, it is is particularly useful with [safeArea, readable and layout margins](#safeAreaInsets).
-* **`bottom(:CGFloat)`** / **`bottom(:Percent)`** / **`bottom()`** / **`bottom(:UIEdgeInsets)`**
-The value specifies the bottom edge **distance from the superview's bottom edge** in pixels (or in percentage of its superview's height). `bottom()` is similar to calling `bottom(0)`, it position the view bottom edge directly on its superview top edge. `bottom(:UIEdgeInsets)` use the `UIEdgeInsets.bottom` property, it is is particularly useful with [`UIView.pin.safeArea`](#safeAreaInsets) or `UIView.safeAreaInsets`.
+* **`left(_ offset: CGFloat)`** / **`left(_ offset: Percent)`** / **`left()`** / **`left(_ margin: UIEdgeInsets)`**
+Position the left edge. The offset specifies the left edge distance from the superview's left edge in pixels (or in percentage of its superview's width). `left()` is similar to calling `left(0)`, it position the view left edge directly on its superview left edge. `left(:UIEdgeInsets)` use the `UIEdgeInsets.left` property, it is particularly useful with [safeArea, readable and layout margins](#safeAreaInsets).
-* **`left(:CGFloat)`** / **`left(:Percent)`** / **`left()`** / **`left(:UIEdgeInsets)`**
-The value specifies the left edge distance from the superview's left edge in pixels (or in percentage of its superview's width). `left()` is similar to calling `left(0)`, it position the view left edge directly on its superview left edge. `left(:UIEdgeInsets)` use the `UIEdgeInsets.left` property, it is particularly useful with [`UIView.pin.safeArea`](#safeAreaInsets) or `UIView.safeAreaInsets`.
+* **`right(_ offset: CGFloat)`** / **`right(_ offset: Percent)`** / **`right()`** / **`right(_ margin: UIEdgeInsets)`**
+Position the right edge. The offset specifies the right edge **distance from the superview's right edge** in pixels (or in percentage of its superview's width). `right()` is similar to calling `right(0)`, it position the view right edge directly on its superview right edge. `right(:UIEdgeInsets)` use the `UIEdgeInsets. right` property, it is particularly useful with [safeArea, readable and layout margins](#safeAreaInsets).
-* **`right(:CGFloat)`** / **`right(:Percent)`** / **`right()`** / **`right(:UIEdgeInsets)`**
-The value specifies the right edge **distance from the superview's right edge** in pixels (or in percentage of its superview's width). `right()` is similar to calling `right(0)`, it position the view right edge directly on its superview right edge. `right(:UIEdgeInsets)` use the `UIEdgeInsets. right` property, it is particularly useful with [`UIView.pin.safeArea`](#safeAreaInsets) or `UIView.safeAreaInsets`.
+* **`vCenter(_ offset: CGFloat)`** / **`vCenter(_ offset: Percent)`** / **`vCenter()`**
+Position the vertical center (center.y). The offset specifies the distance vertically of the view's center related to the superview's center in pixels (or in percentage of its superview's height). A positive offset move the view down and a negative value move it up relative to the superview's center. `vCenter()` is similar to calling `vCenter(0)`, it position vertically the view's center directly on its superview vertical center.
-* **`vCenter(:CGFloat)`** / **`vCenter(:Percent)`** / **`vCenter()`**
-The value specifies the distance vertically of the view's center related to the superview's center in pixels (or in percentage of its superview's height). A positive value move the view down and a negative value move it up relative to the superview's center. `vCenter()` is similar to calling `vCenter(0)`, it position vertically the view's center directly on its superview vertical center.
+* **`hCenter(_ offset: CGFloat)`** / **`hCenter(_ offset: Percent)`** / **`hCenter()`**
+Position the horizontal center (center.x). The offset specifies the distance horizontally of the view's center related to the superview's center in pixels (or in percentage of its superview's width). A positive offset move the view to the right and a negative offset move it to the left relative to the superview's center. `hCenter()` is similar to calling `hCenter(0)`, it position horizontally the view's center directly on its superview horizontal center.
-* **`hCenter(:CGFloat)`** / **`hCenter(:Percent)`** / **`hCenter()`**
-The value specifies the distance horizontally of the view's center related to the superview's center in pixels (or in percentage of its superview's width). A positive value move the view to the right and a negative value move it to the left relative to the superview's center. `hCenter()` is similar to calling `hCenter(0)`, it position horizontally the view's center directly on its superview horizontal center.
+##### Methods supporting LTR (left-to-right) and RTL (right-to-left) languages.
-* **`start(:CGFloat)`** / **`start(:Percent)`** / **`start()`** / **`start(:UIEdgeInsets)`** :left_right_arrow:
-In LTR direction the value specifies the left edge distance from the superview's left edge in pixels (or in percentage of its superview's width).
-In RTL direction the value specifies the right edge distance from the superview's right edge in pixels (or in percentage of its superview's width).
-`start()` is similar to calling `start(0)`. `start(:UIEdgeInsets)` use the `UIEdgeInsets.left` property in LTR direction and `UIEdgeInsets.right` in RTL direction, it is particularly useful with [`UIView.pin.safeArea`](#safeAreaInsets) or `UIView.safeAreaInsets`.
+* **`start(_ offset: CGFloat)`** / **`start(_ offset: Percent)`** / **`start()`** / **`start(_ margin: UIEdgeInsets)`** :left_right_arrow:
+Position the left or right edge depending of the LTR language direction. In LTR direction the offset specifies the left edge distance from the superview's left edge in pixels (or in percentage of its superview's width). In RTL direction the offset specifies the right edge distance from the superview's right edge in pixels (or in percentage of its superview's width).
+`start()` is similar to calling `start(0)`. `start(:UIEdgeInsets)` use the `UIEdgeInsets.left` property in LTR direction and `UIEdgeInsets.right` in RTL direction.
-* **`end(:CGFloat)`** / **`end(:Percent)`** / **`end()`** / **`end(:UIEdgeInsets)`** :left_right_arrow:
-In LTR direction the value specifies the right edge distance from the superview's right edge in pixels (or in percentage of its superview's width).
-In RTL direction the value specifies the left edge distance from the superview's left edge in pixels (or in percentage of its superview's width). `end()` is similar to calling `end(0)`. `end(:UIEdgeInsets)` use the `UIEdgeInsets.right` property in LTR direction and `UIEdgeInsets.left` in RTL direction, it is particularly useful with [`UIView.pin.safeArea`](#safeAreaInsets) or `UIView.safeAreaInsets`.
+* **`end(_ offset: CGFloat)`** / **`end(_ offset: Percent)`** / **`end()`** / **`end(_ margin: UIEdgeInsets)`** :left_right_arrow:
+Position the left or right edge depending of the LTR language direction. In LTR direction the offset specifies the right edge distance from the superview's right edge in pixels (or in percentage of its superview's width). In RTL direction the offset specifies the left edge distance from the superview's left edge in pixels (or in percentage of its superview's width). `end()` is similar to calling `end(0)`. `end(:UIEdgeInsets)` use the `UIEdgeInsets.right` property in LTR direction and `UIEdgeInsets.left` in RTL direction.
**Methods pinning multiple edges**:
-* **`all(:CGFloat)`** / **`all(:UIEdgeInsets)`** / **`all()`**
-The value/insets specifies the **top, bottom, left and right edges** distance from the superview's corresponding edge in pixels. Similar to calling `view.top(value).bottom(value).left(value).right(value)`.
+* **`all(_ margin: CGFloat)`** / **`all()`** / **`all(_ margin: UIEdgeInsets)`**
+Position the top, left, bottom and right edges. The margin specifies the **top, bottom, left and right edges** distance from the superview's corresponding edge in pixels. Similar to calling `view.top(value).bottom(value).left(value).right(value)`.
`all()` is similar to calling `all(0)`.
-`all(:UIEdgeInsets)` is particularly useful with [`UIView.pin.safeArea`](#safeAreaInsets) or `UIView.safeAreaInsets`.
+`all(:UIEdgeInsets)` is particularly useful with [safeArea, readable and layout margins](#safeAreaInsets).
-* **`horizontally(:CGFloat)`** / **`horizontally(:Percent)`** /
-**`horizontally(:UIEdgeInsets)`** / **`horizontally()`**
-The value specifies the **left and right edges** on its superview's corresponding edges in pixels (or in percentage of its superview's width).
+* **`horizontally(_ margin: CGFloat)`** / **`horizontally(_ margin: Percent)`** / **`horizontally()`** / **`horizontally(_ margin: UIEdgeInsets)`**
+Position the left and right edges. The margin specifies the **left and right edges** distance from its superview's corresponding edges in pixels (or in percentage of its superview's width).
`horizontally()` is similar to calling `horizontally(0)`.
`horizontally(:UIEdgeInsets)` use the UIEdgeInsets's left and right value to pin left and right edges.
-* **`vertically(:CGFloat)`** / **`vertically(:Percent)`**
-**`vertically(:UIEdgeInsets)`** / **`vertically()`**
-The value specifies the **top and bottom edges** on its superview's corresponding edges in pixels (or in percentage of its superview's height).
+* **`vertically(_ margin: CGFloat)`** / **`vertically(_ margin: Percent)`** / **`vertically()`** / **`vertically(_ margin: UIEdgeInsets)`**
+Position the top and bottom edges. The margin specifies the **top and bottom edges** distance from on its superview's corresponding edges in pixels (or in percentage of its superview's height).
`vertically()` is similar to calling `vertically(0)`.
`vertically(:UIEdgeInsets)` use the UIEdgeInsets's top and bottom value to pin top and bottom edges.
-
###### Usage Examples:
```swift
@@ -259,401 +280,547 @@ The value specifies the **top and bottom edges** on its superview's correspondin
view.pin.top().horizontally() // The view is pinned at the top edge of its parent and fill it horizontally.
```
++ +#### Layout multiple edges relative to superview + +This section describe methods that are similar to methods describe in the previous section [Edges layout](#layout_edges), except that they position 2 edges simultaneously. They can be used as shortcuts to set 2 consecutive edges. + +
+
###### Example:
-This example layout the view A to fit its superview frame with a margin of 10 pixels. It pins the top, left, bottom and right edges.
+This example position the view’s on the top-right corner of its superview’s topRight and set its size to 100 pixels.
-
+
```swift
- viewA.pin.top(10).bottom(10).left(10).right(10)
+ viewA.pin.topRight().size(100)
```
-Another shorter possible solution using `all()`:
+This is equivalent to:
```swift
- view.pin.all(10)
+ viewA.pin.top().right().size(100)
```
+**Methods:**
-+:pushpin: The offset parameter in the following methods can be either positive and negative. In general cases positive values are used. - -## Edges +* **`topLeft(_ offset: CGFloat)`** / **`topLeft()`** +Position the top and left edges. The offset specifies the distance from their superview's corresponding edges in pixels. `topLeft()` is similar to calling `topLeft(0)`. -### PinLayout UIView’s edges +* **`topCenter(_ topOffset: CGFloat)`** / **`topCenter()`** +Position the top and horizontal center (center.x). The offset specifies the top edge distance from the superview's top edge in pixels. `topCenter()` is similar to calling `topCenter(0)`. -PinLayout adds edges properties to UIView/NSView. These properties are used to reference other view’s edges. +* **`topRight(_ offset: CGFloat)`** / **`topRight()`** +Position the top and right edges. The offset specifies the distance from their superview's corresponding edges in pixels. `topRight()` is similar to calling `topRight(0)`. -**PinLayout View’s edges**: -* `UIView.edge.top` -* `UIView.edge.vCenter` -* `UIView.edge.bottom` -* `UIView.edge.left` -* `UIView.edge.hCenter` -* `UIView.edge.right` -* `UIView.edge.start`:left_right_arrow: -* `UIView.edge.end`:left_right_arrow: +* **`centerLeft(_ leftOffset: CGFloat)`** / **`centerLeft()`** +Position the vertical center (center.y) and the left edge. The offset specifies the left edge distance from the superview's left edge in pixels. `centerLeft()` is similar to calling `centerLeft(0)`. -
+* **`center(_ offset: CGFloat)`** / **`center()`**
+Position the horizontal and vertical center (center.y). The offset specifies an offset from the superview's center in pixels. `center()` is similar to calling `center(0)`.
+* **`centerRight(_ rightOffset: CGFloat)`** / **`centerRight()`**
+Position the vertical center (center.y) and the right edge. The offset specifies the right edge distance from the superview's right edge in pixels. `centerRight()` is similar to calling `centerRight(0)`.
-### Layout using edges
-PinLayout has methods to attach a View's edge (top, left, bottom, right, start or end edge) to another view’s edge.
+* **`bottomLeft(_ offset: CGFloat)`** / **`bottomLeft()`**
+Position the bottom and left edges. The offset specifies the distance from their superview's corresponding edges in pixels. `bottomLeft()` is similar to calling `bottomLeft(0)`.
+
+* **`bottomCenter(_ bottomOffset: CGFloat)`** / **`bottomCenter()`**
+Position the bottom and horizontal center (center.x). The offset specifies the bottom edge distance from the superview's bottom edge in pixels. `bottomCenter()` is similar to calling `bottomCenter(0)`.
+
+* **`bottomRight(_ offset: CGFloat)`** / **`bottomRight()`**
+Position the bottom and right edges. The offset specifies the distance from their superview's corresponding edges in pixels. `bottomRight()` is similar to calling `bottomRight(0)`.
+
+
+##### Methods supporting LTR (left-to-right) and RTL (right-to-left) languages.
+
+* **`topStart(_ offset: CGFloat)`** / **`topStart()`** :left_right_arrow:
+In LTR direction position the top and left edges.
+In RTL direction position the top and right edges.
+
+* **`topEnd(_ offset: CGFloat)`** / **`topEnd()`** :left_right_arrow:
+In LTR direction position the top and right edges.
+In RTL direction position the top and left edges.
+
+* **`bottomStart(_ offset: CGFloat)`** / **`bottomStart()`** :left_right_arrow:
+In LTR direction position the bottom and left edges.
+In RTL direction position the bottom and right edges.
+
+* **`bottomEnd(_ offset: CGFloat)`** / **`bottomEnd()`** :left_right_arrow:
+In LTR direction position the bottom and right edges.
+In RTL direction position the bottom and left edges.
+
+* **`centerStart(_ offset: CGFloat)`** / **`centerStart()`** :left_right_arrow:
+In LTR direction position the vertical center (center.y) and the left edge.
+In RTL direction position the vertical center (center.y) and the right edge.
+
+* **`centerEnd(_ offset: CGFloat)`** / **`centerEnd()`** :left_right_arrow:
+In LTR direction position the vertical center (center.y) and the right edge.
+In RTL direction position the vertical center (center.y) and the left edge.
+
+
+###### Usage Examples:
+
+```swift
+ // Position a view at the top left corner with a top and left margin of 10 pixels
+ view.pin.topLeft(10)
+
+ // Position the 4 edges with a margin of 10 pixels.
+ view.pin.topLeft(10).bottomRight(10)
+```
+
++ + +## Relative Edges layout + +### Layout using relative positioning + +PinLayout has methods to position relative to other views. The view can be layouted relative to **one or many relative views**. The following methods layout one view's edge (top, bottom, left or right). **Methods:** -* **`top(to edge: ViewEdge)`**: -Position the view's top edge directly on another view’s edge (top/vCenter/bottom). +* **`above(of: UIView)`** / **`above(of: [UIView])`** +Position the view above the specified view(s). One or many relative views can be specified. This method position the view’s bottom edge. -* **`vCenter(to edge: ViewEdge)`**: -Position vertically the view's center directly on another view’s edge (top/vCenter/bottom). +* **`below(of: UIView)`** / **`below(of: [UIView])`** +Position the view below the specified view(s). One or many relative views can be specified. This method position the view’s top edge. -* **`bottom(to edge: ViewEdge)`**: -Position the view's bottom edge directly on another view’s edge (top/vCenter/bottom). +* **`before(of: UIView)`** / **`before(of: [UIView])`** :left_right_arrow: +In LTR direction the view is positioned at the left of the specified view(s). In RTL direction the view is positioned at the right. One or many relative views can be specified. -* **`left(to: edge: ViewEdge)`**: -Position the view's left edge directly on another view’s edge (left/hCenter/right). +* **`after(of: UIView)`** / **`after(of: [UIView])`**:left_right_arrow: +In LTR direction the view is positioned at the right of the specified view(s). In RTL direction the view is positioned at the left. One or many relative views can be specified. -* **`hCenter(to: edge: ViewEdge)`**: -Position horizontally the view's center directly on another view’s edge (left/hCenter/right). +* **`left(of: UIView)`** / **`left(of: [UIView])`** +Position the view left of the specified view(s). Similar to `before(of:)`. One or many relative views can be specified. This method position the view’s right edge. -* **`right(to: edge: ViewEdge)`**: -Position the view's right edge directly on another view’s edge (left/hCenter/right). +* **`right(of: UIView)`** / **`right(of: [UIView])`** +Position the view right of the specified view(s). Similar to `after(of:)`. One or many relative views can be specified. This method position the view’s left edge. -* **`start(to: edge: ViewEdge)`**:left_right_arrow: -In LTR direction it position the view's left edge directly on another view’s edge. -In RTL direction it position the view's right edge directly on another view’s edge. - -* **`end(to: edge: ViewEdge)`**:left_right_arrow: -In LTR direction it position the view's top edge directly on another view’s edge. -In RTL direction it position the view's bottom edge directly on another view’s edge. +:pushpin: **Multiple relative views**: If for example a call to `below(of: [...]) specify multiple relative views, the view will be layouted below *ALL* these views. -:pushpin: These methods can pin a view’s edge to any other view's edge, even if don't have the same direct superview! It works with any views that have at some point the same ancestor. +:pushpin: These methods can pin a view’s relative to any views, even if they don't have the same direct superview! It works with any views that have a shared ancestor. ###### Usage examples: ```swift - view.pin.left(to: view1.edge.right) - view.pin.left(to: view1.edge.right).top(to: view2.edge.right) + view.pin.after(of: view4).before(of: view1).below(of: view3) + view.pin.after(of: view2) + view.pin.below(of: [view2, view3, view4]) ``` -###### Example 1: -This example layout the view B left edge on the view A right edge. It only changes the view B left coordinate. +###### Example: +The following example will position the view C between the view A and B with margins of 10px using relative positioning methods. + +
-
```swift
- viewB.pin.left(to: viewA.edge.right)
+ viewC.pin.top().after(of: viewA).before(of: viewB).margin(10)
```
+This is an equivalent solution using [edges](#edge):
-###### Example 2:
-This example center horizontally the view B inside the view A with a top margin of 10 from the same view.
-
+```swift
+ viewC.pin.top().left(to: viewA.edge.right).right(to: viewB.edge.left). margin(10)
+```
+This is also an equivalent solution using [horizontallyBetween()](#layout_between_w_alignment). See section [Layout between other views](#layout_between):
```swift
- aView.pin.top(to: bView.edge.top).hCenter(to: bView.edge.hCenter).marginTop(10)
-```
+ viewC.pin.horizontallyBetween(viewA, and: viewB, aligned: .top).marginHorizontal(10)
+```
- -## Anchors + +### Layout using Relative Edges and alignment -### PinLayout View’s anchors +PinLayout also has methods to position relative to other views but with also the ability to specify an **alignment**. The view can be layouted relative to **one or many relative views**. -PinLayout adds anchors properties to UIView/NSView. These properties are used to reference other view’s anchors. +This is really similar to [Relative Edges layout](#relative_edges_layout) except that here two edges are being layouted. -**PinLayout View’s anchors**: +**Methods:** -* `UIView.anchor.topLeft` / `UIView.anchor.topCenter` / `UIView.anchor.topRight` -* `UIView.anchor.topStart` / `UIView.anchor.topEnd`:left_right_arrow: -* `UIView.anchor.centerLeft` / `UIView.anchor.centers` / `UIView.anchor.centerRight` -* `UIView.anchor.centerStart` / `UIView.anchor.centerEnd`:left_right_arrow: -* `UIView.anchor.bottomLeft` / `UIView.anchor.bottomCenter` / `UIView.anchor.bottomRight` -* `UIView.anchor.bottomStart` / `UIView.anchor.bottomEnd`:left_right_arrow: +* **`above(of: UIView, aligned: HorizontalAlignment)`** +**`above(of: [UIView], aligned: HorizontalAlignment)`** +Position the view above the specified view(s) and aligned it using the specified HorizontalAlignment. One or many relative views can be specified. + +* **`below(of: UIView, aligned: HorizontalAlignment)`** +**`below(of: [UIView], aligned: HorizontalAlignment)`** +Position the view below the specified view(s) and aligned it using the specified HorizontalAlignment. One or many relative views can be specified. + +* **`before(of: UIView, aligned: VerticalAlignment)`**:left_right_arrow: +**`before(of: [UIView], aligned: VerticalAlignment)`**:left_right_arrow: +In LTR direction the view is positioned at the left of the specified view(s). In RTL direction the view is positioned at the right. One or many relative views can be specified. -
+* **`after(of: UIView, aligned: VerticalAlignment)`**:left_right_arrow:
+**`after(of: [UIView], aligned: VerticalAlignment)`**:left_right_arrow:
+In LTR direction the view is positioned at the right of the specified view(s). In RTL direction the view is positioned at the left. One or many relative views can be specified.
+* **`left(of: UIView, aligned: VerticalAlignment)`**
+**`left(of: [UIView], aligned: VerticalAlignment)`**
+Position the view left of the specified view(s) and aligned it using the specified VerticalAlignment. Similar to `before(of:)`. One or many relative views can be specified.
+
+* **`right(of: UIView, aligned: VerticalAlignment)`**
+**`right(of: [UIView], aligned: VerticalAlignment)`**
+Position the view right of the specified view(s) and aligned it using the specified VerticalAlignment. Similar to `after(of:)`. One or many relative views can be specified.
-### Layout using anchors
-PinLayout can use anchors to position view’s related to other views.
+**`HorizontalAlignment` values:**
-Following methods position the corresponding view anchor on another view’s anchor.
+* **`.left`**: The view's left edge will be left-aligned with the relative view (or the left most view if a list of relative views is specified).
+* **`.center`**: The view's will be horizontally centered with the relative view (or the average hCenter if a list of relative views is used).
+* **`.right`**: The view's right edge will be right-aligned with the relative view (or the right most view if a list of relative views is specified).
+* **`.start`**:left_right_arrow::
+In LTR direction, similar to using `.left`.
+In RTL direction, similar to using `.right`.
+* **`.end`**:left_right_arrow::
+In LTR direction, similar to using `.right`.
+In RTL direction, similar to using `.left`.
-**Methods:**
+**`VerticalAlignment` values:**
-* `topLeft(to anchor: Anchor)`
-* `topCenter(to anchor: Anchor)`
-* `topRight(to anchor: Anchor)`
-* `topStart(to anchor: Anchor)`:left_right_arrow:
-* `topEnd(to anchor: Anchor)`:left_right_arrow:
-* `centerLeft(to anchor: Anchor)`
-* `center(to anchor: Anchor)`
-* `centerRight(to anchor: Anchor)`
-* `centerStart(to anchor: Anchor)`:left_right_arrow:
-* `centerEnd(to anchor: Anchor)`:left_right_arrow:
-* `bottomLeft(to anchor: Anchor)`
-* `bottomCenter(to anchor: Anchor)`
-* `bottomRight(to anchor: Anchor)`
-* `bottomStart(to anchor: Anchor)`:left_right_arrow:
-* `bottomEnd(to anchor: Anchor)`:left_right_arrow:
+* **`.top`**: The view's top edge will be top-aligned with the relative view (or the top most view if a list of relative views is specified).
+* **`.center`**: The view's will be vertically centered with the relative view (or the average vCenter if a list of relative views is used).
+* **`.bottom`**: The view's bottom edge will be bottom-aligned with the relative view (or the bottom most view if a list of relative views is specified).
-:pushpin: These methods can pin a view’s anchor to any other view's anchor, even if don't have the same direct superview! It works with any views that have at some point the same ancestor.
+:pushpin: **Multiple relative views**: If for example a call to `below(of: [...], aligned:) specify multiple relative views, the view will be layouted below *ALL* these views. The alignment will be applied using all relative views.
+
+:pushpin: These methods can layout a view’s relative to any views, even if they don't have the same direct superview/parent! It works with any views that have a shared ancestor.
###### Usage examples:
```swift
- view.pin.topCenter(to: view1.anchor.bottomCenter)
- view.pin.topLeft(to: view1.anchor.topLeft).bottomRight(to: view1.anchor.center)
+ view.pin.above(of: view2, aligned: .left)
+ view.pin.below(of: [view2, view3, view4], aligned: .left)
+ view.pin.after(of: view2, aligned: .top).before(of: view3, aligned: .bottom)
```
###### Example:
+The following example layout the view B below the view A aligned on its center.
-Layout using an anchor. This example pins the view B topLeft anchor on the view A topRight anchor.
-
-
+
```swift
- viewB.pin.topLeft(to: viewA.anchor.topRight)
-```
+ viewB.pin.below(of: viewA, aligned: .center)
+```
+This is an equivalent solution using anchors:
-+```swift + viewB.pin.topCenter(to: viewA.anchor.bottomCenter) +``` ###### Example: +The following example layout the view A **below the UIImageView and the UILabel**. +View A should be left aligned to the UIImageView and right aligned to the UILabel, with a top margin of 10 pixels. -Layout using multiple anchors. - -It is also possible to combine two anchors to pin the position and the size of a view. The following example will position the view C between the view A and B with horizontal margins of 10px. +
-
+```swift
+ a.pin.below(of: [imageView, label], aligned: .left).right(to: label.edge.right).marginTop(10)
+```
+This is an equivalent solutions using other methods:
```swift
- viewC.pin.topLeft(to: viewA.anchor.topRight)
- .bottomRight(to: viewB.anchor.bottomLeft).marginHorizontal(10)
+ let maxY = max(imageView.frame.maxY, label.frame.maxY) // Not so nice
+ a.pin.top(maxY).left(to: imageView.edge.left).right(to: label.edge.right).marginTop(10)
+```
+
+### Positioning using only visible relative Views
+
+All PinLayout's relative methods can accept an array of Views (ex: `below(of: [UIView])`). Using these methods its possible to filter the list of relative Views before the list is used by PinLayout.
+
+You can define your own filter methods, but PinLayout has a filter method called `visible` that can be used to layout a view related to only visible views. This can be really useful when some views may be visible or hidden depending on the situation.
+
+```swift
+ view.pin.below(of: visible([ageSwitch, ageField])).horizontally().
```
+Note that the **Form** example use this filter method, see [Examples App](#examples_app).
+
-### Layout using superview’s anchors -PinLayout also has a shorter version that pins a view's anchor **directly** on it's corresponding superview’s anchor. -The following methods position the corresponding view's anchor on another view’s anchor. + +## Layout between other views + +PinLayout has methods to position a view between two other views, either horizontally or vertically. These methods layout 2 edges simultaneously. **Methods:** -* `topLeft()` / `topCenter()` / `topRight()` -* `topStart()` / `topEnd()` :left_right_arrow: -* `centerLeft()` / `center()` / `centerRight()` -* `centerStart()` / `centerEnd()` :left_right_arrow: -* `bottomLeft()` / `bottomCenter()` / `bottomRight()` -* `bottomStart()` / `bottomEnd()` :left_right_arrow: +* **`horizontallyBetween(:UIView, and: UIView)`** +Position the view between the two specified views horizontally. The method layout the view's left and right edges. The order of the reference views is irrelevant. +Note that the layout will be applied only if there is horizontal space between the specified views. + +* **`verticallyBetween(:UIView, and: UIView)`** +Position the view between the two specified views vertically. The method layout the view's top and bottom edges. The order of the reference views is irrelevant. Note that the layout will be applied only if there is vertical space between the specified views. + +:pushpin: These methods can use references to any views, even if they don't have the same direct superview/parent! It works with any views that have a shared ancestor. + +###### Usage examples: +```swift + view.pin.horizontallyBetween(viewA, and: viewB) + view.pin.verticallyBetween(viewC, and: viewD) +``` ###### Example: -For example .topRight() will pin the view’s topRight anchor on its superview’s topRight anchor. +This example position a view between two other views horizontally with a left and right margins of 5 pixels, and set its top edge at 10 pixels. -
+
```swift
- viewA.pin.topRight()
-```
+ view.pin.horizontallyBetween(viewA, and: viewB).top(10).marginHorizontal(5)
+```
-This is equivalent to:
+Note that the same result can also be achieved using an alignment parameter, describe in the [next section](#layout_between_w_alignment):
```swift
- viewA.pin.topRight(to: superview.anchor.topRight)
- // OR
- viewA.pin.top().right()
+ view.pin.horizontallyBetween(viewA, and: viewB, aligned: .top).marginHorizontal(5)
```
-+Or using [Relative Edges layout](#relative_edges_layout): + +```swift + view.pin.after(of: viewA).before(of: viewB).top(10).marginHorizontal(5) +``` - -## Relative positioning -### Layout using edges relative positioning + + +### Layout between other views with alignment + +PinLayout has also methods to position a view between two other views, either horizontally or vertically, but with also the ability to specify an **alignment**. -PinLayout also has methods to position relative to other views. The view can be layouted relative to **one or many relative views**. +This is really similar to the [previous section methods](#layout_between) except that here an alignment is specified and **three edges** are being layouted simultaneously. **Methods:** -* **`above(of: UIView)`** / **`above(of: [UIView])`** -Position the view above the specified view(s). One or many relative views can be specified. This method position the view’s bottom edge. -* **`below(of: UIView)`** / **`below(of: [UIView])`** -Position the view below the specified view(s). One or many relative views can be specified. This method position the view’s top edge. -* **`before(of: UIView)`** / **`before(of: [UIView])`** :left_right_arrow: -In LTR direction the view is positioned at the left of the specified view(s). In RTL direction the view is positioned at the right. One or many relative views can be specified. -* **`after(of: UIView)`** / **`after(of: [UIView])`**:left_right_arrow: -In LTR direction the view is positioned at the right of the specified view(s). In RTL direction the view is positioned at the left. One or many relative views can be specified. -* **`left(of: UIView)`** / **`left(of: [UIView])`** -Position the view left of the specified view(s). Similar to `before(of:)`. One or many relative views can be specified. This method position the view’s right edge. -* **`right(of: UIView)`** / **`right(of: [UIView])`** -Position the view right of the specified view(s). Similar to `after(of:)`. One or many relative views can be specified. This method position the view’s left edge. +* **`horizontallyBetween(:UIView, and: UIView, aligned: VerticalAlign)`** +Position the view between the two specified views horizontally and aligned it using the specified VerticalAlign. The view will be aligned related to the first specified reference view. Note that the layout will be applied only if there is horizontal space between the specified views. -:pushpin: **Multiple relative views**: If for example a call to `below(of: [...]) specify multiple relative views, the view will be layouted below *ALL* these views. +* **`verticallyBetween(:UIView, and: UIView, aligned: HorizontalAlign)`** +Position the view between the two specified views vertically and aligned it using the specified HorizontalAlign. The view will be aligned related to the first specified reference view. Note that the layout will be applied only if there is vertical space between the specified views. -:pushpin: These methods **set the position of a view's edge**: top, left, bottom or right. For example `below(of ...)` set the view's top edge, `right(of ...) set the view's left edge, ... +:pushpin: These methods will apply the alignment related to the first specified reference view. If you want to align it using the second reference view, simply swap views parameters. + +:pushpin: These methods can use references to any views, even if they don't have the same direct superview/parent! It works with any views that have a shared ancestor. + +**HorizontalAlignment values:** + +* **`.left`**: The view's left edge will be left-aligned with the first view. +* **`.center`**: The view's will be horizontally centered with the first view. +* **`.right`**: The view's right edge will be right-aligned with the first view. +* **`.start`**:left_right_arrow:: +In LTR direction, similar to using `.left`. +In RTL direction, similar to using `.right`. +* **`.end`**:left_right_arrow:: +In LTR direction, similar to using `.right`. +In RTL direction, similar to using `.left`. -:pushpin: These methods can pin a view’s relative to any views, even if don't have the same direct superview! It works with any views that have at some point the same ancestor. +**VerticalAlignment values:** + +* **`.top`**: The view's top edge will be top-aligned with the first view. +* **`.center`**: The view's will be vertically centered with the first view. +* **`.bottom`**: The view's bottom edge will be bottom-aligned with the first view. ###### Usage examples: ```swift - view.pin.after(of: view4).before(of: view1).below(of: view3) - view.pin.after(of: view2) - view.pin.below(of: [view2, view3, view4]) + view.pin.horizontallyBetween(viewA, and: viewB, aligned: .top) + view.pin.verticallyBetween(viewC, and: viewD, aligned: .center) ``` ###### Example: -The following example will position the view C between the view A and B with margins of 10px using relative positioning methods. +This example position a view between two other views vertically, and center it relative to the first view with an top and bottom margin of 10 pixels. -
+
-```swift
- viewC.pin.top().after(of: viewA).before(of: viewB).margin(10)
-```
-This is an equivalent solution using [edges](#edge):
```swift
- viewC.pin.top().left(to: viewA.edge.right).right(to: viewB.edge.left).margin(10)
+ view.pin.verticallyBetween(viewA, and: viewB, aligned: .center).marginVertical(10)
```
-This is also an equivalent solution using [relative positioning and alignment](#relative_positioning_w_alignment) explained in the next section:
+-```swift - viewC.pin.after(of: viewA, aligned: .top).before(of: viewB, aligned: top).marginHorizontal(10) -``` + +## Edges +### PinLayout UIView’s edges -
+PinLayout adds edges properties to UIView/NSView. These properties are used to reference other view’s edges. - -### Layout using relative positioning and alignment +**PinLayout View’s edges**: -PinLayout also has methods to position relative to other views but with also the ability to specify the **alignment**. The view can be layouted relative to **one or many relative views**. +* `UIView.edge.top` +* `UIView.edge.vCenter` +* `UIView.edge.bottom` +* `UIView.edge.left` +* `UIView.edge.hCenter` +* `UIView.edge.right` +* `UIView.edge.start`:left_right_arrow: +* `UIView.edge.end`:left_right_arrow: +
-**Methods:**
-* **`above(of: UIView, aligned: HorizontalAlignment)`**
-**`above(of: [UIView], aligned: HorizontalAlignment)`**
-Position the view above the specified view(s) and aligned it using the specified HorizontalAlignment. One or many relative views can be specified. This method is similar to pinning one view’s anchor: bottomLeft, bottomCenter or bottomRight.
-
-* **`below(of: UIView, aligned: HorizontalAlignment)`**
-**`below(of: [UIView], aligned: HorizontalAlignment)`**
-Position the view below the specified view(s) and aligned it using the specified HorizontalAlignment. One or many relative views can be specified. This method is similar to pinning one view’s anchor: topLeft, topCenter or topRight.
-
-* **`before(of: UIView, aligned: HorizontalAlignment)`**:left_right_arrow:
-**`before(of: [UIView], aligned: HorizontalAlignment)`**:left_right_arrow:
-In LTR direction the view is positioned at the left of the specified view(s). In RTL direction the view is positioned at the right. One or many relative views can be specified.
+### Layout using edges
-* **`after(of: UIView, aligned: HorizontalAlignment)`**:left_right_arrow:
-**`after(of: [UIView], aligned: HorizontalAlignment)`**:left_right_arrow:
-In LTR direction the view is positioned at the right of the specified view(s). In RTL direction the view is positioned at the left. One or many relative views can be specified.
+PinLayout has methods to attach a View's edge (top, left, bottom, right, start or end edge) to another view’s edge.
-* **`left(of: UIView, aligned: VerticalAlignment)`**
-**`left(of: [UIView], aligned: HorizontalAlignment)`**
-Position the view left of the specified view(s) and aligned it using the specified VerticalAlignment. Similar to `before(of:)`. One or many relative views can be specified. This method is similar to pinning one view’s anchor: topRight, centerRight or bottomRight.
-
-* **`right(of: UIView, aligned: VerticalAlignment)`**
-**`right(of: [UIView], aligned: HorizontalAlignment)`**
-Position the view right of the specified view(s) and aligned it using the specified VerticalAlignment. Similar to `after(of:)`. One or many relative views can be specified. This method is similar to pinning one view’s anchor: topLeft, centerLeft or bottomLeft.
+**Methods:**
+
+* **`top(to edge: ViewEdge)`**:
+Position the view's top edge directly on another view’s edge (top/vCenter/bottom).
+* **`vCenter(to edge: ViewEdge)`**:
+Position vertically the view's center directly on another view’s edge (top/vCenter/bottom).
-**How alignment is applied:**
+* **`bottom(to edge: ViewEdge)`**:
+Position the view's bottom edge directly on another view’s edge (top/vCenter/bottom).
-* **`HorizontalAlignment.left`**: The view's left edge will be aligned to the left most relative view.
-* **`HorizontalAlignment.center`**: The view's hCenter edge will be aligned with the average hCenter of all relative views.
-* **`HorizontalAlignment.right`**: The view's right edge will be aligned to the right most relative view.
-* **`HorizontalAlignment.start`**:left_right_arrow::
-In LTR direction the view's left edge will be aligned to the left most relative view.
-In RTL direction the view's right edge will be aligned to the right most relative view.
-* **`HorizontalAlignment.end`**:left_right_arrow::
-In LTR direction the view's right edge will be aligned to the right most relative view.
-In RTL direction the view's left edge will be aligned to the right most relative view.
-* **`VerticalAlignment.top`**: The view's top edge will be aligned to the top most relative view.
-* **`VerticalAlignment.center`**: The view's vCenter edge will be aligned with the average vCenter of all relative views.
-* **`VerticalAlignment.bottom`**: The view's bottom edge will be aligned to the bottom most relative view.
+* **`left(to: edge: ViewEdge)`**:
+Position the view's left edge directly on another view’s edge (left/hCenter/right).
-:pushpin: **Multiple relative views**: If for example a call to `below(of: [...], aligned:) specify multiple relative views, the view will be layouted below *ALL* these views. The alignment will be applied using all relative view
+* **`hCenter(to: edge: ViewEdge)`**:
+Position horizontally the view's center directly on another view’s edge (left/hCenter/right).
-:pushpin: These methods **set the position of a view's anchor**: topLeft, topCenter, topRight, centerLeft, .... For example `below(of ..., aligned: .right)` set the view's topRight anchor, `right(of ..., aligned: .center) set the view's centerLeft anchor, ...
+* **`right(to: edge: ViewEdge)`**:
+Position the view's right edge directly on another view’s edge (left/hCenter/right).
-:pushpin: These methods **set the position of a view's edge**: top, left, bottom or right. For example `below(of ...)` set the view's top edge, `right(of ...) set the view's left edge, ...
+* **`start(to: edge: ViewEdge)`**:left_right_arrow:
+In LTR direction it position the view's left edge directly on another view’s edge.
+In RTL direction it position the view's right edge directly on another view’s edge.
+
+* **`end(to: edge: ViewEdge)`**:left_right_arrow:
+In LTR direction it position the view's top edge directly on another view’s edge.
+In RTL direction it position the view's bottom edge directly on another view’s edge.
+:pushpin: These methods can pin a view’s edge to any other view's edge, even if they don't have the same direct superview! It works with any views that have a shared ancestor.
###### Usage examples:
```swift
- view.pin.above(of: view2, aligned: .left)
- view.pin.below(of: [view2, view3, view4], aligned: .left)
- view.pin.after(of: view2, aligned: .top).before(of: view3, aligned: .bottom)
+ view.pin.left(to: view1.edge.right)
+ view.pin.left(to: view1.edge.right).top(to: view2.edge.right)
```
-###### Example:
-The following example layout the view B below the view A aligned on its center.
+###### Example 1:
+This example layout the view B left edge on the view A right edge. It only changes the view B left coordinate.
-
+
+```swift
+ viewB.pin.left(to: viewA.edge.right)
+```
+
+###### Example 2:
+This example center horizontally the view B inside the view A with a top margin of 10 from the same view.
+
+
+
+```swift
+ aView.pin.top(to: bView.edge.top).hCenter(to: bView.edge.hCenter).marginTop(10)
+```
+
++ + +## Anchors + +### PinLayout View’s anchors + +PinLayout adds anchors properties to UIView/NSView. These properties are used to reference other view’s anchors. + +**PinLayout View’s anchors**: + +* `UIView.anchor.topLeft` / `UIView.anchor.topCenter` / `UIView.anchor.topRight` +* `UIView.anchor.topStart` / `UIView.anchor.topEnd`:left_right_arrow: +* `UIView.anchor.centerLeft` / `UIView.anchor.centers` / `UIView.anchor.centerRight` +* `UIView.anchor.centerStart` / `UIView.anchor.centerEnd`:left_right_arrow: +* `UIView.anchor.bottomLeft` / `UIView.anchor.bottomCenter` / `UIView.anchor.bottomRight` +* `UIView.anchor.bottomStart` / `UIView.anchor.bottomEnd`:left_right_arrow: + +
+
+
+### Layout using anchors
+
+PinLayout can use anchors to position view’s related to other views.
+
+Following methods position the corresponding view anchor on another view’s anchor.
+
+**Methods:**
+
+* `topLeft(to anchor: Anchor)`
+* `topCenter(to anchor: Anchor)`
+* `topRight(to anchor: Anchor)`
+* `topStart(to anchor: Anchor)`:left_right_arrow:
+* `topEnd(to anchor: Anchor)`:left_right_arrow:
+* `centerLeft(to anchor: Anchor)`
+* `center(to anchor: Anchor)`
+* `centerRight(to anchor: Anchor)`
+* `centerStart(to anchor: Anchor)`:left_right_arrow:
+* `centerEnd(to anchor: Anchor)`:left_right_arrow:
+* `bottomLeft(to anchor: Anchor)`
+* `bottomCenter(to anchor: Anchor)`
+* `bottomRight(to anchor: Anchor)`
+* `bottomStart(to anchor: Anchor)`:left_right_arrow:
+* `bottomEnd(to anchor: Anchor)`:left_right_arrow:
-```swift
- viewB.pin.below(of: viewA, aligned: .center)
-```
-This is an equivalent solution using anchors:
+:pushpin: These methods can pin a view’s anchor to any other view's anchor, even if they don't have the same direct superview! It works with any views that have a shared ancestor.
+###### Usage examples:
```swift
- viewB.pin.topCenter(to: viewA.anchor.bottomCenter)
+ view.pin.topCenter(to: view1.anchor.bottomCenter)
+ view.pin.topLeft(to: view1.anchor.topLeft).bottomRight(to: view1.anchor.center)
```
-###### Example:
-The following example layout the view A **below the UIImageView and the UILabel**.
-View A should be left aligned to the UIImageView and right aligned to the UILabel, with a top margin of 10 pixels.
+###### Example 1:
-
+Layout using an anchor. This example pins the view B topLeft anchor on the view A topRight anchor.
+
-```swift
- a.pin.below(of: [imageView, label], aligned: .left).right(to: label.edge.right).marginTop(10)
-```
-This is an equivalent solutions using other methods:
```swift
- let maxY = max(imageView.frame.maxY, label.frame.maxY) // Not so nice
- a.pin.top(maxY).left(to: imageView.edge.left).right(to: label.edge.right).marginTop(10)
-```
+ viewB.pin.topLeft(to: viewA.anchor.topRight)
+```
-+###### Example 2: +This example center the view B on the view A's top-right anchor. -### Positioning using only visible relative Views +
-All PinLayout's relative methods can accept an array of Views (ex: `below(of: [UIView])`). Using these methods its possible to filter the list of relative Views before the list is used by PinLayout.
-PinLayout has a filter method called `visible` that can be used to layout a view related to only visible views. This can be really useful when some views may be visible or hidden depending on the situation.
+```swift
+ viewB.pin.center(to: viewA.anchor.topRight)
+```
-###### Example:
-The following example contains a UISwitch. Below a UITextField that is visible only when the UISwitch is set to ON. And then follow another UITextField. This example use the `visible(views: [UIView]) -> [UIView]` filter method that returns only views with `UIView.isHidden` set to false or `UIView.alpha` greater than 0.
+###### Example 3:
-
+Layout using multiple anchors. It is also possible to combine two anchors to pin the position and the size of a view. The following example will position the view C between the view A and B with horizontal margins of 10px.
+
```swift
- formTitleLabel.pin.topCenter().marginTop(margin)
- nameField.pin.below(of: formTitleLabel).horizontally().height(40).margin(margin)
-
- ageSwitch.pin.below(of: nameField).horizontally().height(40).margin(margin)
- ageField.pin.below(of: ageSwitch).horizontally().height(40).margin(margin)
-
- // Layout the Address UITextField below the last visible view, either ageSwitch or ageField.
- addressField.pin.below(of: visibles([ageSwitch, ageField])).horizontally().height(40).margin(margin)
+ viewC.pin.topLeft(to: viewA.anchor.topRight)
+ .bottomRight(to: viewB.anchor.bottomLeft).marginHorizontal(10)
```
-Note that this example is extracted from the **Form** example, see [Examples App](#examples_app)
+This is an another possible solution using [horizontallyBetween()](#layout_between_w_alignment):
+
+```swift
+ viewC.pin.horizontallyBetween(viewA, and: viewB, aligned: .top).height(of: viewA).marginHorizontal(10)
+```
@@ -701,18 +868,23 @@ Set the view’s size to match the referenced view’s size
- -### sizeToFit + +### Adjusting size -**Method:** +PinLayout has methods to adjust the view’s size based on their content. -* **`sizeToFit(_ fitType: FitType)`** -The method adjust the view's size based on the view's `sizeThatFits()` method result. - PinLayout will adjust either the view's width or height based on the `fitType` parameter value. - - Notes: - * If margin rules apply, margins will be applied when determining the reference dimension (width/height). - * The resulting size will always respect `minWidth` / `maxWidth` / `minHeight` / `maxHeight`. +The resulting size will always respect [`minWidth`/`maxWidth`/`minHeight`/`maxHeight`](#minmax_width_height_size) values. + + +**Methods:** + +* **`sizeToFit()`** +The method adjust the view's size based on it's content requirements so that it uses the most appropriate amount of space. This fit type has the same effect as calling **sizeToFit()** on a view. The resulting size come from sizeThatFits(..) being called with the current view bounds. Particularly useful for controls/views that have an intrinsic size (label, button, ...). + +* **`sizeToFit(: FitType)`** +The method adjust the view's size based on the result of the method `sizeThatFits(:CGSize)`. + PinLayout will adjust either the view's width or height based on the `fitType` parameter value. + If margins are specified, they will be applied before calling the view's `sizeThatFits(:CGSize)` method. **Parameter `fitType`:** Identify the reference dimension (width / height) that will be used to adjust the view's size. @@ -732,6 +904,9 @@ The method adjust the view's size based on the view's `sizeThatFits()` method re ###### Usage examples: ```swift + // Adjust the view's size based on the result of `UIView.sizeToFit()` and center it. + view.pin.center().sizeToFit() + // Adjust the view's size based on a width of 100 pixels. // The resulting width will always match the pinned property `width(100)`. view.pin.width(100).sizeToFit(.width) @@ -821,49 +996,6 @@ This is an equivalent solutions using the `justify()` method. This method is exp
- - -## Aspect Ratio -Set the view aspect ratio. -AspectRatio solves the problem of knowing one dimension of an element and an aspect ratio, this is particularly useful for images. - -AspectRatio is applied only if a single dimension (either width or height) can be determined, in that case the aspect ratio will be used to compute the other dimension. - -* AspectRatio is defined as the ratio between the width and the height (width / height). -* An aspect ratio of 2 means the width is twice the size of the height. -* AspectRatio respects the min (minWidth/minHeight) and the max (maxWidth/maxHeight) - dimensions of an item. - -**Methods:** - -* **`aspectRatio(_ ratio: CGFloat)`**: -Set the view aspect ratio using a CGFloat. AspectRatio is defined as the ratio between the width and the height (width / height). - -* **`aspectRatio(of view: UIView)`**: -Set the view aspect ratio using another UIView's aspect ratio. - -* **`aspectRatio()`**: -If the layouted view is an UIImageView, this method will set the aspectRatio using the UIImageView's image dimension. For other types of views, this method as no impact. - -###### Usage examples: -```swift - aView.pin.left().width(100%).aspectRatio(2) - imageView.pin.left().width(200).aspectRatio() -``` - -###### Example: -This example layout an UIImageView at the top and center it horizontally, it also adjust its width to 50%. The view’s height will be adjusted automatically using the image aspect ratio. - -
-
-
-```swift
- imageView.pin.top().hCenter().width(50%).aspectRatio()
-```
-
-
-
-
## Margins
@@ -890,7 +1022,7 @@ Set the top and bottom margins to the specified value.
* **`margin(:CGFloat)`** / **`margin(: Percent)`**
Apply the value to all margins (top, left, bottom, right), in pixels or in percentage of its superview's width/height.
* **`margin(:UIEdgeInsets)`**
-Set all margins using an UIEdgeInsets. This method is particularly useful to set all margins using iOS 11 with `UIView.safeAreaInsets` or [`UIView.pin.safeArea`](#safeAreaInsets).
+Set all margins using an UIEdgeInsets. This method is particularly useful to set all margins using [safeArea, readable and layout margins](#safeAreaInsets).
* **`margin(_ insets: NSDirectionalEdgeInsets) `**
Set all margins using an NSDirectionalEdgeInsets. This method is useful to set all margins using iOS 11 `UIView. directionalLayoutMargins` when layouting a view supporting RTL/LTR languages.
* **`margin(_ vertical: CGFloat, _ horizontal: CGFloat)`**
@@ -1036,8 +1168,67 @@ NOTE: In that in that particular situation, the same results could have been ach
+
+
+## Aspect Ratio
+Set the view aspect ratio.
+AspectRatio solves the problem of knowing one dimension of an element and an aspect ratio, this is particularly useful for images.
+
+AspectRatio is applied only if a single dimension (either width or height) can be determined, in that case the aspect ratio will be used to compute the other dimension.
+
+* AspectRatio is defined as the ratio between the width and the height (width / height).
+* An aspect ratio of 2 means the width is twice the size of the height.
+* AspectRatio respects the min (minWidth/minHeight) and the max (maxWidth/maxHeight)
+ dimensions of an item.
+
+**Methods:**
+
+* **`aspectRatio(_ ratio: CGFloat)`**:
+Set the view aspect ratio using a CGFloat. AspectRatio is defined as the ratio between the width and the height (width / height).
+
+* **`aspectRatio(of view: UIView)`**:
+Set the view aspect ratio using another UIView's aspect ratio.
+
+* **`aspectRatio()`**:
+If the layouted view is an UIImageView, this method will set the aspectRatio using the UIImageView's image dimension. For other types of views, this method as no impact.
+
+###### Usage examples:
+```swift
+ aView.pin.left().width(100%).aspectRatio(2)
+ imageView.pin.left().width(200).aspectRatio()
+```
+
+###### Example:
+This example layout an UIImageView at the top and center it horizontally, it also adjust its width to 50%. The view’s height will be adjusted automatically using the image aspect ratio.
+
+
+
+
+```swift
+ imageView.pin.top().hCenter().width(50%).aspectRatio()
+```
+
+
+
+
-## UIKit safeAreaInsets support
+## safeArea, readable, layout and keyboard margins
+
+UIKit expose 4 kind of areas/guides that can be used to layout views.
+PinLayout expose them using these properties:
+
+1. **`UIView.pin.safeArea`**: Expose UIKit `UIView.safeAreaInsets` / `UIView.safeAreaLayoutGuide`.
+2. **`UIView.pin.readableMargins`**: Expose UIKit `UIView.readableContentGuide`.
+3. **`UIView.pin.layoutMargins`**: Expose UIKit `UIView.layoutMargins` / `UIView.layoutMarginsGuide`.
+4. **`UIView.pin.keyboardArea`**: Expose UIKit `UIView.keyboardLayoutGuide`. [iOS 15+]
+
+The following image display the 3 areas on an iPad in landscape mode. (safeArea, readableMargins, layoutMargins)
+
+
+
+See the **SafeArea & readableMargins** example in the [Examples App](#examples_app).
+
+### 1. pin.safeArea
PinLayout can handle easily iOS 11 `UIView.safeAreaInsets`, but it goes further by supporting safeAreaInsets for previous iOS releases (including iOS 7/8/9/10) by adding a property `UIView.pin.safeArea`. PinLayout also extends the support of `UIView.safeAreaInsetsDidChange()` callback on iOS 7/8/9/10.
@@ -1063,8 +1254,6 @@ The safe area of a view represent the area not covered by navigation bars, tab b
button.pin.top(view.pin.safeArea)
```
-
-
##### UIView.safeAreaInsetsDidChange():
* iOS 11 has also introduced the method [`UIView.safeAreaInsetsDidChange()`](https://developer.apple.com/documentation/uikit/uiview/2891104-safeareainsetsdidchange) which is called when the safe area of the view changes. This method is called only when your app runs on a iOS 11 device. **PinLayout's extend that and support this method also on older iOS releases including iOS 9/10**.
@@ -1111,8 +1300,6 @@ The safe area of a view represent the area not covered by navigation bars, tab b
}
```
* **disable**: In this mode PinLayout won't call `UIView.safeAreaInsetsDidChange` on iOS 8/9/10. Note that this is the default mode on iOS 8.
-
-###### Example using `UIView.pin.safeArea` This example layout 4 subviews inside the safeArea. The UINavigationBar and UITabBar are translucent, so even if the container UIView goes under both, we can use its `UIView.pin.safeArea` to keeps its subviews within the safeArea. @@ -1128,13 +1315,114 @@ This example layout 4 subviews inside the safeArea. The UINavigationBar and UITa This example runs perfectly on a iPhone X (iOS 11), but it also runs on any devices with iOS 7, 8, 9 and 10. -:pushpin: This example is available in the [Examples App](#examples_app). See example complete [source code](https://github.com/mirego/PinLayout/blob/master/Example/PinLayoutSample/UI/Examples/SafeArea/SafeAreaView.swift) +:pushpin: This example is available in the [Examples App](#examples_app). See example complete [source code](https://github.com/layoutBox/PinLayout/blob/master/Example/PinLayoutSample/UI/Examples/SafeArea/SafeAreaView.swift)
+ +### 2. pin.readableMargins - +##### Property: +* **`pin.readableMargins: UIEdgeInset`**: +PinLayout's `UIView.pin.readableMargins` property expose UIKit [`UIView.readableContentGuide`](https://developer.apple.com/documentation/uikit/uiview/1622644-readablecontentguide) as an UIEdgeInsets. This is really useful since UIKit only expose the readableContent area to Auto Layout using UILayoutGuide. + +###### Usage examples: +```swift + label.pin.horizontally(pin.readableMargins) // the label fill horizontally the readable area. + view.pin.all(container.pin.readableMargins) // the view fill its parent's readable area. + view.pin.left(pin.readableMargins) +``` + +:pushpin: The [Examples App](#examples_app) contains some examples using `pin.readableMargins`. + +
+ +### 3. pin.layoutmargins + +##### Property: +* **`pin.layoutmargins: UIEdgeInset`** +PinLayout's `UIView.pin.layoutMargins` property expose directly the value of UIKit [`UIView.layoutMargins`](https://developer.apple.com/documentation/uikit/uiview/1622566-layoutmargins). The property exists only to be consistent with the other areas: `pin.safeArea`, `pin.readableMargins` and `pin.layoutmargins`. So its usage is not necessary. + +###### Usage example: +```swift + view.pin.left(container.pin.layoutmargins) + view.pin.left(container.layoutmargins) // Similar to the previous line +``` + +
+ +### 4. pin.keyboardArea: + +##### Property: +* **`pin.keyboardArea: CGRect` [iOS 15+]** +The property expose the `UIKit` value [`UIView.keyboardLayoutGuide`](https://developer.apple.com/documentation/uikit/keyboards_and_input/adjusting_your_layout_with_keyboard_layout_guide). It represents the area (`CGRect`) of the keyboard that is covering the view. Useful to adjust the layout when the keyboard is visible. [iOS 15+] + +##### Usage example: +```swift + container.pin.bottom(view.pin.keyboardArea.top) +``` + + + +## WrapContent + +The following methods are useful to adjust view's width and/or height to wrap all its subviews. These methods also adjust subviews position to create a tight wrap. + +**Methods:** + +* **`wrapContent()`** +**`wrapContent(padding: CGFloat)`** +**`wrapContent(padding: UIEdgeInsets)`** +Adjust the view's width and height to wrap all its subviews. The method also adjusts subviews's position to create a tight wrap. It is also possible to specify an optional padding around all subviews. +* **`wrapContent(:WrapType)`** +**`wrapContent(:WrapType, padding: CGFloat)`** **`wrapContent(:WrapType, padding: UIEdgeInsets)`** +Adjust the view's width AND/OR height to wrap all its subviews. Accept a WrapType parameter to define the wrapping type. It is also possible to specify an optional padding around all subviews. + +**Types:** + +* **`WrapType`** values: + * `.horizontally`: Adjust the view's width and update subviews's horizontal position. + * `.vertically`: Adjust only the view's height and update subviews's vertical position. + * `.all`: Adjust the view's width AND height and update subviews position. This is the default WrapType parameter value `wrapContent()` methods. + +###### Usage examples: +```swift + view.pin.wrapContent().center() // wrap all subviews and centered the view inside its parent. + view.pin.wrapContent(padding: 20) // wrap all subviews with a padding of 20 pixels all around + view.pin.wrapContent(.horizontally) +``` + +###### Example: +This example show the result of different `wrapContent()` method calls. +Here is the initial state: + +
+
+| Source code | Result | Description |
+|---------------------|----------|-------------------|
+| `view.pin.wrapContent()` | 
| Adjust the view's height and width to tight fit its subviews. |
+| `view.pin.wrapContent(padding: 10)` | 
| Adjust the view's height and width and add a padding of 10 pixels around its subviews. |
+| `view.pin.wrapContent(.horizontally)` | 
| Adjust only the view's width. |
+| `view.pin.wrapContent(.vertically)` | 
| Adjust only the view's height. |
+
+
+###### Example:
+This example shows how a view (`containerView`) that has subviews (`imageView` and `label`) can be adjusted to the size of its subviews and then centered inside its parent.
+
+
+
+```swift
+ label.pin.below(of: imageView, aligned: .center).marginTop(4)
+ containerView.pin.wrapContent(padding: 10).center()
+```
+* Line 1: Position the label below the imageView aligned on its center with a top margin of 4 pixels.
+* Line 2: Adjust the `containerView`'s size and position its subviews to create a tight wrap around them with a padding of 10 pixels all around. The `containerView` is also centered inside its parent (superview).
+
++ + + ## justify() / align() **Methods:** @@ -1178,7 +1466,7 @@ And finally using `justify(.right)`: ```swift - viewA.pin.left().right().maxWidth(200).justify(.right) + viewA.pin.horizontally().maxWidth(200).justify(.right) ``` ###### Example: @@ -1193,6 +1481,66 @@ This example centered horizontally the view B in the space remaining at the righ
+ +## Automatic Sizing (UIView only) +Sizing views as part of the manual layout process is made with `sizeThatFits(_ size: CGSize)` where a view returns its ideal size given his parent size. Implementing sizing code has always been cumbersome because you always end up writing the same code twice, a first time for the layout and the second time for sizing. Sizing usually use the same rules layout does but implemented slightly differently because no subview `frame` should be mutated during sizing. Since `PinLayout` already takes care of the layout, it makes perfect sense to leverage it's layout engine to compute sizes. + +###### Traditional example: +```swift + override func layoutSubviews() { + super.layoutSubviews() + scrollView.pin.all() + imageView.pin.top().horizontally().sizeToFit(.width).margin(margin) + textLabel.pin.below(of: imageView).horizontally().sizeToFit(.width).margin(margin) + scrollView.contentSize = CGSize(width: scrollView.bounds.width, height: textLabel.frame.maxY + margin) + } + + override func sizeThatFits(_ size: CGSize) -> CGSize { + let availableSize = CGSize(width: size.width, height: CGFloat.greatestFiniteMagnitude) + return CGSize(width: size.width, height: + imageView.sizeThatFits(availableSize).height + + margin + + textLabel.sizeThatFits(availableSize).height + + margin + ) + } +``` + +###### Usage examples: +```swift + override func layoutSubviews() { + super.layoutSubviews() + performLayout() + didPerformLayout() + } + + private func performLayout() { + scrollView.pin.all() + imageView.pin.top().horizontally().sizeToFit(.width).margin(margin) + textLabel.pin.below(of: imageView).horizontally().sizeToFit(.width).margin(margin) + } + + private func didPerformLayout() { + scrollView.contentSize = CGSize(width: scrollView.bounds.width, height: textLabel.frame.maxY + margin) + } + + override func sizeThatFits(_ size: CGSize) -> CGSize { + autoSizeThatFits(size, layoutClosure: performLayout) + } +``` + +By calling `autoSizeThatFits` with the given available size and a layout closure, any layouting performed by PinLayout in that closure will be computed without affecting any subview's `frame` in the view hierarchy. On the other hand, any non PinLayout related code will also be executed. For that reason, it is really important to separate your layout code in it's own function to avoid any side effect during sizing, like setting the scroll view's content size in the above exemple or perhaps assigning `itemSize` in a collection view layout. That kind of code that depends on the layout should only be executed when `layoutSubviews()` is called as part of a normal layout pass. + +The resulting size also takes into account the margins applied on subviews, even on the bottom and trailing sides. Automatic sizing makes it really easy to write your layout logic once and add proper sizing behavior with virtually no additional effort. + +An Automatic Sizing example is available in the [Examples App](#examples_app). + +Notes: +1. Automatic Sizing is currently only available on iOS. +2. Automatic Sizing is still in beta, so any comments are welcomed. + +
+ ## UIView's transforms @@ -1273,44 +1621,54 @@ bView.pinFrame.below(of: aView, aligned: .left) ## Warnings ### PinLayout's warnings -In debug, PinLayout will display warnings when pin rules cannot be applied. +PinLayout can display warnings in the console when pin rules cannot be applied or are invalid. -**Warning reasons** +**Here a list of fews warning:** * The newly pinned attributes conflict with other already pinned attributes. Example: `view.pin.left(10).right(10).width(200)` -👉 Layout Conflict: `width(200) won't be applied since it conflicts with the following already set properties: left: 0, right: 10.` +👉 Layout Conflict: `width(200) won't be applied since it conflicts with the following already set properties: left: 0, right: 10.` * The newly pinned attributes have already been set to another value. Example: `view.pin.width(100).width(200)` -👉 Layout Conflict: `width(200) won't be applied since it value has already been set to 100.` +👉 Layout Conflict: `width(200) won't be applied since it value has already been set to 100.` * The view being layout hasn’t been added yet into a superview Example: `view.pin.width(100)` -👉 Layout Warning: `width(100) won't be applied, the view must be added as a sub-view before being layouted using this method.` +👉 Layout Warning: `width(100) won't be applied, the view must be added as a sub-view before being layouted using this method.` * A view is used as a reference, either directly or using its anchors or its edges, but hasn’t been added yet to a superview. Example: `view.pin.left(of: view2)` -👉 Layout Warning: `left(of: view2) won't be applied, the view must be added as a sub-view before being used as a reference.` +👉 Layout Warning: `left(of: view2) won't be applied, the view must be added as a sub-view before being used as a reference.` * The width and the height must be positive values. Example: `view.pin.width(-100)` 👉 Layout Warning: `The width (-100) must be greater or equal to 0.` - * `justify(.left|.center|.right)` is used without having set the left and the right coordinates. Example: `view.pin.left().width(250).justify(.center)` 👉 PinLayout Warning: justify(center) won't be applied, the left and right coordinates must be set to justify the view. - * Layout must be executed from the **Main thread**. 👉 PinLayout Warning: Layout must be executed from the Main Thread! +* Layout must be executed from the **Main thread**. +* ... + +### Enabling/Disabling warnings +##### Property: + +* **`Pin.logWarnings: Boolean`** +This property specifies if PinLayout's warnings are displayed in the console. In Debug (#if DEBUG) the default value is true, else its false. The value can be modified at runtime. -### Disabling warnings +#### Enabling/Disabling warnings individually +Few individual warnings can also be enabled/disabled individually: -Warnings can be disabled also in debug mode by setting the boolean Pin.logWarnings to false. +* **`Pin.activeWarnings.noSpaceAvailableBetweenViews: Boolean`** +If true, a warning is displayed if there is no space available between views specified in a call to `horizontallyBetween(...)` or `verticallyBetween(...)` +* **`Pin.activeWarnings. aspectRatioImageNotSet: Boolean`** +If true, a warning is displayed if 'aspectRatio()' is called on a UIImageView without a valid UIImage.
@@ -1347,6 +1705,20 @@ Warnings can be disabled also in debug mode by setting the boolean Pin.logWarnin
+ +## Animations using PinLayout + +PinLayout can easily animates Views. Multiple strategies can be used to animate layout using PinLayout. + +#### [See the section Animations using PinLayout for more details](docs/animations.md) + +The following animation example is available in the [Examples App](#examples_app). + +
+
++ + ## More examples @@ -1361,8 +1733,8 @@ Cell A: * A2 fills the remaining space ```swift - a1.pin.top().bottom().left().width(50) - a2.pin.after(of: a1, aligned: .top).bottom().right().marginLeft(10) + a1.pin.vertically().left().width(50) + a2.pin.after(of: a1, aligned: .top).bottomRight().marginLeft(10) ``` Cell B: @@ -1371,8 +1743,8 @@ Cell B: * B1 fills the remaining space ```swift - b2.pin.top().bottom().right().width(50) - b1.pin.before(of: b2, aligned: .top).bottom().left().marginRight(10) + b2.pin.vertically().right().width(50) + b1.pin.before(of: b2, aligned: .top).bottom().left().marginRight(10) ``` Cell C: @@ -1382,9 +1754,9 @@ Cell C: * C3 fills the remaining right space ```swift - c2.pin.topCenter().width(50).bottom() - c1.pin.before(of: c2, aligned: .top).bottom().left().marginRight(10) - c3.pin.after(of: c2, aligned: .top).bottom().right().marginLeft(10) + c2.pin.vertically().hCenter().width(50) + c1.pin.before(of: c2, aligned: .top).bottom().left().marginRight(10) + c3.pin.after(of: c2, aligned: .top).bottom().right().marginLeft(10) ``` Cell D: @@ -1394,9 +1766,9 @@ Cell D: * D3 fills the remaining space ```swift - d1.pin.topLeft().bottom().width(25%) - d2.pin.after(of: d1, aligned: .top).bottom().width(50%).marginLeft(10) - d3.pin.after(of: d2, aligned: .top).bottom().right().marginLeft(10) + d1.pin.vertically().left().width(25%) + d2.pin.after(of: d1, aligned: .top).bottom().width(50%).marginLeft(10) + d3.pin.after(of: d2, aligned: .top).bottom().right().marginLeft(10) ```
@@ -1414,78 +1786,100 @@ To integrate PinLayout into your Xcode project using CocoaPods, specify it in yo Then, run `pod install`. +### Swift Package Manager (SPM) + +1. From Xcode, select from the menu **File > Swift Packages > Add Package Dependency** +2. Specify the URL `https://github.com/layoutBox/PinLayout` + ### Carthage To integrate PinLayout into your Xcode project using Carthage, specify it in your `Cartfile`: ``` -github "mirego/PinLayout" +github "layoutBox/PinLayout" ``` Then, run `carthage update` to build the framework and drag the built `PinLayout.framework` into your Xcode project. -### Swift Package Manager - -Once you have your Swift package set up, you only need to add PinLayout as a dependency of your `Package.swift`. - -```swift -dependencies: [ - .Package(url: "https://github.com/mirego/PinLayout.git", majorVersion: 1) -] -``` -
## Examples App -There is an Example app that expose some usage example on PinLayout, including: - -* The [introduction example](#intro_usage_example) presented previously in this README. -* UITableView example with variable height cells. -* UICollectionView example. -* An example using PinLayout's [`UIView.pin.safeArea`](#safeAreaInsets) -* An RTL enabled version of the [introduction example](#intro_usage_example) -* An example showing of the right-to-left (RTL) language support. Similar to the Intro example. -* Example showing a form -* Example showing relative positioning. -* Example using Objective-C -* ... -:pushpin: Tap on images to see the example's source code. +The PinLayout's Example App exposes some usage example of PinLayout. + +#### [See the Example App section to get more information](docs/examples.md) + +Included examples: + +* The [introduction example](#intro_usage_example) presented previously in this README. +* Example using a UITableView with variable height cells. +* Example using a UICollectionView with variable height cells. +* Example showing how to animate with PinLayout. +* Example using [`pin.safeArea`, `pin.readableMargins` and `pin.layoutMargins`](#safeAreaInsets) +* Example using [`wrapContent()`](#wrapContent) +* Example using [`autoSizeThatFits`](#automatic_sizing) +* Example showing right-to-left (RTL) language support. +* Example showing a simple form example +* Example showing Relative Edges layout. +* Example using Objective-C +* ...
-
- 
- 
- 
- 
- 
- 
- 
- 
+
+
+
+
+
+
+
+
+
+ 
## macOS Support -PinLayout **support of macOS is not complete**, see here the particularities of the current implementation: +PinLayout can layout **NSView**'s on macOS. All PinLayout's properties and methods are available, with the following exceptions: + +* PinLayout supports **only views that have a parent (superview) using a flipped coordinate system**, i.e. views for which the computed property `var isFlipped: Bool` returns true. In a flipped coordinate system, the origin is in the upper-left corner of the view and y-values extend downward. UIKit use this coordinate system. In a non-flipped coordinate system (default mode), the origin is in the lower-left corner of the view and positive y-values extend upward. See [Apple's documentation for more information about `NSView.isFlipped`](https://developer.apple.com/documentation/appkit/nsview/1483532-isflipped). The support of non-flipped coordinate system will be added soon. -* PinLayout supports ** only views that have a parent (superview) using a flipped coordinate system**, i.e. views for which the computed property `var isFlipped: Bool` returns true. In a flipped coordinate system, the origin is in the upper-left corner of the view and y-values extend downward. UIKit use this coordinate system. In a non-flipped coordinate system (default mode), the origin is in the lower-left corner of the view and positive y-values extend upward. See [Apple's documentation for more information about `NSView.isFlipped`](https://developer.apple.com/documentation/appkit/nsview/1483532-isflipped). The support of non-flipped coordinate system will be added soon. +* [`sizeToFit(:FitType)`](#sizeToFit) is supported only for instances that inherits from NSControl. Support for [`sizeToFit(:FitType)`](#sizeToFit) can be added to your custom NSView subclasses, just make those views conform to the `SizeCalculable` protocol and implement the required `sizeThatFits(:CGSize)` function. -* These methods are currently not supported on macOS, but they will be implemented soon: +* [`NSView.pin.safeArea` and ](#safeAreaInsets) property is not available, AppKit doesn't have an `UIView.safeAreaInsets` equivalent. - * [`sizeToFit(:FitType)`](#sizeToFit) (Coming soon) - * [`aspectRatio()`](#aspect_ratio) with no parameters (Coming soon) +* [`NSView.pin.readableMargins`](#safeAreaInsets) property is not available, AppKit doesn't have an `UIView.readableContentGuide` equivalent. +* [`aspectRatio()`](#aspect_ratio) with no parameters. -* [`UIView.pin.safeArea`](#safeAreaInsets) property is not available, AppKit doesn't have an UIView.safeAreaInsets equivalent. +
+ + + +## CALayer Support + +PinLayout can layouts **CALayer**'s. All PinLayout's properties and methods are available, with the following exceptions: -All other PinLayout's methods and properties are available on macOS! +* [`sizeToFit(:FitType)`](#sizeToFit) is not supported. Support for [`sizeToFit(:FitType)`](#sizeToFit) can be added to your custom CALayer subclasses, just make those layers conform to the `SizeCalculable` protocol and implement the required `sizeThatFits(:CGSize)` function. +* [`CALayer.pin.safeArea` and `CALayer.pin.readableMargins`](#safeAreaInsets) properties are not available. +* [`aspectRatio()`](#aspect_ratio) with no parameters + +###### Usage Examples: + +```swift +aLayer = CALayer() +bLayer = CALayer() +view.layer.addSublayer(aLayer) +view.layer.addSublayer(bLayer) +... + +aLayer.pin.top(10).left(10).width(20%).height(80%) +bLayer.pin.below(of: aLayer, aligned: .left).size(of: aLayer) +```
@@ -1494,7 +1888,7 @@ All other PinLayout's methods and properties are available on macOS! PinLayout layouts views immediately after the line containing `.pin` has been fully executed, thanks to ARC (Automatic Reference Counting) this works perfectly on iOS/tvOS/macOS simulators and devices. But in Xcode Playgrounds, ARC doesn't work as expected, object references are kept much longer. This is a well documented issue and have a little impact on the PinLayout behaviour. -[See here for more details about using PinLayout in Xcode playgrounds](docs/xcode_playground.md) +#### [See here for more details about using PinLayout in Xcode playgrounds](docs/xcode_playground.md)
@@ -1502,7 +1896,7 @@ PinLayout layouts views immediately after the line containing `.pin` has been fu ## PinLayout using Objective-C PinLayout also expose an Objective-C interface slightly different than the Swift interface. -[See here for more details](docs/objective_c.md) +#### [See here for more details](docs/objective_c.md)
@@ -1538,17 +1932,14 @@ All example in the [Examples App](#examples_app) handle correctly the `safeAreaI ## Questions, comments, ideas, suggestions, issues, .... -If you have questions, you can checks already [answered questions here.](https://github.com/mirego/PinLayout/issues?q=is%3Aissue+is%3Aclosed+label%3Aquestion) +If you have questions, you can checks already [answered questions here.](https://github.com/layoutBox/PinLayout/issues?q=is%3Aissue+is%3Aclosed+label%3Aquestion) -For any **comments**, **ideas**, **suggestions**, **issues**, simply open an [issue](https://github.com/mirego/PinLayout/issues). +For any **comments**, **ideas**, **suggestions**, **issues**, simply open an [issue](https://github.com/layoutBox/PinLayout/issues). If you find PinLayout interesting, thanks to **Star** it. You'll be able to retrieve it easily later. If you'd like to contribute, you're welcome! -
- - ## Thanks PinLayout was inspired by other great layout frameworks, including: @@ -1557,12 +1948,12 @@ PinLayout was inspired by other great layout frameworks, including: * Qt: Anchors and edges management. * [SnapKit](https://github.com/SnapKit/SnapKit): Clean interface for anchors. -
- ## History -PinLayout recent history is available in the [CHANGELOG](CHANGELOG.md) also in [GitHub Releases](https://github.com/mirego/PinLayout/releases). +PinLayout recent history is available in the [CHANGELOG](CHANGELOG.md) also in [GitHub Releases](https://github.com/layoutBox/PinLayout/releases). -
+### Recent breaking change + +* `fitSize()` has been removed after being deprecated for 10 months. `sizeToFit(...)` should now be used instead. See [Adjusting size](#adjusting_size). (2018-08-21) ## License MIT License diff --git a/Sources/AutoSizeCalculable.swift b/Sources/AutoSizeCalculable.swift new file mode 100644 index 00000000..69782ff0 --- /dev/null +++ b/Sources/AutoSizeCalculable.swift @@ -0,0 +1,10 @@ +#if os(iOS) || os(tvOS) +import UIKit +#else +import AppKit +#endif + +public protocol AutoSizeCalculable { + func setAutoSizingRect(_ rect: CGRect, margins: PEdgeInsets) + func autoSizeThatFits(_ size: CGSize, layoutClosure: () -> Void) -> CGSize +} diff --git a/Sources/Extensions/CALayer+PinLayout.swift b/Sources/Extensions/CALayer+PinLayout.swift new file mode 100644 index 00000000..7eb92bea --- /dev/null +++ b/Sources/Extensions/CALayer+PinLayout.swift @@ -0,0 +1,88 @@ +// Copyright (c) 2017 Luc Dion +// Permission is hereby granted, free of charge, to any person obtaining a copy +// of this software and associated documentation files (the "Software"), to deal +// in the Software without restriction, including without limitation the rights +// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +// copies of the Software, and to permit persons to whom the Software is +// furnished to do so, subject to the following conditions: +// +// The above copyright notice and this permission notice shall be included in +// all copies or substantial portions of the Software. +// +// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +// THE SOFTWARE. + +import QuartzCore + +extension CALayer: Layoutable { + public typealias PinView = CALayer + + public var superview: CALayer? { + return superlayer + } + + public var subviews: [CALayer] { + return sublayers ?? [] + } + + public var pin: PinLayout
- 
+ 
See [Layout Framework Benchmark](https://github.com/layoutBox/LayoutFrameworkBenchmark) for complete details and benchmarks charts for iPhone X/8/7/6S/...
@@ -55,30 +56,29 @@ override func layoutSubviews() {
super.layoutSubviews()
let hMargin: CGFloat = 8
- let vMargin: CGFloat = 2
+ let vMargin: CGFloat = 4
optionsLabel.pin.topRight().margin(hMargin)
actionLabel.pin.topLeft().margin(hMargin)
posterImageView.pin.below(of: actionLabel, aligned: .left).marginTop(10)
- posterNameLabel.pin.right(of: posterImageView, aligned: .top).margin(-6, 6).right(hMargin).sizeToFit()
- posterHeadlineLabel.pin.below(of: posterNameLabel, aligned: .left).right(hMargin).marginTop(1).sizeToFit()
- posterTimeLabel.pin.below(of: posterHeadlineLabel, aligned: .left).right(hMargin).marginTop(1).sizeToFit()
- posterCommentLabel.pin.below(of: posterTimeLabel).left(hMargin).right().right(hMargin)
- .marginTop(vMargin).sizeToFit()
+ posterHeadlineLabel.pin.after(of: posterImageView, aligned: .center).marginLeft(4)
+ posterNameLabel.pin.above(of: posterHeadlineLabel, aligned: .left).marginBottom(vMargin)
+ posterTimeLabel.pin.below(of: posterHeadlineLabel, aligned: .left).marginTop(vMargin)
- contentImageView.pin.below(of: posterCommentLabel).hCenter().width(100%).sizeToFit()
- contentTitleLabel.pin.below(of: contentImageView).left().right().marginHorizontal(hMargin).sizeToFit()
- contentDomainLabel.pin.below(of: contentTitleLabel, aligned: .left).right().marginRight(hMargin)
- .sizeToFit()
+ posterCommentLabel.pin.below(of: posterTimeLabel).left(hMargin).marginTop(vMargin)
+
+ contentImageView.pin.below(of: posterCommentLabel, aligned: .left).right().marginTop(vMargin).marginRight(hMargin)
+ contentTitleLabel.pin.below(of: contentImageView).left().marginHorizontal(hMargin)
+ contentDomainLabel.pin.below(of: contentTitleLabel, aligned: .left)
likeLabel.pin.below(of: contentDomainLabel, aligned: .left).marginTop(vMargin)
- commentLabel.pin.top(to: likeLabel.edge.top).hCenter(50%)
+ commentLabel.pin.top(to: likeLabel.edge.top).hCenter()
shareLabel.pin.top(to: likeLabel.edge.top).right().marginRight(hMargin)
actorImageView.pin.below(of: likeLabel, aligned: .left).marginTop(vMargin)
- actorCommentLabel.pin.right(of: actorImageView, aligned: .center).marginLeft(4)
+ actorCommentLabel.pin.after(of: actorImageView, aligned: .center).marginLeft(4)
}
```
diff --git a/docs/Benchmark/benchmark_comparison_all.png b/docs/Benchmark/benchmark_comparison_all.png
deleted file mode 100644
index 7b6068e1..00000000
Binary files a/docs/Benchmark/benchmark_comparison_all.png and /dev/null differ
diff --git a/docs/Benchmark/benchmark_comparison_all_small.png b/docs/Benchmark/benchmark_comparison_all_small.png
index fbd2baf4..0e93d47e 100644
Binary files a/docs/Benchmark/benchmark_comparison_all_small.png and b/docs/Benchmark/benchmark_comparison_all_small.png differ
diff --git a/docs/Benchmark/benchmark_result_Autolayout.png b/docs/Benchmark/benchmark_result_Autolayout.png
deleted file mode 100644
index 016b9ce1..00000000
Binary files a/docs/Benchmark/benchmark_result_Autolayout.png and /dev/null differ
diff --git a/docs/Benchmark/benchmark_result_FlexLayout.png b/docs/Benchmark/benchmark_result_FlexLayout.png
deleted file mode 100644
index b22f4233..00000000
Binary files a/docs/Benchmark/benchmark_result_FlexLayout.png and /dev/null differ
diff --git a/docs/Benchmark/benchmark_result_LayoutKit.png b/docs/Benchmark/benchmark_result_LayoutKit.png
deleted file mode 100644
index 1e0e3ca1..00000000
Binary files a/docs/Benchmark/benchmark_result_LayoutKit.png and /dev/null differ
diff --git a/docs/Benchmark/benchmark_result_PinLayout.png b/docs/Benchmark/benchmark_result_PinLayout.png
deleted file mode 100644
index 6fe1fd09..00000000
Binary files a/docs/Benchmark/benchmark_result_PinLayout.png and /dev/null differ
diff --git a/docs/PinLayout_principles.md b/docs/PinLayout_principles.md
index 34664e37..3ee6b36b 100644
--- a/docs/PinLayout_principles.md
+++ b/docs/PinLayout_principles.md
@@ -6,7 +6,7 @@
* Manual layouting (doesn't rely on auto layout).
-* PinLayout exist to be simple and fast as possible! In fact, it is fast as manual layouting. See [performance results below.](#performance)
+* PinLayout exist to be simple and fast as possible! In fact, it is fast as manual layouting. See [performance results here.](https://github.com/layoutBox/PinLayout#pinlayouts-performance)
* Full control: You're in the middle of the layout process, no magic black box.
* You can add conditions (if/switch/guard/...) related to the device orientation, device type, traitCollection, animations, ...
@@ -31,4 +31,4 @@ Each view can use the layout system that better suit it (PinLayout, autolayout,
* Not too intrusive. PinLayout only adds three properties to existing iOS classes: `UIView.pin`, `UIView.anchor` and `UIView.edge`
* Minimize as much as possible calculations and constants when layouting views. But it is always possible to add advanced computation if required.
-* Method's name match as much as possible other layout frameworks, including [FlexLayout](https://github.com/layoutBox/FlexLayout)/flexbox, CSS, React Native, …
\ No newline at end of file
+* Method's name match as much as possible other layout frameworks, including [FlexLayout](https://github.com/layoutBox/FlexLayout)/flexbox, CSS, React Native, …
diff --git a/docs/animations.md b/docs/animations.md
new file mode 100644
index 00000000..dbb738b2
--- /dev/null
+++ b/docs/animations.md
@@ -0,0 +1,190 @@
+
+ 
+
Animations using PinLayout
+ +## Basic Swift animations +Before explaining how to use PinLayout to animate views, you can check these two nice tutorials to learn the basic of animations: + +* [iOS Animation Tutorial: Getting Started](https://www.raywenderlich.com/363-ios-animation-tutorial-getting-started) +* [Basic UIView Animation Tutorial: Getting Started](https://www.raywenderlich.com/5255-basic-uiview-animation-tutorial-getting-started) + + +## PinLayout is stateless +It is important to remember that PinLayout is stateless, i.e. PinLayout always start from the view's current position and size (frame) when layouting a view. You don't need to reset anything to animate a view using PinLayout. + +This also means that you can modify only the property you want to animate, for example the following code will only animate the view's width: + +``` + UIView.animate(withDuration: 0.3) { + view.pin.width(30) + } +``` + + + +## Layout strategies +Multiple strategies can be used to animate layout using PinLayout. The choice is a question of preferences and the kind of animations you want to achieve. + +Some possible strategies will be shown below using a simple example. The example animates a view position from left to right when the user tap a button. + +
+
+Note that in the following source code the view's size was set to 150 px (`view.pin.size(150)`) in the initialization.
+
+
+### Basic strategy: Using `UIView.setNeedsLayout` and `UIView.layoutIfNeeded`
+In this strategy, to force a call to layoutSubviews(), we call `UIView.setNeedsLayout` and `UIView.layoutIfNeeded` from the animation block.
+
+```swift
+var isViewLeftDocked = true
+
+override func layoutSubviews() {
+ super.layoutSubviews()
+
+ if isViewLeftDocked {
+ view.pin.top().left()
+ } else {
+ view.pin.top().right()
+ }
+}
+
+func didTapTogglePosition() {
+ isViewLeftDocked = !isViewLeftDocked
+
+ UIView.animate(withDuration: 0.3) {
+ self.setNeedsLayout()
+ self.layoutIfNeeded()
+ }
+}
+```
+
+### Using a layout method
+This strategy use a private method to layout the animated view (`layoutAnimatedView()`). The advantage of this solution is that it is not required to call `UIView.setNeedsLayout` and `UIView.layoutIfNeeded` to relayout the view.
+
+```swift
+var isViewLeftDocked = true
+
+override func layoutSubviews() {
+ super.layoutSubviews()
+
+ layoutAnimatedView()
+}
+
+private func layoutAnimatedView() {
+ if isViewLeftDocked {
+ view.pin.top().left()
+ } else {
+ view.pin.top().right()
+ }
+}
+
+func didTapTogglePosition() {
+ isViewLeftDocked = !isViewLeftDocked
+
+ UIView.animate(withDuration: 0.3) {
+ self.layoutAnimatedView()
+ }
+}
+```
+
+### Using an animation state
+This strategy is similar to the previous one, but use an enumeration to keep the animation state.
+
+```swift
+enum AnimationState {
+ case leftDocked
+ case rightDocked
+}
+
+var animationState = AnimationState.leftDocked
+
+override func layoutSubviews() {
+ super.layoutSubviews()
+
+ layoutAnimatedView()
+}
+
+private func layoutAnimatedView() {
+ switch animationState {
+ case .leftDocked:
+ view.pin.top().left()
+ case .rightDocked:
+ view.pin.top().right()
+ }
+}
+
+func didTapTogglePosition() {
+ switch animationState {
+ case .leftDocked: animationState = .rightDocked
+ case .rightDocked: animationState = .leftDocked
+ }
+
+ UIView.animate(withDuration: 0.3) {
+ self.layoutAnimatedView()
+ }
+}
+```
+
+### Other strategies
+It's really up to you to think of animation's strategies that match your situation. With PinLayout you are always in control of everything, including animations.
+
+
+
+## Collision between animations and `layoutSubViews()`
+In some particular situation it is possible that `layoutSubViews()` may be called during the animation is in progress, this can occur particularly on long animation. To handle this kind of situation it is possible to use a boolean indicating if an animation is in progress, and to block temporarely the layout of animated views in `layoutSubViews()`.
+
+Here is an example:
+
+```swift
+enum AnimationState {
+ case leftDocked
+ case rightDocked
+}
+
+var animationState = AnimationState.leftDocked
+var isAnimating = false
+
+override func layoutSubviews() {
+ super.layoutSubviews()
+
+ // If an animation of the view is in progress, we don't update animated views position.
+ guard !isAnimating else { return }
+ layoutAnimatedView()
+}
+
+private func layoutAnimatedView() {
+ switch animationState {
+ case .leftDocked:
+ view.pin.top().left()
+ case .rightDocked:
+ view.pin.top().right()
+ }
+}
+
+func didTapTogglePosition() {
+ switch animationState {
+ case .leftDocked: animationState = .rightDocked
+ case .rightDocked: animationState = .leftDocked
+ }
+
+ UIView.animate(withDuration: 0.3, animations: {
+ self.isAnimating = true
+ self.layoutAnimatedView()
+ }, completion: { (_) in
+ self.isAnimating = false
+ })
+}
+```
+
+
+
+## Animation Example
+You can check the animation example available in the [PinLayout's Example App](https://github.com/layoutBox/PinLayout/blob/master/docs/examples.md):
+
+[Source code](https://github.com/layoutBox/PinLayout/blob/master/Example/PinLayoutSample/UI/Examples/Animations/AnimationsView.swift)
+
+
+
+
diff --git a/docs/examples.md b/docs/examples.md
new file mode 100644
index 00000000..894bff63
--- /dev/null
+++ b/docs/examples.md
@@ -0,0 +1,127 @@
+
+
+
Examples
+ +The PinLayout's Example exposes some usage example of PinLayout. + +The Example App is available in the [`Example`](https://github.com/layoutBox/PinLayout/tree/master/Example) folder. + +### Running the Example app +1. Do a `pod install` from the PinLayout root directory. +2. Open the newly generated `PinLayout.xcworkspace` Xcode workspace. +3. Select the `PinLayoutSample` target. +4. Run the app on your device or simulator. + + + +## Intro Example +PinLayout introduction example presented in the README. + +[Source code](https://github.com/layoutBox/PinLayout/blob/master/Example/PinLayoutSample/UI/Examples/Intro/IntroView.swift) + +
+
+## Relative Edges Layout Example
+Example showing how to layout views relative to other views.
+
+[Source code](https://github.com/layoutBox/PinLayout/blob/master/Example/PinLayoutSample/UI/Examples/RelativeView/RelativeView.swift)
+
+
+
+## Between Example
+Example showing how to use [`horizontallyBetween()`](https://github.com/layoutBox/PinLayout#layout-between-other-views) to position a view between two other views.
+[Source code](https://github.com/layoutBox/PinLayout/blob/master/Example/PinLayoutSample/UI/Examples/BetweenView/BetweenView.swift)
+
+
+
+## UITableView Example
+Example using a UITableView with variable height cells.
+
+[Source code](https://github.com/layoutBox/PinLayout/blob/master/Example/PinLayoutSample/UI/Examples/TableViewExample/TableViewExampleView.swift)
+
+
+
+
+## UITableView Example with cells using `pin.readableMargins`
+Similar to the UITableView Example, but in this one cells use `pin.readableMargins` to layout their content inside the zone defined by `UIView.readableContentGuide`.
+
+[Source code](https://github.com/layoutBox/PinLayout/blob/master/Example/PinLayoutSample/UI/Examples/TableViewExample/TableViewExampleView.swift)
+
+
+
+
+## UICollectionView Example
+Example using a UICollectionView with variable height cells.
+
+[Source code](https://github.com/layoutBox/PinLayout/blob/master/Example/PinLayoutSample/UI/Examples/CollectionViewExample/HouseCell.swift)
+
+
+
+## Animations Example
+Example showing how to animate views with PinLayout.
+
+[Source code](https://github.com/layoutBox/PinLayout/blob/master/Example/PinLayoutSample/UI/Examples/Animations/AnimationsView.swift)
+
+
+
+## Right to left language support Example
+This example show how PinLayout can support simultaneously Left to right and right to left languages.
+
+[Source code](https://github.com/layoutBox/PinLayout/blob/master/Example/PinLayoutSample/UI/Examples/IntroRTL/IntroRTLView.swift)
+
+
+
+
+## pin.safeArea example
+Example showing the usage of `UIView.pin.safeArea`] with UINavigationController and UITabViewController:
+
+[Source code](https://github.com/layoutBox/PinLayout/blob/master/Example/PinLayoutSample/UI/Examples/SafeArea/SafeAreaView.swift)
+
+
+
+Also display the usage of `pin.readableMargins` and `pin.layoutMargins`:
+
+[Source code](https://github.com/layoutBox/PinLayout/blob/master/Example/PinLayoutSample/UI/Examples/SafeArea/SafeAreaAndMarginsView.swift)
+
+
+
+
+## Adjust To Container Example
+Example showing how PinLayout can be used to adjust the layout depending of the space available.
+
+In this example the UISegmentedControl is shown below its label if the available width is smaller than 500 pixels, or on the same line as the label if the width is wider.
+
+[Source code](https://github.com/layoutBox/PinLayout/blob/master/Example/PinLayoutSample/UI/Examples/AdjustToContainer/Subviews/ChoiceSelectorView.swift)
+
+
+
+
+## wrapContent Example
+This example show how to use the `wrapContent()` method. This method is particularly useful to wrap a group of views and center them.
+
+[Source code](https://github.com/layoutBox/PinLayout/blob/master/Example/PinLayoutSample/UI/Examples/WrapContent/WrapContentView.swift)
+
+
+
+## Form Example
+This example is a basic form containing 4 fields.
+
+[Source code](https://github.com/layoutBox/PinLayout/blob/master/Example/PinLayoutSample/UI/Examples/Form/FormView.swift)
+
+
+
+## Auto Adjusting Size Example
+This example show how fixed size views and expandable views can be layouted using PinLayout to fill the available space.
+
+[Source code](https://github.com/layoutBox/PinLayout/blob/master/Example/PinLayoutSample/UI/Examples/AutoAdjustingSize/AutoAdjustingSizeView.swift)
+
+
+
+
+## Automatic Sizing Example
+This example show how to use Automatic Sizing (`autoSizeThatFits()`) to compute views size.
+[Source code](https://github.com/layoutBox/PinLayout/tree/master/Example/PinLayoutSample/UI/Examples/AutoSizing)
+
+
diff --git a/docs/images/example-animations-large.gif b/docs/images/example-animations-large.gif
new file mode 100644
index 00000000..3451d365
Binary files /dev/null and b/docs/images/example-animations-large.gif differ
diff --git a/docs/images/example-animations.gif b/docs/images/example-animations.gif
new file mode 100644
index 00000000..beb2dbfb
Binary files /dev/null and b/docs/images/example-animations.gif differ
diff --git a/docs/images/pinlayout_animation_example1.gif b/docs/images/pinlayout_animation_example1.gif
new file mode 100644
index 00000000..2e920652
Binary files /dev/null and b/docs/images/pinlayout_animation_example1.gif differ
diff --git a/docs/images/pinlayout_example_anchor_center.png b/docs/images/pinlayout_example_anchor_center.png
new file mode 100644
index 00000000..73d24fbc
Binary files /dev/null and b/docs/images/pinlayout_example_anchor_center.png differ
diff --git a/docs/images/pinlayout_example_layout_margins_all.png b/docs/images/pinlayout_example_layout_margins_all.png
new file mode 100644
index 00000000..703eb4eb
Binary files /dev/null and b/docs/images/pinlayout_example_layout_margins_all.png differ
diff --git a/docs/images/pinlayout_example_layout_margins_landscape.png b/docs/images/pinlayout_example_layout_margins_landscape.png
new file mode 100644
index 00000000..4d29810c
Binary files /dev/null and b/docs/images/pinlayout_example_layout_margins_landscape.png differ
diff --git a/docs/images/pinlayout_example_layout_margins_portrain.png b/docs/images/pinlayout_example_layout_margins_portrain.png
new file mode 100644
index 00000000..11c533d3
Binary files /dev/null and b/docs/images/pinlayout_example_layout_margins_portrain.png differ
diff --git a/docs/images/pinlayout_example_tableview_readable_content_all.png b/docs/images/pinlayout_example_tableview_readable_content_all.png
new file mode 100644
index 00000000..805c74c2
Binary files /dev/null and b/docs/images/pinlayout_example_tableview_readable_content_all.png differ
diff --git a/docs/images/pinlayout_example_tableview_readable_content_landscape.png b/docs/images/pinlayout_example_tableview_readable_content_landscape.png
new file mode 100644
index 00000000..e4cc7be9
Binary files /dev/null and b/docs/images/pinlayout_example_tableview_readable_content_landscape.png differ
diff --git a/docs/images/pinlayout_example_tableview_readable_content_portrait.png b/docs/images/pinlayout_example_tableview_readable_content_portrait.png
new file mode 100644
index 00000000..71ff37aa
Binary files /dev/null and b/docs/images/pinlayout_example_tableview_readable_content_portrait.png differ
diff --git a/docs/images/pinlayout_example_topRight.png b/docs/images/pinlayout_example_topRight.png
new file mode 100644
index 00000000..e635927d
Binary files /dev/null and b/docs/images/pinlayout_example_topRight.png differ
diff --git a/docs/images/pinlayout_horizontallyBetween.png b/docs/images/pinlayout_horizontallyBetween.png
new file mode 100644
index 00000000..80eea2cd
Binary files /dev/null and b/docs/images/pinlayout_horizontallyBetween.png differ
diff --git a/docs/images/pinlayout_plus_layoutBox.png b/docs/images/pinlayout_plus_layoutBox.png
new file mode 100644
index 00000000..02684ef2
Binary files /dev/null and b/docs/images/pinlayout_plus_layoutBox.png differ
diff --git a/docs/images/pinlayout_right_to_left_example.png b/docs/images/pinlayout_right_to_left_example.png
new file mode 100644
index 00000000..d398a916
Binary files /dev/null and b/docs/images/pinlayout_right_to_left_example.png differ
diff --git a/docs/images/pinlayout_verticallyBetween.png b/docs/images/pinlayout_verticallyBetween.png
new file mode 100644
index 00000000..871d46fb
Binary files /dev/null and b/docs/images/pinlayout_verticallyBetween.png differ
diff --git a/docs/images/wrapContent_all.png b/docs/images/wrapContent_all.png
new file mode 100644
index 00000000..0f00ca0f
Binary files /dev/null and b/docs/images/wrapContent_all.png differ
diff --git a/docs/images/wrapContent_before.png b/docs/images/wrapContent_before.png
new file mode 100644
index 00000000..ad081829
Binary files /dev/null and b/docs/images/wrapContent_before.png differ
diff --git a/docs/images/wrapContent_example.png b/docs/images/wrapContent_example.png
new file mode 100644
index 00000000..c55fde13
Binary files /dev/null and b/docs/images/wrapContent_example.png differ
diff --git a/docs/images/wrapContent_horizontally.png b/docs/images/wrapContent_horizontally.png
new file mode 100644
index 00000000..d8079987
Binary files /dev/null and b/docs/images/wrapContent_horizontally.png differ
diff --git a/docs/images/wrapContent_padding.png b/docs/images/wrapContent_padding.png
new file mode 100644
index 00000000..b71b2303
Binary files /dev/null and b/docs/images/wrapContent_padding.png differ
diff --git a/docs/images/wrapContent_vertically.png b/docs/images/wrapContent_vertically.png
new file mode 100644
index 00000000..32b5af9b
Binary files /dev/null and b/docs/images/wrapContent_vertically.png differ
diff --git a/docs/objective_c.md b/docs/objective_c.md
index f1132fd0..6c17b258 100644
--- a/docs/objective_c.md
+++ b/docs/objective_c.md
@@ -9,21 +9,24 @@ PinLayout can also be used from Objective-C. The PinLayout interface is slightly
###### Example 1:
This example implement the PinLayout's Intro example using objective-c
-
+
```
- (void) layoutSubviews {
[super layoutSubviews];
-
- [[[[[[logo.pinObjc top] left] width:100] aspectRatio] marginWithTop:topLayoutGuide + 10 horizontal:10 bottom:10] layout];
- [[[[segmented.pinObjc rightOf:logo aligned:VerticalAlignTop] right] marginHorizontal:10] layout];
- [[[[[[textLabel.pinObjc belowOf:segmented aligned:HorizontalAlignLeft] widthOf:segmented] pinEdges] marginTop:10] fitSize] layout];
- [[[[[separatorView.pinObjc belowOfViews:@[logo, textLabel] aligned:HorizontalAlignLeft] rightTo:segmented.edge.right] height:1] marginTop:10] layout];
+
+ CGFloat margin = 10;
+ UIEdgeInsets safeArea = self.pinObjc.safeArea;
+
+ logo.pinObjc.topInsets(safeArea).leftInsets(safeArea).width(100).aspectRatio().margin(margin).layout();
+ segmented.pinObjc.rightOfAligned(logo, VerticalAlignTop).rightInsets(safeArea).marginHorizontal(margin).layout();
+ textLabel.pinObjc.belowOfAligned(segmented, HorizontalAlignLeft).widthOf(segmented).pinEdges().marginTop(margin).sizeToFitType(FitWidth).layout();
+ separatorView.pinObjc.belowOfViewsAligned(@[logo, textLabel], HorizontalAlignLeft).rightToEdge(segmented.edge.right).height(1).marginTop(margin).layout();
}
```
-:pushpin: This example is available in the Examples App. See example complete [source code](https://github.com/mirego/PinLayout/blob/master/Example/PinLayoutSample/UI/Examples/IntroObjectiveC/IntroObjectiveCView.m)
+:pushpin: This example is available in the Examples App. See example complete [source code](https://github.com/layoutBox/PinLayout/blob/master/Example/PinLayoutSample/UI/Examples/IntroObjectiveC/IntroObjectiveCView.m)
## Important notes about PinLayout's Objective-c interface
@@ -31,7 +34,7 @@ This example implement the PinLayout's Intro example using objective-c
The PinLayout's objective-c interface is available using the property `pinObjc` (instead of `pin` in Swift)
```
- [[view.pinObjc top] layout];
+ view.pinObjc.top().layout();
```
#### `layout()`
@@ -47,6 +50,6 @@ When using the Objective-c interface, the `layout` method must be called explici
view.pin.width(100)
// Objective-c
- [[view.pinObjc width:100] layout];
+ view.pinObjc.width(100).layout();
```
diff --git a/docs/pinlayout_example_adjust_to_container-landscape.png b/docs/pinlayout_example_adjust_to_container-landscape.png
index fb45561d..9e0693f4 100644
Binary files a/docs/pinlayout_example_adjust_to_container-landscape.png and b/docs/pinlayout_example_adjust_to_container-landscape.png differ
diff --git a/docs/pinlayout_example_wrapContent.png b/docs/pinlayout_example_wrapContent.png
new file mode 100644
index 00000000..372a06cb
Binary files /dev/null and b/docs/pinlayout_example_wrapContent.png differ
diff --git a/docs/pinlayout_exampleapp_automatic_sizing.png b/docs/pinlayout_exampleapp_automatic_sizing.png
new file mode 100644
index 00000000..77157fba
Binary files /dev/null and b/docs/pinlayout_exampleapp_automatic_sizing.png differ
diff --git a/docs/rtl_support.md b/docs/rtl_support.md
index 0db33396..8f86f9b0 100644
--- a/docs/rtl_support.md
+++ b/docs/rtl_support.md
@@ -37,4 +37,4 @@ override func layoutSubviews() {
}
```
-:pushpin: The complete RTL "Introduction example" [source code](https://github.com/mirego/PinLayout/blob/master/Example/PinLayoutSample/UI/Examples/IntroRTL/IntroRTLView.swift). This example is available in the [Examples App](#examples_app)
\ No newline at end of file
+:pushpin: The complete RTL "Introduction example" [source code](https://github.com/layoutBox/PinLayout/blob/master/Example/PinLayoutSample/UI/Examples/IntroRTL/IntroRTLView.swift). This example is available in the [Examples App](#examples_app)
\ No newline at end of file
diff --git a/docs/xcode_playground.md b/docs/xcode_playground.md
index 329f9680..37a92f4e 100644
--- a/docs/xcode_playground.md
+++ b/docs/xcode_playground.md
@@ -16,7 +16,7 @@ The method will execute PinLayout commands immediately. This method is **require
```swift
view.pin.top(20).bottom(20).width(100).layout()
- view2.pin.below(of: view).left().right().layout()
+ view2.pin.below(of: view).horizontally().layout()
```
**TIP**: If your codes needs to work in Xcode playgrounds, you may set to `true` the property `Pin.logMissingLayoutCalls`, this way any missing call to `layout()` will generate a warning in the Xcode console.
diff --git a/fastlane/Fastfile b/fastlane/Fastfile
deleted file mode 100644
index 5622d104..00000000
--- a/fastlane/Fastfile
+++ /dev/null
@@ -1,126 +0,0 @@
-# Change the syntax highlighting to Ruby
-# All lines starting with a # are ignored when running `fastlane`
-
-# If you want to automatically update fastlane if a new version is available:
-# update_fastlane
-
-# This is the minimum version number required.
-# Update this, if you use features of a newer version
-fastlane_version "2.29.0"
-
-#default_platform :ios
-
-##### iOS platform
-##############################################
-platform :ios do
- before_all do
- end
-
- lane :install do
- bundle_install
- cocoapods(use_bundle_exec: true, try_repo_update_on_error: true)
- end
-
- lane :build do
- install
-
- swiftlint(
- mode: :lint,
- config_file: ".swiftlint.yml",
- executable: "Pods/SwiftLint/swiftlint"
- )
-
- xcodebuild(
- project: "PinLayout.xcodeproj",
- scheme: "PinLayout-iOS",
- destination: "name=iPhone 8 Plus,OS=11.2",
- #configuration: "Debug",
- build: true,
- clean: true
- )
-
- xcodebuild(
- project: "PinLayout.xcodeproj",
- scheme: "PinLayout-tvOS",
- destination: "name=Apple TV",
- build: true,
- clean: true
- )
-
- xcodebuild(
- workspace: "PinLayout.xcworkspace",
- scheme: "PinLayoutSample",
- build: true,
- clean: true,
- #destination: "name=iPhone 8 Plus,OS=11.2",
- destination: "generic/platform=iOS\" CODE_SIGNING_REQUIRED=NO CODE_SIGN_IDENTITY=\""
- )
- end
-
- lane :tests do
- scan(
- scheme: "PinLayoutSample",
- workspace: "PinLayout.xcworkspace",
- devices: [
- "iPhone 7 (10.2)",
- "iPhone 7 (11.2)",
- "iPad Air (11.2)",
- "iPhone X (11.2)"
- ]
- )
- end
-
- lane :doc do
- jazzy
- end
-
- lane :travis do
- build
- tests
- pod_lib_lint(allow_warnings: true, verbose: false)
- end
-end
-
-
-##### MAC platform
-##############################################
-platform :mac do
- lane :install do
- bundle_install
- cocoapods(use_bundle_exec: true, try_repo_update_on_error: true)
- end
-
- lane :build do
- install
- xcodebuild(
- project: "PinLayout.xcodeproj",
- scheme: "PinLayout-macOS",
- #destination: "name=Apple TV",
- build: true
- #clean: true,
- #destination: "generic/platform=iOS\" CODE_SIGNING_REQUIRED=NO CODE_SIGN_IDENTITY=\""
- )
-
- #xcodebuild(
- # workspace: "PinLayout.xcworkspace",
- # scheme: "PinLayoutSample",
- # build: true,
- # clean: true,
- # #destination: "name=iPhone 8 Plus,OS=11.2",
- # destination: "generic/platform=iOS\" CODE_SIGNING_REQUIRED=NO CODE_SIGN_IDENTITY=\""
- #)
- end
-
- #lane :tests do
- # scan(
- # scheme: "PinLayout-macOS",
- # workspace: "PinLayout.xcworkspace",
- # destination: "platform=macOS,arch=x86_64"
- # )
- #end
-
- lane :travis do
- build
- # tests
- end
-end
diff --git a/index.md b/index.md
index 7095389e..eae3d345 100644
--- a/index.md
+++ b/index.md
@@ -1,17 +1,17 @@
- 
+
PinLayout
- 
-
+ 
+ 
- 
+
-
+
@@ -22,4 +22,4 @@ Extremely Fast views layouting without auto layout. No magic, pure code, full co
-[See GitHub PinLayout' page for the complete documentation](https://github.com/mirego/PinLayout) \ No newline at end of file +[See GitHub PinLayout' page for the complete documentation](https://github.com/layoutBox/PinLayout) \ No newline at end of file