简单的开关组件

bigt

浏览: 45349 次
性别:
来自: 武汉

最近访客更多访客>>

wuyuani1

ht1234

lizhou21cn

rootsir

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Flex Flash toggleswitch 开关

更新一个更简单实用的。

OnOff.as

package bigt.comp
{
	import flash.events.MouseEvent;
	import spark.components.supportClasses.SkinnableComponent;
	import bigt.skins.OnOffSkin;
	
	/**
	 * 滑槽里的颜色
	 */
	[Style(name="gapColor", type="uint", format="Color", inherit="no")]

	[SkinState("on")]
	[SkinState("off")]
	[SkinState("onAndDisabled")]
	[SkinState("disabled")]
	
	/**
	 * 不用显式指定控件尺寸。
	 * 如一定要控制尺寸，请按 width:34 height:18 比例缩放
	 */
	public class OnOff extends SkinnableComponent
	{
		public function OnOff()
		{
			super();
			setStyle( "skinClass", OnOffSkin);
			this.addEventListener( MouseEvent.CLICK,
				function(e:MouseEvent):void
				{
					stateOn = !stateOn;
					invalidateSkinState();
				});
		}
		
		/**
		 * 当前开-关状态。
		 * 可作为数据绑定的源。
		 */
		[Bindable]
		public var stateOn:Boolean = false;
		
		override protected function getCurrentSkinState():String
		{
			if ( !this.enabled )
				return this.stateOn? "onAndDisabled":"disabled"; 
			
			if ( this.stateOn )
				return "on";
			else
				return "off";
		}
		
	}
}

OnOffSkin.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" 
		xmlns:mx="library://ns.adobe.com/flex/mx"
		explicitWidth="34" explicitHeight="18" buttonMode="true">
	<!-- host component -->
	<fx:Metadata>
		[HostComponent("bigt.comp.OnOff")]
	</fx:Metadata>
	<fx:Script>
		<![CDATA[
			import bigt.comp.OnOff;
		]]>
	</fx:Script>
	
	<!-- states -->
	<s:states>
		<s:State name="on" />
		<s:State name="off" />
		<s:State name="disabled" />
		<s:State name="onAndDisabled" basedOn="on" />
	</s:states>
	
	<s:Path top="1" left="2" right="2" bottom="1" data="M30 8Q30 11.3 27.6 13.65 25.15 16 21.75 16L8.25 16Q4.85 16 2.45 13.65 0 11.3 0 8 0 4.7 2.45 2.35 4.85 0 8.25 0L21.75 0Q25.15 0 27.6 2.35 30 4.7 30 8Z">
		<s:fill>
			<s:SolidColor id="chromeColor"
						  color="#f9f9f9"
						  color.on="{getStyle('gapColor')}"
						  alpha.disabled="0.3" alpha.onAndDisabled="0.3"/>
		</s:fill>
	</s:Path>
	<s:Path top="1" left="2" right="2" bottom="1" data="M30 8Q30 4.7 27.6 2.35 25.15 0 21.75 0L8.25 0Q4.85 0 2.45 2.35 0 4.7 0 8 0 11.3 2.45 13.65 4.85 16 8.25 16L21.75 16Q25.15 16 27.6 13.65 30 11.3 30 8Z">
		<s:stroke>
			<s:SolidColorStroke weight="0" color="#CCCCCC"
						alpha.disabled="0.3" alpha.onAndDisabled="0.3" />
		</s:stroke>
	</s:Path>
	
	<s:Group id="cy" height="100%" width="{cy.height}"
			 x.on="0" x="{this.width-this.height}"
			 alpha.disabled="0.5" alpha.onAndDisabled="0.8">
		<s:Path top="0" left="0" bottom="0" right="0" data="M2.6 15.35Q0 12.7 0 9 0 5.25 2.6 2.65 5.25 0 8.95 0 12.75 0 15.35 2.65 18 5.25 18 9 18 12.7 15.35 15.35 12.75 18 8.95 18 5.25 18 2.6 15.35Z">
			<s:fill>
				<s:SolidColor color="#FFFFFF" />
			</s:fill>
		</s:Path>
		<s:Path top="0" left="0" bottom="0" right="0" data="M2.6 15.35Q0 12.7 0 9 0 5.25 2.6 2.65 5.25 0 8.95 0 12.75 0 15.35 2.65 18 5.25 18 9 18 12.7 15.35 15.35 12.75 18 8.95 18 5.25 18 2.6 15.35Z">
			<s:stroke>
				<s:SolidColorStroke weight="0.2" color="#CCCCCC"/>
			</s:stroke>
		</s:Path>
	</s:Group>
	
</s:Skin>

<?xml version="1.0" encoding="utf-8"?>
<!--
* Author：tuding27@gmail.com
* Release Date: 02-11-2011
*
* 欢迎使用、转载、修改本代码，请保留以上作者信息
-->
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
			xmlns:s="library://ns.adobe.com/flex/spark" 
			xmlns:mx="library://ns.adobe.com/flex/mx"
			buttonMode="true" click="handleClick(event)" styleName="buildIn"
			rollOutEffect="{rollOut}" rollOverEffect="{rollIn}">
	
	<s:layout>
		<s:BasicLayout />
	</s:layout>
	
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";
		
		.buildIn{
			color: #002222;
			switchColor:#5588ff;
		}
	</fx:Style>
	
	<fx:Metadata>
		/**
		 * 设置中间隔离按钮的主色
		 */
		[Style(name="switchColor", type="uint", format="Color", inherit="no")]

	</fx:Metadata>
	
	<fx:Script>
		<![CDATA[
			
			override protected function createChildren():void
			{
				// 确定容器视域
				this.scrollRect = new Rectangle( 0, 0, this.width, this.height );
				super.createChildren();
				changeStatus(status);
			}
			
			//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
			//		statusLeft
			//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
			
			private var _statusLeft:String = "ON";
			
			[Bindable]
			/**
			 * 状态"左"的值
			 * 
			 *  @default false
			 *  @see mx.managers.FocusManager.defaultButton
			 *  @langversion 3.0
			 *  @playerversion Flash 10
			 *  @playerversion AIR 1.5
			 */
			public function get statusLeft():String
			{
				return _statusLeft;
			}

			public function set statusLeft(value:String):void
			{
				if ( value == _status )
					return;
				_statusLeft = value;
			}
			
			
			
			//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
			//		statusRight
			//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
			private var _statusRight:String = "OFF";
			
			[Bindable]
			/**
			 * 状态"右"的值
			 * 
			 *  @default false
			 *  @see mx.managers.FocusManager.defaultButton
			 *  @langversion 3.0
			 *  @playerversion Flash 10
			 *  @playerversion AIR 1.5
			 */
			public function get statusRight():String
			{
				return _statusRight;
			}

			public function set statusRight(value:String):void
			{
				if ( value == _status )
					return;
				_statusRight = value;
			}
			

			
			//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
			//		status
			//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
			private var _status:String = _statusLeft;

			[Bindable]
			/**
			 * 当前组件所处状态
			 * 
			 *  @default false
			 *  @see mx.managers.FocusManager.defaultButton
			 *  @langversion 3.0
			 *  @playerversion Flash 10
			 *  @playerversion AIR 1.5
			 */
			public function get status():String
			{
				return _status;
			}

			public function set status(value:String):void
			{
				if ( value == _status )
					return;
				_status = value;
				changeStatus(value);
			}

			
			/**
			 *  @private
			 */
			protected function handleClick(event:MouseEvent):void
			{
				if ( status == _statusLeft )
					status = _statusRight;
				else
					status = _statusLeft;
			}
			
			/**
			 *  @private
			 */
			private function changeStatus( statusNow:String ):void
			{
				if ( statusNow == _statusLeft )
					this.currentState = "left";
				else
					this.currentState = "right";
			}

			[Bindable]
			private var borderColorTmp:uint;
			
		]]>
	</fx:Script>
	
	<fx:Declarations>
		<s:AnimateColor id="rollIn" target="this" effectStart="borderColorTmp=getStyle('borderColor')"
							 duration="300" colorPropertyName="borderColor" colorTo="{getStyle('rollOverColor')}" />
		<s:AnimateColor id="rollOut" target="this"
							 duration="300" colorPropertyName="borderColor" colorTo="{borderColorTmp}" />
	</fx:Declarations>
	
	<s:states>
		<s:State name="left" />
		<s:State name="right" />
	</s:states>
	
	<s:transitions>
		<s:Transition>
			<s:Move target="{hg}" duration="100" />
		</s:Transition>
	</s:transitions>
	
	<s:HGroup id="hg" gap="0" verticalAlign="middle" height="100%"
				 x.left="{-(this.getStyle('borderWeight')*2+1)}" x.right="{-leftLabel.width+1}">
		<s:Label id="leftLabel" width="{this.width*0.7}" text="{statusLeft}" textAlign="center" />
		<s:Button width="{this.width*0.3}" height="{this.height-this.getStyle('borderWeight')*2}"
					 cornerRadius="{getStyle('cornerRadius')}" chromeColor="{getStyle('switchColor')}" />
		<s:Label width="{this.width*0.7}" text="{statusRight}" textAlign="center" />
	</s:HGroup>
	
</s:BorderContainer>

截图：

DEMO 源码：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
					xmlns:s="library://ns.adobe.com/flex/spark" 
					xmlns:mx="library://ns.adobe.com/flex/mx"
					xmlns:iphonelist="iphonelist.*">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	
	<iphonelist:iphoneCheckBox id="c"  x="14" y="30" width="70" height="25" cornerRadius="5"
										backgroundColor="{bgColorSel.selectedColor}"
										borderWeight="{borderWeightStepper.value}" borderColor="{borderColorPicker.selectedColor}"
										switchColor="{switchColorPicker.selectedColor}"
										statusLeft="{statusLeft.text}" statusRight="{statusRight.text}"
										fontFamily="{fontSelector.selectedItem.fontFace}"
										fontSize="{fontSizeStepper.value}"
										color="{fontColorPicker.selectedColor}"
										rollOverColor="{rollOverborderColorPicker.selectedColor}" />
	
	<s:Label x="14" y="80" text="状态值："/>
	<s:Label x="129" y="77" text="{c.status}" fontSize="20"/>
	
	<s:Panel height="250" x="10" y="106" title="iPhoneCheckBox 外观定制">
		
		<s:layout>
			<s:VerticalLayout />
		</s:layout>
		
		<mx:Form>
			<mx:FormItem>
				<mx:HBox verticalAlign="middle">
					<s:Label text="背景色："/>
					<mx:ColorPicker id="bgColorSel" showTextField="true" selectedColor="#ffffff" />
					<mx:Spacer/>
					<s:Label text="分隔按钮主色" />
					<mx:ColorPicker id="switchColorPicker" showTextField="true" selectedColor="#5588ff" />
				</mx:HBox>
			</mx:FormItem>
			<mx:HRule width="100%" />
			<mx:FormItem label="边框：">
				<mx:VBox verticalAlign="middle">
					<s:HGroup verticalAlign="middle">
						<s:Label text="宽度：" />
						<s:NumericStepper id="borderWeightStepper" width="35" stepSize="1" maximum="5" value="2" />
					</s:HGroup>
					<s:HGroup verticalAlign="middle">
						<s:Label text="颜色：" />
						<mx:ColorPicker id="borderColorPicker" showTextField="true" selectedColor="#999999" />
						<mx:Spacer/>
						<s:Label text="鼠标悬停颜色：" />
						<mx:ColorPicker id="rollOverborderColorPicker" showTextField="true" selectedColor="#c6001f" />
					</s:HGroup>
				</mx:VBox>
			</mx:FormItem>
			<mx:HRule width="100%" />
			<mx:FormItem label="状态值：">
				<mx:VBox verticalAlign="middle">
					<s:HGroup verticalAlign="middle">
						<s:Label text="左："/>
						<s:TextInput id="statusLeft" maxChars="4" width="50" text="ON" />
						<mx:Spacer />
						<s:Label text="右："/>
						<s:TextInput id="statusRight" maxChars="4" width="50" text="OFF" />
					</s:HGroup>
					<s:HGroup verticalAlign="middle">
						<s:Label text="字体：" />
						<s:DropDownList id="fontSelector" width="100" labelField="fontName" selectedIndex="0">
							<s:ArrayCollection>
								<fx:Object fontName="Arial" fontFace="Arial" />
								<fx:Object fontName="Segoe UI" fontFace="Segoe UI" />
								<fx:Object fontName="宋体" fontFace="宋体" />
								<fx:Object fontName="微软雅黑" fontFace="微软雅黑" />
							</s:ArrayCollection>
						</s:DropDownList>
					</s:HGroup>
					<s:HGroup verticalAlign="middle">
						<s:Label text="字体大小："/>
						<s:NumericStepper id="fontSizeStepper" width="50" value="9" minimum="6" maximum="16" stepSize="0.5" />
						<mx:Spacer/>
						<s:Label text="颜色："/>
						<mx:ColorPicker id="fontColorPicker" showTextField="true" selectedColor="#002200" />
					</s:HGroup>
				</mx:VBox>
			</mx:FormItem>
		</mx:Form>
	</s:Panel>

</s:Application>