FUIGridTableViewCell
open class FUIGridTableViewCell : FUIBaseDrawingTableViewCell<FUIObjectView>, FUIAccessoryViewDelegate, FUIContentCopyable
FUIGridTableViewCell
is a UITableViewCell
subclass used to display data in a ‘column-based’ table, such as 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
. The default binding behavior if none of row items is supplied with binding is:
- The first three text item will be mapped to
headline
,subheadline
, andfootnote
of object view, respectively. - The first image item will be mapped to
detailImage
. - Subsequent text and image items will be mapped to
status
,statusImage
,substatus
,substatusImage
on a “first-come, first-served” pattern. Note thatstatus
andstatusImage
are in the same group, as well assubstatus
andsubstatusImage
. Only one of them can be displayed at a time. For example, if the fourth text item is mapped tostatus
, the image item next to it in the row will be mapped tosubstatusImage
instead ofstatusImage
. - The image item will not be mapped to
icon
in any case, so the developer needs to explicitly set it if this is required.
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.
Important: In order for FUIGridTableViewCell
to work, the developer must enable auto dimension in table view. Cell height is determined by the content size in each column.
override open func viewDidLoad() {
super.viewDidLoad()
tableView.sectionHeaderHeight = UITableViewAutomaticDimension
tableView.estimatedSectionHeaderHeight = 100
}
Remark
Developers are responsible for ensuring that the column widths supplied do not exceed the available dimensions.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.items = contentData
cell.columnWidthPercent = columnWidths
cell.accessoryType = .disclosureIndicator
// configure header view
header.items = headerData
header.columnWidthPercent = columnWidths
header.accessoryType = .disclosureIndicator
Theming
In the .nss
file you can use the following parameters:
fdlFUIGridTableViewCell
: changes the background of the cellfdlFUIGridTableViewCell_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()
}
}
-
Binding definitions, to respective views in object view layout
- headline: Object view headline area (text)
- subheadline: Object view subheadline area (text)
- footnote: Object view footnote area (text)
- status: Object view status area (text)
- substatus: Object view substatus area (text)
- statusImage: Object view statusImage area (image)
- substatusImage: Object view substatusImage area (image)
- detailImage: Object view detailImage area (image)
- icon: Object view icon stack area (image)
Declaration
Swift
public enum ObjectViewProperty
-
Boolean value to control to use grid table layout or object view layout in compact mode.
Default value is false, using the object view layout in compact mode. The useColumnLayoutInCompact in the
FUIGridTableViewHeaderFooterView
need to be set correspondinglyDeclaration
Swift
public var useColumnLayoutInCompact: Bool
-
An array of
FUIGridRowItem
objects in the cell.Declaration
Swift
public var items: [FUIGridRowItem]? { get set }
-
An array of fixed width for each column.
Set -1 for that column if it should have dynamic width. At most one column can be dynamic. For example, [50, -1, 100] means the width of first column is 50, width of third column is 100 and second column will take the remaining space available.
Declaration
Swift
public var columnWidth: [CGFloat]?
-
An array of percent width for each column.
Set -1 for that column if it should have dynamic width. At most one column can be dynamic. For example, [0.2, -1, 0.4] means the width percent of first column is 0.2, width percent of third column is 0.4 and second column will take the remaining space available which is 0.4 in this case.
Declaration
Swift
public var columnWidthPercent: [CGFloat]?
-
The spacing between two columns.
Declaration
Swift
public var spacing: CGFloat
-
Type of the accessory view.
Declaration
Swift
@IBInspectable override open var accessoryType: UITableViewCellAccessoryType { get set }