xbmc/guilib/GUIWrappingListContainer.dox

   1 /*!
   2
   3 \page Wrap_List_Container Wrap List Container
   4 \brief **Used for a wrapping list of items with fixed focus.**
   5
   6 \tableofcontents
   7
   8 The wrap list container is one of several containers used to display items
   9 fromfile lists in various ways. The wrap list container is the same as the
  10 \ref List_Container "List Container", with two exceptions:
  11   1. The focused item is fixed.
  12   2. The items "wrap" around once they reach the end.
  13
  14 As with all container controls, the layout of the items within the control is
  15 very flexible.
  16
  17 --------------------------------------------------------------------------------
  18 \section Wrap_List_Container_sect1 Example
  19
  20 ~~~~~~~~~~~~~
  21 <control type="wraplist" id="50">
  22       <description>My first wraplist container</description>
  23       <posx>80</posx>
  24       <posy>60</posy>
  25       <width>250</width>
  26       <height>200</height>
  27       <visible>true</visible>
  28       <onup>2</onup>
  29       <ondown>3</ondown>
  30       <onleft>1</onleft>
  31       <onright>1</onright>
  32       <viewtype label="3D list">list</viewtype>
  33       <orientation>vertical</orientation>
  34       <pagecontrol>25</pagecontrol>
  35       <focusposition>3</focusposition>
  36       <scrolltime tween="sine" easing="out">200</scrolltime>
  37       <autoscroll>true</autoscroll>
  38       <itemlayout width="250" height="29">
  39                 <control type="image">
  40                         <posx>5</posx>
  41                         <posy>3</posy>
  42                         <width>22</width>
  43                         <height>22</height>
  44                         <info>ListItem.Icon</info>
  45                 </control>
  46                 <control type="label">
  47                         <posx>30</posx>
  48                         <posy>3</posy>
  49                         <width>430</width>
  50                         <height>22</height>
  51                         <font>font13</font>
  52                         <aligny>center</aligny>
  53                         <selectedcolor>green</selectedcolor>
  54                         <align>left</align>
  55                         <info>ListItem.Label</info>
  56                 </control>
  57                 <control type="label">
  58                         <posx>475</posx>
  59                         <posy>3</posy>
  60                         <width>300</width>
  61                         <height>22</height>
  62                         <font>font13</font>
  63                         <aligny>center</aligny>
  64                         <selectedcolor>green</selectedcolor>
  65                         <textcolor>grey</textcolor>
  66                         <align>right</align>
  67                         <info>ListItem.Label2</info>
  68                 </control>
  69       </itemlayout>
  70       <focusedlayout height="29" width="250">
  71                 <control type="image">
  72                         <width>485</width>
  73                         <height>29</height>
  74                         <posx>0</posx>
  75                         <posy>0</posy>
  76                         <visible>Control.HasFocus(50)</visible>
  77                         <texture>list-focus.png</texture>
  78                 </control>
  79                 <control type="image">
  80                         <posx>5</posx>
  81                         <posy>3</posy>
  82                         <width>22</width>
  83                         <height>22</height>
  84                         <info>ListItem.Icon</info>
  85                 </control>
  86                 <control type="label">
  87                         <posx>30</posx>
  88                         <posy>3</posy>
  89                         <width>430</width>
  90                         <height>22</height>
  91                         <font>font13</font>
  92                         <aligny>center</aligny>
  93                         <selectedcolor>green</selectedcolor>
  94                         <align>left</align>
  95                         <info>ListItem.Label</info>
  96                 </control>
  97                 <control type="label">
  98                         <posx>475</posx>
  99                         <posy>3</posy>
 100                         <width>300</width>
 101                         <height>22</height>
 102                         <font>font13</font>
 103                         <aligny>center</aligny>
 104                         <selectedcolor>green</selectedcolor>
 105                         <textcolor>grey</textcolor>
 106                         <align>right</align>
 107                         <info>ListItem.Label2</info>
 108                 </control>
 109       </focusedlayout>
 110 </control>
 111 ~~~~~~~~~~~~~
 112
 113 --------------------------------------------------------------------------------
 114 \section Wrap_List_Container_sect2 Available tags
 115
 116 In addition to the [Default Control Tags](http://kodi.wiki/view/Default_Control_Tags)
 117 the following tags are available. Note that each tag is **lower case** only. This is
 118 important, as `xml` tags are case-sensitive.
 119
 120 | Tag           | Description                                                   |
 121 |--------------:|:--------------------------------------------------------------|
 122 | 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 <i>"View As"</i> 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.
 123 | orientation   | The orientation of the list. Defaults to vertical.
 124 | pagecontrol   | Used to set the <b>`<id>`</b> of the page control used to control this list.
 125 | 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](http://kodi.wiki/view/Tweeners) methods.
 126 | focusposition | Specifies the index (from 0 -> number items displayable - 1) of the focused item. The focused item doesn't move - as the user moves up and down (or left and right) the items scroll instead.
 127 | 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 <b>`<itemlayout>`</b> then contains as many label and image controls as required. [See here for more information](http://kodi.wiki/view/Container_Item_Layout).
 128 | 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 <b>`<focusedlayout>`</b> then contains as many label and image controls as required. [See here for more information](http://kodi.wiki/view/Container_Item_Layout).
 129 | 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](http://kodi.wiki/view/Static_List_Content)
 130 | autoscroll    | Used to make the container scroll automatically
 131
 132 --------------------------------------------------------------------------------
 133 \section Wrap_List_Container_sect3 See also
 134 #### Development:
 135
 136 - [Add-on development](http://kodi.wiki/view/Add-on_development)
 137 - [Skinning](http://kodi.wiki/view/Skinning)
 138
 139 */