Group List Control: Difference between revisions

From Official Kodi Wiki
Jump to navigation Jump to search
>Jezz X
 
(17 intermediate revisions by 8 users not shown)
Line 1: Line 1:
The group list control is a special case of the group control. It is used for placing a set of controls into a list (either horizontally or vertically) and handles all the navigation within the list and placement within the list for you. It will be scrollable if the number of items exceeds the size of the list, and you can assign a scrollbar to it just like you can to any of the containers (list, panel, etc.).
<section begin="main content" />
===Example===
The group list control is a special case of the group control. It is used for placing a set of controls into a list (either horizontally or vertically) and handles all the navigation within the list and placement within the list for you. It will be scrollable if the number of items exceeds the size of the list, and you can assign a scrollbar to it just like you can to any of the containers (list, panel, etc.).
<xml>
=== Example ===
<syntaxhighlight lang="xml" enclose="div">
<control type="grouplist" id="17">
<control type="grouplist" id="17">
       <description>My first group list control</description>
       <description>My first group list control</description>
       <posx>80</posx>
       <defaultcontrol>701</defaultcontrol>
       <posy>60</posy>
      <left>80</left>
       <top>60</top>
       <width>250</width>
       <width>250</width>
       <height>300</height>
       <height>300</height>
       <itemgap>10</itemgap>
       <itemgap>10</itemgap>
       <pagecontrol>25</pagecontrol>
       <pagecontrol>25</pagecontrol>
       <scrolltime>200</scrolltime>
       <scrolltime tween="sine" easing="out">200</scrolltime>
       <orientation>vertical</orientation>
       <orientation>vertical</orientation>
       <usecontrolcoords>false</usecontrolcoords>
       <usecontrolcoords>false</usecontrolcoords>
Line 18: Line 20:
       <onleft>1</onleft>
       <onleft>1</onleft>
       <onright>1</onright>
       <onright>1</onright>
       ... more controls go here ...
      <align>right</align>
       ...
      <!-- place your controls here -->
      ...
</control>
</control>
</xml>
</syntaxhighlight>


===Available Tags===
=== 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.
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="dtable"
{| class="prettytable"
|- class="userrow"
! Tag !! Description
| class="usercell" | '''itemgap'''
|-  
| class="usercell" | Specifies the gap (in pixels) between controls in the list.
| '''itemgap'''
|- class="userrow"
| Specifies the gap (in pixels) between controls in the list. Defaults to 5px.
| class="usercell" | '''orientation'''
|-  
| class="usercell" | Specifies whether the list is horizontal or vertical.  Defaults to vertical.
| '''orientation'''
|- class="userrow"
| Specifies whether the list is horizontal or vertical.  Defaults to vertical.
| class="usercell" | '''pagecontrol'''
|-  
| class="usercell" | Specifies the page control used to scroll up and down the list.  Set the page control's id here.
| '''pagecontrol'''
|- class="userrow"
| Specifies the page control used to scroll up and down the list.  Set the page control's id here.
| class="usercell" | '''scrolltime'''
|-  
| class="usercell" | 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.
| '''scrolltime'''
|- class="userrow"
| 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.
| class="usercell" | '''usecontrolcoords'''
|-  
| class="usercell" | Specifies whether the list should use the control's coordinates as an offset location from the coordinates it would normally use to draw the control.  Defaults to false.  Useful for staggering a control in from the edge of the grouplist, or for having more space around a control than <itemgap> gives.
| '''usecontrolcoords'''
| Specifies whether the list should use the control's coordinates as an offset location from the coordinates it would normally use to draw the control.  Defaults to false.  Useful for staggering a control in from the edge of the grouplist, or for having more space around a control than <itemgap> gives.
|-
|  '''align'''
|  Specifies how to align the grouplist. possible values: left, right, center, justify. defaults to left.
|-
|  '''defaultcontrol'''
|  Specifies the id of the control that should be focussed when the grouplist gains focus.
|}
|}
[[category:Skin Development]]
<section end="main content" />
 
== See also ==
'''Development:'''
* [[Add-on development]]
* [[Skinning]]
 
[[Category:Skin development]]

Latest revision as of 18:18, 5 March 2019

The group list control is a special case of the group control. It is used for placing a set of controls into a list (either horizontally or vertically) and handles all the navigation within the list and placement within the list for you. It will be scrollable if the number of items exceeds the size of the list, and you can assign a scrollbar to it just like you can to any of the containers (list, panel, etc.).

Example

<control type="grouplist" id="17">
      <description>My first group list control</description>
      <defaultcontrol>701</defaultcontrol>
      <left>80</left>
      <top>60</top>
      <width>250</width>
      <height>300</height>
      <itemgap>10</itemgap>
      <pagecontrol>25</pagecontrol>
      <scrolltime tween="sine" easing="out">200</scrolltime>
      <orientation>vertical</orientation>
      <usecontrolcoords>false</usecontrolcoords>
      <visible>true</visible>
      <onup>2</onup>
      <ondown>3</ondown>
      <onleft>1</onleft>
      <onright>1</onright>
      <align>right</align>
      ...
      <!-- place your controls here -->
      ...
</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
itemgap Specifies the gap (in pixels) between controls in the list. Defaults to 5px.
orientation Specifies whether the list is horizontal or vertical. Defaults to vertical.
pagecontrol Specifies the page control used to scroll up and down the list. Set the page control's id here.
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.
usecontrolcoords Specifies whether the list should use the control's coordinates as an offset location from the coordinates it would normally use to draw the control. Defaults to false. Useful for staggering a control in from the edge of the grouplist, or for having more space around a control than <itemgap> gives.
align Specifies how to align the grouplist. possible values: left, right, center, justify. defaults to left.
defaultcontrol Specifies the id of the control that should be focussed when the grouplist gains focus.


See also

Development: