ProMotion Styling Table Cells with Teacup

Question

I've looked all over for the Google answer to this, but no joy. What I'd like to do is mix and match Teacup and ProMotion for tables. The overall table is pretty easy. Just add this to the hash for the data element in the table_data method.

stylename: :leg_cell

-and-

Teacup::Stylesheet.new :main_screen do
  style :leg_cell,
    backgroundColor: UIColor.colorWithRed(238, green:238, blue:238, alpha: 1),
    textColor: UIColor.greenColor
  style UITableViewLabel,
    textColor: UIColor.greenColor
end

for the stylesheet. But... UITableViewLabel is being ignored and there's this:

Symbiote tells me this is a UITableViewLabel, but I'm not seeing a way to style it. Also, Teacup offers these neat:

layout do
  # things here to add styled subviews

things that are very similar to the subview adding thingies in ProMotion. How (well) do these coexist?

Any hints on how to get that tableview label styled green? And perhaps even use TeaCup to add some custom UILabels?

Note: I know the green is awful, but I'm using it just to demonstrate that I've got the right element styled. I'll pick something more tasteful once I'm getting the styling correct.

Thanks!

Answer 1

I would recommend subclassing PM::TableViewCell (which is a subclass of UITableViewCell) and applying your Teacup styling in there.

class MyTableViewCell < PM::TableViewCell
  attr_accessor :mileage_label

  stylesheet :main_screen
  def layoutSubviews
    layout do
      # Subviews
      # Apply `self.mileage_label` to your UILabel here.
    end
    restyle! # May be necessary?
  end
end

class MyScreen < PM::TableScreen
  def table_data
    [{
      cells: [{
        cell_class: MyTableViewCell,
        title: "whatever",
        properties: {
          mileage_label: "My mileage label",
        }
      }]
    }]
  end
end