Appcelerator：制作展开式（高级）菜单

Preface: This article is part of a series focused on cross platform mobile app development (specifically Android and iOS) using the Alloy framework and Titanium Studio made by Appcelerator. This article presumes a working knowledge of Titanium Studio and the Alloy framework.

前言 ：本文是使用Appcelerator制造的Alloy框架和Titanium Studio进行的跨平台移动应用程序开发（特别是Android和iOS）系列文章的一部分。 本文假定您对Titanium Studio和Alloy框架有一定的了解。

The Alloy framework has great built in elements for making a simple menu, mainly using the TableView (and TableViewRow) system. Unfortunately this does not include any built in functionality for expanding and collapsing rows. At first glance, using the "insertRowAfter" and "deleteRow" methods of the TableView would work for this. Unfortunately there seems to be a bug with the iOS implementation which leads to a "no row found for index" error when deleting rows. To avoid this error, the menu can be implemented as verticaly aligned View elements.

Alloy框架具有强大的内置元素，可用于制作简单菜单，主要使用TableView（和TableViewRow）系统。 不幸的是，它不包含任何用于扩展和折叠行的内置功能。 乍一看，使用TableView的“ insertRowAfter”和“ deleteRow”方法可以解决此问题。 不幸的是，iOS实施似乎存在一个错误，导致在删除行时导致“找不到索引行”错误。 为避免此错误，可以将菜单实现为垂直对齐的View元素。

In the menu View elements represent each row. The rows for the submenus start out "hidden" by a wrapper View with a height of 0. Each row of them menu that does not expand will have a "menuAction" property which will be harvested by the "menuClick" onClick listener. The parent row of each submenu will have extra properties which define how big the submenu is and the name of the submenu's wrapper View.

在菜单中，“视图”元素代表每一行。 子菜单的行从高度为0的包装器视图开始“隐藏”。未展开的菜单的每一行将具有“ menuAction”属性，该属性将由“ menuClick” onClick侦听器获取。 每个子菜单的父行将具有额外的属性，这些属性定义子菜单的大小以及子菜单的包装器视图的名称。

Example Alloy markup would look like this:

示例合金标记如下所示：

file: /views/index.xml

文件：/views/index.xml

<Alloy>
  <Window class="container">
    <ScrollView id="menu" layout="vertical">
      <View class="menuDivider"/>
      <View class="menuRow" onClick="menuClick" menuAction="home">
        <Label class="rowName">Home</Label>
      </View>			
      <View class="menuDivider"/>
      <View class="menuRow" onClick="menuClick" menuAction="away">
        <Label class="rowName">Away</Label>
      </View>			
      <View class="menuDivider"/>		
      <View class="menuRow" onClick="menuExpand" menuItems="3" submenuId="submenuBrowsers" expanded="false">
        <Label class="rowName">Browsers</Label>
        <Label class="expandArrow" id="expandIndicator" text=">"/>
      </View>
      <View class="submenuWrap" id="submenuBrowsers" layout="vertical">
        <View class="menuDivider"/>
        <View class="submenuRow" onClick="menuClick" menuAction="chrome">
          <Label class="rowName">Chrome</Label>
        </View>
        <View class="menuDivider"/>
        <View class="submenuRow" onClick="menuClick" menuAction="firefox">
          <Label class="rowName">FireFox</Label>
        </View>	
        <View class="menuDivider"/>
        <View class="submenuRow" onClick="menuClick" menuAction="ie">
          <Label class="rowName">Internet Explorer</Label>
        </View>				
      </View>			
      <View class="menuDivider"/>
      <View class="menuRow"  onClick="menuExpand" menuItems="4" submenuId="submenuPhones" id="network" expanded="false">
        <Label class="rowName">Smart Phones</Label>
        <Label class="expandArrow" id="expandIndicator" text=">"/>
      </View>
      <View class="submenuWrap" id="submenuPhones" layout="vertical">
        <View class="menuDivider"/>
        <View class="submenuRow" onClick="menuClick" menuAction="android">
          <Label class="rowName">Android</Label>
        </View>			
        <View class="menuDivider"/>
        <View class="submenuRow" onClick="menuClick" menuAction="blackberry">
          <Label class="rowName">Blackberry</Label>	
        </View>			
        <View class="menuDivider"/>
        <View class="submenuRow" onClick="menuClick" menuAction="iphone">
          <Label class="rowName">iPhone</Label>
        </View>			
        <View class="menuDivider"/>
        <View class="submenuRow" onClick="menuClick" menuAction="windows">
          <Label class="rowName">Windows</Label>
        </View>
      </View>			
      <View class="menuDivider"/>
      <View class="menuRow" onClick="menuClick" menuAction="settings" id="bottom">
        <Label class="rowName">Settings</Label>
      </View>			
    </ScrollView>
  </Window>
</Alloy>

The "tss" (Titanium Style Sheet) file specifies the initial styles of the menu. Note the "submenuWrap" has a height of "0" and visible set to "false". Each submenu row is configured to have a height of "36".

“ tss”（钛样式表）文件指定菜单的初始样式。 请注意，“ submenuWrap”的高度为“ 0”，可见设置为“ false”。 每个子菜单行配置为具有“ 36”的高度。

file: /styles/index.tss

文件：/styles/index.tss

".container" : {
   backgroundColor: "#63666a"
}
"#menu" : {
   backgroundColor: "#63666a",
}
"Label" : {
   color: "#fff",
   verticalAlign: Titanium.UI.TEXT_VERTICAL_ALIGNMENT_CENTER,
   height: Ti.UI.FILL,
   touchEnabled: "false"
}
".menuDivider" : {
   width: Ti.UI.FILL,
   height: '1dp',
   backgroundColor: '#999'
}
".menuRow" : {
   height: '40dp',
   backgroundColor: '#777',
   width: Ti.UI.FILL
}
".rowName" : {
   left: '20dp'
}
".expandArrow" : {
   right: '20dp'
}
".submenuWrap" : {
   height: '0dp',
   visible: 'false'
}
".submenuRow" : {
   height: '36dp',
   backgroundColor: '#888'
}

The controller is where the expanding and collapsing is processed. When a submenu's title row is clicked, the "expandMenu" function will calculate how tall to make the submenuWrap View so that the submenu will be visible. To collapse the menu the submenuWrap is set back to a height of "0". Note: Each row in the menu includes a "divider" which is a height:1 View, hence why the value used to calculate the new height is 37 for each row instead of 36.

控制器是处理展开和折叠的地方。 单击子菜单的标题行时，“ expandMenu”功能将计算使子菜单包裹视图的高度，以便可以看到子菜单。 要折叠菜单，将子菜单包装设置回“ 0”的高度。 注意：菜单中的每一行都包含一个“ divider”，它是一个高度：1视图，因此，为什么用于计算新高度的值是每行37，而不是36。

file: /controllers/index.js

文件：/controllers/index.js

function menuClick(e) {
   //  Perform processing based on the menuAction of the clicked menu item
   alert(e.source.menuAction);
}

var submenuRowHeight = 37;

function menuExpand(e) {
   var menuRow = e.source;
   var submenuWrap = $[menuRow.submenuId];
   
   if (menuRow.expanded == 'false') {
      var newHeight = (submenuRowHeight * menuRow.menuItems);
      submenuWrap.setHeight(newHeight);
      submenuWrap.setVisible(true);
      menuRow.expanded = 'true';
   } else if (menuRow.expanded == 'true') {
      menuRow.expanded = 'false';
      submenuWrap.setHeight(0);
      submenuWrap.setVisible(false);
   }
}

$.index.open();

This is a basic example of a menu that includes optional expanded submenus created in the Alloy framework that will work for both Android and iPhone devices. The nested submenu items could also be have their own submenus allowing for deeper navigation. By incorporating this menu into an app it can be utilzied as a "side swipe" drawer, options list, or any number of uses.

这是菜单的基本示例，该菜单包括在Alloy框架中创建的可选扩展子菜单，该子菜单可同时用于Android和iPhone设备。 嵌套的子菜单项也可以具有自己的子菜单，以实现更深的导航。 通过将此菜单合并到应用程序中，可以将其用作“侧滑”抽屉，选项列表或任何数量的用途。

翻译自: https://www.experts-exchange.com/articles/17440/Appcelerator-Making-an-expandable-accordian-menu.html