Typewriter lay out your views from left to right, top to bottom.

Fork me on GitHub

Started: 09 Jun 2012
github

Makes it easy to draw a bunch of views that need to be arranged from left to right, and top to bottom.

@typewriter = TypewriterView.alloc.initWithFrame([[0, 0], [320, 480]])
self.view.addSubview(@typewriter)

96.times do
  the_view = UIView.alloc.initWithFrame([[0, 0],  [40, 40]])
  red =   rand
  green = rand
  blue =  rand
  the_view.backgroundColor = UIColor.colorWithRed(red, green:green, blue:blue, alpha:1)
  @typewriter.addSubview(the_view)
end
  • typewriter_portrait.png

    Typewriter Portrait Png

  • typewriter_landscape.png

    Typewriter Landscape Png

That's it right now... though it can do that one thing pretty well.

Spacing

For instance, you can set space between your views. This doesn't affect the margins that surround your views (wait for it...)

@typewriter = TypewriterView.alloc.initWithFrame([[0, 0], [320, 480]])
@typewriter.spacing = 2
# @typewriter.horizontal_spacing = 2
# @typewriter.vertical_spacing = 2
self.view.addSubview(@typewriter)
  • typewriter_spacing.png

    Typewriter Spacing Png

Margin?

I wouldn't have mentioned it if it wasn't supported:

@typewriter = TypewriterView.alloc.initWithFrame([[0, 0], [320, 480]])
@typewriter.backgroundColor = UIColor.darkGrayColor
@typewriter.margin = 10
# @typewriter.top_margin = 10
# @typewriter.botton_margin = 10
# @typewriter.left_margin = 10
# @typewriter.right_margin = 10
self.view.addSubview(@typewriter)

Note: there is a botton_margin property, but until scrolling or pagination is implemented, it doesn't do anything.

  • typewriter_margin.png

    Typewriter Margin Png

Altogether, now!

@typewriter = TypewriterView.alloc.initWithFrame([[0, 0], [320, 480]])
@typewriter.backgroundColor = UIColor.darkGrayColor
@typewriter.horizontal_spacing = 10
@typewriter.vertical_spacing = 2
@typewriter.top_margin = 80
@typewriter.left_margin = 60
@typewriter.right_margin = 20  # this determines a minimum space on the right
self.view.addSubview(@typewriter)
  • typewriter_altogether.png

    Typewriter Altogether Png

  • typewriter_altogether_landscape.png

    Typewriter Altogether Landscape Png