From the people who brought you ProMotion and Teacup, we bring you:


(insert blasting trumpets here)

TL;DR: MotionKit is a better styling and layout DSL than Teacup. Check out the README and sample code to find out why.

MotionKit is a new tool for building view hierarchies and applying styles. The goal of MotionKit is, ultimately, to replace Teacup as the “de facto” DSL for creating and styling views. This doesn’t mean we’re dropping support for Teacup, but Teacup has become VERY complex, and it has not become the “community project” that I had hoped it would. And, frankly, I’m kind of sick of the “hash-based” design. It’s good, and idiomatic, but there’s a lot of magic in there, too. And most of the complexity comes directly from that design decision.

With that in mind I asked Jamon if he would be interested in collaborating on this project. We distilled the best aspects of Teacup, ProMotion, Geomotion, RMQ, and our own take on “how things should be”, and came up with something that is clean, simple, and powerful. We got some great feedback from people in the RubyMotion community, too, to make sure we were making something worthwhile.

MotionKit relies heavily on method forwarding, which makes it easy to include your own additions, and there’s lots of examples of this in the source code. For example, if you want a helper to build a gradient background, you can add a gradient method to the MotionKit::UIViewLayout class, and that method will become available to UIView instances and subclasses. This allows us to have “mini-DSLs” for all sorts of things: UIKit, CoreAnimation, NSMenu & NSMenuItem (and planned support for SpriteKit and Joybox!). The built-in helpers are pretty basic, but be sure to check out the frame and AutoLayout helpers. They make building frame-based or constraints-based views an absolute JOY. :-)

I’d like to demonstrate what MotionKit code looks like. This is the LoginController and LoginLayout class from the sample app “Chatty” that is included in samples/ios/Chatty. From the LoginController we create a LoginLayout instance and ask for its view. We assign that to the controller in loadView. This is very idiomatic MotionKit code.

“`ruby class LoginController < UIViewController

def loadView @layout = self.view = @layout.view end


class LoginLayout < MK::Layout view :usernamefield view :submitbutton

def layout backgroundcolor UIColor.blackColor add UIView, :background do add UITextField, :usernamefield add UIButton, :submit_button end end

def logincontainerstyle initial do layer do cornerradius 10 end backgroundcolor UIColor.whiteColor

  constraints do
    x 10
    right -10
    height 100
    bottom -10


end ”`

I’m not going to go into detail about everything that’s going on here, but hopefully just reading the code you can see how straightforward it is. The sample code has plenty of examples (for iOS and OS X), and Chatty in particular has awesome code separation examples. It’s great to be able to have animation and other view-related code in your Layout class instead of your Controller. It keeps things very clean!

Jamon and I will be discussing MotionKit more in the next MotionMeetup, so get your questions (and complaints) ready! We’ll also be discussing what you can look forward to in future updates.

And lest we forget… the logo! Kudos goes to Jamon on this one:

MotionKit Logo

Jamon Holmgren, ClearSight Studios


Colin T.A. Gray, HipByte