Container Item Layout

From Official Kodi Wiki
Revision as of 05:31, 25 October 2007 by >Jmarshall (New page: All container objects (List Container, Wrap List Container, Panel Container and Fixed List Container) have very flexible layout of their items using the <itemlayout> and <f...)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

All container objects (List Container, Wrap List Container, Panel Container and Fixed List Container) have very flexible layout of their items using the <itemlayout> and <focusedlayout> tags.

Example

<xml> <control type="wraplist" id="50">

     <description>My first wraplist container</description>
     <posx>80</posx>
     <posy>60</posy>
     <width>250</width>
     <height>200</height>
     <visible>true</visible>
     <onup>2</onup>
     <ondown>3</ondown>
     <onleft>1</onleft>
     <onright>1</onright>
     <viewtype label="3D list">list</viewtype>
     <orientation>vertical</orientation>
     <pagecontrol>25</pagecontrol>
     <focusposition>3</focusposition>
     <scrolltime>200</scrolltime>
     <itemlayout width="250" height="29">

<control type="image"> <posx>5</posx> <posy>3</posy> <width>22</width> <height>22</height> <info>ListItem.Icon</info> </control> <control type="label"> <posx>30</posx> <posy>3</posy> <width>430</width> <height>22</height> font13 <aligny>center</aligny> <selectedcolor>green</selectedcolor> <align>left</align> <info>ListItem.Label</info> </control> <control type="label"> <posx>475</posx> <posy>3</posy> <width>300</width> <height>22</height> font13 <aligny>center</aligny> <selectedcolor>green</selectedcolor> <textcolor>grey</textcolor> <align>right</align> <info>ListItem.Label2</info> </control>

     </itemlayout>
     <focusedlayout height="29" width="250">

<control type="image"> <width>485</width> <height>29</height> <posx>0</posx> <posy>0</posy> <visible>Control.HasFocus(50)</visible> <texture>list-focus.png</texture> </control> <control type="image"> <posx>5</posx> <posy>3</posy> <width>22</width> <height>22</height> <info>ListItem.Icon</info> </control> <control type="label"> <posx>30</posx> <posy>3</posy> <width>430</width> <height>22</height> font13 <aligny>center</aligny> <selectedcolor>green</selectedcolor> <align>left</align> <info>ListItem.Label</info> </control> <control type="label"> <posx>475</posx> <posy>3</posy> <width>300</width> <height>22</height> font13 <aligny>center</aligny> <selectedcolor>green</selectedcolor> <textcolor>grey</textcolor> <align>right</align> <info>ListItem.Label2</info> </control>

     </focusedlayout>

</control> </xml>

As can be seen, the <itemlayout> and <focusedlayout> blocks can contain a number of image or label controls, the content of which is either static, or can be filled with info labels such as ListItem.Title and so on.

Most image and label tags are available to these sub-controls.

One thing to note is that the only animations available to the sub-controls is the focus animation, or conditional animations. The focus animation is invoked whenever the <focusedlayout> is needed to be used for an item. Note that with conditions such as Container.Row(0), Container.Column(3), or Container.Position(4) the actual focused layout (and animation) can be changed per-item. The layout of the unfocused items, however, is fixed per-item.