qrush / motion-layout

A nice way to use iOS6+ autolayout in your RubyMotion app. Use ASCII-art inspired format strings to build your app's layout!
MIT License
215 stars 29 forks source link

Implement the standard method to autolayout #2

Closed simonedamico closed 4 years ago

simonedamico commented 11 years ago

The ascii one is very handy, but unfortunately usually doesn't cover all the layout needs. A loot of sugar is needed because the obj-c one is f*\ verbose.

qrush commented 11 years ago

Sorry, I'm not sure what the "standard method to autolayout" is. Do you have some code examples? I haven't used IB to do autolayout or any other way besides the visual format syntax.

darrinholst commented 11 years ago

I think he's referring to NSLayoutConstraint.constraintWithItem

If you want to center a fixed width view...

    view.addConstraint(NSLayoutConstraint.constraintWithItem(
      @label,
      attribute: NSLayoutAttributeCenterX,
      relatedBy: NSLayoutRelationEqual,
      toItem: @label.superview,
      attribute: NSLayoutAttributeCenterX,
      multiplier: 1.0,
      constant: 0
    ))

or make a view's height half of it's width...

    view.addConstraint(NSLayoutConstraint.constraintWithItem(
      @label,
      attribute: NSLayoutAttributeHeight,
      relatedBy: NSLayoutRelationEqual,
      toItem: @label,
      attribute: NSLayoutAttributeWidth,
      multiplier: 0.5,
      constant: 0
    ))
qrush commented 11 years ago

Interesting. I haven't needed this yet. There's really no way to do this with the visual format language? :(

wink commented 11 years ago

Unfortunately, you can't center a view with VFL. One hacky workaround is to create two extra empty UIViews, one for the left margin and one for the right margin. Then you can do something like:

Motion::Layout.new do |l|
  l.view total_view
  l.subviews { 'left' => UIView.new, 'currency' => total_currency_label, 'amount' => total_amount_label, 'right' => UIView.new }
  l.horizontal "|[left][currency(15)][amount][right(==left)]|"
end

Otherwise, you would need to use the method @darrinholst posted. I really don't understand how centering a view wasn't the first thing Apple decided to implement.

seanlilmateus commented 11 years ago

this weekend I tried to solve this issue: at the moment I have a prototype running which allow you to do this:

Motion::Layout.new do |layout|
  layout.view       self.view
  layout.subviews   red: UIView.new, yellow:UIView.new,  blue:UIView.new
  layout.horizontal "|-[yellow][red(==yellow)]-|"
  layout.vertical   "|[yellow]-|"
  layout.vertical   "|[red]-|"
  # view is always the superview >> layout.view
  layout.constraint { blue.centerX  == view.centerX }  
  layout.constraint { blue.centerY  == view.centerY }
  layout.constraint { blue.width    == yellow.width * 0.5 }
  layout.constraint { blue.height   >= red.height * 0.2 + 10  }
end

Since this is the result of 10 minutes of design and 20 minutes of implementation, I want to some discuss about the idea, design and implementation before I clean it up and send a pull request. What do you guys thing about that? @qrush what do you think about this?

darrinholst commented 11 years ago

:+1:

stiller commented 11 years ago

Looking good. I was just looking for this.

qrush commented 10 years ago

Hey there, I'm looking for a new maintainer for this. Can you check out #13?