Demo

Please note that your browser is not currently supported for this Unity WebGL content. Press OK if you wish to continue anyway.
Fullscreen
XmlLayout Demo




Features

XmlLayout allows you to create fully functional user interfaces and UI elements using XML.
  • Utilise all of the functionality of UnityGUI through XML
  • Supports event handling, on any element (onClick, onMouseEnter, onMouseExit, onValueChanged, etc.)
  • Easily retrieve form data from multiple elements at once with XmlLayout.GetFormData()
  • Access and create Xml Elements dynamically at runtime
  • Includes Xml Scheme Definition (XSD) for intellisense support (autocomplete).
  • Set default values to be used by other elements (e.g. visual styles)


Example Code

Basic Concepts

Each XmlLayout object may have Xml specified manually (either in the editor or in code), or it may load Xml directly from a file.
Additionally, each XmlLayout object may have an optional XmlLayoutController (which is coded specifically for that XmlLayout) which:
  1. Performs the setup of dynamic objects and lists (such as dropdown lists)
  2. Is responsible for handling any events fired by the XmlLayout object e.g. <Button onClick='MethodName();' /> would execute the XmlLayoutController's MethodName() method (if it exists) when the button is clicked.

XmlLayout Elements

Most elements available in XmlLayout are standard Unity 4.6+ GUI elements, e.g. VerticalLayout, GridLayout, Button, InputField, etc.
However, some additional elements have been provided to provide a more complete UI solution:

  • TableLayout

    TableLayout is a LayoutGroup inspired by HTML Tables, allowing you to organise UI elements using rows and columns. As with HTML tables, cells can span multiple rows.

  • ToggleButton / ToggleButtonGroup

    ToggleButton is essentially a Toggle element, but with the appearance of a Button.

Styles

A small collection of default style values used by all of the examples. 

                    

    
  1. <XmlLayout
  2.   xmlns="XmlLayout"
  3.   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  4.   xsi:schemaLocation="XmlLayout ../../../Configuration/XmlLayout.xsd">
  5.  
  6.   <!-- 
  7.   NOTE: Now controlled by the 'Color Scheme Manager'
  8.   <Include path="Xml/ColorSchemes/GreenYellow" />
  9.   -->
  10.   
  11.   <Defaults>
  12.     <Text color="text_Base" alignment="MiddleLeft" font="Arial" />
  13.     <Text class="title" alignment="MiddleCenter" color="titleTextColor" fontSize="32" shadow="shadowColor" font="Arial Bold" />
  14.     <Text class="h1" font="Arial Bold" fontSize="24" />
  15.     <Text class="h2" font="Arial Bold" fontSize="16" color="titleTextColor" shadow="shadowColor" />
  16.     <Text class="h3" font="Arial Bold" fontSize="12" />
  17.  
  18.     <TableLayout class="noCellBackground" cellBackgroundColor="clear" />
  19.     
  20.     <Row class="headerRow" dontUseTableRowBackground="true" image="Sprites/Layout/Title" color="titleRowColor" preferredHeight="64" />
  21.     <Row class="sectionHeaderRow" dontUseTableRowBackground="true" image="Sprites/Layout/Button" color="sectionHeaderRowColor" preferredHeight="36" />
  22.     <Row class="viewport"  dontUseTableRowBackground="true" image="Sprites/Layout/Viewport" color="viewportColor" />
  23.  
  24.     <Button font="Arial Bold" image="Sprites/Layout/Button" colors="button_Base|button_Active|button_Active|button_Disabled" textColor="buttonText" textShadow="shadowColor" />
  25.  
  26.     <Button class="disabled" colors="button_Disabled|button_Disabled|button_Disabled|button_Disabled" textColor="buttonText_Disabled" interactable="false" />        
  27.     
  28.     <!--<Button class="submit" colors="rgb(0.1,0.4,0)|rgb(0.1,0.4,0)|rgb(0.1,0.4,0)" textColor="rgb(0,0.5,0)" />-->
  29.  
  30.     <ToggleButton font="Arial Bold" 
  31.                   image="Sprites/Layout/Button" 
  32.                   colors="button_Base|button_Active|button_Active|button_Disabled"
  33.                   textColors="text_Faded|text_Highlighted|text_Highlighted"
  34.                   deselectedBackgroundColor="toggleButton_Deselected"                  
  35.                   deselectedIconColor="toggleButtonIcon_Deselected"
  36.                   selectedBackgroundColor="toggleButton_Selected"                  
  37.                   selectedIconColor="toggleButtonIcon_Selected"   
  38.                   textShadow="shadowColor" />
  39.  
  40.     <VerticalScrollView class="scrollView"
  41.                     color="scrollViewBackground"
  42.                     image="Sprites/Layout/Base"
  43.                     movementType="Clamped"
  44.                     scrollSensitivity="15"
  45.                     scrollbarBackgroundColor="scrollbarBackground"
  46.                     scrollbarColors="scrollbar_Base|scrollbar_Active|scrollbar_Active|scrollbar_Disabled"
  47.                     scrollbarImage="Sprites/Layout/Scrollbar" />
  48.  
  49.     <HorizontalScrollView class="scrollView"
  50.                     color="scrollViewBackground"
  51.                     image="Sprites/Layout/Base"
  52.                     movementType="Clamped"
  53.                     scrollSensitivity="15"
  54.                     scrollbarBackgroundColor="scrollbarBackground"
  55.                     scrollbarColors="scrollbar_Base|scrollbar_Active|scrollbar_Active|scrollbar_Disabled"
  56.                     scrollbarImage="Sprites/Layout/Scrollbar" />
  57.  
  58.     <!-- Audio 'Styles' -->
  59.     <Button onClickSound="Audio/beep-timber" audioVolume="0.25" audioMixerGroup="Audio/XmlLayoutExampleAudioMixer|Master/Interface" />
  60.  
  61.     <Tooltip tooltipBorderColor="tooltipBorder" tooltipTextColor="tooltipText" />
  62.  
  63.     <!-- Hover Styles (new in v1.21) -->
  64.     <Slider backgroundColor="sliderBackground" fillColor="slider_Base" handleColor="slider_Base" hoverClass="hover" navigation="Vertical" />
  65.     <Slider class="hover" fillColor="slider_Active" handleColor="slider_Active" />    
  66.     
  67.     <Dropdown colors="dropdown_Base|dropdown_Active" textColor="dropdownText_Base" hoverClass="hover" />
  68.     <Dropdown class="hover" textColor="dropdownText_Active" />
  69.  
  70.     <Toggle colors="toggle_Base|toggle_Active|toggle_Active" />
  71.  
  72.     <InputField colors="inputField_Base|inputField_Active|inputField_Active" textColor="inputFieldText_Base" hoverClass="hover" />
  73.     <InputField class="hover" textColor="inputFieldText_Active" />
  74.         
  75.     <Button hoverClass="hover" />        
  76.     <Button class="hover" textColor="buttonText_Active" />        
  77.     
  78.     <!-- Cursors -->
  79.     <Button cursor="Cursors/ExampleCursor_Hover|0 0" />
  80.     <InputField cursor="Cursors/ExampleCursor_Hover|0 0" />
  81.     <Toggle cursor="Cursors/ExampleCursor_Hover|0 0" />
  82.     <ToggleButton cursor="Cursors/ExampleCursor_Hover|0 0" />
  83.     <Slider cursor="Cursors/ExampleCursor_Hover|0 0" />        
  84.   </Defaults>  
  85. </XmlLayout>

Example Menu

The menu used to select an example to view, demonstrating one way of adding elements dynamically using a template. 

                    

    
  1. <XmlLayout xmlns="XmlLayout" 
  2.            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
  3.            xsi:schemaLocation="XmlLayout ../../../Configuration/XmlLayout.xsd">
  4.   
  5.   <Include path="Xml/Styles.xml" />   
  6.  
  7.   <TableLayout class="noCellBackground" height="450" width="256" rectAlignment="MiddleLeft" offsetXY="32 0" useGlobalCellPadding="false"  raycastTarget="1">
  8.     <Row class="headerRow">
  9.       <Cell>
  10.         <Text class="title">          
  11.           Examples
  12.         </Text>
  13.       </Cell>
  14.     </Row>
  15.     <Row class="viewport">
  16.       <Cell dontUseTableCellBackground="true">
  17.         <VerticalLayout padding="10" spacing="5" id="menuButtons">          
  18.           <!-- This is a template which will be used by the XmlLayoutController to create the menu buttons dynamically -->
  19.           <Button id="menuButtonTemplate" active="false"></Button>          
  20.         </VerticalLayout>
  21.       </Cell>
  22.     </Row>    
  23.   </TableLayout>  
  24. </XmlLayout>
                                
                                
    
  1. using System;
  2. using System.Collections;
  3. using System.Collections.Generic;
  4. using System.Linq;
  5. using UnityEngine;
  6. using UnityEngine.UI;
  7.  
  8. namespace UI.Xml.Examples
  9. {
  10.     [ExecuteInEditMode]
  11.     class XmlLayout_Example_ExampleMenu : XmlLayoutController
  12.     {
  13.         /// <summary>
  14.         /// Populated in the editor
  15.         /// </summary>
  16.         public List<XmlLayout> Examples = new List<XmlLayout>();
  17.  
  18.         protected XmlLayout CurrentExample = null;
  19.  
  20.         private XmlElement menuButtonGroup;
  21.  
  22.         public void SelectExample(string name = null)
  23.         {
  24.             if (name == null)
  25.             {
  26.                 CurrentExample = null;
  27.                 HideAllExamples();
  28.  
  29.                 return;
  30.             }
  31.  
  32.             var newExample = Examples.FirstOrDefault(e => e.name == name);
  33.  
  34.             if (newExample != null)
  35.             {
  36.                 if (CurrentExample != null && newExample != CurrentExample)
  37.                 {
  38.                     // Hide the current example, then call ShowExample(newExample) when the hide animation is complete
  39.                     CurrentExample.Hide(() => ShowExample(newExample));
  40.                 }
  41.                 else
  42.                 {
  43.                     ShowExample(newExample);
  44.                 }
  45.             }
  46.             else
  47.             {
  48.                 // Special handling, this is a different scene
  49.                 switch (name)
  50.                 {
  51.                     case "Drag & Drop":
  52.                         UnityEngine.SceneManagement.SceneManager.LoadSceneAsync("Drag & Drop Example");
  53.                         break;
  54.                     case "Localization":
  55.                         UnityEngine.SceneManagement.SceneManager.LoadSceneAsync("Localization Example");
  56.                         break;
  57.                     case "World Space":
  58.                         UnityEngine.SceneManagement.SceneManager.LoadSceneAsync("World Space Example");
  59.                         break;
  60.                 }
  61.             }
  62.         }
  63.  
  64.         void ShowExample(XmlLayout newExample)
  65.         {
  66.             // Hiding all but the current example helps prevent issues where the user rapidly selects multiple examples at once
  67.             foreach (var example in Examples)
  68.             {
  69.                 if (example != newExample) example.Hide();
  70.             }
  71.  
  72.             newExample.Show();
  73.  
  74.             CurrentExample = newExample;
  75.         }
  76.  
  77.         public void HideAllExamples()
  78.         {
  79.             foreach (var example in Examples)
  80.             {
  81.                 if (example.gameObject.activeInHierarchy) example.Hide();
  82.             }
  83.         }
  84.  
  85.         /// <summary>
  86.         /// LayoutRebuilt is called by XmlLayout whenever the layout is finished being built
  87.         /// (regardless of whether the rebuild was triggered automatically or manually)
  88.         /// </summary>
  89.         public override void LayoutRebuilt(ParseXmlResult parseResult)
  90.         {
  91.             if (parseResult != ParseXmlResult.Changed) return;
  92.  
  93.             // get the menu button container
  94.             menuButtonGroup = xmlLayout.GetElementById("menuButtons");
  95.  
  96.             // get the menu button template so that we can clone it
  97.             var menuButtonTemplate = xmlLayout.GetElementById("menuButtonTemplate");
  98.  
  99.             foreach (var example in Examples)
  100.             {
  101.                 var name = example.name;
  102.  
  103.                 AddMenuButton(name, menuButtonGroup, menuButtonTemplate);
  104.             }
  105.  
  106.             AddMenuButton("Drag & Drop", menuButtonGroup, menuButtonTemplate);
  107.             AddMenuButton("Localization", menuButtonGroup, menuButtonTemplate);
  108.             AddMenuButton("World Space", menuButtonGroup, menuButtonTemplate);
  109.         }
  110.  
  111.         void AddMenuButton(string name, XmlElement menuButtonGroup, XmlElement menuButtonTemplate)
  112.         {
  113.             // Create a copy of the template
  114.             var menuButton = GameObject.Instantiate(menuButtonTemplate);
  115.             menuButton.name = name;
  116.  
  117.             // Access the XmlElement component and initialise it for this new button
  118.             var xmlElement = menuButton.GetComponent<XmlElement>();
  119.             xmlElement.Initialise(xmlLayout, (RectTransform)menuButton.transform, menuButtonTemplate.tagHandler);
  120.  
  121.             // Add the xmlElement to the menuButtonGroup
  122.             menuButtonGroup.AddChildElement(menuButton);
  123.  
  124.             // Set the necessary attributes, and Apply them
  125.             xmlElement.SetAttribute("text", name);
  126.             xmlElement.SetAttribute("active", "true");  // the template is inactive (so as not to be visible), so we need to activate this button
  127.             xmlElement.SetAttribute("onClick", "SelectExample(" + name + ");"); // Call the SelectExample function (in this XmlEventReceiver)
  128.  
  129.             xmlElement.SetAttribute("tooltip", "Show the <color=\"#00FF00\">" + name + "</color> example.");
  130.             xmlElement.SetAttribute("tooltipPosition", "Right");
  131.             xmlElement.SetAttribute("tooltipOffset", "15");
  132.             xmlElement.ApplyAttributes();
  133.         }
  134.     }
  135. }

Demo Overlay

A simple bar at the bottom of the screen with the XmlLayout logo and the version number. 

                    

    
  1. <XmlLayout xmlns="XmlLayout" 
  2.            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
  3.            xsi:schemaLocation="XmlLayout ../../../Configuration/XmlLayout.xsd"
  4.            cursor="Cursors/ExampleCursor_Default|0 0" cursorClick="Cursors/ExampleCursor_Click|0 0">
  5.   
  6.   <Include path="Xml/Styles.xml" />
  7.   
  8.   <TableLayout class="noCellBackground" width="100%" height="36" rectAlignment="LowerCenter" padding="5" image="Sprites/Layout/Gradient" color="titleRowColor"  columnWidths="288 0 72" shadow="rgba(0,0,0,0.5)">
  9.     <Row>      
  10.       <Cell>
  11.         <Image image="Sprites/XmlLayout" preserveAspect="1" ignoreLayout="1" height="160" width="288" rectAlignment="MiddleCenter" offsetXY="0 2" shadow="black" outline="rgba(0.2,1,0.2,0.5)" />
  12.       </Cell>
  13.       <Cell><!-- Empty spacer cell --></Cell>
  14.       <Cell>
  15.           <Text id="versionNumber" alignment="MiddleCenter" fontStyle="Bold" color="text_Alternate" shadow="black" outline="rgba(0,0,0,0.25)" tooltip="XmlLayout V1.89" tooltipPosition="Above" tooltipTextColor="tooltipText">v1.89</Text>
  16.       </Cell>                            
  17.     </Row>
  18.   </TableLayout>  
  19. </XmlLayout>

Options Menu

An example of an options menu, using TableLayout to position elements, and demonstrating how XmlLayout.GetFormData() can be used to obtain values from multuple input elements at once. 

                    

    
  1. <XmlLayout xmlns="XmlLayout" 
  2.            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
  3.            xsi:schemaLocation="XmlLayout ../../../Configuration/XmlLayout.xsd">
  4.   
  5.   <Include path="Xml/Styles.xml" />
  6.     
  7.   <TableLayout class="noCellBackground" height="550" width="512" rectAlignment="MiddleRight" offsetXY="-32 0" showAnimation="Grow" hideAnimation="Shrink" raycastTarget="1" name="test">
  8.     <Row class="headerRow">
  9.       <Cell>
  10.         <Text class="title">
  11.           Options
  12.         </Text>            
  13.       </Cell>
  14.     </Row>
  15.     <Row class="viewport">
  16.       <Cell dontUseTableCellBackground="true">
  17.         <TableLayout cellPadding="7" padding="20" cellSpacing="5" cellBackgroundImage="Sprites/Outline_Sharp" cellBackgroundColor="rgba(1,1,0,0.125)">                                   
  18.             <Row class="sectionHeaderRow">
  19.               <Cell columnSpan="2" dontUseTableCellBackground="1">
  20.                 <Text class="h2" alignment="MiddleCenter">Video</Text>
  21.               </Cell>
  22.             </Row>
  23.  
  24.             <Row preferredHeight="48">
  25.               <Cell>
  26.                 <Text class="h3">Resolution</Text>
  27.               </Cell>
  28.               <Cell>
  29.                 <Dropdown id="resolution" preferredHeight="32" onValueChanged="FormChanged();">
  30.                   <Option>1920x1080</Option>
  31.                   <Option selected="true">960x600</Option>
  32.                   <Option>1024x768</Option>
  33.                   <Option>800x600</Option>
  34.                 </Dropdown>
  35.               </Cell>
  36.             </Row>
  37.             <Row preferredHeight="48">
  38.               <Cell>
  39.                 <Text class="h3">Quality</Text>
  40.               </Cell>
  41.               <Cell>
  42.                 <Dropdown id="quality" onValueChanged="FormChanged();">                  
  43.                 </Dropdown>
  44.               </Cell>
  45.             </Row>
  46.           
  47.             <Row class="sectionHeaderRow">
  48.               <Cell columnSpan="2" dontUseTableCellBackground="1">
  49.                 <Text class="h2" alignment="MiddleCenter">Audio</Text>
  50.               </Cell>
  51.             </Row>
  52.  
  53.             <Row>
  54.               <Cell>
  55.                 <Text class="h3">Master</Text>
  56.               </Cell>
  57.               <Cell>
  58.                 <Slider id="masterVolume" value="0.8" onValueChanged="FormChanged();" />
  59.               </Cell>
  60.             </Row>
  61.             <Row>
  62.               <Cell>
  63.                 <Text class="h3">Music</Text>
  64.               </Cell>
  65.               <Cell>
  66.                 <Slider id="musicVolume" value="0.45" onValueChanged="FormChanged();" />
  67.               </Cell>
  68.             </Row>
  69.             <Row>
  70.               <Cell>
  71.                 <Text class="h3">SFX</Text>
  72.               </Cell>
  73.               <Cell>              
  74.                 <Slider id="sfxVolume" value="0.55" onValueChanged="FormChanged();" />
  75.               </Cell>
  76.             </Row>
  77.  
  78.             <Row class="sectionHeaderRow">
  79.               <Cell columnSpan="2" dontUseTableCellBackground="1">
  80.                 <Text class="h2" alignment="MiddleCenter">Gameplay</Text>
  81.               </Cell>
  82.             </Row>
  83.  
  84.             <Row>
  85.               <Cell>
  86.                 <Text class="h3">Enable Hints</Text>
  87.               </Cell>
  88.               <Cell>
  89.                 <Toggle id="enableHints" onValueChanged="FormChanged();"></Toggle>
  90.               </Cell>
  91.             </Row>
  92.  
  93.           <Row preferredHeight="44">
  94.             <Cell>
  95.               <Button onClick="ResetForm();">Reset</Button>
  96.             </Cell>
  97.             <Cell>
  98.               <Button id="applyButton" onClick="SubmitForm();" class="disabled">Apply</Button>
  99.             </Cell>            
  100.           </Row>
  101.         </TableLayout>
  102.       </Cell>
  103.     </Row>
  104.   </TableLayout>      
  105. </XmlLayout>
                                
                                
    
  1. using UnityEngine;
  2. using UnityEngine.UI;
  3.  
  4. using System;
  5. using System.Collections.Generic;
  6. using System.Linq;
  7.  
  8. namespace UI.Xml.Examples
  9. {    
  10.     [ExecuteInEditMode]
  11.     class XmlLayout_Example_Options : XmlLayoutController
  12.     {
  13.         /// <summary>
  14.         /// This is a reference to another XmlEventReceiver object, which is set up to act as a simple modal message dialog
  15.         /// (The reference is added in the editor)
  16.         /// </summary>
  17.         public XmlLayout_Example_MessageDialog MessageDialog = null;
  18.  
  19.         public override void LayoutRebuilt(ParseXmlResult parseResult)
  20.         {            
  21.             SetFormDefaults();
  22.         }
  23.  
  24.         void SetFormDefaults()
  25.         {            
  26.             // You can easily set form defaults using code by getting hold of the elements by their ids, and then setting their value as needed
  27.  
  28.             // Note: this is completely optional - Form defaults can also be set directly in the Xml itself (but this allows you to set values programmatically)
  29.             
  30.             // var masterVolumeSlider = xmlLayout.GetElementById<Slider>("masterVolume");
  31.             // masterVolumeSlider.value = 0;        
  32.  
  33.             var resolutionDropdown = xmlLayout.GetElementById<Dropdown>("resolution");
  34.             resolutionDropdown.SetOptions("1920x1080", "960x600", "1024x768", "800x600");       // SetOptions is an extension method located in the UI.Xml namespace
  35.             resolutionDropdown.SetSelectedValue("960x600");                                     // SetSelectedValue is an extension method located in the UI.Xml namespace
  36.  
  37.             var qualityDropdown = xmlLayout.GetElementById<Dropdown>("quality");
  38.             qualityDropdown.SetOptions(QualitySettings.names);
  39.             qualityDropdown.value = QualitySettings.GetQualityLevel();
  40.  
  41.             // SetFormDefaults changes the values of some of the elements on the page, which in turn triggers their event handlers,
  42.             // which results in the 'Apply' button being highlighted by FormChanged()
  43.             ClearApplyButtonHighlight();
  44.         }
  45.  
  46.         void FormChanged()
  47.         {
  48.             // A value in the form has been changed, so we're going to highlight the 'Apply' button so that the user knows that they have to click it to save their changes
  49.             var applyButton = xmlLayout.GetElementById("applyButton");            
  50.  
  51.             applyButton.RemoveClass("disabled");                        
  52.         }
  53.  
  54.         void ClearApplyButtonHighlight()
  55.         {
  56.             var applyButton = xmlLayout.GetElementById("applyButton");
  57.  
  58.             applyButton.AddClass("disabled");            
  59.         }
  60.  
  61.         void ResetForm()
  62.         {
  63.             // Rebuild the Xml Elements
  64.             xmlLayout.RebuildLayout(true);
  65.             
  66.             // this will also call LayoutRebuilt()                      
  67.         }
  68.  
  69.         void SubmitForm()
  70.         {            
  71.             // xmlLayout.GetFormData() returns the values of all form objects in the layout with an 'id' set (as a Dictionary<string, string>)
  72.             var formValues = xmlLayout.GetFormData();
  73.  
  74.             // As this is only an example, we're not going to actually use these values - instead, we'll just format them into a human-readable string and show the user
  75.             // (with the exception of the Quality setting)
  76.             string formattedFormValues = "<b>Form Values</b>:\n----------------------------------------\n";
  77.  
  78.             foreach (var formValue in formValues)
  79.             {
  80.                 formattedFormValues += String.Format("<b>{0}</b>: <i>{1}</i>\n", FormatFieldName(formValue.Key), formValue.Value);
  81.             }
  82.  
  83.             formattedFormValues += "\n\n";
  84.             formattedFormValues += "For the purposes of this example, only the <i>Quality</i> setting will take effect.";
  85.  
  86.             // Show the formatted values in a message dialog (which is also an XmlLayout)
  87.             MessageDialog.Show("Form Submitted", formattedFormValues);
  88.  
  89.             // Retrieve the index of the selected quality level from QualitySettings.names and set the new value
  90.             var qualitySetting = QualitySettings.names.ToList().IndexOf(formValues["quality"]);
  91.             QualitySettings.SetQualityLevel(qualitySetting);
  92.  
  93.             // The changes have now been 'applied', so we can clear the highlight
  94.             ClearApplyButtonHighlight();
  95.         }
  96.  
  97.         /// <summary>
  98.         /// Convert a variable name from 'thisPattern' to 'This Pattern'
  99.         /// </summary>
  100.         /// <param name="fieldName"></param>
  101.         /// <returns></returns>
  102.         string FormatFieldName(string fieldName)
  103.         {
  104.            var s = new string(fieldName.ToCharArray().SelectMany((c, i) => i > 0 && char.IsUpper(c) ? new char[] { ' ', c } : new char[] { c }).ToArray());
  105.  
  106.            s = char.ToUpper(s[0]) + s.Substring(1);
  107.  
  108.            return s;
  109.         }        
  110.  
  111.     }
  112. }

Message Dialog

A simple message dialog used by the Options Menu and Test it Out examples. 

                    

    
  1. <XmlLayout xmlns="XmlLayout" 
  2.            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
  3.            xsi:schemaLocation="XmlLayout ../../../Configuration/XmlLayout.xsd"
  4.            height="100%" 
  5.            width="100%" 
  6.            rectAlignment="MiddleCenter">
  7.   
  8.   <Include path="Xml/Styles.xml" />
  9.  
  10.   <Panel color="rgba(0,0,0,0.75)" name="Overlay" raycastTarget="1">
  11.  
  12.     <TableLayout class="noCellBackground" height="320" width="480" rectAlignment="MiddleCenter" name="Dialog" showAnimation="Grow" hideAnimation="Shrink">
  13.       <Row class="headerRow" preferredHeight="52">
  14.         <Cell>
  15.           <Text id="titleText" class="title" fontSize="28">          
  16.             Dialog Title
  17.           </Text>
  18.         </Cell>
  19.       </Row>
  20.       <Row class="viewport">
  21.         <Cell>
  22.           <TableLayout class="noCellBackground" cellPadding="10">
  23.             <Row>
  24.               <Cell columnSpan="3">
  25.                 <Panel>
  26.                   <Text id="messageText" alignment="MiddleCenter" width="80%" fontSize="14" shadow="rgba(0,0,0,0.5)">Dialog Text</Text>
  27.                 </Panel>
  28.               </Cell>
  29.             </Row>
  30.             <Row preferredHeight="48">
  31.               <Cell></Cell>
  32.               <Cell>
  33.                 <Button onClick="Hide();" preferredWidth="50">Close</Button>
  34.               </Cell>
  35.               <Cell></Cell>
  36.             </Row>                
  37.           </TableLayout>
  38.         </Cell>
  39.       </Row>    
  40.     </TableLayout>
  41.     
  42.   </Panel>
  43. </XmlLayout>
                                
                                
    
  1. using UnityEngine;
  2. using UnityEngine.UI;
  3.  
  4. using System;
  5. using System.Collections.Generic;
  6. using System.Collections;
  7.  
  8. namespace UI.Xml.Examples
  9. {    
  10.     public class XmlLayout_Example_MessageDialog : XmlLayoutController
  11.     {
  12.         XmlElementReference<Text> titleText;
  13.         XmlElementReference<Text> messageText;
  14.         
  15.         void Awake()
  16.         {                        
  17.             titleText = XmlElementReference<Text>("titleText");
  18.             messageText = XmlElementReference<Text>("messageText");            
  19.         }
  20.  
  21.         public void Show(string title, string text)
  22.         {
  23.             xmlLayout.Show();
  24.  
  25.             // Because this dialog may not have been active yet at this point,
  26.             // we need to wait a frame to make sure that the XmlLayout has finished setting up,
  27.             // and that the titleText and messageText objects have been populated by Start()
  28.             StartCoroutine(DelayedShow(title, text));            
  29.         }
  30.  
  31.         protected IEnumerator DelayedShow(string title, string text)
  32.         {            
  33.             yield return new WaitForEndOfFrame();
  34.             
  35.             titleText.element.text = title;
  36.             messageText.element.text = text;
  37.         }        
  38.  
  39.         public void AppendText(string newText)
  40.         {
  41.             Show(this.titleText.element.text, messageText.element.text + "\r\n\r\n" + newText);            
  42.         }
  43.  
  44.         public override void LayoutRebuilt(ParseXmlResult parseResult)
  45.         {
  46.             // start with the root XmlElement
  47.             Localize(xmlLayout.XmlElement);
  48.         }
  49.  
  50.         private void Localize(XmlElement element)
  51.         {
  52.             if (element.attributes.ContainsKey("localized"))
  53.             {
  54.                 // localize this element using the dictionary
  55.             }
  56.  
  57.             if (element.childElements.Count > 0)
  58.             {
  59.                 foreach (var child in element.childElements) 
  60.                 {
  61.                     // skip ChildXmlLayouts (and consequently their children)
  62.                     if (child.tagType == "ChildXmlLayout") continue;
  63.  
  64.                     Localize(child);
  65.                 }                
  66.             }
  67.         }
  68.     }
  69. }

Shop Styles

A collection of styles used by the Shop and Currency Overlay examples. 

                    

    
  1. <XmlLayout
  2.   xmlns="XmlLayout"
  3.   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  4.   xsi:schemaLocation="XmlLayout ../../../Configuration/XmlLayout.xsd">
  5.  
  6.   <Defaults>        
  7.     <!-- Product Styles -->
  8.     <Panel class="product" image="Sprites/Layout/Base" color="rgb(0.9,1,0.9)" padding="10" shadow="black" />
  9.     <Panel class="productImageOutline" image="Sprites/Outline_With_Background" color="rgba(0.05,0.05,0.05,0.75)" />
  10.     <Button class="productButton" colors="#CDAD00|#FFD700|#FFD700" textColor="#FFFF00" image="Sprites/Layout/Base" textOutline="black" />    
  11.     <Panel class="productImage" color="white" height="70%" preserveAspect="1" rectAlignment="LowerCenter" />    
  12.     <Text class="productQuantity" alignment="UpperCenter" outline="black" fontSize="16" font="Arial Bold" />    
  13.     
  14.     <Panel class="productBestDealBack" image="Sprites/Layout/Button" color="rgb(1,0,0,0.6)" height="20" rectAlignment="LowerCenter" offsetXY="0 -4" />
  15.     <Text class="productBestDealText" fontSize="12" alignment="MiddleCenter" color="#FFFF00" font="Arial Bold" />
  16.     <!-- /Product Styles -->
  17.  
  18.     <!-- Styles for Confirm Purchase Dialog -->
  19.     <Text class="headerText" alignment="MiddleCenter" fontSize="18" shadow="black" font="Arial Bold" />    
  20.  
  21.     <Text class="confirmPurchaseText" alignment="MiddleCenter" font="Arial Bold" outline="black" fontSize="24" />
  22.     <!-- /Styles for Confirm Purchase Dialog -->        
  23.  
  24.   </Defaults>
  25.  
  26. </XmlLayout>

Shop

An example of an in-game shop demonstrating scroll views, TableLayout, and dynamically added elements. 

                    

    
  1. <XmlLayout xmlns="XmlLayout" 
  2.            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
  3.            xsi:schemaLocation="XmlLayout ../../../Configuration/XmlLayout.xsd">
  4.  
  5.   <Include path="Xml/Styles.xml" />
  6.   <Include path="Xml/ShopStyles.xml" />
  7.  
  8.   <TableLayout class="noCellBackground" height="384" width="512" rectAlignment="MiddleRight" offsetXY="-32 0" useGlobalCellPadding="false" showAnimation="Grow" hideAnimation="FadeOut"  raycastTarget="1">
  9.     <Row class="headerRow">
  10.       <Cell>
  11.         <Text class="title">          
  12.           Shop
  13.         </Text>
  14.       </Cell>
  15.     </Row>    
  16.     <Row class="viewport">
  17.       <Cell padding="15">        
  18.         <VerticalScrollView class="scrollView">
  19.           <TableLayout id="shopContent" cellSpacing="15" cellBackgroundColor="clear" autoCalculateHeight="1" padding="8 24 8 8">
  20.             <Row preferredHeight="128">
  21.               <Cell active="false">                
  22.                 
  23.                 <!-- Product Template -->
  24.                 <Panel id="productTemplate" class="product" active="false">                                      
  25.                   <TableLayout cellBackgroundColor="clear" cellSpacing="5">
  26.                     <Row preferredHeight="72">
  27.                       <Cell>
  28.                         <Panel class="productImageOutline">
  29.                           <Panel padding="4">
  30.                             <Text internalId="productQuantity" class="productQuantity">x1</Text>
  31.                           </Panel>
  32.                           <Panel type="Simple" internalId="productImage" class="productImage">
  33.                             <Panel internalId="productBestDeal" class="productBestDealBack" active="false">
  34.                               <Text shadow="black" class="productBestDealText">Best Deal!</Text>
  35.                             </Panel>
  36.                           </Panel>
  37.                         </Panel>
  38.                       </Cell>                      
  39.                     </Row>
  40.                     <Row>                      
  41.                       <Cell>
  42.                         <Button internalId="productBuyButton" class="productButton">$0.00</Button>                        
  43.                       </Cell>
  44.                     </Row>
  45.                   </TableLayout>                  
  46.                 </Panel>                
  47.                 <!-- End of Product Template -->
  48.                 
  49.               </Cell>              
  50.             </Row>                                    
  51.           </TableLayout>
  52.         </VerticalScrollView>
  53.       </Cell>
  54.     </Row>    
  55.   </TableLayout>  
  56. </XmlLayout>
                                
                                
    
  1. using UnityEngine;
  2. using UnityEngine.UI;
  3. using System;
  4. using System.Collections.Generic;
  5. using System.Collections;
  6. using System.Linq;
  7. using UI.Tables;
  8.  
  9. namespace UI.Xml.Examples
  10. {    
  11.     class XmlLayout_Example_Shop : XmlLayoutController
  12.     {
  13.         public XmlLayout_Example_Shop_ConfirmDialog ConfirmPurchaseDialog = null;
  14.         public XmlLayout_Example_CurrencyOverlay CurrencyOverlay = null;
  15.  
  16.         [SerializeField]
  17.         public List<ExampleProduct> Products = new List<ExampleProduct>();        
  18.  
  19.         void OnEnable()
  20.         {
  21.             CurrencyOverlay.Show();            
  22.         }
  23.  
  24.         void OnDisable()
  25.         {
  26.             CurrencyOverlay.Hide();
  27.         }
  28.  
  29.         void OnValidate()
  30.         {
  31.             if (!this.gameObject.activeInHierarchy) return;
  32.  
  33.             if (Application.isPlaying)
  34.             {
  35.                 StartCoroutine(Rebuild());
  36.             }            
  37.         }
  38.  
  39.         public IEnumerator Rebuild()
  40.         {
  41.             yield return new WaitForEndOfFrame();
  42.             xmlLayout.RebuildLayout();
  43.         }
  44.  
  45.         public override void LayoutRebuilt(ParseXmlResult parseResult)
  46.         {            
  47.             if (parseResult != ParseXmlResult.Changed || Products == null || !Products.Any()) return;
  48.  
  49.             var shopContent = xmlLayout.GetElementById<TableLayout>("shopContent");
  50.             var itemTemplate = xmlLayout.GetElementById("productTemplate");
  51.  
  52.             var columnCount = 4;
  53.             var column = 0;
  54.             var rows = shopContent.Rows.ToList();
  55.             var productCount = Products.Count;
  56.  
  57.             var rowHeight = rows.First().preferredHeight;
  58.  
  59.             TableRow row;
  60.             if (rows.Any())
  61.             {
  62.                 row = rows.Last();
  63.             }
  64.             else
  65.             {
  66.                 row = shopContent.AddRow(0);
  67.                 row.preferredHeight = rowHeight;
  68.             }            
  69.             
  70.             for(var x = 0; x < productCount; x++)
  71.             {
  72.                 var product = Products[x];
  73.  
  74.                 var item = GameObject.Instantiate(itemTemplate);                
  75.                 item.Initialise(xmlLayout, (RectTransform)item.transform, itemTemplate.tagHandler);
  76.  
  77.                 item.gameObject.SetActive(true); // the template is inactive so as not to show up, so we need to activate our new object
  78.  
  79.                 // Add a new cell to the row (containing our new product)
  80.                 row.AddCell(item.rectTransform);                
  81.  
  82.                 HandleProduct(product, item, x);
  83.  
  84.                 // increment column count
  85.                 column++;
  86.  
  87.                 // move to the next row, if necessary
  88.                 if (column == columnCount && (x + 1) < productCount)
  89.                 {
  90.                     column = 0;
  91.                     row = shopContent.AddRow(0);
  92.                     row.preferredHeight = rowHeight;
  93.                 }
  94.             }            
  95.         }
  96.  
  97.         void HandleProduct(ExampleProduct product, XmlElement item, int productId)
  98.         {
  99.             var image = item.GetElementByInternalId<Image>("productImage");            
  100.             if (product.Image != null)
  101.             {
  102.                 image.sprite = product.Image;
  103.             }
  104.             image.color = Color.white;
  105.  
  106.             var button = item.GetElementByInternalId<Button>("productBuyButton");         
  107.             button.GetComponentInChildren<Text>().text = String.Format("${0}", product.Price);
  108.             button.onClick.AddListener(new UnityEngine.Events.UnityAction(() => { PurchaseButtonClicked(productId); }));            
  109.  
  110.             var productQuantity = item.GetElementByInternalId<Text>("productQuantity");
  111.             productQuantity.text = String.Format("x{0}", product.Quantity);
  112.  
  113.             if (product.IsBestDeal)
  114.             {
  115.                 var ribbon = item.GetElementByInternalId<Image>("productBestDeal");
  116.                 ribbon.gameObject.SetActive(true);
  117.             }
  118.         }
  119.  
  120.         void PurchaseButtonClicked(int productId)
  121.         {
  122.             var product = Products[productId];
  123.  
  124.             ConfirmPurchaseDialog.Show(product, PurchaseConfirmed);
  125.         }
  126.  
  127.         public void PurchaseConfirmed(ExampleProduct product)
  128.         {
  129.             CurrencyOverlay.AddCurrency(product);
  130.         }        
  131.     }    
  132.  
  133.     [Serializable]
  134.     public class ExampleProduct
  135.     {
  136.         public float Price = 0;
  137.         public string Name = "";
  138.         public int Quantity;
  139.         public Sprite Image;
  140.         public bool IsBestDeal = false;
  141.     }
  142. }

Shop Confirm Purchase Dialog

A dialog, similar to Message Dialog which the Shop example uses to confirm purchases. 

                    

    
  1. <XmlLayout xmlns="XmlLayout" 
  2.            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
  3.            xsi:schemaLocation="XmlLayout ../../../Configuration/XmlLayout.xsd"
  4.            height="100%" 
  5.            width="100%" 
  6.            rectAlignment="MiddleCenter">
  7.  
  8.   <Include path="Xml/Styles.xml" />
  9.   <Include path="Xml/ShopStyles.xml" />
  10.  
  11.   <Panel color="rgba(0,0,0,0.75)" name="Overlay">
  12.  
  13.     <TableLayout class="noCellBackground" height="256" width="384" rectAlignment="MiddleCenter" name="Dialog" showAnimation="Grow" hideAnimation="Shrink"  raycastTarget="1">
  14.       <Row class="headerRow" preferredHeight="52">
  15.         <Cell>
  16.           <Text id="titleText" class="title" fontSize="28">          
  17.             Confirm Purchase
  18.           </Text>
  19.         </Cell>
  20.       </Row>
  21.       <Row class="viewport">
  22.         <Cell>
  23.           <TableLayout class="noCellBackground" cellPadding="10" width="95%" ignoreLayout="1">
  24.             <Row>
  25.               <Cell columnSpan="2">                
  26.                 <TableLayout cellPadding="10" cellBackgroundColor="rgb(0.35,0.35,0.35)">
  27.                   <Row preferredHeight="48" class="sectionHeaderRow">
  28.                     <Cell>
  29.                       <Text class="headerText">Product</Text>
  30.                     </Cell>
  31.                     <Cell>
  32.                       <Text class="headerText">Quantity</Text>
  33.                     </Cell>
  34.                     <Cell>
  35.                       <Text class="headerText">Price</Text>
  36.                     </Cell>
  37.                   </Row>
  38.                   <Row>                    
  39.                     <Cell>
  40.                       <Image id="productImage" image="Sprites/Shop/Coin" preserveAspect="1" />
  41.                     </Cell>
  42.                     <Cell>
  43.                       <Text id="productQuantity" class="confirmPurchaseText">x1</Text>
  44.                     </Cell>
  45.                     <Cell>
  46.                       <Text id="productPrice" class="confirmPurchaseText">$0.00</Text>
  47.                     </Cell>
  48.                   </Row>
  49.                 </TableLayout>                               
  50.               </Cell>
  51.             </Row>
  52.             <Row preferredHeight="48">              
  53.               <Cell>
  54.                 <Button onClick="ConfirmPurchase();">Confirm Purchase</Button>
  55.               </Cell>
  56.               <Cell>
  57.                 <Button onClick="Hide();">Cancel</Button>
  58.               </Cell>              
  59.             </Row>                
  60.           </TableLayout>
  61.         </Cell>
  62.       </Row>    
  63.     </TableLayout>
  64.     
  65.   </Panel>
  66. </XmlLayout>
                                
                                
    
  1. using UnityEngine;
  2. using UnityEngine.UI;
  3. using System;
  4. using System.Collections.Generic;
  5. using System.Collections;
  6. using System.Linq;
  7. using UI.Tables;
  8.  
  9. namespace UI.Xml.Examples
  10. {    
  11.     class XmlLayout_Example_Shop_ConfirmDialog : XmlLayoutController
  12.     {
  13.         ExampleProduct product = null;
  14.         Action<ExampleProduct> callback = null;                
  15.  
  16.         public void Show(ExampleProduct product, Action<ExampleProduct> callback = null)
  17.         {
  18.             xmlLayout.Show();
  19.  
  20.             this.product = product;
  21.             this.callback = callback;
  22.  
  23.             // Because this dialog may not have been active yet at this point,
  24.             // we need to wait a frame to make sure that the XmlLayout has finished setting up            
  25.             StartCoroutine(DelayedShow());
  26.         }
  27.  
  28.         protected IEnumerator DelayedShow()
  29.         {
  30.             while(!xmlLayout.IsReady) yield return null;
  31.  
  32.             xmlLayout.GetElementById<Image>("productImage").sprite = product.Image;
  33.             xmlLayout.GetElementById<Text>("productQuantity").text = String.Format("x{0}", product.Quantity);
  34.             xmlLayout.GetElementById<Text>("productPrice").text = String.Format("${0}", product.Price);
  35.         }
  36.  
  37.         void ConfirmPurchase()
  38.         {
  39.             callback(product);
  40.  
  41.             Hide();
  42.         }        
  43.     }
  44. }

Currency Overlay

A UI element showing the resources available to the user (as 'purchased' in the Shop example. 

                    

    
  1. <XmlLayout xmlns="XmlLayout" 
  2.            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
  3.            xsi:schemaLocation="XmlLayout ../../../Configuration/XmlLayout.xsd">
  4.   
  5.   <Include path="Xml/Styles.xml" />
  6.  
  7.   <Defaults>
  8.     <Text shadow="black" font="Arial Bold"></Text>
  9.     <TableLayout class="item" columnWidths="32 0" />
  10.     <Image preserveAspect="1" shadow="black" />
  11.   </Defaults>
  12.  
  13.   <Panel height="32" rectAlignment="UpperCenter" image="Sprites/Layout/Gradient" color="titleRowColor" showAnimation="SlideIn_Top" hideAnimation="SlideOut_Top" animationDuration="0.5">
  14.     <TableLayout class="noCellBackground" rectAlignment="MiddleRight" width="356" cellPadding="5">
  15.       <Row preferredHeight="0">        
  16.         <Cell>
  17.           <TableLayout class="noCellBackground item">
  18.             <Row>
  19.               <Cell>
  20.                 <Image image="Sprites/Shop/coin" />
  21.               </Cell>
  22.               <Cell>                
  23.                 <Text id="0">x0</Text>
  24.               </Cell>
  25.             </Row>
  26.           </TableLayout>
  27.         </Cell>
  28.         <Cell>
  29.           <TableLayout class="noCellBackground item">
  30.             <Row>
  31.               <Cell>
  32.                 <Image image="Sprites/Shop/gemGreen" />
  33.               </Cell>
  34.               <Cell>
  35.                 <Text id="1">x0</Text>
  36.               </Cell>
  37.             </Row>
  38.           </TableLayout>
  39.         </Cell>
  40.         <Cell>
  41.           <TableLayout class="noCellBackground item">
  42.             <Row>
  43.               <Cell>
  44.                 <Image image="Sprites/Shop/gemBlue" />
  45.               </Cell>
  46.               <Cell>
  47.                 <Text id="2">x0</Text>
  48.               </Cell>
  49.             </Row>
  50.           </TableLayout>
  51.         </Cell>
  52.         <Cell>
  53.           <TableLayout class="noCellBackground item">
  54.             <Row>
  55.               <Cell>
  56.                 <Image image="Sprites/Shop/gemRed" />
  57.               </Cell>
  58.               <Cell>
  59.                 <Text id="3">x0</Text>
  60.               </Cell>
  61.             </Row>
  62.           </TableLayout>
  63.         </Cell>
  64.       </Row>
  65.     </TableLayout>
  66.   </Panel>
  67. </XmlLayout>
                                
                                
    
  1. using UnityEngine;
  2. using UnityEngine.UI;
  3. using System;
  4. using System.Collections.Generic;
  5. using System.Collections;
  6. using System.Linq;
  7. using UI.Tables;
  8.  
  9. namespace UI.Xml.Examples
  10. {    
  11.     class XmlLayout_Example_CurrencyOverlay : XmlLayoutController
  12.     {
  13.         [SerializeField]
  14.         public List<ExampleProduct> CurrencyQuantities = new List<ExampleProduct>()
  15.         {
  16.             new ExampleProduct() { Name = "Coins", Quantity = 0 },
  17.             new ExampleProduct() { Name = "Green Gems", Quantity = 0 },
  18.             new ExampleProduct() { Name = "Blue Gems", Quantity = 0 },
  19.             new ExampleProduct() { Name = "Red Gems", Quantity = 0 }
  20.         };        
  21.  
  22.         public void AddCurrency(ExampleProduct productPurchased)
  23.         {
  24.             var currency = CurrencyQuantities.First(c => c.Name == productPurchased.Name);
  25.  
  26.             currency.Quantity += productPurchased.Quantity;
  27.  
  28.             UpdateDisplay();
  29.         }
  30.  
  31.         public override void LayoutRebuilt(ParseXmlResult parseResult)
  32.         {
  33.             UpdateDisplay();
  34.         }
  35.  
  36.         public void UpdateDisplay()
  37.         {
  38.             for (var x = 0; x < CurrencyQuantities.Count; x++)
  39.             {
  40.                 var text = xmlLayout.GetElementById<Text>(x.ToString());
  41.  
  42.                 text.text = String.Format("x{0}", CurrencyQuantities[x].Quantity);
  43.             }
  44.         }        
  45.     }
  46. }

Element List

An example showcasing the various elements available. 

                    

    
  1. <XmlLayout xmlns="XmlLayout"
  2.            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3.            xsi:schemaLocation="XmlLayout ../../../Configuration/XmlLayout.xsd" showAnimation="Grow" hideAnimation="FadeOut">
  4.  
  5.   <Include path="Xml/Styles.xml" />  
  6.  
  7.   <Defaults>
  8.     <Panel color="accentVariantC" image="Sprites/Outline_Sharp" />
  9.     <Text class="label" alignment="MiddleCenter" color="rgb(1,1,1,0.5)" />
  10.     <Text class="h2" alignment="MiddleCenter" />    
  11.     <Toggle textcolor="white" />
  12.  
  13.     <Button class="iconButton" image="Sprites/Layout/Base" iconColor="text_Highlighted" iconHoverColor="text_Highlighted" />
  14.     <Button class="iconButtonWithText" iconWidth="48" padding="4 0 2 2" ignoreLayout="1" width="160" height="32" />
  15.  
  16.     <ToggleButton class="iconButton" image="Sprites/Layout/Base" />
  17.     <ToggleButton class="iconButtonWithText" iconWidth="48" padding="4 0 2 2" ignoreLayout="1" width="160" height="32" />
  18.   </Defaults>  
  19.  
  20.   <TableLayout class="noCellBackground" height="512" width="512" rectAlignment="MiddleRight" offsetXY="-32 0"  raycastTarget="1">
  21.     <Row class="headerRow">
  22.       <Cell>
  23.         <Text class="title">
  24.           Element List
  25.         </Text>
  26.       </Cell>
  27.     </Row>
  28.     <Row class="viewport">
  29.       <Cell>
  30.         <VerticalScrollView class="scrollView" color="rgba(0,0,0,0.25)">
  31.           <TableLayout cellPadding="7" padding="20" cellSpacing="5" cellBackgroundImage="Sprites/Outline_Sharp" cellBackgroundColor="rgba(1,1,0,0.125)" autoCalculateHeight="1" columnWidths="180 0">
  32.             <Row class="sectionHeaderRow">
  33.               <Cell columnSpan="2" dontUseTableCellBackground="1">
  34.                 <Text class="h2" alignment="MiddleCenter">Basic Elements</Text>
  35.               </Cell>
  36.             </Row>
  37.  
  38.             <Row preferredHeight="44">
  39.               <Cell>
  40.                 <Text class="h3">Text Label</Text>
  41.               </Cell>
  42.               <Cell>
  43.                 <Text alignment="MiddleCenter">
  44.                   This <i>is</i> some <textcolor color="green">rich</textcolor> text.
  45.                 </Text>
  46.               </Cell>
  47.             </Row>
  48.  
  49.             <Row preferredHeight="64">
  50.               <Cell>
  51.                 <Text class="h3">Image</Text>
  52.               </Cell>
  53.               <Cell>
  54.                 <Image image="Sprites/Shop/gemGreen" preserveAspect="1" />                
  55.               </Cell>
  56.             </Row>
  57.  
  58.             <Row class="sectionHeaderRow">
  59.               <Cell columnSpan="2" dontUseTableCellBackground="1">
  60.                 <Text class="h2" alignment="MiddleCenter">Input Elements</Text>
  61.               </Cell>
  62.             </Row>
  63.             
  64.             <Row preferredHeight="44">
  65.               <Cell>
  66.                 <Text class="h3">Input Field</Text>
  67.               </Cell>
  68.               <Cell>
  69.                 <InputField />
  70.               </Cell>
  71.             </Row>
  72.             <Row preferredHeight="44">
  73.               <Cell>
  74.                 <Text class="h3">Toggle</Text>
  75.               </Cell>
  76.               <Cell>
  77.                 <Toggle />
  78.               </Cell>
  79.             </Row>
  80.             <Row preferredHeight="44">
  81.               <Cell>
  82.                 <Text class="h3">Toggle Group</Text>
  83.               </Cell>
  84.               <Cell>
  85.                 <ToggleGroup>
  86.                   <HorizontalLayout>
  87.                     <Toggle isOn="1">A</Toggle>
  88.                     <Toggle>B</Toggle>
  89.                     <Toggle>C</Toggle>
  90.                     <Toggle>D</Toggle>
  91.                   </HorizontalLayout>
  92.                 </ToggleGroup>
  93.               </Cell>
  94.             </Row>            
  95.  
  96.             <Row preferredHeight="44">
  97.               <Cell>
  98.                 <Text class="h3">Slider</Text>
  99.               </Cell>
  100.               <Cell>
  101.                 <Slider minValue="0" maxValue="1" value="0.5" />
  102.               </Cell>
  103.             </Row>
  104.  
  105.             <Row preferredHeight="48">
  106.               <Cell>
  107.                 <Text class="h3" alignment="UpperLeft">Dropdown</Text>
  108.               </Cell>
  109.               <Cell>
  110.                 <Dropdown>                  
  111.                   <Option selected="1">Option 1</Option>
  112.                   <Option>Option 2</Option>
  113.                   <Option>Option 3</Option>
  114.                   <Option>Option 4</Option>
  115.                   <Option>Option 5</Option>
  116.                   <Option>Option 6</Option>
  117.                   <Option>Option 7</Option>
  118.                   <Option>Option 8</Option>
  119.                 </Dropdown>
  120.               </Cell>
  121.             </Row>
  122.  
  123.             <Row preferredHeight="48">
  124.               <Cell>
  125.                 <Text class="h3">Button</Text>                
  126.               </Cell>
  127.               <Cell>
  128.                 <Button>Button Text</Button>
  129.               </Cell>
  130.             </Row>
  131.  
  132.             <Row preferredHeight="48">
  133.               <Cell>
  134.                 <Text class="h3">Button with icon</Text>
  135.               </Cell>
  136.               <Cell>                
  137.                 <GridLayout cellSize="32,32" spacing="10" childAlignment="MiddleCenter">
  138.                   <Button class="iconButton" icon="Sprites/Icons/Move" />
  139.                   <Button class="iconButton" icon="Sprites/Icons/Cog" />
  140.                   <Button class="iconButton" icon="Sprites/Icons/Cancel" />
  141.                   <Button class="iconButton" icon="Sprites/Icons/Arrow_Right" />
  142.                 </GridLayout>
  143.               </Cell>
  144.             </Row>
  145.  
  146.             <Row preferredHeight="48">
  147.               <Cell>
  148.                 <Text class="h3">Button with left-side icon</Text>
  149.               </Cell>
  150.               <Cell>
  151.                 <Button class="iconButton iconButtonWithText" icon="Sprites/Icons/Arrow_Left" textAlignment="MiddleLeft">Button Text</Button>
  152.               </Cell>
  153.             </Row>
  154.  
  155.             <Row preferredHeight="48">
  156.               <Cell>
  157.                 <Text class="h3">Button with right-side icon</Text>
  158.               </Cell>
  159.               <Cell>
  160.                 <Button class="iconButton iconButtonWithText" icon="Sprites/Icons/Arrow_Right" iconAlignment="Right" textAlignment="MiddleRight">Button Text</Button>
  161.               </Cell>
  162.             </Row>
  163.  
  164.             <Row preferredHeight="48">
  165.               <Cell>
  166.                 <Text class="h3">Toggle Button</Text>
  167.               </Cell>
  168.               <Cell>
  169.                 <ToggleButton class="iconButton iconButtonWithText" icon="Sprites/Icons/Arrow_Left" textAlignment="MiddleLeft">Button Text</ToggleButton>
  170.               </Cell>
  171.             </Row>
  172.  
  173.             <Row preferredHeight="44">
  174.               <Cell>
  175.                 <Text class="h3">Toggle Button Group</Text>
  176.               </Cell>
  177.               <Cell>
  178.                 <ToggleGroup>
  179.                   <GridLayout cellSize="32,32" spacing="10" childAlignment="MiddleCenter">
  180.                     <ToggleButton class="iconButton" icon="Sprites/Icons/Arrow_Left" isOn="1"></ToggleButton>
  181.                     <ToggleButton class="iconButton" icon="Sprites/Icons/Arrow_Up"></ToggleButton>
  182.                     <ToggleButton class="iconButton" icon="Sprites/Icons/Arrow_Down"></ToggleButton>
  183.                     <ToggleButton class="iconButton" icon="Sprites/Icons/Arrow_Right"></ToggleButton>
  184.                   </GridLayout>
  185.                 </ToggleGroup>
  186.               </Cell>
  187.             </Row>
  188.  
  189.             <Row class="sectionHeaderRow">
  190.               <Cell columnSpan="2" dontUseTableCellBackground="1">
  191.                 <Text class="h2" alignment="MiddleCenter">Misc Elements</Text>
  192.               </Cell>
  193.             </Row>
  194.  
  195.             <Row preferredHeight="44">
  196.               <Cell>
  197.                 <Text class="h3">Progress Bar</Text>
  198.               </Cell>
  199.               <Cell>
  200.                 <ProgressBar id="progressBar" percentage="0" showPercentageText="1" fontStyle="Bold" textColor="text_Alternate" textShadow="shadowColor" fillImageColor="accent" image="Sprites/Layout/Gradient" fillImage="Sprites/Layout/Button" percentageTextFormat="0.00" />
  201.               </Cell>
  202.             </Row>            
  203.                  
  204.             <Row class="sectionHeaderRow">
  205.               <Cell columnSpan="2" dontUseTableCellBackground="1">
  206.                 <Text class="h2" alignment="MiddleCenter">Layout Elements</Text>
  207.               </Cell>
  208.             </Row>
  209.  
  210.             <Row preferredHeight="44">
  211.               <Cell>
  212.                 <Text class="h3">Panel</Text>
  213.               </Cell>
  214.               <Cell>
  215.                 <Panel  image="Sprites/Outline_Sharp"></Panel>
  216.               </Cell>
  217.             </Row>
  218.             <Row preferredHeight="44">
  219.               <Cell>
  220.                 <Text class="h3">Horizontal Layout</Text>
  221.               </Cell>
  222.               <Cell>
  223.                 <HorizontalLayout spacing="5">
  224.                   <Panel>
  225.                     <Text class="label">1</Text>
  226.                   </Panel>
  227.                   <Panel>
  228.                     <Text class="label">2</Text>
  229.                   </Panel>
  230.                   <Panel>
  231.                     <Text class="label">3</Text>
  232.                   </Panel>
  233.                   <Panel>
  234.                     <Text class="label">4</Text>
  235.                   </Panel>                  
  236.                 </HorizontalLayout>
  237.               </Cell>
  238.             </Row>
  239.             <Row preferredHeight="128">
  240.               <Cell>
  241.                 <Text class="h3" alignment="UpperLeft">Vertical Layout</Text>
  242.               </Cell>
  243.               <Cell>
  244.                 <VerticalLayout spacing="2">
  245.                   <Panel>
  246.                     <Text class="label">1</Text>
  247.                   </Panel>
  248.                   <Panel>
  249.                     <Text class="label">2</Text>
  250.                   </Panel>
  251.                   <Panel>
  252.                     <Text class="label">3</Text>
  253.                   </Panel>
  254.                   <Panel>
  255.                     <Text class="label">4</Text>
  256.                   </Panel>
  257.                 </VerticalLayout>
  258.               </Cell>
  259.             </Row>
  260.             <Row preferredHeight="80">
  261.               <Cell>
  262.                 <Text class="h3" alignment="UpperLeft">Grid Layout</Text>
  263.               </Cell>
  264.               <Cell>
  265.                 <GridLayout spacing="4" cellSize="48,32" childAlignment="MiddleCenter">
  266.                   <Button>1</Button>
  267.                   <Button>2</Button>
  268.                   <Button>3</Button>
  269.                   <Button>4</Button>
  270.                   <Button>5</Button>
  271.                   <Button>6</Button>
  272.                   <Button>7</Button>
  273.                   <Button>8</Button>
  274.                   <Button>9</Button>
  275.                   <Button>10</Button>                                
  276.                 </GridLayout>
  277.               </Cell>
  278.             </Row>
  279.  
  280.             <Row preferredHeight="128">
  281.               <Cell>
  282.                 <Text class="h3" alignment="UpperLeft">Table Layout</Text>
  283.               </Cell>
  284.               <Cell>
  285.                 <TableLayout cellSpacing="1">
  286.                   <Row class="sectionHeaderRow" preferredHeight="32">
  287.                     <Cell>
  288.                       <Text class="h2">C1</Text>
  289.                     </Cell>
  290.                     <Cell>
  291.                       <Text class="h2">C2</Text>
  292.                     </Cell>
  293.                     <Cell>
  294.                       <Text class="h2">C3</Text>
  295.                     </Cell>
  296.                   </Row>
  297.                   <Row>
  298.                     <Cell>
  299.                       <Text class="label">1</Text>
  300.                     </Cell>
  301.                     <Cell>
  302.                       <Text class="label">2</Text>
  303.                     </Cell>
  304.                     <Cell>
  305.                       <Text class="label">3</Text>
  306.                     </Cell>
  307.                   </Row>
  308.                   <Row>
  309.                     <Cell>
  310.                       <Text class="label">4</Text>
  311.                     </Cell>
  312.                     <Cell>
  313.                       <Text class="label">5</Text>
  314.                     </Cell>
  315.                     <Cell>
  316.                       <Text class="label">6</Text>
  317.                     </Cell>
  318.                   </Row>
  319.                 </TableLayout>
  320.               </Cell>
  321.             </Row>
  322.  
  323.             <Row class="sectionHeaderRow">
  324.               <Cell columnSpan="2" dontUseTableCellBackground="1">
  325.                 <Text class="h2" alignment="MiddleCenter">Scroll Views</Text>
  326.               </Cell>
  327.             </Row>
  328.  
  329.             <Row preferredHeight="128">
  330.               <Cell>
  331.                 <Text class="h3" alignment="UpperLeft">Vertical Scrollview</Text>
  332.               </Cell>
  333.               <Cell>
  334.                 <VerticalScrollView class="scrollView">
  335.                   <VerticalLayout height="512" padding="16" spacing="16">
  336.                     <Panel>
  337.                       <Text class="label">1</Text>
  338.                     </Panel>
  339.                     <Panel>
  340.                       <Text class="label">2</Text>
  341.                     </Panel>
  342.                     <Panel>
  343.                       <Text class="label">3</Text>
  344.                     </Panel>
  345.                     <Panel>
  346.                       <Text class="label">4</Text>
  347.                     </Panel>
  348.                     <Panel>
  349.                       <Text class="label">5</Text>
  350.                     </Panel>
  351.                     <Panel>
  352.                       <Text class="label">6</Text>
  353.                     </Panel>
  354.                     <Panel>
  355.                       <Text class="label">7</Text>
  356.                     </Panel>
  357.                     <Panel>
  358.                       <Text class="label">8</Text>
  359.                     </Panel>
  360.                   </VerticalLayout>
  361.                 </VerticalScrollView>
  362.               </Cell>
  363.             </Row>
  364.  
  365.             <Row preferredHeight="128">
  366.               <Cell>
  367.                 <Text class="h3" alignment="UpperLeft">Horizontal Scrollview</Text>
  368.               </Cell>
  369.               <Cell>
  370.                 <HorizontalScrollView class="scrollView">
  371.                   <HorizontalLayout width="512" padding="16" spacing="16">
  372.                     <Panel>
  373.                       <Text class="label">1</Text>
  374.                     </Panel>
  375.                     <Panel>
  376.                       <Text class="label">2</Text>
  377.                     </Panel>
  378.                     <Panel>
  379.                       <Text class="label">3</Text>
  380.                     </Panel>
  381.                     <Panel>
  382.                       <Text class="label">4</Text>
  383.                     </Panel>
  384.                     <Panel>
  385.                       <Text class="label">5</Text>
  386.                     </Panel>
  387.                     <Panel>
  388.                       <Text class="label">6</Text>
  389.                     </Panel>
  390.                     <Panel>
  391.                       <Text class="label">7</Text>
  392.                     </Panel>
  393.                     <Panel>
  394.                       <Text class="label">8</Text>
  395.                     </Panel>
  396.                   </HorizontalLayout>
  397.                 </HorizontalScrollView>
  398.               </Cell>
  399.             </Row>          
  400.           </TableLayout>
  401.         </VerticalScrollView>
  402.       </Cell>
  403.     </Row>
  404.   </TableLayout>  
  405. </XmlLayout>
                                
                                
    
  1. using UnityEngine;
  2. using UnityEngine.UI;
  3.  
  4. using System;
  5. using System.Collections.Generic;
  6. using System.Collections;
  7.  
  8. namespace UI.Xml.Examples
  9. {    
  10.     class XmlLayout_Example_List : XmlLayoutController
  11.     {
  12.         XmlElementReference<XmlLayoutProgressBar> progressBar;
  13.  
  14.         void Start()
  15.         {
  16.             progressBar = XmlElementReference<XmlLayoutProgressBar>("progressBar");            
  17.         }
  18.  
  19.         void Update()
  20.         {
  21.             progressBar.element.percentage += Time.deltaTime * 2.5f;
  22.  
  23.             if (progressBar.element.percentage >= 100f) progressBar.element.percentage = 0.0f;
  24.         }        
  25.     }
  26. }

Test it Out

An example allowing you to enter your own Xml code and try it out. 

                    

    
  1. <XmlLayout xmlns="XmlLayout" 
  2.            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
  3.            xsi:schemaLocation="XmlLayout ../../../Configuration/XmlLayout.xsd" showAnimation="Grow" hideAnimation="Shrink">
  4.   
  5.   <Include path="Xml/Styles.xml" />
  6.  
  7.   <Defaults>    
  8.     <Cell class="header" dontUseTableCellBackground="1" color="titleRowColor" image="Sprites/Layout/Button" />
  9.     <Panel class="outlined" color="rgb(0.5,0.5,0.5)" image="Sprites/Outline_Sharp" />
  10.     <Text class="h2" alignment="MiddleCenter" />
  11.   </Defaults>
  12.  
  13.   <TableLayout class="noCellBackground" height="512" width="880" rectAlignment="MiddleCenter" raycastTarget="1" id="mainPanel">
  14.     <Row class="headerRow">
  15.       <Cell>
  16.         <TableLayout class="noCellBackground" columnWidths="64 0">
  17.           <Row>
  18.             <Cell>
  19.               <Button image="Sprites/Icons/Arrow_Left" onClick="Hide()" ignoreLayout="1" preserveAspect="1" type="Simple" width="32" height="32" />
  20.             </Cell>
  21.             <Cell>
  22.               <Text class="title">
  23.                 Test it out
  24.               </Text>
  25.             </Cell>        
  26.           </Row>
  27.         </TableLayout>
  28.       </Cell>
  29.     </Row>
  30.     <Row class="viewport">
  31.       <Cell dontUseTableCellBackground="true">
  32.         <TableLayout class="noCellBackground" padding="10" cellSpacing="2" cellPadding="10" columnWidths="480 0">
  33.           <Row preferredHeight="48">
  34.             <Cell class="header">
  35.               <Text class="h2">Code</Text>
  36.             </Cell>
  37.             <Cell class="header">              
  38.               <Text class="h2">Output</Text>
  39.               <Button image="Sprites/Icons/Move" onClick="ToggleViewportSize();" ignoreLayout="true" rectAlignment="MiddleRight" width="32" height="32" offsetXY="-8 0" />              
  40.             </Cell>
  41.           </Row>
  42.           <Row>
  43.             <Cell>
  44.               <TableLayout cellSpacing="10">
  45.                 <Row preferredHeight="32">
  46.                   <Cell>
  47.                     <HorizontalLayout spacing="5" padding="5">
  48.                       <Button onClick="Empty();">Empty</Button>
  49.                       <Button onClick="ExampleA();">Example A</Button>
  50.                       <Button onClick="ExampleB();">Example B</Button>
  51.                       <Button onClick="ExampleC();">Example C</Button>
  52.                     </HorizontalLayout>
  53.                   </Cell>                  
  54.                 </Row>
  55.                 <Row>
  56.                   <Cell dontUseTableCellBackground="1">                    
  57.                     <VerticalScrollView class="scrollView" color="rgb(0,0,0,0.75)" id="codeInputScrollView">
  58.                       <TableLayout columnWidths="36 0" height="1024">
  59.                         <Row>
  60.                           <Cell>
  61.                             <InputField interactable="false" lineType="MultiLineNewline" fontSize="12" font="Courier New Bold" id="lineNumbers">                                                          
  62.                             </InputField>
  63.                           </Cell>
  64.                           <Cell>
  65.                             <InputField id="codeInputField" colors="clear" textColor="white" fontStyle="Bold" fontSize="12" font="Courier New" onValueChanged="XmlChanged(value);" lineType="MultiLineNewline"></InputField>
  66.                           </Cell>
  67.                         </Row>
  68.                       </TableLayout>
  69.                     </VerticalScrollView>
  70.                   </Cell>
  71.                 </Row>
  72.                 <Row preferredHeight="32">
  73.                   <Cell>
  74.                     <Button onClick="UpdateDisplay();">Update</Button>
  75.                   </Cell>                  
  76.                 </Row>                
  77.               </TableLayout>
  78.             </Cell>
  79.             <Cell>
  80.               <Mask>
  81.                 <Panel padding="10" class="outlined" id="outputContainer">
  82.                   <Panel id="output" name="Output">
  83.                     <!-- Output goes here -->
  84.                   </Panel>                
  85.                 </Panel>
  86.               </Mask>
  87.             </Cell>
  88.           </Row>
  89.         </TableLayout>
  90.       </Cell>
  91.     </Row>
  92.   </TableLayout>
  93.  
  94.   <TableLayout width="100%" height="100%" id="expandedOutput" active="false">
  95.     <Row preferredHeight="48">
  96.       <Cell class="header">
  97.         <Text class="h2">Output</Text>
  98.         <Button image="Sprites/Icons/Move" onClick="ToggleViewportSize();" ignoreLayout="true" rectAlignment="MiddleRight" width="32" height="32" offsetXY="-8 0" />
  99.       </Cell>
  100.     </Row>
  101.     <Row class="viewport">
  102.       <Cell>
  103.         <Mask>
  104.           <HorizontalLayout id="expandedOutputPanel" childForceExpandHeight="true" childForceExpandWidth="true" />
  105.         </Mask>
  106.       </Cell>
  107.     </Row>
  108.   </TableLayout>
  109. </XmlLayout>
                                
                                
    
  1. using UnityEngine;
  2. using UnityEngine.UI;
  3. using System;
  4. using System.Collections.Generic;
  5. using System.Collections;
  6. using System.Linq;
  7. using UI.Tables;
  8.  
  9. namespace UI.Xml.Examples
  10. {
  11.     class XmlLayout_Example_TestItOut : XmlLayoutController
  12.     {
  13.         public XmlLayout_Example_MessageDialog MessageDialog = null;
  14.         public XmlLayout_Example_ExampleMenu ExampleMenu = null;
  15.  
  16.         string Xml = null;
  17.  
  18.         bool viewPortExpanded = false;
  19.  
  20.         void Start()
  21.         {
  22.             // Select the Empty example
  23.             Empty();
  24.         }
  25.  
  26.         public override void Show()
  27.         {
  28.             base.Show();
  29.  
  30.             ScrollToTop();
  31.         }
  32.  
  33.         public override void Hide(Action onCompleteCallback = null)
  34.         {
  35.             ExampleMenu.SelectExample(null);
  36.         }
  37.  
  38.         void UpdateCodeInputField()
  39.         {
  40.             // populate the code input field with the Example Xml
  41.             var codeInputField = xmlLayout.GetElementById<InputField>("codeInputField");
  42.             codeInputField.text = Xml.Trim();
  43.  
  44.             ScrollToTop();
  45.         }
  46.  
  47.         void ScrollToTop()
  48.         {
  49.             // Scroll to the top
  50.             var codeInputScrollView = xmlLayout.GetElementById<ScrollRect>("codeInputScrollView");
  51.             codeInputScrollView.verticalNormalizedPosition = 1;
  52.         }
  53.  
  54.         // Called by the codeInputField when its text changes
  55.         void XmlChanged(string newXml)
  56.         {
  57.             Xml = newXml != null ? newXml.Trim() : "";
  58.         }
  59.  
  60.         void ToggleViewportSize()
  61.         {
  62.             var outputPanel = xmlLayout.GetElementById("output");
  63.             var expandedOutput = xmlLayout.GetElementById("expandedOutput");
  64.             var mainPanel = xmlLayout.GetElementById("mainPanel");
  65.  
  66.             if (!viewPortExpanded)
  67.             {
  68.                 expandedOutput.gameObject.SetActive(true);
  69.  
  70.                 var expandedOutputPanel = xmlLayout.GetElementById("expandedOutputPanel");
  71.                 outputPanel.transform.SetParent(expandedOutputPanel.transform);
  72.  
  73.                 mainPanel.gameObject.SetActive(false);
  74.             }
  75.             else
  76.             {
  77.                 var outputContainer = xmlLayout.GetElementById("outputContainer");
  78.                 outputPanel.transform.SetParent(outputContainer.transform);
  79.  
  80.                 expandedOutput.gameObject.SetActive(false);
  81.  
  82.                 mainPanel.gameObject.SetActive(true);
  83.             }
  84.  
  85.             viewPortExpanded = !viewPortExpanded;
  86.  
  87.             UpdateDisplay();
  88.         }
  89.  
  90.         public override void LayoutRebuilt(ParseXmlResult parseResult)
  91.         {
  92.             if (!Application.isPlaying) return;
  93.  
  94.             if (parseResult == ParseXmlResult.Changed)
  95.             {
  96.                 UpdateDisplay();
  97.             }
  98.         }
  99.  
  100.         public void UpdateDisplay()
  101.         {
  102.             // Delaying until the end of the frame allows us to be certain that XmlLayout is completely set up before we execute this code
  103.             XmlLayoutTimer.AtEndOfFrame(_UpdateDisplay, this);
  104.         }
  105.  
  106.         void _UpdateDisplay()
  107.         {
  108.             var lineNumbers = xmlLayout.GetElementById<InputField>("lineNumbers");
  109.             lineNumbers.text = String.Join( "\r\n", Enumerable.Range(1, 100).Select(i => i.ToString().PadLeft(2, '0')).ToArray());
  110.  
  111.             var outputField = xmlLayout.GetElementById("output");
  112.             var outputFieldXmlLayout = outputField.gameObject.GetComponent<XmlLayout>() ?? outputField.gameObject.AddComponent<XmlLayout>();
  113.  
  114.             outputField.ApplyAttributes(GetOutputFieldAttributes());
  115.             outputFieldXmlLayout.gameObject.SetActive(true);
  116.  
  117.             outputFieldXmlLayout.Hide(() =>
  118.             {
  119.                 outputFieldXmlLayout.gameObject.SetActive(true);
  120.  
  121.                 // borrow styles from the parent
  122.                 outputFieldXmlLayout.DefaultsFiles = this.xmlLayout.DefaultsFiles;
  123.  
  124.                 outputFieldXmlLayout.Xml = this.Xml;
  125.                 try
  126.                 {
  127.                     // We're using a custom log handler here so that any log/error messsages can be displayed in our message dialog
  128.                     var oldHandler = Debug.unityLogger.logHandler;
  129.                     Debug.unityLogger.logHandler = new TestLogHandler(MessageDialog, oldHandler);
  130.  
  131.                     outputFieldXmlLayout.RebuildLayout(false, true);
  132.  
  133.                     Debug.unityLogger.logHandler = oldHandler;
  134.                 }
  135.                 catch (Exception e)
  136.                 {
  137.                     MessageDialog.Show("Xml Parse Error", e.Message);
  138.                 }
  139.  
  140.                 outputField.ApplyAttributes(GetOutputFieldAttributes());
  141.                 outputFieldXmlLayout.Show();
  142.             });
  143.         }
  144.  
  145.         private AttributeDictionary GetOutputFieldAttributes()
  146.         {
  147.             // Essentially what we're doing here is overriding the default attributes
  148.             // so as to animate out Output XmlLayout (even though the Xml code doesn't specify it)
  149.             return new AttributeDictionary()
  150.                     {
  151.                         {"ShowAnimation", "Grow"},
  152.                         {"HideAnimation", "FadeOut"},
  153.                         {"AnimationDuration", "0.2"},
  154.                     };
  155.         }
  156.  
  157.         void Empty()
  158.         {
  159.             Xml = @"
  160. <XmlLayout>
  161.     <Include path=""Xml/Styles.xml"" />
  162.  
  163.  
  164. </XmlLayout>
  165.             ";
  166.  
  167.             UpdateCodeInputField();
  168.             UpdateDisplay();
  169.         }
  170.  
  171.         void ExampleA()
  172.         {
  173.             Xml = @"
  174. <XmlLayout>
  175.     <Defaults>
  176.         <Text alignment=""MiddleCenter""
  177.               fontStyle=""Bold""
  178.               fontSize=""18""
  179.               color=""white"" />
  180.  
  181.         <Text class=""header""
  182.               color=""#00FF00""
  183.               fontSize=""24""
  184.               outline=""black"" />
  185.  
  186.         <Image preserveAspect=""true"" />
  187.     </Defaults>
  188.  
  189.     <TableLayout cellPadding=""10"" cellSpacing=""5"">
  190.         <Row preferredHeight=""48"">
  191.             <Cell columnSpan=""3"">
  192.                 <Text class=""header"">Gems</Text>
  193.             </Cell>
  194.         </Row>
  195.         <Row>
  196.             <Cell>
  197.                 <Image image=""Sprites/Shop/gemRed"" />
  198.             </Cell>
  199.             <Cell>
  200.                 <Image image=""Sprites/Shop/gemBlue"" />
  201.             </Cell>
  202.             <Cell>
  203.                 <Image image=""Sprites/Shop/gemGreen"" />
  204.             </Cell>
  205.         </Row>
  206.         <Row preferredHeight=""48"">
  207.             <Cell><Text>Red</Text></Cell>
  208.             <Cell><Text>Blue</Text></Cell>
  209.             <Cell><Text>Green</Text></Cell>
  210.         </Row>
  211.     </TableLayout>
  212. </XmlLayout>
  213.             ";
  214.  
  215.             UpdateCodeInputField();
  216.             UpdateDisplay();
  217.         }
  218.  
  219.         void ExampleB()
  220.         {
  221.             Xml = @"
  222. <XmlLayout>
  223.     <Include path=""Xml/Styles.xml"" />
  224.  
  225.     <VerticalLayout padding=""20"" spacing=""5"">
  226.         <Button>Button 1</Button>
  227.         <Button>Button 2</Button>
  228.         <Button>Button 3</Button>
  229.         <Button>Button 4</Button>
  230.         <Button>Button 5</Button>
  231.         <Button>Button 6</Button>
  232.         <Button>Button 7</Button>
  233.         <Button>Button 8</Button>
  234.     </VerticalLayout>
  235. </XmlLayout>
  236.             ";
  237.  
  238.             UpdateCodeInputField();
  239.             UpdateDisplay();
  240.         }
  241.  
  242.         void ExampleC()
  243.         {
  244.             Xml = @"
  245. <XmlLayout>
  246.     <Include path=""Xml/Styles.xml"" />
  247.  
  248.     <Defaults>
  249.         <Panel class=""cornerPanel""
  250.                width=""100""
  251.                height=""50""
  252.                color=""rgba(0,0.5,0,0.5)""
  253.                image=""Sprites/Outline_With_Background""
  254.         />
  255.  
  256.         <Text color=""#00FF00""
  257.               fontStyle=""Bold""
  258.               alignment=""MiddleCenter"" />
  259.     </Defaults>
  260.  
  261.     <Panel width=""90%""
  262.            height=""90%""
  263.            image=""Sprites/Outline""
  264.            color=""rgb(0.5,0.5,0.5)"">
  265.         <Panel class=""cornerPanel""
  266.                rectAlignment=""UpperLeft"">
  267.             <Text>Upper Left</Text>
  268.         </Panel>
  269.  
  270.         <Panel class=""cornerPanel""
  271.                rectAlignment=""UpperRight"">
  272.             <Text>Upper Right</Text>
  273.         </Panel>
  274.  
  275.         <Image image=""Sprites/Shop/coin""
  276.                width=""100""
  277.                height=""100""
  278.                rectAlignment=""MiddleCenter""
  279.                preserveAspect=""true""
  280.                allowDragging=""true""
  281.                restrictDraggingToParentBounds=""false"" />
  282.  
  283.         <Text offsetXY=""0,-48"" raycastTarget=""false"">Try dragging the coin!</Text>
  284.  
  285.         <Panel class=""cornerPanel""
  286.                rectAlignment=""LowerLeft"">
  287.             <Text>Lower Left</Text>
  288.         </Panel>
  289.  
  290.         <Panel class=""cornerPanel""
  291.                rectAlignment=""LowerRight"">
  292.             <Text>Lower Right</Text>
  293.         </Panel>
  294.     </Panel>
  295.  
  296. </XmlLayout>
  297.             ";
  298.  
  299.             UpdateCodeInputField();
  300.             UpdateDisplay();
  301.         }
  302.     }
  303.  
  304.     class TestLogHandler : ILogHandler
  305.     {
  306.         XmlLayout_Example_MessageDialog m_MessageDialog;
  307.         ILogHandler m_OriginalLogger;
  308.  
  309.         public TestLogHandler(XmlLayout_Example_MessageDialog messageDialog, ILogHandler originalLogger)
  310.         {
  311.             m_MessageDialog = messageDialog;
  312.             m_OriginalLogger = originalLogger;
  313.         }
  314.  
  315.         public void LogException(Exception exception, UnityEngine.Object context)
  316.         {
  317.             // Pass on the message to the original logger so that it can be displayed on the console
  318.             m_OriginalLogger.LogException(exception, context);
  319.         }
  320.  
  321.         public void LogFormat(LogType logType, UnityEngine.Object context, string format, params object[] args)
  322.         {
  323.             if (!m_MessageDialog.gameObject.activeInHierarchy)
  324.             {
  325.                 m_MessageDialog.Show(logType.ToString(), String.Format(format, args));
  326.             }
  327.             else
  328.             {
  329.                 m_MessageDialog.AppendText(String.Format(format, args));
  330.             }
  331.  
  332.             // Pass on the message to the original logger so that it can be displayed on the console as well
  333.             m_OriginalLogger.LogFormat(logType, context, format, args);
  334.         }
  335.     }
  336. }

RTS Hud Example

An example showing the potential layout of a full-screen heads-up display. 

                    

    
  1. <XmlLayout xmlns="XmlLayout"
  2.            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3.            xsi:schemaLocation="XmlLayout ../../../Configuration/XmlLayout.xsd">
  4.  
  5.   <Include path="Xml/Styles.xml" />
  6.  
  7.   <Defaults>
  8.     <Panel class="borderOuter" padding="8" image="Sprites/Layout/Base" color="rgb(0.25,0.4,0.25)" ignoreLayout="true" rectAlignment="LowerCenter" />
  9.     <Panel class="borderInner" image="Sprites/Layout/Indented" color="rgb(0,0.3,0)" />
  10.  
  11.     <Button class="commandButton" 
  12.             image="Sprites/HUD/CommandButton" 
  13.             iconColor="rgb(0.8,1,0.8)"            
  14.             showAnimation="Grow" 
  15.             animationDuration="0.5"
  16.             colors="rgb(0.2,0.7,0)|rgb(0.3,1,0.3)|rgb(0.2,0.9,0)"
  17.             padding="2" />    
  18.  
  19.     <Button class="unitIcon"
  20.             image="Sprites/Outline"
  21.             icon="Sprites/HUD/UnitIcon" 
  22.             iconColor="rgb(0.4,1,0.0.4)"
  23.             showAnimation="Grow"
  24.             animationDuration="0.5"            
  25.             padding="2"
  26.             color="rgb(0,1,0)" />
  27.  
  28.     <Button class="topLeft" width="224" height="32" rectAlignment="UpperLeft" offsetXY="16 -48" />
  29.  
  30.     <Text class="resourceText" fontStyle="Bold" color="rgb(0,1,0)" horizontalOverflow="Overflow" />
  31.  
  32.     <Tooltip tooltipPosition="Above" tooltipBorderColor="rgb(0,1,0)" tooltipBackgroundColor="rgb(0,0,0)" tooltipFollowMouse="1" />
  33.   </Defaults>
  34.  
  35.   <!-- Overlay -->
  36.   <Panel image="Sprites/HUD/Game" color="white" type="Simple" preserveAspect="1" height="125%" width="125%" showAnimation="FadeIn" hideAnimation="FadeOut" raycastTarget="1">    
  37.   </Panel>
  38.  
  39.   <!-- Back Button -->
  40.   <Button class="topLeft" image="Sprites/Layout/Button" icon="Sprites/Icons/Arrow_Left" iconWidth="32" iconColor="rgb(0,1,0)" iconHoverColor="rgb(0,1,0)" padding="0 0 4 4" onClick="Hide();" showAnimation="FadeIn" hideAnimation="FadeOut">
  41.     Back to Example List
  42.   </Button>
  43.   
  44.   <!-- Top Bar -->
  45.   <Panel height="32" rectAlignment="UpperCenter" image="Sprites/Layout/Gradient" color="rgb(0.2,0.9,0,0.5)" showAnimation="SlideIn_Top" hideAnimation="SlideOut_Top" animationDuration="0.5">
  46.     <TableLayout class="noCellBackground" rectAlignment="MiddleRight" width="224" cellPadding="5">
  47.       <Row preferredHeight="0">        
  48.         <Cell tooltip="Green Minerals" tooltipPosition="Below">
  49.           <TableLayout class="noCellBackground item">
  50.             <Row>
  51.               <Cell>
  52.                 <Image image="Sprites/Shop/gemGreen" preserveAspect="1" width="125%" height="125%" ignoreLayout="1"/>
  53.               </Cell>
  54.               <Cell>
  55.                 <Text class="resourceText">500</Text>
  56.               </Cell>
  57.             </Row>
  58.           </TableLayout>
  59.         </Cell>
  60.         <Cell tooltip="Blue Minerals" tooltipPosition="Below">
  61.           <TableLayout class="noCellBackground item">
  62.             <Row>
  63.               <Cell>
  64.                 <Image image="Sprites/Shop/gemBlue" preserveAspect="1" width="125%" height="125%" ignoreLayout="1" />
  65.               </Cell>
  66.               <Cell>
  67.                 <Text class="resourceText">1000</Text>
  68.               </Cell>
  69.             </Row>
  70.           </TableLayout>
  71.         </Cell>
  72.       </Row>
  73.     </TableLayout>
  74.   </Panel>  
  75.  
  76.   <!-- Bottom Bar -->
  77.   <TableLayout columnWidths="192 0 128 256" height="192" rectAlignment="LowerCenter" class="noCellBackground" showAnimation="SlideIn_Bottom" hideAnimation="SlideOut_Bottom">
  78.     <Row>     
  79.       <Cell>
  80.         <!-- Minimap -->
  81.         <Panel class="borderOuter" padding="12">
  82.           <Panel padding="4" image="Sprites/Outline" color="rgba(0,1,0,0.75)">
  83.             <Panel class="borderInner">
  84.               <Image image="Sprites/HUD/Minimap" preserveAspect="1" />
  85.             </Panel>
  86.           </Panel>
  87.         </Panel>
  88.       </Cell>
  89.  
  90.       <Cell>
  91.         <!-- Unit List -->
  92.         <Panel class="borderOuter" image="Sprites/Layout/Title" height="168">
  93.         </Panel>
  94.  
  95.         <Panel class="borderOuter" image="Sprites/Layout/Viewport" height="160">
  96.           <Panel class="borderInner">
  97.  
  98.             <TableLayout cellBackgroundColor="rgba(1,1,1,0.05)" cellBackgroundImage="Sprites/Outline" cellSpacing="8" padding="8 8 8 16" cellPadding="2">
  99.               <Row>
  100.                 <Cell>
  101.                   <Button class="unitIcon" tooltip="Fighter" />
  102.                 </Cell>
  103.                 <Cell>
  104.                   <Button class="unitIcon" tooltip="Fighter" />
  105.                 </Cell>
  106.                 <Cell>
  107.                   <Button class="unitIcon" tooltip="Fighter" />
  108.                 </Cell>
  109.                 <Cell>
  110.                   <Button class="unitIcon" tooltip="Fighter" />
  111.                 </Cell>
  112.                 <Cell></Cell>                
  113.               </Row>
  114.  
  115.               <Row>
  116.                 <Cell></Cell>
  117.                 <Cell></Cell>
  118.                 <Cell></Cell>
  119.                 <Cell></Cell>
  120.                 <Cell></Cell>                
  121.               </Row>
  122.             </TableLayout>
  123.             
  124.           </Panel>
  125.         </Panel>
  126.       </Cell>
  127.  
  128.       <Cell>
  129.         <!-- Unit Portrait -->
  130.         <Panel class="borderOuter" height="160">
  131.           <Panel class="borderInner" color="rgb(0.1,0.1,0.1)">
  132.             <Panel padding="4" image="Sprites/Outline" color="rgba(0,1,0,0.75)">
  133.               <Panel padding="8">
  134.                 <Image image="Sprites/HUD/UnitPortrait" showAnimation="FadeIn" hideAnimation="FadeOut" animationDuration="0.5" preserveAspect="1" color="rgba(1,1,1,0.5)" />
  135.               </Panel>
  136.             </Panel>
  137.           </Panel>
  138.         </Panel>
  139.       </Cell>
  140.  
  141.       <Cell>
  142.         <!-- Commands -->
  143.                 
  144.         <Panel class="borderOuter" image="Sprites/Layout/Title" height="192">        
  145.         </Panel>
  146.         
  147.         <Panel class="borderOuter" image="Sprites/Layout/Viewport" height="160">
  148.           <Panel class="borderInner">
  149.             <TableLayout cellBackgroundColor="rgba(1,1,1,0.05)" cellBackgroundImage="Sprites/Outline" cellSpacing="8" padding="8 8 4 4" cellPadding="2">
  150.               <Row>
  151.                 <Cell>
  152.                   <Button class="commandButton" icon="Sprites/Icons/Move" tooltip="Move" />
  153.                 </Cell>
  154.                 <Cell>
  155.                   <Button class="commandButton" icon="Sprites/Icons/Crosshair" tooltip="Attack" />
  156.                 </Cell>
  157.                 <Cell>
  158.                   <Button class="commandButton" icon="Sprites/Icons/Cancel" tooltip="Cancel" />
  159.                 </Cell>
  160.                 <Cell>
  161.                   <Button class="commandButton" icon="Sprites/Icons/Anticlockwise-Rotation" tooltip="Return" />                  
  162.                 </Cell>
  163.               </Row>
  164.               
  165.               <Row>
  166.                 <Cell></Cell>
  167.                 <Cell></Cell>
  168.                 <Cell></Cell>
  169.                 <Cell></Cell>
  170.               </Row>
  171.               
  172.               <Row>
  173.                 <Cell>
  174.                   <Button class="commandButton" icon="Sprites/Icons/Arrow_Left" tooltip="Previous Page" />
  175.                 </Cell>
  176.                 <Cell></Cell>
  177.                 <Cell>
  178.                   <Button class="commandButton" icon="Sprites/Icons/Cog" tooltip="Advanced Options" />
  179.                 </Cell>
  180.                 <Cell>
  181.                   <Button class="commandButton" icon="Sprites/Icons/Arrow_Right" tooltip="Next Page" />                  
  182.                 </Cell>
  183.               </Row>
  184.  
  185.             </TableLayout>
  186.           </Panel>
  187.         </Panel>        
  188.       </Cell>
  189.     </Row>
  190.     
  191.   </TableLayout>
  192.   
  193. </XmlLayout>
                                
                                
    
  1. using System;
  2. using System.Collections;
  3. using System.Collections.Generic;
  4. using UnityEngine;
  5. using UnityEngine.SceneManagement;
  6. using UI.Xml;
  7.  
  8. namespace UI.Xml.Examples
  9. {
  10.     class XmlLayout_Example_HUD : XmlLayoutController
  11.     {
  12.         public XmlLayout_Example_ExampleMenu ExampleMenu = null;        
  13.  
  14.         public override void Hide(Action onCompleteCallback = null)
  15.         {
  16.             if (ExampleMenu != null)
  17.             {
  18.                 ExampleMenu.SelectExample(null);
  19.             }
  20.             else
  21.             {
  22.                 // This code is executed in the World Space example (which is in a different scene to the base Example Scene)
  23.                 base.Hide(() => { UnityEngine.SceneManagement.SceneManager.LoadScene("ExampleScene"); });
  24.             }
  25.         }
  26.     }
  27. }

Drag And Drop Example

An example showing a simple drag and drop interface. 

                    

    
  1. <XmlLayout xmlns="XmlLayout"
  2.            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3.            xsi:schemaLocation="XmlLayout ../../Configuration/XmlLayout.xsd" showAnimation="SlideIn_Right" hideAnimation="SlideOut_Right">
  4.  
  5.   <Include path="Xml/Styles.xml" />
  6.   
  7.   <Defaults>
  8.     <!-- By default, TableCells ignore raycasts, but that needs to be changed (elements must block raycasts to be drop receivers) -->
  9.     <Cell class="itemCell" isDropReceiver="true" raycastTarget="1" onElementDropped="ItemDropped()" />
  10.     <Image class="item" allowDragging="true" restrictDraggingToParentBounds="false" preserveAspect="true" />
  11.  
  12.     <Text color="white" fontSize="32" resizeTextForBestFit="true" minHeight="32" font="Fonts/Arial Bold" />    
  13.   </Defaults>
  14.  
  15.   <Button rectAlignment="UpperRight" 
  16.           offsetXY="-64 -64" 
  17.           width="256" 
  18.           height="32" 
  19.           fontSize="16" 
  20.           icon="Sprites/Icons/Arrow_Left" iconWidth="64" iconColor="rgb(0,1,0)" iconHoverColor="rgb(0,1,0)" padding="0 0 4 4"
  21.           onClick="ReturnToMainExamples()">
  22.     Back to Example List
  23.   </Button>    
  24.   
  25.   <TableLayout width="800" height="384" offsetXY="0 -32" cellSpacing="32" cellBackgroundColor="clear">
  26.     <Row preferredHeight="32">
  27.       <Cell>
  28.         <Text>Drag items from one cell to another</Text>
  29.       </Cell>
  30.     </Row>
  31.  
  32.     <Row>
  33.       <Cell>
  34.         <HorizontalLayout name="Container" flexibleHeight="1" spacing="16">
  35.  
  36.           <Panel name="LeftPanel" color="white" rectAlignment="MiddleLeft" image="Sprites/Layout/Base" padding="8">
  37.             <Panel image="Sprites/Layout/Base" color="rgb(0.15,0.15,0.15)">
  38.  
  39.               <TableLayout name="leftTable">
  40.                 <Row>
  41.                   <Cell class="itemCell"></Cell>
  42.                   <Cell class="itemCell">
  43.                     <Image class="item" image="Sprites/Shop/Coin" name="Coin" />
  44.                   </Cell>
  45.                   <Cell class="itemCell"></Cell>
  46.                 </Row>
  47.  
  48.                 <Row>
  49.                   <Cell class="itemCell">
  50.                     <Image class="item" image="Sprites/Shop/gemRed" name="Red Gem" />
  51.                   </Cell>
  52.                   <Cell class="itemCell"></Cell>
  53.                   <Cell class="itemCell"></Cell>
  54.                 </Row>
  55.  
  56.                 <Row>
  57.                   <Cell class="itemCell"></Cell>
  58.                   <Cell class="itemCell"></Cell>
  59.                   <Cell class="itemCell">
  60.                     <Image class="item" image="Sprites/Shop/gemBlue" name="Blue Gem" />
  61.                   </Cell>
  62.                 </Row>
  63.               </TableLayout>
  64.  
  65.             </Panel>
  66.           </Panel>
  67.  
  68.           <Panel name="RightPanel" color="white" rectAlignment="MiddleRight" image="Sprites/Layout/Base" padding="8">
  69.             <Panel image="Sprites/Layout/Base" color="rgb(0.15,0.15,0.15)">
  70.  
  71.               <TableLayout name="rightTable">
  72.                 <Row>
  73.                   <Cell class="itemCell"></Cell>
  74.                   <Cell class="itemCell"></Cell>
  75.                   <Cell class="itemCell"></Cell>
  76.                 </Row>
  77.  
  78.                 <Row>
  79.                   <Cell class="itemCell"></Cell>
  80.                   <Cell class="itemCell">
  81.                     <Image class="item" image="Sprites/Shop/gemGreen" name="Green Gem" />
  82.                   </Cell>
  83.                   <Cell class="itemCell"></Cell>
  84.                 </Row>
  85.  
  86.                 <Row>
  87.                   <Cell class="itemCell"></Cell>
  88.                   <Cell class="itemCell"></Cell>
  89.                   <Cell class="itemCell"></Cell>
  90.                 </Row>
  91.               </TableLayout>
  92.  
  93.             </Panel>
  94.           </Panel>
  95.  
  96.         </HorizontalLayout>
  97.       </Cell>
  98.     </Row>
  99.  
  100.     <Row preferredHeight="32">
  101.       <Cell>
  102.         <Text id="debugText"></Text>
  103.       </Cell>
  104.     </Row>    
  105.   </TableLayout>  
  106.  
  107. </XmlLayout>
                                
                                
    
  1. using System;
  2. using System.Collections;
  3. using System.Collections.Generic;
  4. using UnityEngine;
  5. using UI.Xml;
  6. using UI.Tables;
  7. using UnityEngine.UI;
  8.  
  9. class DragAndDropExampleXmlLayoutController : XmlLayoutController
  10. {    
  11.     void ItemDropped(XmlElement droppedItem, XmlElement cell)
  12.     {
  13.         if (!cell.HasClass("itemCell") || !droppedItem.HasClass("item")) return;
  14.  
  15.         droppedItem.parentElement.RemoveChildElement(droppedItem);
  16.         
  17.         cell.AddChildElement(droppedItem);
  18.         
  19.         // debug text
  20.         var tableCell = cell.GetComponent<TableCell>();               
  21.  
  22.         var debugText = xmlLayout.GetElementById<Text>("debugText");
  23.         debugText.text = String.Format("Item '{0}' dropped on cell '{1}' in table '{2}'", droppedItem.name, GetCellPositionString(tableCell), GetTableName(tableCell));
  24.     }
  25.  
  26.     string GetCellPositionString(TableCell cell)
  27.     {
  28.         var row = cell.GetRow();
  29.         var table = row.GetTable();
  30.  
  31.         var rowPosition = table.Rows.IndexOf(row) + 1;
  32.         var columnPosition = row.Cells.IndexOf(cell) + 1;
  33.  
  34.         return String.Format("{0},{1}", rowPosition, columnPosition);
  35.     }
  36.  
  37.     string GetTableName(TableCell cell)
  38.     {
  39.         return cell.GetRow().GetTable().name;
  40.     }
  41.  
  42.     void ReturnToMainExamples()
  43.     {
  44.         xmlLayout.Hide(() => { UnityEngine.SceneManagement.SceneManager.LoadSceneAsync("ExampleScene"); });        
  45.     }
  46.  
  47.     void Awake()
  48.     {
  49.         xmlLayout.Show();
  50.     }
  51. }

Localization Example

An example showing localization in action. 

                    

    
  1. <XmlLayout xmlns="XmlLayout"
  2.            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3.            xsi:schemaLocation="XmlLayout ../../Configuration/XmlLayout.xsd"
  4.            showAnimation="SlideIn_Right" hideAnimation="SlideOut_Right">
  5.  
  6.   <Include path="Xml/Styles.xml" />
  7.  
  8.   <Button rectAlignment="UpperRight"
  9.         offsetXY="-64 -64"
  10.         width="256"
  11.         height="32"
  12.         fontSize="16"
  13.         icon="Sprites/Icons/Arrow_Left" iconWidth="64" iconColor="rgb(0,1,0)" iconHoverColor="rgb(0,1,0)" padding="0 0 4 4"
  14.         onClick="ReturnToMainExamples()">
  15.     Back to Example List
  16.   </Button>
  17.  
  18.   <ToggleGroup id="languageToggleGroup" onValueChanged="ChangeLanguage(selectedText)">
  19.     <TableLayout class="noCellBackground" width="600" height="64" rectAlignment="UpperCenter" offsetXY="0 -120" cellPadding="8">
  20.       <Row class="viewport">
  21.         <Cell>
  22.           <ToggleButton name="English">English</ToggleButton>
  23.         </Cell>
  24.         <Cell>
  25.           <ToggleButton name="Spanish">Spanish</ToggleButton>
  26.         </Cell>
  27.         <Cell>
  28.           <ToggleButton name="French">French</ToggleButton>
  29.         </Cell>
  30.         <Cell>
  31.           <ToggleButton name="Afrikaans">Afrikaans</ToggleButton>
  32.         </Cell>
  33.         <Cell>
  34.           <ToggleButton name="None">No Localization</ToggleButton>
  35.         </Cell>
  36.       </Row>
  37.     </TableLayout>
  38.   </ToggleGroup>
  39.   
  40.  
  41.   <TableLayout class="noCellBackground" height="280" width="600" offsetXY="0 -48" useGlobalCellPadding="false">
  42.     <Row class="headerRow">
  43.       <Cell>
  44.         <Text class="title">
  45.           {LOCALIZATION_EXAMPLE_HEADER}
  46.         </Text>
  47.       </Cell>
  48.     </Row>
  49.     <Row class="viewport">
  50.       <Cell dontUseTableCellBackground="true" padding="16">
  51.         <TableLayout cellPadding="8" cellBackgroundColor="rgba(1,1,1,0.1)">
  52.           <Row>
  53.             <Cell>
  54.               <Text class="h3">{LOCALIZATION_EXAMPLE_USERNAME_LABEL}</Text>
  55.             </Cell>
  56.             <Cell>
  57.               <InputField id="username" placeholderText="{LOCALIZATION_EXAMPLE_USERNAME_PLACEHOLDER_TEXT}" />
  58.             </Cell>
  59.           </Row>
  60.  
  61.           <Row>
  62.             <Cell>
  63.               <Text class="h3">{LOCALIZATION_EXAMPLE_PASSWORD_LABEL}</Text>
  64.             </Cell>
  65.             <Cell>
  66.               <InputField id="password" inputType="Password" placeholderText="{LOCALIZATION_EXAMPLE_PASSWORD_PLACEHOLDER_TEXT}" />
  67.             </Cell>
  68.           </Row>
  69.  
  70.           <Row>
  71.             <Cell>
  72.               <Button resizeTextForBestFit="1" resizeTextMaxSize="16">{LOCALIZATION_EXAMPLE_LOGIN_BUTTON}</Button>
  73.             </Cell>
  74.             <Cell>
  75.               <Button resizeTextForBestFit="1" resizeTextMaxSize="16">{LOCALIZATION_EXAMPLE_REGISTER_BUTTON}</Button>
  76.             </Cell>
  77.           </Row>
  78.         </TableLayout>
  79.       </Cell>
  80.     </Row>
  81.   </TableLayout>
  82.  
  83. </XmlLayout>
                                
                                
    
  1. using System;
  2. using System.Collections;
  3. using System.Collections.Generic;
  4. using UnityEngine;
  5. using UI.Xml;
  6.  
  7. class XmlLayout_Localization_Example : XmlLayoutController
  8. {
  9.     public string selectedLanguage = "English";
  10.     XmlElementReference<XmlLayoutToggleGroup> toggleGroup = null;
  11.  
  12.     void Awake()
  13.     {
  14.         xmlLayout.Show();
  15.  
  16.         toggleGroup = XmlElementReference<XmlLayoutToggleGroup>("languageToggleGroup");        
  17.     }
  18.     
  19.     public override void LayoutRebuilt(ParseXmlResult parseResult)
  20.     {
  21.         if (toggleGroup != null)
  22.         {
  23.             // As the layout has just been rebuilt, the toggle group will no longer have anything selected
  24.             // so we're just going to set it again here     
  25.             toggleGroup.element.SetSelectedValue(selectedLanguage, false);            
  26.         }
  27.     }
  28.  
  29.     void ChangeLanguage(string language)
  30.     {
  31.         this.selectedLanguage = language;
  32.  
  33.         if (language == "No Localization")
  34.         {
  35.             xmlLayout.SetLocalizationFile(null);
  36.             return;
  37.         }
  38.  
  39.         var languageFile = XmlLayoutUtilities.LoadResource<XmlLayoutLocalization>("Localization/" + language);
  40.  
  41.         if (languageFile == null)
  42.         {
  43.             Debug.LogWarningFormat("Warning: localization file for language '{0}' not found!", language);
  44.             return;
  45.         }
  46.  
  47.         xmlLayout.SetLocalizationFile(languageFile);
  48.     }
  49.  
  50.     void ReturnToMainExamples()
  51.     {
  52.         xmlLayout.Hide(() => { UnityEngine.SceneManagement.SceneManager.LoadSceneAsync("ExampleScene"); });
  53.     }
  54. }

Color Scheme Manager Example

An example showing one way of implementing color schemes/themes. 

                    

    
  1. <XmlLayout xmlns="XmlLayout"
  2.            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3.            xsi:schemaLocation="XmlLayout ../../../Configuration/XmlLayout.xsd">
  4.  
  5.   <HorizontalLayout color="rgb(0.5,0.5,0.5)" padding="8" image="Sprites/Layout/Viewport">
  6.     <Text color="white">Color Scheme:</Text>
  7.     
  8.     <Dropdown id="colorSchemeDropdown" preferredWidth="192" onValueChanged="ChangeColorScheme(selectedValue)">
  9.       <Option>GreenYellow</Option>
  10.       <Option>BlueYellow</Option>
  11.       <Option>Grayscale</Option>
  12.       <Option>GrayscaleAlt</Option>
  13.     </Dropdown>
  14.   </HorizontalLayout>
  15.  
  16. </XmlLayout>
                                
                                
    
  1. using System;
  2. using System.Collections;
  3. using System.Collections.Generic;
  4. using UnityEngine;
  5. using UnityEngine.UI;
  6. using System.Linq;
  7.  
  8. namespace UI.Xml
  9. {
  10.     [ExecuteInEditMode]
  11.     class XmlLayout_Example_ColorSchemeManager : XmlLayoutController
  12.     {
  13.         // Set to the root Canvas for the scene in the inspector
  14.         public GameObject Root = null;
  15.  
  16.         private string colorScheme
  17.         {
  18.             get { return PlayerPrefs.GetString("colorScheme"); }
  19.             set { PlayerPrefs.SetString("colorScheme", value); }
  20.         }
  21.  
  22.         private void OnEnable()
  23.         {
  24.             if (string.IsNullOrEmpty(colorScheme)) colorScheme = "GreenYellow";
  25.  
  26.             ChangeColorSchemeWithoutRebuild(colorScheme);
  27.         }
  28.  
  29.         private void Start()
  30.         {
  31.             xmlLayout.GetElementById<Dropdown>("colorSchemeDropdown").SetSelectedValue(colorScheme);
  32.  
  33.             ChangeColorScheme(colorScheme);
  34.         }
  35.  
  36.         public void ChangeColorSchemeWithoutRebuild(string newScheme)
  37.         {
  38.             colorScheme = newScheme;
  39.  
  40.             var colorSchemeFile = XmlLayoutUtilities.LoadResource<TextAsset>(string.Format("Xml/ColorSchemes/{0}", newScheme));
  41.  
  42.             if (colorSchemeFile == null)
  43.             {
  44.                 Debug.LogErrorFormat("[XmlLayout][Example][Color Scheme Manager] Warning: unable to locate color scheme definition '{0}'", newScheme);
  45.                 return;
  46.             }
  47.  
  48.             List<XmlLayout> xmlLayouts = Root.gameObject
  49.                                              .GetComponentsInChildren<XmlLayout>(true)
  50.                                              .ToList();
  51.  
  52.             foreach (var layout in xmlLayouts)
  53.             {
  54.                 // skip this layout
  55.                 if (layout == this.xmlLayout) continue;
  56.  
  57.                 if (layout.DefaultsFiles == null) layout.DefaultsFiles = new List<TextAsset>();
  58.  
  59.                 layout.DefaultsFiles.Clear();
  60.                 layout.DefaultsFiles.Add(colorSchemeFile);
  61.             }
  62.         }
  63.  
  64.         public void ChangeColorScheme(string newScheme)
  65.         {
  66.             colorScheme = newScheme;
  67.  
  68.             var colorSchemeFile = XmlLayoutUtilities.LoadResource<TextAsset>(string.Format("Xml/ColorSchemes/{0}", newScheme));
  69.  
  70.             if (colorSchemeFile == null)
  71.             {
  72.                 Debug.LogErrorFormat("[XmlLayout][Example][Color Scheme Manager] Warning: unable to locate color scheme definition '{0}'", newScheme);
  73.                 return;
  74.             }
  75.  
  76.             List<XmlLayout> xmlLayouts = Root.gameObject
  77.                                              .GetComponentsInChildren<XmlLayout>(true)
  78.                                              .ToList();
  79.  
  80.             foreach(var layout in xmlLayouts)
  81.             {
  82.                 // skip this layout
  83.                 if (layout == this.xmlLayout) continue;
  84.  
  85.                 if (layout.DefaultsFiles == null) layout.DefaultsFiles = new List<TextAsset>();
  86.  
  87.                 var inactive = !layout.gameObject.activeSelf;
  88.  
  89.                 if (inactive)
  90.                 {
  91.                     layout.gameObject.SetActive(true);
  92.                 }
  93.  
  94.                 layout.DefaultsFiles.Clear();
  95.                 layout.DefaultsFiles.Add(colorSchemeFile);
  96.  
  97.                 layout.RebuildLayout(true);
  98.  
  99.                 if (inactive)
  100.                 {
  101.                     // copy the local variable (if we use 'layout' it will reference the foreach variable which changes through each iteration)
  102.                     var layoutTemp = layout;
  103.  
  104.                     // hide the layout again at the end of the frame
  105.                     XmlLayoutTimer.AtEndOfFrame(() =>
  106.                     {
  107.                         if (layoutTemp == null) return;
  108.  
  109.                         //canvasGroup.alpha = alphaBefore;
  110.                         layoutTemp.gameObject.SetActive(false);
  111.                     }, layoutTemp, true);
  112.                 }
  113.             }
  114.         }
  115.     }
  116. }

Credits

Some of the images used in this example (coin, gemGreen, gemBlue, gemRed) are sourced from OpenGameArt.org and were created by RavenMore.

Additionally, some of the icons were sourced from game-icons.net:
Sbed
- cancel.png

Delapouite
- move.png
- crosshair.png
- anticlockwise-rotation.png

Lorc
- cog.png


Thanks!