创建iOS滑动菜单

Step 1：Getting Started
sliding menu是由全屏窗口上（主窗口）包含几个小点儿的table view（菜单）组成。为了让它有滑动的效果，我们需要触发动画，将水平地跟踪一个触摸事件。
不过，那个是稍后要做的，现在从设置视窗做起。
1    //// ---- Menu window, positioned on the left 
2    var menuWindow = Ti.UI.createWindow({     
3        top:0,     
4        left:0,     
5        width:150 
6    }); 
7    menuWindow.open(); 
8    //// ---- Menu Table 
9    // Menu Titles 
10    var menuTitles = [     
11        {title: 'Menu 1'},     
12        {title: 'Menu 2'},     
13        {title: 'Menu 3'},     
14        {title: 'Menu 4'},     
15        {title: 'Menu 5'},     
16        {title: 'Menu 6'} 
17      ]; 
18    // Tableview 
19    var tableView = Ti.UI.createTableView({     
20        data:menuTitles 
21    }); 
22    menuWindow.add(tableView);

这个table view设置比较基础，但非常有用，你应该像下边这样：

Step 2: Main Windows
现在我们需要一个带有导航条和按钮的窗口，它可以让我们以动画方式打开菜单。所以，为了达到这个效果，我们实际上需要两个窗口，一个包含navigationGroup，另外一个则是在navigationGroup中的window。

1    //// ---- Window with navigationGroup 
2    var navWindow = Ti.UI.createWindow({     
3        width:320 // Set the width of the sliding window to avoid cut out from animation
4     }); 
5    navWindow.open();
6    // Main window 
7    var win = Ti.UI.createWindow({     
8        title:'Main Window',     
9        backgroundColor:'#28292c',     
10       barColor:'#28292c'
11    }); 
12    // NavigationGroup 
13    var navGroup = Ti.UI.iPhone.createNavigationGroup({     
14        window:win 
15    }); 
16    navWindow.add(navGroup); 
17    // Top left button 
18    var menuButton = Ti.UI.createButton({     
18        title:'Menu',     
20        toggle:false // Custom property for menu toggle 
21    }); 
22    win.setLeftNavButton(menuButton); 
下面是我的main windows

如上代码，你可能已经注意到了button中的toggle:true属性。它原本是不存在的；在这里是我添加的一个自定义属性。这个名字你可以随便命名一个，如果觉得这样更好的话，你甚至可以为其创建一个变量（如var toggle = true;）。

不过，我建议你对其的用法还是跟我写的代码一样，尤其是当你的App里有很多个自定义属性的时候，可以非常清晰明了。


Step 3: Toggle Menu
现在来实现：当按下"Menu"按钮时，窗口由左向右滑动。来看看具体的代码是如何实现的：
1    menuButton.addEventListener('click', function(e){ 
2             // If the menu is opened 
3            if(e.source.toggle == true){ 
4                 navWindow.animate({ 
5                        left:0, 
6                        duration:400, 
7                        curve:Ti.UI.ANIMATION_CURVE_EASE_IN_OUT 
8             }); 
9             e.source.toggle = false; 
10     } 
11      // If the menu isn't opened 
12     else{ 
13            navWindow.animate({ 
14                   left:150, 
15                   duration:400, 
16                   curve:Ti.UI.ANIMATION_CURVE_EASE_IN_OUT 
17          }); 
18          e.source.toggle  = true; 
19       } 
20    });

通过上面的代码可以看到，当我点击按钮时，调用了function(e)，其中e是我们的对象。然后通过调用e.source.toggle属性，在这里判断之前我们讨论过的自定义"toggle"属性（当然在这里也可以使用menuButton.toggle,这与e.source.toggle是一个东西）。

如果toggle是false，我们将window移动到右边，并将toggle属性设置为true。如果toggle是true，windows将回到最初状态，并将toggle设置为false。

curve:Ti.UI.ANIMATION_CURVE_EASE_IN_OUT的作用是把动画效果处理得平滑一点。

Step 4: Tracking
看起来整齐优雅多了，但这是简单的那部分。跟踪一个触摸事件，这样我们可以通过水平移动主窗口来展示菜单。但这之前，我们需要增加一些自定义属性：
1    // Main window 
2    var win = Ti.UI.createWindow({     
3    title:'Main Window',     
4    backgroundColor:'#28292c',     
5    barColor:'#28292c',     
6    moving:false, // Custom property for movement     
7    axis:0 // Custom property for X axis 
8    });

你可以为这些属性命名任何你想要的名字，甚至你可以为他们创建相应的变量。不过，我强烈地建议你使用这个方法，因为它节省内存，并且相比较文件中散乱的变量而言，这个方法更容易读取。

当手指接触屏幕的时候，我们可使用touchstart事件来获取手指的位置。

1  win.addEventListener('touchstart', function(e){     
2  // Get starting horizontal position     
3  e.source.axis = parseInt(e.x); 
4  });
上面的代码中我获取了事件的水平坐标（e.x），并将其解析为integer（整型），然后将其存储到自定义属性axis中。

下面，我将根据手指的位置来移动窗口：

1  win.addEventListener('touchmove', function(e){

2     // Subtracting current position to starting horizontal position

3      var coordinates = parseInt(e.globalPoint.x) - e.source.axis;

4      // Detecting movement after a 20px shift

5      if(coordinates > 20 || coordinates < -20){

6          e.source.moving = true;

7      }

8      // Locks the window so it doesn't move further than allowed

9      if(e.source.moving == true && coordinates <= 150 && coordinates >= 0){

10          // This will smooth the animation and make it less jumpy

11          navWindow.animate({

12              left:coordinates,

13              duration:20

14          });

15          // Defining coordinates as the final left position

16          navWindow.left = coordinates;

17      }

18  });

为了避免每一次触摸都让窗口移动，在移动之前，我们要等到移动距离超过20pixels。通过e.globalPoint.x减去起点（axis）来跟踪触摸，就可以用这个数据对window进行移动。如果超过了菜单的宽度（150pixels）或者超过了屏幕左侧，则不进行移动。

Step 5: Back to Normal
现在运行app，你会看到窗口恰好停在触摸停止的地方，这不是我们想要的。当触摸事件结束时，我们需要重新定位窗口，窗口打开与关闭的状态取决于窗口的位置。

1  win.addEventListener('touchend', function(e){

2      // No longer moving the window

3      e.source.moving = false;

4      if(navWindow.left >= 75 && navWindow.left < 150){

5          // Repositioning the window to the right

6          navWindow.animate({

7              left:150,

8              duration:300

9          });

10          menuButton.toggle = true;

11      }else{

12          // Repositioning the window to the left

13          navWindow.animate({

14              left:0,

15              duration:300

16          });

17          menuButton.toggle = false;

18      }

19  });

如上代码，当我们的手指不在触摸屏幕时，touchend事件被触发，通过该事件，我们就可以重新定位window。

总结

我们使用了一个最基本的动画和函数达到了很好并且很专业的效果，希望大家看了这篇文章有点收获。现在已经实现了滑动菜单功能！如上所示，我使用了非常基本的动画和数学计算来完成了一个非常棒而非常专业效果。希望你能有所收获！