HDividedBox与VDividedBox的分隔条样式设定

最新推荐文章于 2019-02-26 17:33:09 发布
最新推荐文章于 2019-02-26 17:33:09 发布
阅读量276 收藏
点赞数
文章标签： Flash Flex CSS
　　Flex的HDividedBox与VDividedBox组件的分隔条样式比较单一，默认是三条横线或竖线（mx.skin.BoxDividerSkin类，包含在Assets.swf文件中），且不能设置分隔条的整体颜色。当然，可以通过设置样式dividerSkin改变那三条线的默认样式。不过看mx.containers.dividedBoxClasses.BoxDivider的代码，显示时对于横向与纵向分隔，只是简单地旋转dividerSkin，因此稍复杂一些的dividerSkin效果应该不会太好，很有必要设置两个dividerSkin，横向纵向各一个，专款专用。此外，可以考虑再给分隔条加一个背景皮肤。

　　接下来写需要的几个皮肤，分隔条背景皮肤是淡蓝色的渐变填充外加一个深蓝色边框，knob皮肤（替代dividerSkin的那个）是两排蓝白色小点。

　　1) 纵向分隔条背景皮肤： 

package com.ccac.ibs.skins.common
{

	import flash.display.GradientType;
	import flash.display.Graphics;
	import flash.display.InterpolationMethod;
	import flash.display.SpreadMethod;
	import flash.geom.Matrix;

	import mx.skins.ProgrammaticSkin;

	public class IBSVBoxDividerSkin extends ProgrammaticSkin
	{

		public function IBSVBoxDividerSkin()
		{
			super();
		}

		override protected function updateDisplayList(w:Number, h:Number):void
		{
			var g:Graphics = graphics;
			var matrix:Matrix = new Matrix();
			if (isNaN(w) || isNaN(h))
				return;	
			g.clear();
			g.lineStyle(1, 0x6593CF, 1);
			g.beginFill(0xFFFFFF, 0);
			g.drawRect(0, 0, w - 1, h - 1);
			g.endFill();
			matrix.createGradientBox(w - 2, h - 2, Math.PI / 2, 0, 0);
			g.lineStyle(0, 0x000000, 0);
			g.beginGradientFill(GradientType.LINEAR, 
					[0xFFFFFF, 0xF8FBFF, 0xF0F7FF, 0xE5F1FF, 0xDAEBFF, 0xD0E5FF], 
					[1, 1, 1, 1, 1, 1], 
					[0, 51, 102, 153, 204, 255], 
					matrix, 
					SpreadMethod.PAD, 
					InterpolationMethod.LINEAR_RGB, 
					0);
			g.drawRect(1, 1, w - 2, h - 2);
			g.endFill();
		}

	}

}


　　2) 纵向分隔条knob皮肤： 

package com.ccac.ibs.skins.common
{

	import flash.display.Graphics;

	import mx.skins.ProgrammaticSkin;

	public class IBSVDividerSkin extends ProgrammaticSkin
	{

		public function IBSVDividerSkin()
		{
			super();
		}

		override public function get measuredWidth():Number
		{
			return 23;
		}

		override public function get measuredHeight():Number
		{
			return 6;
		}

		override protected function updateDisplayList(w:Number, h:Number):void
		{
			var g:Graphics = this.graphics;
			var i:int = 0;
			g.clear();
			g.lineStyle(0, 0x000000, 0);
			g.beginFill(0x6593CF, 1);
			for (i = 0; i < 5; i++)
			{
				g.drawRect(2 + (i - 1) * 4, 2, 2, 2);
			}
			g.endFill();
			g.beginFill(0xF9F9FB, 1);
			for (i = 0; i < 5; i++)
			{
				g.drawRect(3 + (i - 1) * 4, 3, 2, 2);
			}
			g.endFill();
			g.beginFill(0xADD1FF, 1);
			for (i = 0; i < 5; i++)
			{
				g.drawRect(3 + (i - 1) * 4, 3, 1, 1);
			}
			g.endFill();
		}

	}

}



　　3) 横向分隔条背景皮肤： 

package com.ccac.ibs.skins.common
{

	import flash.display.GradientType;
	import flash.display.Graphics;
	import flash.display.InterpolationMethod;
	import flash.display.SpreadMethod;
	import flash.geom.Matrix;

	import mx.skins.ProgrammaticSkin;

	public class IBSHBoxDividerSkin extends ProgrammaticSkin
	{

		public function IBSHBoxDividerSkin()
		{
			super();
		}

		override protected function updateDisplayList(w:Number, h:Number):void
		{
			var g:Graphics = graphics;
			var matrix:Matrix = new Matrix();
			if (isNaN(w) || isNaN(h))
				return;	
			g.clear();
			g.lineStyle(1, 0x6593CF, 1);
			g.beginFill(0xFFFFFF, 0);
			g.drawRect(0, 0, w - 1, h - 1);
			g.endFill();
			matrix.createGradientBox(w - 2, h - 2, 0, 0, 0);
			g.lineStyle(0, 0x000000, 0);
			g.beginGradientFill(GradientType.LINEAR, 
					[0xFFFFFF, 0xF8FBFF, 0xF0F7FF, 0xE5F1FF, 0xDAEBFF, 0xD0E5FF], 
					[1, 1, 1, 1, 1, 1], 
					[0, 51, 102, 153, 204, 255], 
					matrix, 
					SpreadMethod.PAD, 
					InterpolationMethod.LINEAR_RGB, 
					0);
			g.drawRect(1, 1, w - 2, h - 2);
			g.endFill();
		}

	}

}


　　4) 横向分隔条knob皮肤： 

package com.ccac.ibs.skins.common
{

	import flash.display.Graphics;

	import mx.skins.ProgrammaticSkin;

	public class IBSHDividerSkin extends ProgrammaticSkin
	{

		public function IBSHDividerSkin()
		{
			super();
		}

		override public function get measuredWidth():Number
		{
			return 6;
		}

		override public function get measuredHeight():Number
		{
			return 23;
		}

		override protected function updateDisplayList(w:Number, h:Number):void
		{
			var g:Graphics = this.graphics;
			var i:int = 0;
			g.clear();
			g.lineStyle(0, 0x000000, 0);
			g.beginFill(0x6593CF, 1);
			for (i = 0; i < 5; i++)
			{
				g.drawRect(2, 2 + (i - 1) * 4, 2, 2);
			}
			g.endFill();
			g.beginFill(0xF9F9FB, 1);
			for (i = 0; i < 5; i++)
			{
				g.drawRect(3, 3 + (i - 1) * 4, 2, 2);
			}
			g.endFill();
			g.beginFill(0xADD1FF, 1);
			for (i = 0; i < 5; i++)
			{
				g.drawRect(3, 3 + (i - 1) * 4, 1, 1);
			}
			g.endFill();
		}

	}

}


　　接下来定义一个继承自BoxDivider的类，并覆盖其updateDisplayList方法，显示自定义的皮肤（hSkin,vSkin,hDividerSkin,vDividerSkin），如果这几个样式属性都取不到，就按父类方法显示，也就是显示dividerSkin。代码如下： 

package com.ccac.ibs.containers.dividedBoxClasses
{

	import flash.display.DisplayObject;

	import mx.containers.DividedBox;
	import mx.containers.DividerState;
	import mx.containers.dividedBoxClasses.BoxDivider;
	import mx.core.mx_internal;
	import mx.skins.ProgrammaticSkin;

	use namespace mx_internal;

	public class IBSBoxDivider extends BoxDivider
	{

		public function IBSBoxDivider()
		{
			super();
		}

		private var divider:DisplayObject = null;

		private var knob:DisplayObject = null;

		override protected function updateDisplayList(unscaledWidth:Number, 
				unscaledHeight:Number):void
		{
			if (isNaN(width) || isNaN(height))
				return;
			if (!parent)
				return;
			graphics.clear();
			var color:Number = 0;
			var alpha:Number = 1.0;
			var thickness:Number = getStyle("dividerThickness");
			var vertical:Boolean = DividedBox(owner).isVertical();
			var gap:Number = vertical ? 
					DividedBox(owner).getStyle("verticalGap") : 
					DividedBox(owner).getStyle("horizontalGap");
			var dividerClass:Class = null;
			var knobClass:Class = null;
			if (state != DividerState.DOWN)
			{
				dividerClass = Class(vertical ? getStyle("vSkin") : 
						getStyle("hSkin"));
				knobClass = Class(vertical ? getStyle("vDividerSkin") : 
						getStyle("hDividerSkin"));
				if (!dividerClass && !knobClass)
				{
					super.updateDisplayList(unscaledWidth, unscaledHeight);
					return;
				}
				if (!divider)
				{
					if (dividerClass)
						divider = new dividerClass();
					if (divider)
						addChildAt(divider, 0);
				}
				else
				{
					if (dividerClass && !(divider is dividerClass))
					{
						removeChild(divider);
						divider = new dividerClass();
						if (divider)
							addChildAt(divider, 0);
					}
				}
				if (divider)
				{
					divider.width = unscaledWidth;
					divider.height = unscaledHeight;
					if (divider is ProgrammaticSkin)
					{
						(divider as ProgrammaticSkin).invalidateSize();
						(divider as ProgrammaticSkin).invalidateDisplayList();
					}
				}
				if (gap >= 6)
				{
					if (!knob)
					{
						if (knobClass)
							knob = new knobClass();
						if (knob)
							addChild(knob);
					}
					else
					{
						if (knobClass && !(knob is knobClass))
						{
							removeChild(knob);
							knob = new knobClass();
							if (knob)
								addChild(knob);
						}
					}
					if (knob)
					{
						knob.x = Math.round((width - knob.width) / 2);
						knob.y = Math.round((height - knob.height) / 2);
					}
				}
				return;
			}
			color = getStyle("dividerColor");
			alpha = getStyle("dividerAlpha");
			graphics.beginFill(color, alpha);
			if (vertical)
			{
				var visibleHeight:Number = thickness;
				if (visibleHeight > gap)
					visibleHeight = gap;
				var y:Number = (height - visibleHeight) / 2;
				graphics.drawRect(0, y, width, visibleHeight);
			}
			else
			{
				var visibleWidth:Number = thickness;
				if (visibleWidth > gap)
					visibleWidth = gap;
				var x:Number = (width - visibleWidth) / 2;
				graphics.drawRect(x, 0, visibleWidth, height);
			}
			graphics.endFill();
		}

	}

}


　　还需要一个继承自DividedBox的类，将其dividerClass属性设为IBSBoxDivider，并加入hSkin,vSkin,hDividerSkin,vDividerSkin这几个样式属性。代码如下： 

package com.ccac.ibs.containers
{

	import com.ccac.ibs.containers.dividedBoxClasses.IBSBoxDivider;
	import com.ccac.ibs.skins.common.IBSHBoxDividerSkin;
	import com.ccac.ibs.skins.common.IBSHDividerSkin;
	import com.ccac.ibs.skins.common.IBSVBoxDividerSkin;
	import com.ccac.ibs.skins.common.IBSVDividerSkin;

	import mx.containers.DividedBox;

	[Style(name="hSkin", type="Class", inherit="no")]

	[Style(name="vSkin", type="Class", inherit="no")]

	[Style(name="hDividerSkin", type="Class", inherit="no")]

	[Style(name="vDividerSkin", type="Class", inherit="no")]

	public class IBSDividedBox extends DividedBox
	{

		public function IBSDividedBox()
		{
			super();
			this.dividerClass = IBSBoxDivider;
			/*this.setStyle("hSkin", IBSHBoxDividerSkin);
			this.setStyle("vSkin", IBSVBoxDividerSkin);
			this.setStyle("hDividerSkin", IBSHDividerSkin);
			this.setStyle("vDividerSkin", IBSVDividerSkin);*/
		}

	}

}

　　注释掉了几行代码，因为这些完全可以在CSS文件里设置，而且不设置的话，是和DividedBox的默认显示样式相同的。

　　此外，还需要定义继承自IBSDividedBox的VDividedBox和HDividedBox类：
　　VDividedBox： 

package com.ccac.ibs.containers
{

	import mx.containers.BoxDirection;
	import mx.core.mx_internal;

	public class IBSVDividedBox extends IBSDividedBox
	{

		public function IBSVDividedBox()
		{
			super();
			mx_internal::layoutObject.direction = BoxDirection.VERTICAL;
		}

		override public function set direction(value:String):void
		{
		}

	}

}

　　HDividedBox： 

package com.ccac.ibs.containers
{

	import mx.containers.BoxDirection;
	import mx.core.mx_internal;

	public class IBSHDividedBox extends IBSDividedBox
	{

		public function IBSHDividedBox()
		{
			super();
			mx_internal::layoutObject.direction = BoxDirection.HORIZONTAL;
		}

		override public function set direction(value:String):void
		{
		}

	}

}


　　结束了。写个例子看下效果： 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	xmlns:co="com.ccac.ibs.containers.*" 
	layout="absolute" 
	backgroundColor="#E3EFFF">

	<mx:Style>
		IBSDividedBox
		{
			hSkin: ClassReference("com.ccac.ibs.skins.common.IBSHBoxDividerSkin");
			vSkin: ClassReference("com.ccac.ibs.skins.common.IBSVBoxDividerSkin");
			hDividerSkin: ClassReference("com.ccac.ibs.skins.common.IBSHDividerSkin");
			vDividerSkin: ClassReference("com.ccac.ibs.skins.common.IBSVDividerSkin");
			dividerColor: #FF0000;
			dividerAlpha: 0.7;
			dividerAffordance: 8;
			dividerThickness: 8;
			horizontalGap: 8;
			verticalGap: 8;
		}
	</mx:Style>

	<co:IBSVDividedBox width="100%" height="100%">
		<mx:HBox width="100%" height="50" />
		<co:IBSHDividedBox width="100%" height="100%">
			<mx:VBox width="350" height="100%" />
			<mx:VBox width="100%" height="100%" />
		</co:IBSHDividedBox>
	</co:IBSVDividedBox>

</mx:Application>
ThornBird313
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Flex中的HDividedBox和VDividedBox的比较附图
10-26
HDividedBox和VDividedBox中的分隔线可以调整，用户可以通过拖动这些分隔线来改变各子组件所占的空间大小。这在需要动态调整界面布局时非常有用。 4. 布局管理： 两个组件都默认使用BasicLayout布局管理器，这...
易语言分隔条组件使用方法
08-26
在易语言中，分隔条组件（通常称为Splitter）是一种常见的控件，用于在界面上创建可调整大小的区域。这篇内容将详细介绍如何在易语言中使用分隔条组件。 首先，我们需要创建一个新的Windows窗口程序。打开易语言主...
一个渐变的优雅的分割线条（使用css定义）
热门推荐
十二哥的专栏
11-23 1万+
轻松实现一个华丽优雅的分割线条（使用css定义）
Flex中如何设置HDividedBox和VDividedBox分隔条为不可见。
runong的专栏
08-22 830
设置HDividedBox{         horizontalGap:5; } 当值小于或等于5时，看不见中间的线，当然这时也没有影响調整DividedBox裡Container的大小比例; 当>5时，则就能看到。
xmlplus 组件设计系列之八 - 分隔框（DividedBox）
dengkengcong7964的博客
04-30 84
分隔框（DividedBox）是一种布局类组件，可以分为两种，其中一种叫水平分隔框（HDividedBox），另一种叫垂直分隔框（VDividedBox）。水平分隔框会将其子级分为两列，而垂直分隔框则会将其子级分为两行。列与列之间以及行与行之间一般都会有一条可以拖动的用以改变子级组件大小的分隔条。下面仅以垂直分隔框为例来介绍此类组件是如何设计以及实现的。 成品组件用例 按照以往的设计经...
BBY-Flex笔记第一篇
iteye_19143的博客
05-09 126
编译参数 默认：-locale zh_CN 工程中：-locale en_US -compiler.source-path=locale/{locale} ArrayCollection的filterFunction 把数据从后台一次过取出来，在flex端再进行条件筛选。 在flex端使用datagrid来做表格呈现数据，后台数据存入ArrayCollection，设置filterFun...
Flex 3 布局容器学习笔记
weixin_30740295的博客
10-11 43
赖勇浩（ http://laiyonghao.com ） 国庆期间，做了不少基于 flex 的开发工作，对 flex 的布局容器有了进一步深入的理解，也找到不少非常棒的文章，分享到这里方便一下大家。 很好的文章 Flex3 界面布局教程 (1) http://blog.chinaunix.net/u/21684/showart_691988.html...
flex控件总结
xiao190128的专栏
02-26 2863
Flex基本控件总结 一、flex控件的分类：文本控件(text controls)、数据源控件(data provider controls)、菜单控件       (menu  controls)、按钮控件(button controls)、Flex控件(flex controls)、容器控件。 二、 文本控件 a)         标签（Label）：标签：&lt;mx:Label/&...
jQuery实现分隔条左右拖动功能
10-23
CSS样式定义了这些元素的外观，包括分隔条的宽度、边框颜色以及鼠标悬浮时的样式。`gf_s_g`类用于在拖动过程中显示半透明的辅助分隔条，增强用户体验。 接下来是JavaScript部分，这部分代码是实现拖动功能的关键。...
基于JQuery实现分隔条的功能
10-22
主要介绍了基于JQuery实现分隔条的功能的相关资料，使用JQuery技术实现分隔条的功能，感兴趣的小伙伴们可以参考一下
易语言分隔条应用
07-22
2. 设置初始位置：通过“设置组件位置”命令，输入分隔条的左上角坐标和宽度、高度，设定其在窗口中的初始位置。 3. 处理用户交互：编写事件处理代码，如“分隔条移动”事件，当用户拖动分隔条时，根据新的位置调整...
飞机大战系列 Space War1.0（免费，开源）
07-14
飞机大战系列 Space War1.0（免费，开源）
基于Hadoop的文件词频统计的实现（大数据技术课程设计）
07-14
使用Hadoop大数据架构体系中的HDFS、HBase以及Spark软件，完成大数据处理的典型案例：文件词频统计的实现。
湖科大计算机网络视频笔记，跟着视频系统学了一遍的记录
最新发布
07-14
视频链接：https://www.bilibili.com/video/BV1c4411d7jb/，适用于考研后期查缺补漏和前期确定复习方向、期末考和课前预习。做成PDF形式便于查阅和在iPad上查看。
matlab下载，表面张力，main.m
07-14
matlab下载，表面张力，main.m
2.4.27.2a.pdf
07-13
2.4.27.2a.pdf
大学生创业计划书(33)三套材料.doc
07-14
大学生创业计划书(33)三套材料.doc
aarido 写一个分隔条界面
03-01
以下是一个简单的分隔条界面的示例代码，它使用了一条横线来分隔页面的不同部分： ``` ---------------------------------------- | 页面顶部内容 | ---------------------------------------- | | | 页面主要内容 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值