Fixed List Container: Difference between revisions

From Official Kodi Wiki
Jump to navigation Jump to search
>Nnifty
No edit summary
(Fix broken Wikilink created by the Great Archive-a-thon of 2020)
(21 intermediate revisions by 11 users not shown)
Line 1: Line 1:
The fixed list container is one of several containers used to display items from file lists in various ways. The fixed list container is the same as the [[List Container]], with one exceptions:
The '''Fixed List Container''' is one of several containers used to display items from file lists in a certain way. It is identical to the [[List Container]] with one exception: the focus area has a fixed position, while the list appears to move beneath it in response to directional input. Thus, moving up or down scrolls the items, not the focused position. As with all container controls, the [[Container Item Layout|layout]] of the items within the control is very flexible.
1. The focused item is fixed, thus moving up or down scrolls the items, not the focused position.
As with all container controls, the layout of the items within the control is very flexible.
===Example===
<xml>
<control type="fixedlist" id="50">
      <description>My first fixed list 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>
      <scrolltime>200</scrolltime>
      <focusposition>4</focusposition>
      <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>
<font>font13</font>
<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>
<font>font13</font>
<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>
<font>font13</font>
<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>
<font>font13</font>
<aligny>center</aligny>
<selectedcolor>green</selectedcolor>
<textcolor>grey</textcolor>
<align>right</align>
<info>ListItem.Label2</info>
</control>
      </focusedlayout>
</control>
</xml>


===Available Tags===
<syntaxhighlight lang="xml">
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.
    <control type="fixedlist" id="50">
{| class="dtable"
          <description>My first fixed list container</description>
|- class="userrow"
          <left>80</left>
| class="usercell" | '''viewtype'''
          <top>60</top>
| class="usercell" | The type of view. Choices are list, icon, wide, wrap, biglist, bigicon, bigwide, and bigwrap. The label attribute indicates the label that will be used in the "View As" control within the GUI. It is localizable via strings.xml.
          <width>250</width>
|- class="userrow"
          <height>200</height>
| class="usercell" | '''orientation'''
          <visible>true</visible>
| class="usercell" | The orientation of the list. Defaults to vertical.
          <onup>2</onup>
|- class="userrow"
          <ondown>3</ondown>
| class="usercell" | '''pagecontrol'''
          <onleft>1</onleft>
| class="usercell" | Used to set the <id> of the page control used to control this list.
          <onright>1</onright>
|- class="userrow"
          <viewtype label="3D list">list</viewtype>
| class="usercell" | '''scrolltime'''
          <orientation>vertical</orientation>
| 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.
          <pagecontrol>25</pagecontrol>
|- class="userrow"
          <scrolltime tween="sine" easing="out">200</scrolltime>
| class="usercell" | '''focusposition'''
          <autoscroll>true</autoscroll>
| class="usercell" | Specifies the focus position (from 0 -> number of displayable items - 1). The focused position doesn't change - instead, the items move up or down (or left and right) as focus changes.
          <focusposition>4</focusposition>
|- class="userrow"
          <movement>6</movement>
| class="usercell" | '''itemlayout'''
          <itemlayout width="650" height="29">
| class="usercell" | 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.]]
                    <control type="image">
|- class="userrow"
                            <left>5</left>
| class="usercell" | '''focusedlayout'''
                            <top>3</top>
| class="usercell" | 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.]]
                            <width>22</width>
|- class="userrow"
                            <height>22</height>
| class="usercell" | '''content'''
                            <texture>$INFO[ListItem.Icon]</texture>
| class="usercell" | 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]]
                    </control>
|- class="userrow"
                    <control type="label">
| class="usercell" | '''preloaditems'''
                            <left>30</left>
| class="usercell" | Used in association with the background image loader. [[Background Image Loader|See here for more information]]
                            <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>
</syntaxhighlight>
 
=== 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 this file is written in XML, a language where tag names are case-sensitive.
 
{| class="prettytable"
! Tag !! Description
|-
| '''viewtype'''
| The type of view, valid values are: <code>list</code>, <code>icon</code>, <code>wide</code>, <code>wrap</code>, <code>biglist</code>, <code>bigicon</code>, <code>bigwide</code>, <code>bigwrap</code>, <code>info</code> and <code>biginfo</code>. The label attribute indicates the label that will be used in the "View As" control within the GUI. It is localizable via strings.xml. ''viewtype'' has no effect on the view itself. It is used by Kodi when switching skins 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 milliseconds) to scroll from one item to another, defaults to 200ms. The list will scroll smoothly from one item to another as needed, or setting it to zero to disables the smooth scrolling effect. The scroll movement can be further adjusted by selecting one of the available [[Tweeners|tween]] methods.
|-
| '''focusposition'''
| Specifies the focus position (from 0 -> number of displayable items - 1). The focused position doesn't change—instead, the items move up or down (or left and right) through the focus area.
|-
| '''movement'''
| This will make the focused position scroll again at the end of the list. (ie. <movement>6</movement> if there are only 6 items below the focus, the focus moves down to the bottom)
|-
| '''itemlayout'''
| Specifies the layout of items in the list and requires the height attribute to be set in a vertical list, or the width attribute set for a horizontal one. The <itemlayout> then contains as many label and image controls as required.<br />''See: '''[[Container Item Layout]]'''''
|-
| '''focusedlayout'''
| Specifies the layout of items in the list that have focus and requires the height attribute to be set in a vertical list, or the width attribute set for a horizontal one. The <focusedlayout> then contains as many label and image controls as required.<br />''See: '''[[Container Item Layout]]'''''
|-
| '''content'''
| Used to set the item content that this list will contain, allowing the skinner to setup a list anywhere they want with a static set of content, as a useful alternative to the <code>grouplist</code> control.<br />''See: '''[[Static List Content]]'''''
|-
| '''preloaditems'''
| Used in association with the [[Archive:Background Image Loader|Background Image Loader]].
|-
| '''autoscroll'''
| Used to make the container scroll automatically
|}
|}


[[category:Skin Development]]
== See also ==
'''Development:'''
* [[Add-on development]]
* [[Skinning]]
 
 
[[Category:Skin development]]

Revision as of 00:50, 11 November 2021

The Fixed List Container is one of several containers used to display items from file lists in a certain way. It is identical to the List Container with one exception: the focus area has a fixed position, while the list appears to move beneath it in response to directional input. Thus, moving up or down scrolls the items, not the focused position. As with all container controls, the layout of the items within the control is very flexible.

    <control type="fixedlist" id="50">
          <description>My first fixed 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>
          <scrolltime tween="sine" easing="out">200</scrolltime>
          <autoscroll>true</autoscroll>
          <focusposition>4</focusposition>
          <movement>6</movement>
          <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 this file is written in XML, a language where tag names are case-sensitive.

Tag Description
viewtype The type of view, valid values 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.xml. viewtype has no effect on the view itself. It is used by Kodi when switching skins 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 milliseconds) to scroll from one item to another, defaults to 200ms. The list will scroll smoothly from one item to another as needed, or setting it to zero to disables the smooth scrolling effect. The scroll movement can be further adjusted by selecting one of the available tween methods.
focusposition Specifies the focus position (from 0 -> number of displayable items - 1). The focused position doesn't change—instead, the items move up or down (or left and right) through the focus area.
movement This will make the focused position scroll again at the end of the list. (ie. <movement>6</movement> if there are only 6 items below the focus, the focus moves down to the bottom)
itemlayout Specifies the layout of items in the list and requires the height attribute to be set in a vertical list, or the width attribute set for a horizontal one. The <itemlayout> then contains as many label and image controls as required.
See: Container Item Layout
focusedlayout Specifies the layout of items in the list that have focus and requires the height attribute to be set in a vertical list, or the width attribute set for a horizontal one. The <focusedlayout> then contains as many label and image controls as required.
See: Container Item Layout
content Used to set the item content that this list will contain, allowing the skinner to setup a list anywhere they want with a static set of content, as a useful alternative to the grouplist control.
See: Static List Content
preloaditems Used in association with the Background Image Loader.
autoscroll Used to make the container scroll automatically

See also

Development: