List Container: Difference between revisions
Jump to navigation
Jump to search
>Jmarshall (New page: The list container is one of several containers used to display items from file lists in various ways. The list container is very flexible - it's only restriction is that it is a list - i...) |
|||
(23 intermediate revisions by 13 users not shown) | |||
Line 1: | Line 1: | ||
The list container is one of several containers used to display items from file lists in various ways. | <section begin="main content" /> | ||
===Example=== | The list container is one of several containers used to display items from file lists in various ways. The list container is very flexible - it's only restriction is that it is a list - i.e. a single column or row of items. The layout of the items is very flexible and is up to the skinner. | ||
< | === Example === | ||
<control type="list" id=" | <syntaxhighlight lang="XML"> | ||
<control type="list" id="50"> | |||
<description>My first list container</description> | <description>My first list container</description> | ||
< | <left>80</left> | ||
< | <top>60</top> | ||
<width>250</width> | <width>250</width> | ||
<height>200</height> | <height>200</height> | ||
Line 16: | Line 17: | ||
<orientation>vertical</orientation> | <orientation>vertical</orientation> | ||
<pagecontrol>25</pagecontrol> | <pagecontrol>25</pagecontrol> | ||
<scrolltime>200</scrolltime> | <autoscroll>true</autoscroll> | ||
<itemlayout width=" | <scrolltime tween="sine" easing="out">200</scrolltime> | ||
<itemlayout width="650" height="29"> | |||
<control type="image"> | <control type="image"> | ||
< | <left>5</left> | ||
< | <top>3</top> | ||
<width>22</width> | <width>22</width> | ||
<height>22</height> | <height>22</height> | ||
< | <texture>$INFO[ListItem.Icon]</texture> | ||
</control> | </control> | ||
<control type="label"> | <control type="label"> | ||
< | <left>30</left> | ||
< | <top>3</top> | ||
<width>430</width> | <width>430</width> | ||
<height>22</height> | <height>22</height> | ||
Line 34: | Line 36: | ||
<selectedcolor>green</selectedcolor> | <selectedcolor>green</selectedcolor> | ||
<align>left</align> | <align>left</align> | ||
< | <label>$INFO[ListItem.Label]</label> | ||
</control> | </control> | ||
<control type="label"> | <control type="label"> | ||
< | <left>475</left> | ||
< | <top>3</top> | ||
<width>300</width> | <width>300</width> | ||
<height>22</height> | <height>22</height> | ||
Line 46: | Line 48: | ||
<textcolor>grey</textcolor> | <textcolor>grey</textcolor> | ||
<align>right</align> | <align>right</align> | ||
< | <label>$INFO[ListItem.Label2]</label> | ||
</control> | </control> | ||
</itemlayout> | </itemlayout> | ||
<focusedlayout height="29" width=" | <focusedlayout height="29" width="650"> | ||
<control type="image"> | <control type="image"> | ||
<width>485</width> | <width>485</width> | ||
<height>29</height> | <height>29</height> | ||
< | <left>0</left> | ||
< | <top>0</top> | ||
<visible>Control.HasFocus(50)</visible> | <visible>Control.HasFocus(50)</visible> | ||
<texture>list-focus.png</texture> | <texture>list-focus.png</texture> | ||
</control> | </control> | ||
<control type="image"> | <control type="image"> | ||
< | <left>5</left> | ||
< | <top>3</top> | ||
<width>22</width> | <width>22</width> | ||
<height>22</height> | <height>22</height> | ||
< | <texture>$INFO[ListItem.Icon]</texture> | ||
</control> | </control> | ||
<control type="label"> | <control type="label"> | ||
< | <left>30</left> | ||
< | <top>3</top> | ||
<width>430</width> | <width>430</width> | ||
<height>22</height> | <height>22</height> | ||
Line 74: | Line 76: | ||
<selectedcolor>green</selectedcolor> | <selectedcolor>green</selectedcolor> | ||
<align>left</align> | <align>left</align> | ||
< | <label>$INFO[ListItem.Label]</label> | ||
</control> | </control> | ||
<control type="label"> | <control type="label"> | ||
< | <left>475</left> | ||
< | <top>3</top> | ||
<width>300</width> | <width>300</width> | ||
<height>22</height> | <height>22</height> | ||
Line 86: | Line 88: | ||
<textcolor>grey</textcolor> | <textcolor>grey</textcolor> | ||
<align>right</align> | <align>right</align> | ||
< | <label>$INFO[ListItem.Label2]</label> | ||
</control> | </control> | ||
</focusedlayout> | </focusedlayout> | ||
</control> | </control> | ||
</ | </syntaxhighlight> | ||
===Available | === Available tags === | ||
In addition to the [[Default Control Tags]] the following tags are available. | In addition to the [[Default Control Tags]] the following tags are available. Note that each tag is '''lower case''' only. This is important, as xml tags are case-sensitive. | ||
{| class=" | |||
|- | {| class="prettytable" | ||
| | ! Tag !! Description | ||
| | |- | ||
|- | | '''viewtype''' | ||
| | | The type of view. Choices are list, icon, wide, wrap, biglist, bigicon, bigwide, bigwrap, info and biginfo. The label attribute indicates the label that will be used in the "View As" control within the GUI. It is localizable via strings.po. ''viewtype'' has no effect on the view itself. It is used by kodi when switching skin to automatically select a view with a similar layout. Skinners should try to set ''viewtype'' to describe the layout as best as possible. | ||
| | |- | ||
|- | | '''orientation''' | ||
| | | The orientation of the list. Defaults to vertical. | ||
| | |- | ||
|- | | '''pagecontrol''' | ||
| | | Used to set the <id> of the page control used to control this list. | ||
| | |- | ||
|- | | '''scrolltime''' | ||
| | | The time (in ms) to scroll from one item to another. By default, this is 200ms. The list will scroll smoothly from one item to another as needed. Set it to zero to disable the smooth scrolling. The scroll movement can be further adjusted by selecting one of the available [[Tweeners|tween]] methods. | ||
| | |- | ||
|- | | '''itemlayout''' | ||
| | | Specifies the layout of items in the list. Requires the height attribute set in a vertical list, and the width attribute set for a horizontal list. The <itemlayout> then contains as many label and image controls as required. [[Container Item Layout|See here for more information.]] | ||
| | |- | ||
|- | | '''focusedlayout''' | ||
| | | Specifies the layout of items in the list that have focus. Requires the height attribute set in a vertical list, and the width attribute set for a horizontal list. The <focusedlayout> then contains as many label and image controls as required. [[Container Item Layout|See here for more information.]] | ||
| | |- | ||
| '''content''' | |||
| Used to set the item content that this list will contain. Allows the skinner to setup a list anywhere they want with a static set of content, as a useful alternative to the grouplist control. [[Static List Content|See here for more information]] | |||
|- | |||
| '''preloaditems''' | |||
| Used in association with the [[Archive:Background Image Loader|Background Image Loader]]. | |||
|- | |||
| '''autoscroll''' | |||
| Used to make the container scroll automatically | |||
|} | |} | ||
[[ | <section end="main content" /> | ||
[[ | |||
== See also == | |||
'''Development:''' | |||
* [[Add-on development]] | |||
* [[Skinning]] | |||
[[Category:Skin development]] |
Latest revision as of 00:51, 14 April 2022
The list container is one of several containers used to display items from file lists in various ways. The list container is very flexible - it's only restriction is that it is a list - i.e. a single column or row of items. The layout of the items is very flexible and is up to the skinner.
Example
<control type="list" id="50"> <description>My first list container</description> <left>80</left> <top>60</top> <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> <autoscroll>true</autoscroll> <scrolltime tween="sine" easing="out">200</scrolltime> <itemlayout width="650" height="29"> <control type="image"> <left>5</left> <top>3</top> <width>22</width> <height>22</height> <texture>$INFO[ListItem.Icon]</texture> </control> <control type="label"> <left>30</left> <top>3</top> <width>430</width> <height>22</height> <font>font13</font> <aligny>center</aligny> <selectedcolor>green</selectedcolor> <align>left</align> <label>$INFO[ListItem.Label]</label> </control> <control type="label"> <left>475</left> <top>3</top> <width>300</width> <height>22</height> <font>font13</font> <aligny>center</aligny> <selectedcolor>green</selectedcolor> <textcolor>grey</textcolor> <align>right</align> <label>$INFO[ListItem.Label2]</label> </control> </itemlayout> <focusedlayout height="29" width="650"> <control type="image"> <width>485</width> <height>29</height> <left>0</left> <top>0</top> <visible>Control.HasFocus(50)</visible> <texture>list-focus.png</texture> </control> <control type="image"> <left>5</left> <top>3</top> <width>22</width> <height>22</height> <texture>$INFO[ListItem.Icon]</texture> </control> <control type="label"> <left>30</left> <top>3</top> <width>430</width> <height>22</height> <font>font13</font> <aligny>center</aligny> <selectedcolor>green</selectedcolor> <align>left</align> <label>$INFO[ListItem.Label]</label> </control> <control type="label"> <left>475</left> <top>3</top> <width>300</width> <height>22</height> <font>font13</font> <aligny>center</aligny> <selectedcolor>green</selectedcolor> <textcolor>grey</textcolor> <align>right</align> <label>$INFO[ListItem.Label2]</label> </control> </focusedlayout> </control>
Available tags
In addition to the Default Control Tags the following tags are available. Note that each tag is lower case only. This is important, as xml tags are case-sensitive.
Tag | Description |
---|---|
viewtype | The type of view. Choices are list, icon, wide, wrap, biglist, bigicon, bigwide, bigwrap, info and biginfo. The label attribute indicates the label that will be used in the "View As" control within the GUI. It is localizable via strings.po. viewtype has no effect on the view itself. It is used by kodi when switching skin to automatically select a view with a similar layout. Skinners should try to set viewtype to describe the layout as best as possible. |
orientation | The orientation of the list. Defaults to vertical. |
pagecontrol | Used to set the <id> of the page control used to control this list. |
scrolltime | The time (in ms) to scroll from one item to another. By default, this is 200ms. The list will scroll smoothly from one item to another as needed. Set it to zero to disable the smooth scrolling. The scroll movement can be further adjusted by selecting one of the available tween methods. |
itemlayout | Specifies the layout of items in the list. Requires the height attribute set in a vertical list, and the width attribute set for a horizontal list. The <itemlayout> then contains as many label and image controls as required. See here for more information. |
focusedlayout | Specifies the layout of items in the list that have focus. Requires the height attribute set in a vertical list, and the width attribute set for a horizontal list. The <focusedlayout> then contains as many label and image controls as required. See here for more information. |
content | Used to set the item content that this list will contain. Allows the skinner to setup a list anywhere they want with a static set of content, as a useful alternative to the grouplist control. See here for more information |
preloaditems | Used in association with the Background Image Loader. |
autoscroll | Used to make the container scroll automatically |
See also
Development: