Need help with motion-layouts?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

125 Stars 12 Forks Other 11 Commits 2 Opened issues


A DSL for creating layouts easily in RubyMotion. Also comes bundled with a set of categories to make life easier.

Services available


Need anything else?

Contributors list

# 139,585
5 commits
# 16,197
1 commit
# 228,453
1 commit
# 135,747
1 commit

Layouts for RubyMotion

A DSL for creating layouts easily in RubyMotion. Also comes bundled with a set of categories to make life easier. I'm using the word category from objective-c land which is basically the same as re-opening classes in ruby :D.

Getting started

Add motion-layouts as a git submodule of your RubyMotion project:

git submodule add vendor/motion-layouts

Add the motion-layouts lib path to your project 'Rakefile'

Motion::Project::App.setup do |app| = 'myapp'
  app.files.unshift(Dir.glob(File.join(app.project_dir, 'vendor/motion-layouts/lib/**/*.rb')))

Now, you can use motion-layouts to start making some layouts.

I put all my layouts by convention into app/layouts but feel free to do whatever you want.

Define a layout

class NameEditorLayout
  include Layouts::Base

def self.template UIToolbar { anchor 'top' height 50 resize :top, :right, :left, :width items [ ['Cancel', 'cancel'], [:flexible_space], ['Done', 'done'] ] } UITextField { id 'nameTextField' delegate @controller top 90 width 85.percent align 'center' text_color '222222' background_color 'FFFFFF' border_style 'rounded' resize :top, :right, :left, :width placeholder 'Enter the photo album name' } end end

You start by including Layouts::Base and defining a self.template method.

Instantiate your view (from controller)

  def viewWillAppear(animated)
    view.fromLayout(NameEditorLayout, self)

boom.. that's it, you should see a toolbar and a text field in your view.

How it works

The project includes a mixture of categories and nodes.

Nodes are the entry point inside self.template in your layout:

class NameEditorLayout
  include Layouts::Base

def self.template UIToolbar { ... } UITextField { ... } end end

Every node inherits from LayoutBase which sets up a lot of shared functionality and handles proper instantiation.

You have access to a few instance variables inside each node:

@parent - the parent view
@view - the current view
@controller - the controller who instantiated the view via view.fromLayout

Every node can also set a defaults hash.

Let's take a look at the UITextField node:

module Layouts
  class UITextField < LayoutBase
    def self.defaults
        width: @parent.bounds.size.width * 0.90,
        height: 30

def border_style(style)
  @view.borderStyle = ::UITextField::BORDER_STYLES.fetchWithDefault(style)

def placeholder(text)
  @view.placeholder = text

end end

This is where the categories come in. To make defining these nodes as easy as possible, I'm creating a collection of categories to make the process as smooth as can be.

Take a look inside the lib/layouts/categories folder to see some of the helpers I've defined for you.


Tests Tests Tests. This was mostly thrown together very quickly as a POC, but there is nothing complex going on here.

Filling out a complete set of nodes. I'm throwing this out now in hopes that people can create wrapper nodes for all the missing standard UI classes.


Quick thanks to for letting me gut their and for suggesting a rather nice convention for installing custom libs into the vendor directory until something else better comes along.

Also, thanks to Laurent and the whole RubyMotion community for making iOS programming fun to learn.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.