Skip to content


Subversion checkout URL

You can clone with
Download ZIP
A DSL for creating layouts easily in RubyMotion. Also comes bundled with a set of categories to make life easier.
Pull request Compare This branch is 9 commits behind malkomalko:master.
Fetching latest commit...
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

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 clone 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'],
        ['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'

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 {

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

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.

Something went wrong with that request. Please try again.