FUIGridTableViewCell

open class FUIGridTableViewCell : FUIBaseDrawingTableViewCell<FUIObjectView>, FUIAccessoryViewDelegate, FUIViewBorderDrawing

FUIGridTableViewCell is a UITableViewCell subclass utilized for displaying data in a ‘column-based’ table, a la a spreadsheet table. Each row is configured by a list of FUIGridRowItem instances. The cells adapt between regular and compact horizontal mode, to switch from column-based layout in regular mode, to an ‘object-view’ layout in compact mode.

A binding is automatically generated for each row item, to an associated text or image type of property in the object view layout. A developer may customize these bindings, and choose to bind only a subset of columns, using the binding property on the FUIGridRowImageItem or FUIGridRowTextItem.

In regular mode, columns widths may be specified in absolute points, or as a set of fractions in 0.0..<1. A developer may also designate one column for flexible width, by assigning the value -1 to that column width.

Row content will center-align vertically if all row items have a single line of text; rows with multiple lines of text will be top-aligned.

Example Initialization and Configuration:

// row data list
var contentData: [FUIGridRowItem] {
    let item0 = FUIGridRowImageItem(image: <#my image#>))
    let item1 = FUIGridRowTextItem(text: "SAP")
    let item2 = FUIGridRowTextItem(number: 114.23)
    let item3 = FUIGridRowTextItem(number: 114.84)
    let item4 = FUIGridRowTextItem(number: 113.92)
    let item5 = FUIGridRowTextItem(number: 114.76)
    return [item0, item1, item2, item3, item4, item5]
}

// header data list
var headerData: [FUIGridRowItem] {
    let item0 = FUIGridRowHeaderItem(text: " ")
    let item1 = FUIGridRowHeaderItem(text: "Symbol")
    let item2 = FUIGridRowHeaderItem(text: "Open")
    let item3 = FUIGridRowHeaderItem(text: "High")
    let item4 = FUIGridRowHeaderItem(text: "Low")
    let item5 = FUIGridRowHeaderItem(text: "Close")
    return [item0, item1, item2, item3, item4, item5]
}

// set column widths.  Should be shared by rows and header.
let columnWidths = [-1, 0.2, 0.1, 0.1, 0.1, 0.1]

// configure row cell
cell.gridItems = contentData
cell.columnWidthPercent = columnWidths
cell.accessoryType = .disclosureIndicator


// configure header view
header.gridItems = headerData
header.columnWidthPercent = columnWidths
header.accessoryType = .disclosureIndicator

Theming

In the .nss file you can use the following parameters:

• fdlFUIGridTableViewCell: changes the background of the cell
• fdlFUIGridTableViewCell_selected: changes the selected background of the cell

Example:

fdlFUIGridTableViewCell {
   background-color: clear;
}
fdlFUIGridTableViewCell_selected {
   background-color: @line;
}

Handle layout on view controller rotation

It is uncommon, but sometimes the state of the view controller will require you to ask the table view to recalculate the grid layout. This could occur, if a new view controller is pushed onto the stack, the user rotates the device, then pops the top view controller, returning to the grid.

To avoid issues related to the state of the view controller, use the UITableView.beginUpdates() API to recompute the cell heights. Depending on the state condition, this should be done in the UIViewController.willTransitionTo(size:) method, or viewDidAppear().

Example:

override func viewDidAppear(_ animated: Bool) {
   super.viewDidAppear(animated)

   DispatchQueue.main.async {
       self.tableView.beginUpdates()
       self.tableView.endUpdates()
   }
}