Panel Container: Difference between revisions

From Official Kodi Wiki
Jump to navigation Jump to search
>NedBot
m (Wikitable class; cosmetic changes)
(11 intermediate revisions by 6 users not shown)
Line 1: Line 1:
<section begin="main content" />
The panel container is one of several containers used to display items from file lists in various ways. The panel container is very flexible - it's essentially a multi-column list. The layout of the items is very flexible and is up to the skinner.
The panel container is one of several containers used to display items from file lists in various ways. The panel container is very flexible - it's essentially a multi-column list. The layout of the items is very flexible and is up to the skinner.
=== Example ===
=== Example ===
<source lang="xml">
<syntaxhighlight lang="XML" enclose="div">
<control type="panel" id="52">
<control type="panel" id="52">
<posx>190</posx>
<left>190</left>
<posy>100</posy>
<top>100</top>
<width>485</width>
<width>485</width>
<height>425</height>
<height>425</height>
Line 12: Line 13:
<ondown>52</ondown>
<ondown>52</ondown>
<scrolltime tween="sine" easing="out">200</scrolltime>
<scrolltime tween="sine" easing="out">200</scrolltime>
<autoscroll>true</autoscroll>
<viewtype label="536">icon</viewtype>
<viewtype label="536">icon</viewtype>
<pagecontrol>60</pagecontrol>
<pagecontrol>60</pagecontrol>
<include>contentpanelslide</include>
<include>contentpanelslide</include>
<itemlayout height="141" width="120">
<itemlayout height="150" width="120">
<control type="image">
<control type="image">
<posx>10</posx>
<left>10</left>
<posy>10</posy>
<top>10</top>
<width>100</width>
<width>100</width>
<height>100</height>
<height>100</height>
<info>ListItem.Icon</info>
<texture>$INFO[ListItem.Icon]</texture>
</control>
</control>
<control type="image">
<control type="image">
<posx>80</posx>
<left>80</left>
<posy>75</posy>
<top>75</top>
<width>32</width>
<width>32</width>
<height>32</height>
<height>32</height>
<info>ListItem.Overlay</info>
<texture>$INFO[ListItem.Overlay]</texture>
</control>
</control>
<control type="label">
<control type="label">
<posx>60</posx>
<left>0</left>
<posy>115</posy>
<top>115</top>
<width>110</width>
<width>110</width>
<height>22</height>
<height>22</height>
Line 38: Line 40:
<selectedcolor>green</selectedcolor>
<selectedcolor>green</selectedcolor>
<align>center</align>
<align>center</align>
<info>ListItem.Label</info>
<label>$INFO[ListItem.Label]</label>
</control>
</control>
</itemlayout>
</itemlayout>
<focusedlayout height="141" width="120">
<focusedlayout height="150" width="120">
<control type="image">
<control type="image">
<width>110</width>
<width>110</width>
<height>110</height>
<height>110</height>
<posx>5</posx>
<left>5</left>
<posy>5</posy>
<top>5</top>
<texture>folder-focus.png</texture>
<texture>folder-focus.png</texture>
<animation effect="zoom" end="0,0,120,120" time="100">focus</animation>
<animation effect="zoom" end="0,0,120,120" time="100">focus</animation>
</control>
</control>
<control type="image">
<control type="image">
<posx>10</posx>
<left>10</left>
<posy>10</posy>
<top>10</top>
<width>100</width>
<width>100</width>
<height>100</height>
<height>100</height>
<info>ListItem.Icon</info>
<texture>$INFO[ListItem.Icon]</texture>
<animation effect="zoom" end="5,5,110,110" time="100">focus</animation>
<animation effect="zoom" end="5,5,110,110" time="100">focus</animation>
</control>
</control>
<control type="image">
<control type="image">
<posx>80</posx>
<left>80</left>
<posy>75</posy>
<top>75</top>
<width>32</width>
<width>32</width>
<height>32</height>
<height>32</height>
<info>ListItem.Overlay</info>
<texture>$INFO[ListItem.Overlay]</texture>
<animation effect="slide" end="5,5" time="100">focus</animation>
<animation effect="slide" end="5,5" time="100">focus</animation>
</control>
</control>
<control type="label">
<control type="label">
<posx>60</posx>
<left>0</left>
<posy>120</posy>
<top>120</top>
<width>110</width>
<width>110</width>
<height>22</height>
<height>22</height>
Line 74: Line 76:
<selectedcolor>green</selectedcolor>
<selectedcolor>green</selectedcolor>
<align>center</align>
<align>center</align>
<info>ListItem.Label</info>
<label>$INFO[ListItem.Label]</label>
</control>
</control>
</focusedlayout>
</focusedlayout>
</control>
</control>
</source>
</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="wikitable"
 
{| class="prettytable"
! Tag !! Description
|-  
|-  
|  '''viewtype'''
|  '''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.xml.
|  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.xml. ''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'''
|  '''orientation'''
Line 107: Line 111:
|  '''preloaditems'''
|  '''preloaditems'''
|  Used in association with the background image loader. [[Background Image Loader|See here for more information]]
|  Used in association with the background image loader. [[Background Image Loader|See here for more information]]
|-
|  '''autoscroll'''
|  Used to make the container scroll automatically
|}
|}


[[Category:Skin Development]]
<section end="main content" />
 
== See also ==
'''Development:'''
* [[Add-on development]]
* [[Skinning]]
 
[[Category:Skin development]]

Revision as of 18:21, 5 March 2019

The panel container is one of several containers used to display items from file lists in various ways. The panel container is very flexible - it's essentially a multi-column list. The layout of the items is very flexible and is up to the skinner.

Example

<control type="panel" id="52">
	<left>190</left>
	<top>100</top>
	<width>485</width>
	<height>425</height>
	<onleft>9000</onleft>
	<onright>60</onright>
	<onup>52</onup>
	<ondown>52</ondown>
	<scrolltime tween="sine" easing="out">200</scrolltime>
	<autoscroll>true</autoscroll>
	<viewtype label="536">icon</viewtype>
	<pagecontrol>60</pagecontrol>
	<include>contentpanelslide</include>
	<itemlayout height="150" width="120">
		<control type="image">
			<left>10</left>
			<top>10</top>
			<width>100</width>
			<height>100</height>
			<texture>$INFO[ListItem.Icon]</texture>
		</control>
		<control type="image">
			<left>80</left>
			<top>75</top>
			<width>32</width>
			<height>32</height>
			<texture>$INFO[ListItem.Overlay]</texture>
		</control>
		<control type="label">
			<left>0</left>
			<top>115</top>
			<width>110</width>
			<height>22</height>
			<font>font13</font>
			<selectedcolor>green</selectedcolor>
			<align>center</align>
			<label>$INFO[ListItem.Label]</label>
		</control>
	</itemlayout>
	<focusedlayout height="150" width="120">
		<control type="image">
			<width>110</width>
			<height>110</height>
			<left>5</left>
			<top>5</top>
			<texture>folder-focus.png</texture>
			<animation effect="zoom" end="0,0,120,120" time="100">focus</animation>
		</control>
		<control type="image">
			<left>10</left>
			<top>10</top>
			<width>100</width>
			<height>100</height>
			<texture>$INFO[ListItem.Icon]</texture>
			<animation effect="zoom" end="5,5,110,110" time="100">focus</animation>
		</control>
		<control type="image">
			<left>80</left>
			<top>75</top>
			<width>32</width>
			<height>32</height>
			<texture>$INFO[ListItem.Overlay]</texture>
			<animation effect="slide" end="5,5" time="100">focus</animation>
		</control>
		<control type="label">
			<left>0</left>
			<top>120</top>
			<width>110</width>
			<height>22</height>
			<font>font13</font>
			<selectedcolor>green</selectedcolor>
			<align>center</align>
			<label>$INFO[ListItem.Label]</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.xml. 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 panel. Defaults to vertical.
pagecontrol Used to set the <id> of the page control used to control this panel.
scrolltime The time (in ms) to scroll from one item to another. By default, this is 200ms. The panel 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 both width and height attributes set. 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 both width and height attributes set. 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 panel will contain. Allows the skinner to setup a panel 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. See here for more information
autoscroll Used to make the container scroll automatically


See also

Development: