Starling Feathers Controls Drawers

說明：

The Drawers class provides a container that supports main content in the center with “drawers”, or slide-out menus, that may be opened and closed with a gesture around all four edges. Drawers may also be docked to remain open at all times, or based on the stage orientation. Drawers may be opened by listening to an event from the main content, such as one triggered by a button press.

用法：

<span style="white-space:pre">		</span>private var _drawersList:List;
<span style="white-space:pre">		</span>private var _drawersNavigator:ScreenNavigator
<span style="white-space:pre">		</span>private function testDrawers():void
<span style="white-space:pre">		</span>{
<span style="white-space:pre">			</span>_drawersNavigator = new ScreenNavigator();
<span style="white-space:pre">			</span>_drawersNavigator.addScreen( "start", new ScreenNavigatorItem( StartScreen ) );
<span style="white-space:pre">			</span>_drawersNavigator.addScreen( "options", new ScreenNavigatorItem( OptionsScreen ) );
<span style="white-space:pre">			</span>_drawersNavigator.showScreen( "start" );
<span style="white-space:pre">			</span>
<span style="white-space:pre">			</span>_drawersList = new List();
<span style="white-space:pre">			</span>_drawersList.dataProvider = new ListCollection(
<span style="white-space:pre">				</span>[
<span style="white-space:pre">					</span>{ screen: "start", label: "Start" },
<span style="white-space:pre">					</span>{ screen: "options", label: "Options" },
<span style="white-space:pre">				</span>]);
<span style="white-space:pre">			</span>_drawersList.selectedIndex = 0;
<span style="white-space:pre">			</span>_drawersList.addEventListener( Event.CHANGE, list_changeHandler );
<span style="white-space:pre">			</span>
<span style="white-space:pre">			</span>var drawers:Drawers = new Drawers();
<span style="white-space:pre">			</span>drawers.content = _drawersNavigator;
<span style="white-space:pre">			</span>drawers.leftDrawer = _drawersList;
<span style="white-space:pre">			</span>drawers.leftDrawerToggleEventType = Event.OPEN;
<span style="white-space:pre">			</span>this.addChild( drawers );
//<span style="white-space:pre">			</span>drawers.toggleLeftDrawer();
<span style="white-space:pre">		</span>}
<span style="white-space:pre">		</span>private function list_changeHandler(e:Event):void
<span style="white-space:pre">		</span>{
<span style="white-space:pre">			</span>var screen:String = _drawersList.selectedItem.screen;
<span style="white-space:pre">			</span>_drawersNavigator.showScreen( screen );
<span style="white-space:pre">		</span>}           

StartScreen類：

package lft.fctest
{
	import feathers.controls.Button;
	import feathers.controls.Label;
	import feathers.controls.PanelScreen;
	
	import starling.events.Event;
	
	/**
	 * Author:大飛狼
	 * <br>Date: 2014-9-11 下午3:52:58
	 * <br>Synopsis:
	 */
	public class StartScreen extends PanelScreen
	{
		public function StartScreen()
		{
			super();
		}
		override protected function initialize():void
		{
			super.initialize();
			this.headerProperties.title = "Start";
			
			var label:Label=new Label();
			label.text="從左往右拖動左邊可打開導航";
			addChild(label);
			
			var button:Button=new Button();
			button.x=100;
			button.y=100;
			button.addEventListener(Event.TRIGGERED,buttonTriggered);
			button.label="打開導航";
			this.addChild(button);
		}
		
		private function buttonTriggered(e:Event):void
		{
			dispatchEventWith(Event.OPEN);
		}
	}
}           

OptionsScreen類和StartScreen一樣

效果：

更多說明參考：

http://wiki.starling-framework.org/feathers/drawers