specifying size with percentage

[defvol]

There are times where I need a subview to expand and fill the parent view, i.e. subview.frame = parent.bounds

I believe it would be convenient to have something like this in stylesheets:

  style :overlay,
    height: 100%,
    width: 100%,
    backgroundColor: UIColor.colorWithRed(0, green:0, blue:0, alpha:0.5)

where width: 100% means subview.frame.size.width == subview.superview.frame.size.width

any thoughts?

[farcaller]

I'd suggest a syntax like

height: :relative, 0.1

[colinta]

I wonder: what about a number symbol?

width: :100

Too magic?

Or, actually, a handler would be less invasive:

width%: 100
size%: [100, 50]

Is that syntax valid? :-/

On Oct 24, 2012, at 10:59 AM, Vladimir Pouzanov notifications@github.com wrote:

I'd suggest a syntax like

height: :relative, 0.1 \ Reply to this email directly or view it on GitHub.

[defvol]

it should be easy to distinguish between percentages (or relative sizes) and pixels, so a number symbol seems too magic for me :trollface:

[ConradIrwin]

Surely the answer is to monkeypatch Fixnum:

width: 100.percent

or to provide a magic function on stylesheets:

width: 0.9 * parent_width

both of which return a special number-like object

Conrad

On Wed, Oct 24, 2012 at 10:29 AM, Rod Wilhelmy notifications@github.comwrote:

it should be clear to tell apart percentages (or relative sizes) and pixels, so a number symbol seems too magic for me [image: :trollface:]

— Reply to this email directly or view it on GitHubhttps://github.com/rubymotion/teacup/issues/49#issuecomment-9748376.

[colinta]

I'd be in favor of monkeypatching Fixnum (or Numeric), but getting a "number like object" is tricky - in plain ruby you can create "delegate" classes to accomplish the same task as subclassing numerics/true/nil, but we don't have that in rubymotion...

That said, it might be as simple as writing a few math methods...

Still, I think we would be entering "bad hack" town if we went that route.

A Percent class could be used explicitly:

width: Percent(100)  # returns Percent.new(100)

And that could be used outside of the Stylesheet class.

[colinta]

I'm playing around with this, an honestly I actually like this solution the best so far:

size: ['100%', '100%'] / 100.0

It's an easy string-to-number conversion, easy to check, and only requires changes to z_handlers.rb

[colinta]

> '100%'[0...-1].to_f
=> 100.0

[colinta]

Wait a sec... we are "resolving" a problem that UIKit's 'autolayout' system solves. We should be talking about how to implement auto layouts in teacup's DSL!

About Auto Layout Constraints Express Relationships Between Views Dividing Responsibility Between Controllers and Views Beginning Auto Layout in iOS 6

[farcaller]

It's not really an issue about autolayout, as we're not going to recalculate the size dynamically, it's merely a convenience issue. Autolayouts are much more advanced.

Also, autolayouts do already have a DSL :)

[colinta]

True, though the '100%' could be expressed (albeit more verbosely) like this:

  style :thing,
    constraints: [
      constrain(:self, :width).equals(:superview, :width),
      constrain(:self, :height).equals(:superview, :height),
    ]

:self and :superview become reserved stylenames, any other symbol is searched for by stylename.

Whaddya think? I think this could make some big waves! :-)

[farcaller]

the problem is, as soon as you name it "constraints", people would expect them to work as autolayout constraints. Which we would hardly implement under iOS5. :wink:

[colinta]

yeah, they ARE autolayout constraints! This would be an iOS6 only feature. Autolayout is, in my opinion, just friggin' awesome. Really does a good job of solving the problem of frame adjustment.

[defvol]

I agree that it would be better to not reinvent the wheel and take advantage of the autolayout feature in iOS6.

By the way, the :superview symbol in the stylesheet could be very useful!

For iOS5 we could just make available a small subset of constraints which depend on reading properties from the superview ... such as the ones previously suggested (100% width, 100% height) ... removing the need for subview.frame = superview.bounds or subview_frame.size.width *= 0.5 superview_frame.size.width in controllers.

[colinta]

https://github.com/rubymotion/teacup/tree/relative_width supports the '100%' calculation, and it also lets you assign a formula

width: ->{|superview| superview.bounds.size.width / 2},
# or maybe
size: [320, ->{|superview| superview.bounds.size.height / 2}]

[colinta]

relative_width has been merged in.