Flex 拖拽+XML 打造 布局变化过渡动画

这篇文章是基于上篇文章

只是稍微复杂一点而已...

 

废话少说了，看代码：

package com.emavaj.myfriend.view{
	import flash.events.MouseEvent;
	
	import mx.controls.Alert;
	import mx.controls.Button;
	import mx.events.DragEvent;
	
	public class FriendIcom extends Button {
		/**添加监听.*/
		public function FriendIcom() {
			super();
			this.width = 100;
			this.height = 100;
			this.addEventListener(MouseEvent.MOUSE_DOWN,startDragHandler);
			this.addEventListener(MouseEvent.MOUSE_UP,endDragHandler);
		}
		/**启动拖拽.*/
		private function startDragHandler(event:MouseEvent):void {
			(event.target as Button).startDrag(); 	
		}
		/**停止拖拽.*/
		private function endDragHandler(event:MouseEvent):void {
			(event.target as Button).stopDrag();
		}
	}
}

 

这个就是视图上的元素类，它自动启用了拖拽

（至于这个拖拽的写法，我就不学网上那些Drag什么的Event了，因为我不需要响应那么多事件

所以用了简单的MouseDown&Up的方法)

 

PS：用MouseClick你永远做不了

 

下面是布局管理基类：

package com.emavaj.myfriend.layout{
	import flash.events.Event;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	
	import mx.collections.ArrayCollection;
	import mx.core.UIComponent;
	import mx.effects.Move;

	/**布局管理器*/
	public class LayoutManagerBase {
		/**当前的父容器.*/
		protected var father:UIComponent;
		/**数据来源.*/
		protected var xml:XML;
		/**存储*/
		protected var list:ArrayCollection = new ArrayCollection();
		
		/**构造函数*/
		public function LayoutManagerBase() {
		}
		
		/**创建元素.*/
		public function createElem(file:String, father:UIComponent):void {
			this.father = father;
			var request:URLLoader = new URLLoader();
			request.addEventListener(Event.COMPLETE,startCreate);
			request.load(new URLRequest(file));
		}
		
		/**开始创建.*/
		public function startCreate(event:Event):void {
		}
		
		/**重置数据.*/
		public function restart():void {
		}
		
		/**移动效果.*/
		protected function moveEffect(target:UIComponent,targetX:int,targetY:int):void {
			if (target.x != targetX || target.y != targetY) {
				var move:Move = new Move(target);
				move.xTo = targetX;
				move.yTo = targetY;
				move.play();
			}
		}
	}
}

 

这个类其实应该是个抽象类...可是...似乎...好像 AS3没有...

所以...子类只能用override了

下面是子类，也是真正的管理类:

package com.emavaj.myfriend.layout{
	
	import com.emavaj.myfriend.view.FriendIcom;
	
	import flash.events.Event;
	
	import mx.controls.Alert;
	
	/**图标管理器.*/
	public class IcomLayoutManager extends LayoutManagerBase{
		/**单例.*/
		private static var manager:IcomLayoutManager;
		/**另一种状态.*/
		private var otherXML:XML;
		/**状态标志.*/
		private var witchState:Boolean = true; 
		
		/**构造函数.*/
		public function IcomLayoutManager(){
			super();
			if (manager!=null) {
				throw Error("不能存在多个实例!");
			}
		}
		
		/**获取实例.*/
		public static function getInstance():IcomLayoutManager {
			if (manager==null) {
				manager = new IcomLayoutManager();
			}
			return manager;
		} 
		
		/**创建方法.*/
		override public function startCreate(event:Event):void {
			this.xml = new XML(event.target.data);
			var i:int = 0;
			for each (var elem:XML in xml.buttons.elements()) {
				var temp:FriendIcom = new FriendIcom();
				temp.x = elem.x;
				temp.y = elem.y;
				temp.id = "C" + i;
				temp.label = "BUTTON" + i;
				this.father.addChild(temp);
				this.list.addItem(temp);
				i++;
			}
		}
		
		/**重置数据.*/
		override public function restart():void {
			/**保存当前状态.*/
			this.otherXML = <layout><buttons/></layout>;
			var buttons:XMLList = otherXML.buttons;
			for (var i:int = 0; i < this.list.length; i++) {
				var temp:FriendIcom = this.list.getItemAt(i) as FriendIcom;
				buttons.appendChild(<button><x>{temp.x}</x><y>{temp.y}</y></button>);
			}
			//----测试-----Alert.show(this.otherXML);
			/**调整位置.*/
			this.moveTo(this.xml);
		}
		
		private function moveTo(data:XML):void {
			var i:int = 0;
			for each (var elem:XML in data.buttons.elements()) {
				var temp:FriendIcom = this.list.getItemAt(i) as FriendIcom;
				this.moveEffect(temp,elem.x,elem.y);
				i++;
			}
			/**标志改变.*/
			this.witchState = !this.witchState;
		}
		
		public function switchState():void {
			if (this.otherXML!=null) {
				if (witchState) {
					this.moveTo(this.otherXML);
				} else {
					this.moveTo(this.xml);
				}
			}
		}
	}
}

 做了一下XML的读取了存储操作

过程大概是这样的

 

首先有个XML是存储各个元素的坐标，然后初始化的时候读入...

当各元素状态改变了，需要重置的时候

就以当前各元素位置构造一个XML存储当前状态

以便之后切换

 

调用代码：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	xmlns:view="com.emavaj.myfriend.view.*"
	layout="absolute" minWidth="955" minHeight="600"
	creationComplete="initApp()"
>
	<mx:Script>
		<![CDATA[
			import com.emavaj.myfriend.layout.IcomLayoutManager;
			import com.emavaj.myfriend.view.FriendIcom;
			/**初始化.*/
			public function initApp():void {
				IcomLayoutManager.getInstance().createElem("com/emavaj/myfriend/data/iconlayout.xml",main);
			}
			
			/**重置数据.*/
			public function restart():void {
				IcomLayoutManager.getInstance().restart();
			}
			
			/**切换状态.*/
			public function switchState():void {
				IcomLayoutManager.getInstance().switchState();
			}
		]]>
	</mx:Script>
	<mx:ViewStack width="950" height="600">
		<mx:Canvas width="100%" height="100%" id="main" fontSize="14">
			<mx:Button x="884.8" y="563.8" label="重置" click="restart()"/>
			<mx:Button x="791.9" y="563.8" label="状态切换" click="switchState()"/>
		</mx:Canvas>
	</mx:ViewStack>
	
</mx:Application>

 

效果在附近...

 

PS : 其实就是练练手XML和拖拽，还有一些效果的使用...