Container Item Layout: Difference between revisions

From Official Kodi Wiki
Jump to navigation Jump to search
No edit summary
(9 intermediate revisions by 7 users not shown)
Line 1: Line 1:
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.
All container objects ([[List Container]], [[Wrap List Container]], [[Fixed List Container]] and [[Panel Container]]) have very flexible layout of their items using the <itemlayout> and <focusedlayout> tags.


===Example===
=== Example ===
<xml>
<syntaxhighlight lang="xml" enclose="div">
  <control type="wraplist" id="50">
  <control type="wraplist" id="50">
       <description>My first wraplist container</description>
       <description>My first wraplist container</description>
       <posx>80</posx>
       <left>80</left>
       <posy>60</posy>
       <top>60</top>
       <width>250</width>
       <width>250</width>
       <height>200</height>
       <height>200</height>
Line 21: Line 21:
       <itemlayout width="250" height="29" condition="true">
       <itemlayout width="250" height="29" condition="true">
                 <control type="image">
                 <control type="image">
                         <posx>5</posx>
                         <left>5</left>
                         <posy>3</posy>
                         <top>3</top>
                         <width>22</width>
                         <width>22</width>
                         <height>22</height>
                         <height>22</height>
Line 28: Line 28:
                 </control>
                 </control>
                 <control type="label">
                 <control type="label">
                         <posx>30</posx>
                         <left>30</left>
                         <posy>3</posy>
                         <top>3</top>
                         <width>430</width>
                         <width>430</width>
                         <height>22</height>
                         <height>22</height>
Line 39: Line 39:
                 </control>
                 </control>
                 <control type="label">
                 <control type="label">
                         <posx>475</posx>
                         <left>475</left>
                         <posy>3</posy>
                         <top>3</top>
                         <width>300</width>
                         <width>300</width>
                         <height>22</height>
                         <height>22</height>
Line 55: Line 55:
                         <width>485</width>
                         <width>485</width>
                         <height>29</height>
                         <height>29</height>
                         <posx>0</posx>
                         <left>0</left>
                         <posy>0</posy>
                         <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">
                         <posx>5</posx>
                         <left>5</left>
                         <posy>3</posy>
                         <top>3</top>
                         <width>22</width>
                         <width>22</width>
                         <height>22</height>
                         <height>22</height>
Line 68: Line 68:
                 </control>
                 </control>
                 <control type="label">
                 <control type="label">
                         <posx>30</posx>
                         <left>30</left>
                         <posy>3</posy>
                         <top>3</top>
                         <width>430</width>
                         <width>430</width>
                         <height>22</height>
                         <height>22</height>
Line 79: Line 79:
                 </control>
                 </control>
                 <control type="label">
                 <control type="label">
                         <posx>475</posx>
                         <left>475</left>
                         <posy>3</posy>
                         <top>3</top>
                         <width>300</width>
                         <width>300</width>
                         <height>22</height>
                         <height>22</height>
Line 92: Line 92:
       </focusedlayout>
       </focusedlayout>
  </control>
  </control>
</xml>
</syntaxhighlight>
 
As can be seen, the <itemlayout> and <focusedlayout> blocks can contain a number of [[Image Control|image]] or [[Label Control|label]] controls, the content of which is either static, or can be filled with [[InfoLabels|info labels]] such as ListItem.Title and so on. You can have more than one <itemlayout> / <focusedlayout> tag based on conditional visibility. The first <itemlayout> with a condition that is satisfied (or no condition specified) will be used for a particular directory listing. The condition is only checked when the list is refreshed.
<syntaxhighlight lang="xml" enclose="div">
      <itemlayout height="29" width="250" condition="Container.Content(Movies)">
</syntaxhighlight>


As can be seen, the <itemlayout> and <focusedlayout> blocks can contain a number of [[Image Control|image]], [[Label Control|label]] or [[Multiselect Control|multiselect]] controls, the content of which is either static, or can be filled with [[Info Labels|info labels]] such as ListItem.Title and so on. You can have more than one <itemlayout> tag based on conditional visibility. The first <itemlayout> with a condition that is satisfied (or no condition specified) will be used for a particular directory listing. The condition is only checked when the list is refreshed.


Most image and label tags are available to these sub-controls.
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.
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.
 
== See also ==
'''Development:'''
* [[Add-on development]]
* [[Skinning]]
 
[[Category:Skin development]]

Revision as of 13:02, 16 February 2018

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

Example

 <control type="wraplist" id="50">
      <description>My first wraplist 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>
      <focusposition>3</focusposition>
      <scrolltime>200</scrolltime>
      <itemlayout width="250" height="29" condition="true">
                <control type="image">
                        <left>5</left>
                        <top>3</top>
                        <width>22</width>
                        <height>22</height>
                        <info>ListItem.Icon</info>
                </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>
                        <info>ListItem.Label</info>
                </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>
                        <info>ListItem.Label2</info>
                </control>
      </itemlayout>
      <focusedlayout height="29" width="250">
                <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>
                        <info>ListItem.Icon</info>
                </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>
                        <info>ListItem.Label</info>
                </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>
                        <info>ListItem.Label2</info>
                </control>
      </focusedlayout>
 </control>

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. You can have more than one <itemlayout> / <focusedlayout> tag based on conditional visibility. The first <itemlayout> with a condition that is satisfied (or no condition specified) will be used for a particular directory listing. The condition is only checked when the list is refreshed.

      <itemlayout height="29" width="250" condition="Container.Content(Movies)">


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.

See also

Development: