[MonoTouch] UITableView as multi-column, scrollable grid tips

[competent_tech]

After a too long and painful process, and with a lot of assistance from the
community, I have finally managed to get UITableView to behave more like a
grid that our users require to consume the information in our application. 

Because I did not find a single solution for all of our requirements and
because of a lot of disinformation out there (i.e. UITableView can't scroll
horizontally without being in a scroll view, you can't have multiple
columns, etc.) I wanted to share some of the general techniques that we used
to implement this behavior.

First, our general end-user requirements were to have a multi-column grid
that can scroll both horizontally and vertically with the column headers
always visible. In addition, it was a requirement, due to the large amount
of data that could be presented through these grids, to be as prudent as
possible with resource consumption. 

When a UITableView is embedded in a scroll view, this last item becomes a
major issue because this eliminates the native UITableView's process of
recycling cells.

As it turns out, the solutions to all of these issues are relatively
straightforward, but not readily accessible. 

There are plenty of articles that describe how to create multi-column
UITableViews. 

However, none of them addressed cell reuse if you add your own labels to
create multiple columns. To find the labels associated with your columns in
a reused cell in order to change the text of the cell, give each label in a
given cell a unique tag (corresponding to the column number, for example),
then call the ViewWithTag method on the cell to retrieve the correct label
for the column you are working with (only if you are working with a reused
cell).

In order to create a header that does not scroll, you need to use a custom
view in the UITableViewSource's GetViewForHeader method. To ensure it does
not scroll, the view needs to have ClipToBounds set to false.

If you try to use a gradient in the header, you will most likely be
unsuccessful because it is always clipped when scrolled horizontally.
Instead, use a standard background color and it should be displayed
correctly.

In order to support horizontal scrolling, both the header view and the
individual row cells must have a frame width that is the sum of the widths
of the individual columns. 

You must also set the UITableView's ContentSize after ReloadData(): the
width should be the width of the view/cell calculated above (or the
ContentSize.Width, whichever is greater) and the height should be the
current ContentSize height. This will support both horizontal and vertical
scrolling.

Finally, when you scroll the new UITableView horizontally, you will most
likely notice that the row separator lines are clipped. I was able to
resolve this by creating a custom cell that inherits from UITableViewCell,
overriding the Draw method and, before calling the base implementation of
Draw, setting the frame size width to the sum of the column widths. This
custom cell is then used in place of the standard UITableViewCell in the
UITableViewSource GetCell override method.

Hopefully these concepts will help someone with similar issues in the
future.


--
View this message in context: http://monotouch.2284126.n4.nabble.com/UITableView-as-multi-column-scrollable-grid-tips-tp3935447p3935447.html
Sent from the MonoTouch mailing list archive at Nabble.com.