Cleaned up readme.

Author: Mike Amaral

Demo/Neon/Neon/AppDelegate.swift

@@ -15,7 +15,7 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
     func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
         self.window = UIWindow.init(frame: UIScreen.mainScreen().bounds)
         self.window?.backgroundColor = UIColor.whiteColor()
-        self.window?.rootViewController = TestViewController()
+        self.window?.rootViewController = ViewController()
         self.window?.makeKeyAndVisible()
         return true
     }

Demo/Neon/Neon/TestViewController.swift

@@ -9,9 +9,10 @@
 import UIKit
 
 class TestViewController: UIViewController {
-    let anchorView : UIView = UIView()
-   let anchorView2 : UIView = UIView()
-   let anchorView3 : UIView = UIView()
+    let anchorViewA : UILabel = UILabel()
+    let anchorViewB : UILabel = UILabel()
+    let anchorViewC : UILabel = UILabel()
+    let anchorViewD : UILabel = UILabel()
     let view1 : UILabel = UILabel()
     let view2 : UILabel = UILabel()
     let view3 : UILabel = UILabel()
@@ -22,73 +23,90 @@ class TestViewController: UIViewController {
     override func viewDidLoad() {
         super.viewDidLoad()
 
-        anchorView.backgroundColor = UIColor(red: 229/255.0, green: 72/255.0, blue: 26/255.0, alpha: 1.0)
-        view.addSubview(anchorView)
-
-        anchorView2.backgroundColor = UIColor(red: 229/255.0, green: 72/255.0, blue: 26/255.0, alpha: 1.0)
-        view.addSubview(anchorView2)
-
-        anchorView3.backgroundColor = UIColor(red: 229/255.0, green: 72/255.0, blue: 26/255.0, alpha: 1.0)
-        view.addSubview(anchorView3)
+        anchorViewA.backgroundColor = UIColor(red: 229/255.0, green: 72/255.0, blue: 26/255.0, alpha: 1.0)
+        anchorViewA.text = ""
+        anchorViewA.textAlignment = .Center
+        anchorViewA.font = UIFont.boldSystemFontOfSize(20)
+        anchorViewA.textColor = UIColor.whiteColor()
+        view.addSubview(anchorViewA)
+
+        anchorViewB.backgroundColor = UIColor(red: 229/255.0, green: 72/255.0, blue: 26/255.0, alpha: 1.0)
+        anchorViewB.text = ""
+        anchorViewB.textAlignment = .Center
+        anchorViewB.font = UIFont.boldSystemFontOfSize(20)
+        anchorViewB.textColor = UIColor.whiteColor()
+        view.addSubview(anchorViewB)
+
+        anchorViewC.backgroundColor = UIColor(red: 229/255.0, green: 72/255.0, blue: 26/255.0, alpha: 1.0)
+        anchorViewC.text = "C"
+        anchorViewC.textAlignment = .Center
+        anchorViewC.font = UIFont.boldSystemFontOfSize(20)
+        anchorViewC.textColor = UIColor.whiteColor()
+        view.addSubview(anchorViewC)
+
+        anchorViewD.backgroundColor = UIColor(red: 229/255.0, green: 72/255.0, blue: 26/255.0, alpha: 1.0)
+        anchorViewD.text = "D"
+        anchorViewD.textAlignment = .Center
+        anchorViewD.font = UIFont.boldSystemFontOfSize(20)
+        anchorViewD.textColor = UIColor.whiteColor()
+        view.addSubview(anchorViewD)
 
         view1.backgroundColor = UIColor(red: 78/255.0, green: 102/255.0, blue: 131/255.0, alpha: 1.0)
         view1.text = "1"
         view1.textAlignment = .Center
         view1.font = UIFont.boldSystemFontOfSize(20)
         view1.textColor = UIColor.whiteColor()
-        anchorView.addSubview(view1)
+        anchorViewA.addSubview(view1)
 
         view2.backgroundColor = UIColor(red: 132/255.0, green: 169/255.0, blue: 57/255.0, alpha: 1.0)
         view2.text = "2"
         view2.textAlignment = .Center
         view2.font = UIFont.boldSystemFontOfSize(20)
         view2.textColor = UIColor.whiteColor()
-        anchorView.addSubview(view2)
+        anchorViewA.addSubview(view2)
 
         view3.backgroundColor = UIColor(red: 78/255.0, green: 102/255.0, blue: 131/255.0, alpha: 1.0)
         view3.text = "3"
         view3.textAlignment = .Center
         view3.font = UIFont.boldSystemFontOfSize(20)
         view3.textColor = UIColor.whiteColor()
-        anchorView2.addSubview(view3)
+        anchorViewA.addSubview(view3)
 
         view4.backgroundColor = UIColor(red: 132/255.0, green: 169/255.0, blue: 57/255.0, alpha: 1.0)
         view4.text = "4"
         view4.textAlignment = .Center
         view4.font = UIFont.boldSystemFontOfSize(20)
         view4.textColor = UIColor.whiteColor()
-        anchorView2.addSubview(view4)
+        anchorViewB.addSubview(view4)
 
         view5.backgroundColor = UIColor(red: 78/255.0, green: 102/255.0, blue: 131/255.0, alpha: 1.0)
         view5.text = "5"
         view5.textAlignment = .Center
         view5.font = UIFont.boldSystemFontOfSize(20)
         view5.textColor = UIColor.whiteColor()
-        anchorView3.addSubview(view5)
+        anchorViewB.addSubview(view5)
 
         view6.backgroundColor = UIColor(red: 132/255.0, green: 169/255.0, blue: 57/255.0, alpha: 1.0)
         view6.text = "6"
         view6.textAlignment = .Center
         view6.font = UIFont.boldSystemFontOfSize(20)
         view6.textColor = UIColor.whiteColor()
-        anchorView3.addSubview(view6)
+        anchorViewB.addSubview(view6)
     }
 
     override func viewWillLayoutSubviews() {
         super.viewWillLayoutSubviews()
 
-        view.groupAgainstEdge(group: .Horizontal, views: [anchorView, anchorView2, anchorView3], againstEdge: .Top, padding: 100, width: 200, height: 200)
-//        anchorView.anchorInCenter(width: 200, height: 200)
+        view.groupAgainstEdge(group: .Horizontal, views: [anchorViewA, anchorViewB], againstEdge: .Top, padding: 120, width: 300, height: 300)
+//        anchorViewA.anchorInCorner(.TopLeft, xPad: 150, yPad: 100, width: 200, height: 200)
+//        anchorViewB.anchorInCorner(.TopRight, xPad: 150, yPad: 100, width: 200, height: 200)
+//        anchorViewC.anchorInCorner(.BottomLeft, xPad: 150, yPad: 100, width: 200, height: 200)
+//        anchorViewD.anchorInCorner(.BottomRight, xPad: 150, yPad: 100, width: 200, height: 200)
+
         let padding : CGFloat = 10.0
         let size : CGFloat = 50.0
 
-        view1.anchorInCorner(.TopLeft, xPad: padding, yPad: padding, width: size, height: size)
-        view2.alignAndFillWidth(align: .ToTheRightMatchingTop, relativeTo: view1, padding: padding, height: size / 2.0)
-
-        view3.anchorInCorner(.BottomRight, xPad: padding, yPad: padding, width: size, height: size)
-        view4.alignAndFillHeight(align: .AboveCentered, relativeTo: view3, padding: padding, width: size / 2.0)
-
-        view5.anchorInCorner(.TopRight, xPad: padding, yPad: padding, width: size, height: size)
-        view6.alignAndFill(align: .ToTheLeftMatchingTop, relativeTo: view5, padding: padding)
+        anchorViewA.groupAgainstEdge(group: .Horizontal, views: [view1, view2, view3], againstEdge: .Left, padding: padding, width: size, height: size)
+        anchorViewB.groupAgainstEdge(group: .Vertical, views: [view4, view5, view6], againstEdge: .Bottom, padding: padding, width: size, height: size)
     }
 }

Demo/Neon/Neon/ViewController.swift

@@ -202,15 +202,15 @@ class ViewController: UIViewController {
         view6.alignAndFill(align: .UnderMatchingLeft, relativeTo: view2, padding: 10)
         view7.alignAndFillHeight(align: .AboveMatchingRight, relativeTo: view1, padding: 10, width: 60)
         view8.alignAndFillWidth(align: .ToTheLeftMatchingTop, relativeTo: view7, padding: 10, height: 70)
-        view9.alignBetweenVertical(align: .UnderMatchingLeft, topView: view8, bottomView: anchorView, padding: 10, width: 100)
-        view10.alignBetweenHorizontal(align: .ToTheRightMatchingTop, leftView: view9, rightView: view7, padding: 10, height: view9.height())
+        view9.alignBetweenVertical(align: .UnderMatchingLeft, primaryView: view8, secondaryView: anchorView, padding: 10, width: 100)
+        view10.alignBetweenHorizontal(align: .ToTheRightMatchingTop, primaryView: view9, secondaryView: view7, padding: 10, height: view9.height())
         view14.anchorInCorner(.BottomLeft, xPad: 10, yPad: 10, width: 100, height: 100)
-        view15.alignBetweenVertical(align: .UnderMatchingLeft, topView: view9, bottomView: view14, padding: 10, width: 50)
-        view16.alignBetweenHorizontal(align: .ToTheRightMatchingBottom, leftView: view14, rightView: view6, padding: 10, height: 40)
-        view17.alignBetweenHorizontal(align: .ToTheRightMatchingTop, leftView: view15, rightView: anchorView, padding: 10, height: 100)
-        view18.alignBetweenVertical(align: .UnderMatchingLeft, topView: anchorView, bottomView: view16, padding: 10, width: anchorView.width())
-        view19.alignBetweenHorizontal(align: .ToTheRightMatchingTop, leftView: view14, rightView: view18, padding: 10, height: 50)
-        view20.alignBetweenVertical(align: .UnderCentered, topView: view17, bottomView: view19, padding: 10, width: view17.width())
+        view15.alignBetweenVertical(align: .UnderMatchingLeft, primaryView: view9, secondaryView: view14, padding: 10, width: 50)
+        view16.alignBetweenHorizontal(align: .ToTheRightMatchingBottom, primaryView: view14, secondaryView: view6, padding: 10, height: 40)
+        view17.alignBetweenHorizontal(align: .ToTheRightMatchingTop, primaryView: view15, secondaryView: anchorView, padding: 10, height: 100)
+        view18.alignBetweenVertical(align: .UnderMatchingLeft, primaryView: anchorView, secondaryView: view16, padding: 10, width: anchorView.width())
+        view19.alignBetweenHorizontal(align: .ToTheRightMatchingTop, primaryView: view14, secondaryView: view18, padding: 10, height: 50)
+        view20.alignBetweenVertical(align: .UnderCentered, primaryView: view17, secondaryView: view19, padding: 10, width: view17.width())
     }
 
     override func touchesMoved(touches: Set<UITouch>, withEvent event: UIEvent?) {

README.md

@@ -4,7 +4,7 @@
 
 Neon is built around how user interfaces are naturally designed - primary views are anchored to the sides / corners of the screen, and secondary views are laid out relative to them. Views expand and shrink to fill the screen, so building dynamic layouts that look great on the smallest phones all the way up to biggest tablets is quick and easy. No more springs and struts. No more whacky visual format language. No more auto layout contraints. We're not robots, so why should we build our UIs like we are?
 
-#### More will be coming very soon, so stay tuned! In the meantime, here's an intentionally convoluted example to show how easy it is to build very complex and dynamic layouts with Neon. The following was created with only *20 lines of code*. That's one line of code per view!
+#### More will be coming very soon, so stay tuned! In the meantime, here's an intentionally convoluted example to show how easy it is to build very complex and dynamic layouts with Neon. The following layout was created with only *20 lines of code*. That's one line of code per view!
 
 ![Demo](Screenshots/demo.gif)
 
@@ -111,7 +111,7 @@ view12.align(.ToTheLeftMatchingTop, relativeTo: anchorView, padding: padding, wi
 
 ## Align and fill
 
-You don't always know or want to specify the size of a view that you want to place relative to another. You may want to fill the width, height, or the entire rest of the superview after aligning with the sibling. Using `alignAndFillWidth()`, `alignAndFillHeight()`, and `alignAndFill()`, you can do just that!  Combined with the different alignment types discussed earlier, we're starting to see how more complex layouts can be built very easily:
+You don't always know or what to specify the size of a view that you want to layout relative to another, but rather you want to either fill the width, height, or the entire rest of the superview, after aligning with the sibling. Combined with all the different alignment types discussed earlier, we're starting to see how more complex layouts can be built very easily:
 
 ```swift
 view2.alignAndFillWidth(align: .ToTheRightMatchingTop, relativeTo: view1, padding: padding, height: size / 2.0)
@@ -121,14 +121,53 @@ view6.alignAndFill(align: .ToTheLeftMatchingTop, relativeTo: view5, padding: pad
 
 ![Align Fill](Screenshots/align_fill.png)
 
-## Todo
 
-- [ ] Finish initial implementation
-- [ ] README documentation
-- [ ] Code documentation
-- [ ] Code coverage
+## Align between
+
+Sometimes you want a view to sit between to other views, filling the space between them. Using alignBetweenHorizontal() and alignBetweenVertical(), doing that is super easy! Choose one of your sibling views you want to align your view relative to and pass that in as your `primaryView`. We will use the specified `align` parameter to match that `primaryView` appropriately, and automatically fill either the horizontal or vertical span between the it and the `secondaryView`.
+
+```swift
+view1.alignBetweenHorizontal(align: .ToTheRightMatchingTop, primaryView: anchorViewA, secondaryView: anchorViewB, padding: padding, height: size)
+view2.alignBetweenVertical(align: .UnderCentered, primaryView: anchorViewB, secondaryView: anchorViewD, padding: padding, width: size)
+view3.alignBetweenHorizontal(align: .ToTheLeftMatchingBottom, primaryView: anchorViewD, secondaryView: anchorViewC, padding: padding, height: size)
+view4.alignBetweenVertical(align: .AboveMatchingRight, primaryView: anchorViewC, secondaryView: anchorViewA, padding: padding, width: size)
+```
+
+![Align Between Fill](Screenshots/align_between_fill.png)
+
+
+## Grouping
+
+Another common use-case is the *grouping* of sibling views, aligned in a row or column. Using what we've already learned about anchoring views in the center, in a corner, or against an edge, we can also do the same with groups of views!
+
+The primary difference with grouping, is that it is done by the *parent view,* or `superview` of a group of views. For example, let's let two different views center a group of their subviews in each of the two different `Group` configurations, `.Horizontal` and `.Vertical`:
+
+```swift
+anchorViewA.groupInCenter(group: .Horizontal, views: [view1, view2, view3], padding: padding, width: size, height: size)
+anchorViewB.groupInCenter(group: .Vertical, views: [view4, view5, view6], padding: padding, width: size, height: size)
+```
+
+![Group in center](Screenshots/group_in_center.png)
+
+How about grouping views in the corner?
+
+```swift
+anchorViewA.groupInCorner(group: .Horizontal, views: [view1, view2, view3], inCorner: .TopLeft, padding: padding, width: size, height: size)
+anchorViewB.groupInCorner(group: .Vertical, views: [view4, view5, view6], inCorner: .BottomRight, padding: padding, width: size, height: size)
+```
+
+![Group in corner](Screenshots/group_in_corner.png)
+
+As you might have expected, you can also group either horizontally and vertically against any edge as well:
+
+```swift
+anchorViewA.groupAgainstEdge(group: .Horizontal, views: [view1, view2, view3], againstEdge: .Left, padding: padding, width: size, height: size)
+anchorViewB.groupAgainstEdge(group: .Vertical, views: [view4, view5, view6], againstEdge: .Bottom, padding: padding, width: size, height: size)
+```
+
+![Group against edge](Screenshots/group_against_edge.png)
 
 
 ## License
 
-The source is made available under the MIT license. See LICENSE.txt for details.
+The source is made available under the MIT license. See LICENSE.txt for details.