motion-layouts

by malkomalko

malkomalko / motion-layouts

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

124 Stars 12 Forks Last release: Not found Other 11 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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 https://github.com/malkomalko/motion-layouts.git vendor/motion-layouts

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

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

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)
    super
    view.fromLayout(NameEditorLayout, self)
  end

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
      }
    end

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

def placeholder(text)
  @view.placeholder = text
end

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.

Todo

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.

Thanks

Quick thanks to https://github.com/mattetti/BubbleWrap for letting me gut their README.md 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.