ProMotion::Table + Autolayout + Motion-Kit

custom_cell.rb

class CustomCell < UITableViewCell
  def initWithStyle(style, reuseIdentifier: identifier)
    super
    @layout = CustomCellLayout.new(root: WeakRef.new(self)).build
    self
  end

  def obj=(obj)
    @layout.foo = obj[:foo]
    @layout.bar = obj[:bar]
  end
end

custom_cell_layout.rb

class CustomCellLayout < MotionKit::Layout
  DEFAULT_PADDING = 8

  attr_accessor :foo, :bar

  def layout
    root :cell do
      add UIView, :container do
        add UIImageView, :icon

        add UILabel, :foo
        add UILabel, :bar
      end
    end
  end

  def foo=(foo)
    super
    update_frame_with_data if bar
  end

  def bar=(bar)
    super
    update_frame_with_data if foo
  end

  def update_frame_with_data
    get(:foo).text = 'Something rather short'

    get(:bar).text = 'Cum sociis natoque penatibus et magnis dis parturient ' \
      'montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed ' \
      'consectetur. Vestibulum id ligula porta felis euismod semper. Maecenas' \
      ' sed diam eget risus varius blandit sit amet non magna.'
  end

  def container_style
    size_to_fit
    constraints do
      top_left.equals(:superview).plus(DEFAULT_PADDING)
      bottom_right.equals(:superview).minus(DEFAULT_PADDING)
    end
  end

  def icon_style
    background_color rmq.color.red

    constraints do
      size.equals(40)
      top_left.equals(:superview)
    end
  end

  def foo_style
    size_to_fit
    background_color rmq.color.green
    line_break_mode NSLineBreakByWordWrapping
    number_of_lines 0

    constraints do
      top.equals(:superview)
      left.equals(prev(:icon), :right)
        .plus(DEFAULT_PADDING)
    end
  end

  def bar_style
    size_to_fit
    background_color rmq.color.blue
    line_break_mode NSLineBreakByWordWrapping
    number_of_lines 0

    constraints do
      foo = prev(:foo)

      top.equals(foo, :bottom)
        .plus(DEFAULT_PADDING)
      left.equals(foo, :right)
    end
  end
end

test_screen.rb

class TestScreen < PM::GroupedTableScreen
  row_height :auto, estimated: 100

  title 'Test Screen'

  def table_data
    [{
      :title => 'First Section',
      :title_view_height => 12,
      :cells => [{
        :cell_class => CustomCell,
        :properties => { :obj => { :foo => 'foo', :bar => 'bar' } }
      }, {
        :cell_class => CustomCell,
        :properties => { :obj => { :foo => 'foo', :bar => 'bar' } }
      }]
    }, {
      :title => 'Second Section',
      :title_view_height => 12,
      :cells => [{
        :cell_class => CustomCell,
        :properties => { :obj => { :foo => 'foo', :bar => 'bar' } }
      }, {
        :cell_class => CustomCell,
        :properties => { :obj => { :foo => 'foo', :bar => 'bar' } }
      }]
    }]
  end
end

tree_output.sh

(nil)? rmq.log :tree
─── UITableView  4597060608  {l: 0, t: 64, w: 375, h: 554}
    ├─── UITableViewWrapperView  4598240256  {l: 0, t: 0, w: 375, h: 554}
    │    ├─── CustomCell  4678150064  {l: 0, t: 89.5, w: 375, h: 16}
    │    │    ├─── UITableViewCellContent  4678151280  {l: 0, t: 0, w: 375, h: 15.5}
    │    │    ├─── UIView  4678157568  {l: 8, t: 8, w: 359, h: 0}
    │    │    │    ├─── UIImageView  4678169120  {l: 0, t: 0, w: 40, h: 40}
    │    │    │    ├─── UILabel  4678180928  {l: 48, t: 0, w: 178, h: 20.5}
    │    │    │    ├─── UILabel  4678212880  {l: 48, t: 8, w: 1902.5, h: 20.5}
    │    │    ├─── _UITableViewCellSepara  4700038736  {l: 0, t: 15.5, w: 375, h: 0.5}
    │    ├─── CustomCell  4678003488  {l: 0, t: 73.5, w: 375, h: 16}
    │    │    ├─── UITableViewCellContent  4677796384  {l: 0, t: 0, w: 375, h: 15.5}
    │    │    ├─── UIView  4678012272  {l: 8, t: 8, w: 359, h: 0}
    │    │    │    ├─── UIImageView  4678025888  {l: 0, t: 0, w: 40, h: 40}
    │    │    │    ├─── UILabel  4678037664  {l: 48, t: 0, w: 178, h: 20.5}
    │    │    │    ├─── UILabel  4678069440  {l: 48, t: 8, w: 1902.5, h: 20.5}
    │    │    ├─── _UITableViewCellSepara  4678118176  {l: 16, t: 15.5, w: 359, h: 0.5}
    │    │    ├─── _UITableViewCellSepara  4700013920  {l: 0, t: 0, w: 375, h: 0.5}
    │    ├─── CustomCell  4593791808  {l: 0, t: 28, w: 375, h: 16}
    │    │    ├─── UITableViewCellContent  4682058480  {l: 0, t: 0, w: 375, h: 15.5}
    │    │    ├─── UIView  4593783232  {l: 8, t: 8, w: 359, h: 0}
    │    │    │    ├─── UIImageView  4682029216  {l: 0, t: 0, w: 40, h: 40}
    │    │    │    ├─── UILabel  4682194704  {l: 48, t: 0, w: 178, h: 20.5}
    │    │    │    ├─── UILabel  4682226320  {l: 48, t: 8, w: 1902.5, h: 20.5}
    │    │    ├─── _UITableViewCellSepara  4677969008  {l: 0, t: 15.5, w: 375, h: 0.5}
    │    ├─── CustomCell  4593753552  {l: 0, t: 12, w: 375, h: 16}
    │    │    ├─── UITableViewCellContent  4699855056  {l: 0, t: 0, w: 375, h: 15.5}
    │    │    ├─── UIView  4699865808  {l: 8, t: 8, w: 359, h: 0}
    │    │    │    ├─── UIImageView  4699855792  {l: 0, t: 0, w: 40, h: 40}
    │    │    │    ├─── UILabel  4699893488  {l: 48, t: 0, w: 178, h: 20.5}
    │    │    │    ├─── UILabel  4699928240  {l: 48, t: 8, w: 1902.5, h: 20.5}
    │    │    ├─── _UITableViewCellSepara  4594696176  {l: 16, t: 15.5, w: 359, h: 0.5}
    │    │    ├─── _UITableViewCellSepara  4699883680  {l: 0, t: 0, w: 375, h: 0.5}
    ├─── UIImageView  4693553680  {l: 3, t: 548.5, w: 369, h: 2.5}
    ├─── UITableViewHeaderFoote  4682311296  {l: 0, t: 0, w: 375, h: 12}
    │    ├─── _UITableViewHeaderFoot  4682313696  {l: 0, t: 0, w: 375, h: 12}
    │    ├─── _UITableViewHeaderFoot  4682296288  {l: 0, t: 0, w: 375, h: 12}
    │    │    ├─── _UITableViewHeaderFoot  4682328880  {l: 16, t: -10.5, w: 95.5, h: 16}
    ├─── UITableViewHeaderFoote  4682347440  {l: 0, t: 61.5, w: 375, h: 12}
    │    ├─── _UITableViewHeaderFoot  4682349664  {l: 0, t: 0, w: 375, h: 12}
    │    ├─── _UITableViewHeaderFoot  4682348768  {l: 0, t: 0, w: 375, h: 12}
    │    │    ├─── _UITableViewHeaderFoot  4700059552  {l: 16, t: -10.5, w: 113.5, h: 16}
    ├─── UIImageView  4693576352  {l: 369.5, t: 414, w: 2.5, h: 137}