Feathers UI List view customization

Haxe
#1

Hello, I am working in a project which needs to display an invitation lobby for games. I implement it using a List view with a Layout group custom renderer and everything looks great

layout2
layout21024×576 216 KB

Now I need to implement another game and the client wants something like this

layout
layout1024×573 268 KB

I started to play in the update and I saw that I can modify x,y values, based on the Layout index, but if someone can guide me which will be the best approach I would really appreciate.

Thanks in advance.
Luis

#2

You might want to look at Feathers UI: Custom Layouts.

Alternatively, assuming that you were using TiledRowsLayout or another tiled layout in your previous game, you could potentially extend that class and (like you said), modify x,y values based on the index in an override of the layout() method.

override public function layout(items:Array<DisplayObject>, measurements:Measurements, ?result:LayoutBoundsResult):LayoutBoundsResult {
	var result = super.layout(items, measurements, result);

	// loop through items and modify x,y values here

	return result;
}
#3

Thanks a lot. Almost working. I followed the original approach using Layout index, and works fine on “completed rows”, but failed in the incompleted ones. I will use the x value to detect if there are the ones at the middle and I suppose it will be solved. Anyway your tip was definettly a time saver. Thanks a lot. !!!

Regards
Luis