Exploring the new TListView Platform Options on iOS in RAD Studio XE8

FireMonkey’s underlying visual control architecture has been significantly overhauled in XE8 to enable multiple presentation implementations per control called “ControlTypes” - in particular, native OS control presentations can be utilized. The new underlying architecture is MVC based and is backward compatible enabling developers to choose at design time between Styled and Platform control types on a per control* basis (*for controls that include both control types). This allows you to select whether a control will be implemented at runtime by FireMonkey’s GPU driven rendering or implemented by the underlying operating system.

In XE8 for Universal iOS 32-bit and 64-bit apps, six key performance critical controls now have iOS native platform control types built–in, including TEdit, TListView, TMemo, TSwitch, TCalendar and TMultiView. In the future we plan to add platform control types for other operating systems and components.

Today, I thought I would highlight some of the new iOS native platform options for TListView.

TListView has a ControlType property. If you set it to Platform, you will get the iOS platform native rendering at runtime using the underlying OS. This also allows you to take advantage of the NativeOptions property. If you set it to Styled, it will use the bitmap-based FireMonkey styles (either using the default built-in styles or custom styles applied via a StyleBook) and the control will be implemented by FireMonkey’s GPU driven rendering at runtime.

The default TListView item appearance modes such as ListItem, ImageListItem and ImageListItemBottomDetail are supported in both the Styled and Platform modes. Custom appearance modes are supported in the Styled mode.

1. Grouped 
   1. This adds grouping support to the ListView like you see in the iOS settings dialog, for example. This option expects headers to be set up. 
2. Indexed
   1. This adds alphabetical sorting (displayed via letters on the right). This option expects headers to be set up to add indexing (i.e. by enabling this property and binding ListView1.ItemHeader.Text into FDMemTable1.FoodName).
3. Styled    
   1. If you enable this setting while using ControlType=Platform, you get the platform native Listview rendering at runtime on iOS with the custom font settings that you have set. This will override teh default platform native font settings for TListView on iOS and allow you to define your own custom fonts, sizes and attributes (as long as you are using one of the default item appearance modes).

Below is an example application that I built that showcases the 3 platform native options for TListView on iOS using some sample data. The ListView is bound into sample data using the LiveBindings Designer.

In this demo, I added three buttons styled as segmented controls to toggle the platform native options:

procedure TFoodList.GroupedClick(Sender: TObject);
begin
 if TListViewNativeOption.Grouped in ListView1.NativeOptions then
    ListView1.NativeOptions := ListView1.NativeOptions - [TListViewNativeOption.Grouped]
  else
    ListView1.NativeOptions := ListView1.NativeOptions + [TListViewNativeOption.Grouped];
end;

procedure TFoodList.IndexedClick(Sender: TObject);
begin
 if TListViewNativeOption.Indexed in ListView1.NativeOptions then
    ListView1.NativeOptions := ListView1.NativeOptions - [TListViewNativeOption.Indexed]
  else
    ListView1.NativeOptions := ListView1.NativeOptions + [TListViewNativeOption.Indexed];
end;

procedure TFoodList.StyledClick(Sender: TObject);
begin
 if TListViewNativeOption.Styled in ListView1.NativeOptions then
    ListView1.NativeOptions := ListView1.NativeOptions - [TListViewNativeOption.Styled]
  else
    ListView1.NativeOptions := ListView1.NativeOptions + [TListViewNativeOption.Styled];
end;

end.