Merge pull request #8 from lucdion/rename_addContainer_to_addItem

Renamed the method `addContainer()` to `addItem()`.

Author: Luc Dion

CHANGELOG.md

@@ -7,7 +7,22 @@
 
 # Change Log
 
+## [1.1.0](https://github.com/lucdion/FlexLayout/releases/tag/1.1.0)
+Released on 2017-08-23
+
+* Add missing markDirty() method
+* :warning: BREAKING CHANGE: Renamed the method `addContainer()` to `addItem(). It is clearer that the added view is in fact a flex item, and not just a flex container.
+  * Added by [Luc Dion](https://github.com/lucdion) in Pull Request [#8](https://github.com/lucdion/FlexLayout/pull/8 ) 
+* Add an implementation of the Ray Wenderlich Yoga Tutorial  
+  * Added by [Luc Dion](https://github.com/lucdion) in Pull Request [#7](https://github.com/lucdion/FlexLayout/pull/7) 
+
+## [1.0.0](https://github.com/lucdion/FlexLayout/releases/tag/1.0.0)
+Released on 2017-08-20
+
+* Initial official release.
+* Add unit tests 
+
 ## [0.1.1](https://github.com/lucdion/FlexLayout/releases/tag/0.1.1)
 Released on 2017-08-02
 
-* Initial official release.
+* Initial beta release.

Example/FlexLayoutSample/UI/Examples/Intro/IntroView.swift

@@ -36,16 +36,16 @@ class IntroView: BaseView {
         bottomLabel.numberOfLines = 0
 
         rootFlexContainer.flex.direction(.column).padding(12).define { (flex) in
-            flex.addContainer().direction(.row).define { (flex) in
+            flex.addItem().direction(.row).define { (flex) in
                 flex.addItem(imageView).width(100).aspectRatio(of: imageView)
 
-                flex.addContainer().direction(.column).paddingLeft(12).grow(1).shrink(1).define { (flex) in
+                flex.addItem().direction(.column).paddingLeft(12).grow(1).shrink(1).define { (flex) in
                     flex.addItem(segmentedControl).marginBottom(12).grow(1)
                     flex.addItem(label)
                 }
             }
 
-            flex.addContainer().height(1).marginTop(12).backgroundColor(.lightGray)
+            flex.addItem().height(1).marginTop(12).backgroundColor(.lightGray)
             flex.addItem(bottomLabel).marginTop(12)
         }
 

Example/FlexLayoutSample/UI/Examples/YogaExampleA/YogaExampleAView.swift

@@ -24,13 +24,8 @@ class YogaExampleAView: BaseView {
 
         // Yoga's C Example
         rootFlexContainer.flex.direction(.row).padding(20).define { (flex) in
-            flex.addContainer().width(80).marginEnd(20).define({ (flex) in
-                flex.view.backgroundColor = .flexLayoutColor
-            })
-
-            flex.addContainer().height(25).alignSelf(.center).grow(1).define({ (flex) in
-                flex.view.backgroundColor = .black
-            })
+            flex.addItem().width(80).marginEnd(20).backgroundColor(.flexLayoutColor)
+            flex.addItem().height(25).alignSelf(.center).grow(1).backgroundColor(.black)
         }
         addSubview(rootFlexContainer)
     }

Example/FlexLayoutSample/UI/Examples/YogaExampleE/YogaExampleEView.swift

@@ -29,14 +29,9 @@ class YogaExampleEView: BaseView {
         rootFlexContainer.flex.define { (flex) in
             flex.addItem(imageView).grow(1)
 
-            flex.addContainer().direction(.row).padding(20).alignItems(.center).define({ (flex) in
-                flex.addContainer().size(50).define({ (flex) in
-                    flex.view.backgroundColor = .flexLayoutColor
-                })
-
-                flex.addContainer().height(25).marginStart(20).grow(1).define({ (flex) in
-                    flex.view.backgroundColor = .black
-                })
+            flex.addItem().direction(.row).padding(20).alignItems(.center).define({ (flex) in
+                flex.addItem().size(50).backgroundColor(.flexLayoutColor)
+                flex.addItem().height(25).marginStart(20).grow(1).backgroundColor(.black)
             })
         }
         addSubview(rootFlexContainer)

FlexLayout.podspec

@@ -1,7 +1,7 @@
 
 Pod::Spec.new do |s|
   s.name         = "FlexLayout"
-  s.version      = "1.0.0"
+  s.version      = "1.1.0"
   s.summary      = "FlexLayout"
 
   s.homepage     = "https://github.com/lucdion/FlexLayout.git"

README.md

@@ -88,17 +88,17 @@ init() {
    // Column container
    rootFlexContainer.flex.direction(.column).padding(12).define { (flex) in
         // Row container
-        flex.addContainer().direction(.row).define { (flex) in
+        flex.addItem().direction(.row).define { (flex) in
             flex.addItem(imageView).width(100).aspectRatio(of: imageView)
 
             // Column container
-            flex.addContainer().direction(.column).paddingLeft(12).grow(1).define { (flex) in
+            flex.addItem().direction(.column).paddingLeft(12).grow(1).define { (flex) in
                 flex.addItem(segmentedControl).marginBottom(12).grow(1)
                 flex.addItem(label)
             }
         }
 
-        flex.addContainer().height(1).marginTop(12).backgroundColor(.lightGray)
+        flex.addItem().height(1).marginTop(12).backgroundColor(.lightGray)
         flex.addItem(bottomLabel).marginTop(12)
     }
 }
@@ -256,7 +256,6 @@ These results also means that **FlexLayout and PinLayout are by far faster than
 
 * **FlexLayout additions**: 
 	* addItem()
-	* addContainer()
 	* define()
 	* layout()
 	* isIncludedInLayout()
@@ -305,18 +304,18 @@ This method adds a flex item (UIView) to a flex container. Internally the method
 ```
 <br>
 
-### addContainer()
+### addItem()
 - Applies to: `flex containers`
 - Returns: FlexLayout interface of the newly created flex item.
 
 **Method:**
 
-* **`addContainer() -> Flex`**  
-This method is similar to `addItem()` except that it also creates the flex container's UIView. Internally the method creates a UIView, adds it has subviews and finally enables flexbox. This is useful to add a flex container easily when you don't need to refer to it later.
+* **`addItem() -> Flex`**  
+This method is similar to `addItem(: UIView)` except that it also creates the flex item's UIView. Internally the method creates an UIView, adds it has subviews and enables flexbox. This is useful to add a flex item/container easily when you don't need to refer to it later.
 
 ###### Usage examples:
 ```swift
-  view.flex.addContainer().direction(.row).padding(10)
+  view.flex.addItem().direction(.row).padding(10)
 ```
 <br>
 
@@ -331,10 +330,10 @@ This method is used to structure your code so that it matches the flexbox struct
 
 ###### Usage examples:
 ```swift
-  view.flex.addContainer().define { (flex) in
+  view.flex.addItem().define { (flex) in
       flex.addItem(imageView).grow(1)
 
-      flex.addContainer().direction(.row).define { (flex) in
+      flex.addItem().direction(.row).define { (flex) in
           flex.addItem(titleLabel).grow(1)
           flex.addItem(priceLabel)
       }
@@ -646,8 +645,7 @@ This property controls dynamically if a flexbox's UIView is included or not in t
 
 FlexLayout automatically includes the UIView when:
 * The first time `UIView.flex` property is accessed
-* When a child view is added to a flexbox container using `addChild(:UIView)`
-* When a flexbox container is created using `addContainer()`
+* When a child view is added to a flexbox container using `addItem(:UIView)` or `addItem()`
 
 <br>
 
@@ -746,6 +744,7 @@ Using these properties you can control the size and position of an absolute item
 ```swift
   view.flex.position(.absolute).top(10).right(10).width(100).height(50)
 ```
+:pushpin: See the "Yoga C" example in the [Examples App](#examples_app). [Source code](https://github.com/lucdion/FlexLayout/blob/master/Example/FlexLayoutSample/UI/Examples/YogaExampleC/YogaExampleCView.swift)
 
 <br>
 
@@ -923,8 +922,8 @@ Set the flex item's UIView background color.
 ###### Usage examples:
 ```swift
   // Create a gray column container and add a black horizontal line separator 
-  flex.addContainer().backgroundColor(.gray).define { (flex) in
-      flex.addContainer().height(1).backgroundColor(.black)
+  flex.addItem().backgroundColor(.gray).define { (flex) in
+      flex.addItem().height(1).backgroundColor(.black)
   } 
 ```
 

Sources/FlexLayout.swift

@@ -76,12 +76,6 @@ public class Flex {
     //
     // Creation / definition
     //
-    @discardableResult
-    public func addContainer() -> Flex {
-        let view = UIView()
-        return addItem(view)
-    }
-    
     @discardableResult
     public func addItem() -> Flex {
         let view = UIView()

docs/benchmark/Benchmark.md

@@ -94,15 +94,15 @@ Remark how FlexLayout and PinLayout code is concise and clean compared to Manual
 ```swift
 flex.addItem(contentView).padding(8).define { (flex) in
     flex.addItem(contentView).padding(8).define { (flex) in
-        flex.addContainer().direction(.row).justifyContent(.spaceBetween).define { (flex) in
+        flex.addItem().direction(.row).justifyContent(.spaceBetween).define { (flex) in
             flex.addItem(actionLabel)
             flex.addItem(optionsLabel)
         }
 
-        flex.addContainer().direction(.row).alignItems(.center).define({ (flex) in
+        flex.addItem().direction(.row).alignItems(.center).define({ (flex) in
             flex.addItem(posterImageView).width(50).height(50).marginRight(8)
 
-            flex.addContainer().grow(1).define({ (flex) in
+            flex.addItem().grow(1).define({ (flex) in
                 flex.addItem(posterNameLabel)
                 flex.addItem(posterHeadlineLabel)
                 flex.addItem(posterTimeLabel)
@@ -115,13 +115,13 @@ flex.addItem(contentView).padding(8).define { (flex) in
         flex.addItem(contentTitleLabel)
         flex.addItem(contentDomainLabel)
 
-        flex.addContainer().direction(.row).justifyContent(.spaceBetween).marginTop(4).define({ (flex) in
+        flex.addItem().direction(.row).justifyContent(.spaceBetween).marginTop(4).define({ (flex) in
             flex.addItem(likeLabel)
             flex.addItem(commentLabel)
             flex.addItem(shareLabel)
         })
 
-        flex.addContainer().direction(.row).marginTop(2).define({ (flex) in
+        flex.addItem().direction(.row).marginTop(2).define({ (flex) in
             flex.addItem(actorImageView).width(50).height(50).marginRight(8)
             flex.addItem(actorCommentLabel).grow(1)
         })