@@ -38,6 +38,8 @@ Extremely Fast views layouting without auto layout. No magic, pure code, full co
3838 * [ Edges] ( #edges )
3939 * [ Relative positionning] ( #relative_positionning )
4040 * [ Width, height and size] ( #width_height_size )
41+ * [ minWidth, maxWidth, minHeight, maxHeight] ( #minmax_width_height_size )
42+ * [ justify, align] ( #justify_align )
4143 * [ Margins] ( #margins )
4244 * [ Warnings] ( #warnings )
4345 * [ More examples] ( #more_examples )
@@ -46,6 +48,7 @@ Extremely Fast views layouting without auto layout. No magic, pure code, full co
4648* [ FAQ] ( #faq )
4749* [ Comments, ideas, suggestions, issues, ....] ( #comments )
4850
51+
4952<br >
5053
5154:pushpin : PinLayout is actively updated, adding more features weekly. So please come often to see latest changes. You can also ** Star** it to be able to retrieve it easily later.
@@ -127,10 +130,10 @@ This example layout an image, a UISegmentedControl, a label and a line separator
127130override func layoutSubviews () {
128131 super .layoutSubviews ()
129132
130- logo.pin .topLeft ().size (100 ).margin (topLayoutGuide + 10 , 10 , 10 )
133+ logo.pin .topLeft ().size (100 ).marginTop ( 10 ). marginLeft ( 1010 )
131134 segmented.pin .right (of : logo, aligned : .top ).right ().marginHorizontal (10 )
132135 textLabel.pin .below (of : segmented, aligned : .left ).right ().marginTop (10 ).marginRight (10 ).sizeToFit ()
133- separatorView.pin .below (of : logo, textLabel, aligned : .left ).right (to : segmented.edge .right ).marginTop (10 )
136+ separatorView.pin .below (of : [ logo, textLabel] , aligned : .left ).right (to : segmented.edge .right ).marginTop (10 )
134137}
135138```
136139
@@ -546,7 +549,7 @@ The following example contains a UISwitch. Below a UITextField that is visible o
546549
547550
548551``` swift
549- formTitleLabel.pin .topCenter ().margin (margin)
552+ formTitleLabel.pin .topCenter ().marginTop (margin)
550553 nameField.pin .below (of : formTitleLabel).left ().right ().height (40 ).margin (margin)
551554
552555 ageSwitch.pin .below (of : nameField).left ().right ().height (40 ).margin (margin)
@@ -567,31 +570,23 @@ PinLayout has methods to set the view’s height and width.
567570
568571** Methods:**
569572
570- * ` width(_ width: CGFloat) `
571- The value specifies the width of the view in pixels. Value must be non-negative.
572-
573- * ` width(percent: Percent) `
574- The value specifies the width of the view in percentage of its superview. Value must be non-negative.
575-
573+ * ` width(_ width: CGFloat) ` / ` width(percent: Percent) `
574+ The value specifies the view's width in pixels or in percentage of its superview. Value must be non-negative.
576575* ` width(of view: UIView) `
577576Set the view’s width to match the referenced view’s width.
578577
579- * ` height(_ height: CGFloat) `
580- The value specifies the height of the view in pixels.
581- * ` height(percent: Percent) `
582- The value specifies the height of the view in percentage of its superview. Value must be non-negative.
578+ * ` height(_ height: CGFloat) ` / ` height(percent: Percent) `
579+ The value specifies the view's height in pixels or in percentage of its superview. Value must be non-negative.
583580* ` height(of view: UIView) `
584581Set the view’s height to match the referenced view’s height
585-
586- * ` size(_ size: CGSize) `
587- The value specifies the size (width and value) of the view in pixels. Values must be non-negative.
588- * ` size(_ percent: Percent) `
589- The value specifies the width and the height of the view in percentage of its superview. Values must be non-negative.
582+ * ` size(_ size: CGSize) ` / ` size(_ percent: Percent) `
583+ The value specifies view's width and the height in pixels or in percentage of its superview. Values must be non-negative.
590584* ` size(_ sideLength: CGFloat) `
591585The value specifies the width and the height of the view in pixels, creating a square view. Values must be non-negative.
592586* ` size(of view: UIView) `
593587Set the view’s size to match the referenced view’s size
594588
589+ :pushpin : width/height/size have a higher priority than edges and anchors positionning.
595590
596591###### Usage examples:
597592``` swift
@@ -609,6 +604,111 @@ Set the view’s size to match the referenced view’s size
609604
610605<br />
611606
607+ ## minWidth, maxWidth, minHeight, maxHeight <a name =" minmax_width_height_size " ></a >
608+
609+ PinLayout has methods to set the view’s minimum and maximum width, and minimum and maximum height.
610+
611+ ** Methods:**
612+
613+ * ` minWidth(_ width: CGFloat) ` / ` minWidth(_ percent: Percent) `
614+ The value specifies the view's minimum width of the view in pixels or in percentage of its superview. Value must be non-negative.
615+
616+ * ` maxWidth(_ width: CGFloat) ` / ` maxWidth(_ percent: Percent) `
617+ The value specifies the view's maximum width of the view in pixels or in percentage of its superview. Value must be non-negative.
618+
619+ * ` minHeight(_ height: CGFloat) ` / ` minHeight(_ percent: Percent) `
620+ The value specifies the view's minimum height of the view in pixels or in percentage of its superview. Value must be non-negative.
621+
622+ * ` maxHeight(_ height: CGFloat) ` / ` maxHeight(_ percent: Percent) `
623+ The value specifies the view's maximum height of the view in pixels or in percentage of its superview. Value must be non-negative.
624+
625+ ###### Usage examples:
626+ ``` swift
627+ view.pin .left (10 ).right (10 ).maxWidth (200 )
628+ view.pin .width (100 % ).maxWidth (250 )
629+
630+ view.pin .top ().bottom ().maxHeight (100 )
631+ view.pin .top ().height (50 % ).maxHeight (200 )
632+ ```
633+
634+ :pushpin : minWidth/maxWidth & minHeight/maxHeight have the highest priority. Higher than sizes (width/height/size) and edges positionning (top/left/bottom/right). Their values are always fullfilled.
635+
636+
637+ ###### Example:
638+ This example layout a view 20 pixels from the top, and horizontally from left to right with a maximum width of 200 pixels. If the superview is smaller than 200 pixels, the view will take the full horizontal space, but for a larger superview, the view will be centered.
639+
640+ ![ ] ( docs/pinlayout-example-maxWidth.png )
641+
642+
643+ ``` swift
644+ viewA.pin .top (20 ).hCenter ().width (100 % ).maxWidth (200 )
645+ ```
646+
647+ This is an equivalent solutions using the ` justify() ` method. This method is explained in the next section:
648+
649+ ``` swift
650+ viewA.pin .top (20 ).left ().right ().maxWidth (200 ).justify (.center )
651+ ```
652+
653+ <br />
654+
655+ ## justify() / align() <a name =" justify_align " ></a >
656+
657+ ** Method:**
658+
659+ * ` justify(_ : HorizontalAlign) `
660+ Justify the view horizontally. This method justify horizontally a view in situations where the left, right and the width has been set (using either width/minWidth/maxWidth). In this situation the view may be smaller than the space available between the left and the right edges. A view can be justified ** left** , ** center** or ** right** .
661+
662+ * ` align(_ : VerticalAlign) `
663+ Align the view vertically. This method align vertically a view in situations where the top, bottom and the height has been set (using either height/minHeight/maxHeight). In this situation the view may be smaller than the space available between the top and the bottom edges. A view can be aligned ** top** , ** center** or ** bottom** .
664+
665+ ###### Usage examples:
666+ ``` swift
667+ view.pin .left ().right ().marginHorizontal (20 ).maxWidth (200 ).justify (.center )
668+ view.pin .below (of : A).above (of : B).width (40 ).align (.center )
669+ ```
670+
671+
672+ ###### Example:
673+ This example layout a view between its superview left and right edges with a maximum size of 200 pixels. Without the usage of the ` justify(:HorizontalAlign) ` method, the view will be justified on the left:
674+
675+ ![ ] ( docs/pinlayout-example-justify-left.png )
676+
677+ ``` swift
678+ viewA.pin .left ().right ().maxWidth (200 )
679+ ```
680+
681+
682+ The same example, but using ` justify(.center) ` :
683+
684+ ![ ] ( docs/pinlayout-example-justify-center.png )
685+
686+
687+ ``` swift
688+ viewA.pin .left ().right ().maxWidth (200 ).justify (.center )
689+ ```
690+
691+ And finally using ` justify(.right) ` :
692+
693+ ![ ] ( docs/pinlayout-example-justify-right.png )
694+
695+
696+ ``` swift
697+ viewA.pin .left ().right ().maxWidth (200 ).justify (.right )
698+ ```
699+
700+ ###### Example:
701+ This example centered horizontally the view B in the space remaining at the right of the view A. The view B has a width of 100 pixels..
702+
703+ ![ ] ( docs/pinlayout-example-justify-remaining-space.png )
704+
705+ ``` swift
706+ viewB.pin .left (of : viewA, aligned : .top ).right ().width (100 ).justify (.center )
707+ ```
708+
709+ <br />
710+
711+
612712## Margins <a name =" margins " ></a >
613713PinLayout applies margins similar to CSS.
614714
@@ -628,7 +728,7 @@ PinLayout has methods to apply margins.
628728* ` margin(_ value: CGFloat) `
629729* ` margin(_ vertical: CGFloat, _ horizontal: CGFloat) `
630730* ` margin(_ top: CGFloat, _ horizontal: CGFloat, _ bottom: CGFloat) `
631- * ` margin(_ top: CGFloat, _ left : CGFloat, _ bottom: CGFloat, _ right : CGFloat) `
731+ * ` margin(_ top: CGFloat, _ right : CGFloat, _ bottom: CGFloat, _ left : CGFloat) `
632732
633733* ` pinEdges() `
634734
@@ -769,7 +869,8 @@ In debug, PinLayout will display warnings when pin rules cannot be applied.
769869* The newly pinned attributes conflict with other already pinned attributes.
770870Example:
771871` view.pin.left(10).right(10).width(200) `
772- 👉 Layout Conflict: ` width(200) won't be applied since it conflicts with the following already set properties: left: 0, right: 10. `
872+ 👉 Layout Conflict: ` width(200) won't be applied since it conflicts with the following already set properties: left: 0, right: 10. `
873+
773874* The newly pinned attributes have already been set to another value.
774875Example:
775876` view.pin.width(100).width(200) `
@@ -787,11 +888,10 @@ Example:
787888` view.pin.width(-100) `
788889👉 Layout Warning: ` The width (-100) must be greater or equal to 0. `
789890
790-
791- width and/or height cannot be determined using current PinLaoyout's commands
792-
793- size(...)'s height won't be aplied...
794- size(...)'s widht won't be applied....
891+ * ` justify(.left|.center|.right) ` is used without having set the left and the right coordinates.
892+ Example:
893+ ` view.pin.left().width(250).justify(.center) `
894+ 👉 PinLayout Warning: justify(center) won't be applied, the left and right coordinates must be set to justify the view.
795895
796896### Disabling warnings
797897
@@ -955,11 +1055,6 @@ This app is available in the `Example` folder. Note that you must do a `pod inst
9551055<br >
9561056
9571057
958- ## Coming soon <a name =" coming_soon " ></a >
959- * minWidth/maxWidth, minHeight/maxHeight
960- * ...
961-
962-
9631058### Contributing, comments, ideas, suggestions, issues, .... <a name =" comments " ></a >
9641059For any ** comments** , ** ideas** , ** suggestions** , ** issues** , simply open an [ issue] ( https://github.com/mirego/PinLayout/issues ) .
9651060
0 commit comments