Change ProMotion TableScreen layout

Question

I have looked everywhere in the ProMotion docs and examples but I am unable to find a way to change a TableScreen layout, specifically the TableView cell's vertical starting position.

I have an UIView on the top of my screen to show some buttons, and the TableView cells should start underneath, but right now they are on top of each other.

I have even managed to move the TableView using the REPL console:

rmq(4496872960).nudge d: 10

where 4496872960 is the id of my UITableViewWrapperView object, but I have no idea where to put the layout coordinates for this object in code.

My screen code:

class HomeScreen < PM::TableScreen
  title I18n.t("home_screen.title")
  tab_bar_item title: I18n.t("home_screen.title"), item: "icon-home_32x32.png"
  row_height :auto, estimated: 30
  stylesheet HomeScreenStylesheet

  def on_load
    @matches = [{attributes: {status: "dummy1", player2: {email: "[email protected]"}}},{attributes: {status: "dummy2", player2: {email: "[email protected]"}}}]
    append(TopHomeView, :top_home_view)
    set_nav_bar_button :left, title: I18n.t("home_screen.sign_out_label"), image: image.resource("icon-logout-32x32.png"), action: :sign_out
    set_nav_bar_button :right, title: (Auth.current_user ? Auth.current_user["email"] : ""), image: image.resource("icon_user_50x50.png"), action: :open_profile

    load_async
  end

  def table_data
    [{
      cells: @matches.map do |match|
        {
          title: match[:attributes][:player2][:email],
          subtitle: match[:attributes][:status],
          action: :play_round,
          arguments: { match: match }
        }
      end
    }]
  end

EDIT:

I have kept trying to solve this and I have now added a style to my UITableViewWrapperView object like this:

def viewDidLoad
  super
  rmq(UITableViewWrapperView).apply_style(:style_for_table_wrapper)
end

In my stylesheet I am able to therefore style everything: background_color, hidden status, but the frame style is just ignored.

def top_home_view(st)
  st.frame = {l:20, t: 20, w: 300, h: 60}
  st.background_color = color.white
end

Answer 1

As indicated in this Github issue:

https://github.com/infinitered/ProMotion/issues/784#issuecomment-230962988

the solution here lies in implementing a Header view for the TableScreen. This lets us have an area on top of the cells for our own use:

Define a table_header_view returning an instance of a UIView (required):

class HomeScreen < PM::TableScreen
  # ...
  def table_header_view
    create!(TopHomeView, :top_home_view)
  end

Note that the "bang method" (create!) will return an instance of UIView.

Credit goes to https://github.com/andrewhavens for clearing this up