README.md in motion-kit-0.10.11 vs README.md in motion-kit-0.11.0

- old
+ new

@@ -18,11 +18,11 @@ 5. Non-polluting 6. ProMotion/RMQ/SugarCube-compatible (kind of goes hand-in-hand with being non-polluting) 7. Styles and layouts are "just code" (not hash-based like in Teacup) 8. Written by [the authors][authors] of [ProMotion][] and [Teacup][] -[authors]: CONTRIBUTORS.md +[authors]: CONTRIBUTORS.yaml [Colin]: https://github.com/colinta [Jamon]: https://github.com/jamonholmgren [ProMotion]: https://github.com/clearsightstudio/ProMotion [RMQ]: https://github.com/infinitered/rmq [Teacup]: https://github.com/rubymotion/teacup @@ -113,10 +113,12 @@ end def button_style # this will call 'setTitle(forState:)' via a UIButton helper title 'Press it!' + size_to_fit + # this shorthand is much better! More about frame helpers below. center ['50%', '50% + 50'] end end @@ -265,10 +267,36 @@ end ``` +### Using child-layouts + +If you have a very complicated layout that you want to break up into child +layouts, that is supported as well: + +```ruby +class ParentLayout < MK::Layout + + def layout + add ChildLayout, :child_id + end + +end +``` + +The id is (as always) optional, but allows you to fetch the layout using +`get(id)`. + +```ruby +layout.get(:child_id) # => ChildLayout +``` + +Calling `get(:child_id).view` will return the *view* associated with that +layout. + + ### Setting a custom root view If you need to use a custom root view, you can use the `root` method from within the `layout` method. When you create or assign the root view this way, you must assign subviews and styles *inside* a block that you pass to `root`. @@ -591,24 +619,34 @@ x.is == 15 # setting the priority: (x.is >= 10).priority(:required) (x.is == 15).priority(:low) + # setting the identifier + x.equals(15).identifier('foo') end ``` But of course with AutoLayout you set up *relationships* between views. Using the element-id as a placeholder for a view works especially well here. ```ruby constraints do - top_left.equals x: 5, y:5 + top_left.equals x: 5, y: 5 # this sets the origin relative to the superview + top_left.equals(:superview).plus([5, 5]) # this will do the same thing! + width.equals(:foo).minus(10) # searches for a view named :foo height.equals(:foo).minus(10) # that's repetitive, so just set 'size' size.equals(:foo).minus(10) size.equals(:foo).minus([10, 15]) # 10pt thinner, 15pt shorter + + # if you are using a view that has a sensible intrinsic size, like an image, + # you can use :scale to have the width or height adjusted according to the + # other size + width.equals(:superview) + height(:scale) # scale the height according to the width end ``` Just like with frame helpers you can use the `:element_id` to refer to another view, but get this: the view need not be created yet! This is because when you @@ -696,9 +734,61 @@ @layout.add_constraints(self) super end end +``` + +#### Animating and Changing constraints + +It might feel natural to treat constraints as "frame setters", but they are +persistent objects that are attached to your views. This means if you create +new constraints, like during a screen rotation, your old constraints don't “go +away”. For example: + +```ruby +def label_style + portrait do + left 10 + end + + landscape do + left 15 # adds *another* constraint on the left attribute - in addition to the `left 10` constraint! + end +end +``` + +Instead, you should retain the constraint and make changes to it directly: + +```ruby + initial do + constraints do + @label_left_constraint = left 10 + end + end + + reapply do + portrait do + @label_left_constraint.equals 10 + end + + landscape do + @label_left_constraint.equals 15 + end + end +``` + +If you want to animate a constraint change, you can use `layoutIfNeeded` from +within a UIView animation block. The sample app "Chatty" does this to move a +text field when the keyboard is displayed. `kbd_height` is the height of the +keyboard. + +```ruby +@container_bottom.minus kbd_height # set @container_bottom.constant = 0 when the keyboard disappears + +UIView.animateWithDuration(duration, delay: 0, options: curve, animations: -> do + self.view.layoutIfNeeded # applies the constraint change +end, completion: nil) ``` ### MotionKit::Events gem install motion-kit-events