How to change font styles in a GroupedList component (Starling version)

A GroupedList component contains a number of item renderers and header or footer renderers that display some text. Let's look at how to change the font styles in these renderers outside of the theme.

The item renderer font styles

We can customize the item renderers inside the grouped list's itemRendererFactory. As long as we aren't setting any advanced font styles on the item renderer's text renderer (and the theme isn't either), we can pass a starling.text.TextFormat directly to the item renderer's fontStyles property.

var list:GroupedList = new GroupedList();
list.itemRendererFactory = function():IGroupedListItemRenderer
{
	var itemRenderer:DefaultGroupedListItemRenderer = new DefaultGroupedListItemRenderer();
	itemRenderer.fontStyles = new TextFormat( "Arial", 20, 0x3c3c3c );
	return itemRenderer;
};

If we wanted to change the item renderer's font styles inside the theme, we could set the grouped list's customItemRendererStyleName property and extend the theme.

The header renderer font styles

We can customize the header renderers inside the grouped list's headerRendererFactory. As long as we aren't setting any advanced font styles on the header renderer's text renderer (and the theme isn't either), we can pass a starling.text.TextFormat directly to the header renderer's fontStyles property.

var list:GroupedList = new GroupedList();
list.headerRendererFactory = function():IGroupedListHeaderRenderer
{
	var headerRenderer:DefaultGroupedListHeaderOrFooterRenderer = new DefaultGroupedListHeaderOrFooterRenderer();
	headerRenderer.fontStyles = new TextFormat( "Arial", 20, 0x3c3c3c );
	return headerRenderer;
};

If we wanted to change the header renderer's font styles inside the theme, we could set the grouped list's customHeaderRendererStyleName property and extend the theme.

We can customize the footer renderers inside the grouped list's footerRendererFactory. As long as we aren't setting any advanced font styles on the footer renderer's text renderer (and the theme isn't either), we can pass a starling.text.TextFormat directly to the footer renderer's fontStyles property.

var list:GroupedList = new GroupedList();
list.footerRendererFactory = function():IGroupedListFooterRenderer
{
	var footerRenderer:DefaultGroupedListHeaderOrFooterRenderer = new DefaultGroupedListHeaderOrFooterRenderer();
	footerRenderer.fontStyles = new TextFormat( "Arial", 20, 0x3c3c3c );
	return footerRenderer;
};

If we wanted to change the footer renderer's font styles inside the theme, we could set the grouped list's customFooterRendererStyleName property and extend the theme.