Flex 4与自定义循环布局(转)
Flex 4/Spark架构中的容器并不控制它们自己的布局。相反,每种容器具有一个布局属性,用于确定如何在屏幕上设置子元素的布局。可以使用一个单独的Group容器,并赋予其一个垂直布局、水平布局或平铺布局,这取决于您将如何创建它。代码很简单,如下所示:
<s:layout>
<s:VerticalLayout/>
</s:layout>
不过真正的好处在于您不必局限于框架中定义的默认布局。您可以轻松定制BaseLayout类来实现自己定制的布局逻辑。下面是一个简单的例子,显示了如何实现一个在原点周围顺时针放置组件的布局。只要单击左下方的按钮就可以将更多按钮添加到布局。
下面是主应用程序文件的代码。可以看到,代码相当简单。这就是一个DataGroup,有点像一个重复程序(repeater),它包含一组按钮。这个容器的布局基于一个自定义布局实现。在creationComplete中,填充DataGroup的数据提供程序,从而在布局中创建按钮实例。
可以看到,DataGroup实例的布局受CircularLayout类控制(该类如下所示)。该类只是循环遍历datagroup对象的子对象并将它们按顺时针方向放在一个圆圈内。我查看了VerticalLayout类的源代码,弄清了它的工作方式,并由此开始构建自己的布局实现。
package
{
import mx.core.ILayoutElement;
import spark.layouts.supportClasses.LayoutBase;
public class CircularLayout extends LayoutBase
{
override public function updateDisplayList(w:Number, h:Number):void
{
super.updateDisplayList(w, h);
if (!target)
return;
var layoutElement:ILayoutElement;
var count:uint = target.numElements;
var angle : Number = 360/count;
var radius : Number = Math.min( target.width/2, target.height/2 ) - 25;
var w2 : Number = target.width/2;
var h2 : Number = target.height/2;
for (var i:int = 0; i < count; i++)
{
layoutElement = target.getElementAt(i);
if (!layoutElement || !layoutElement.includeInLayout)
continue;
var radAngle : Number = (angle * i) * (Math.PI / 180) ;
var _x : Number = Math.sin( radAngle );
var _y : Number = - Math.cos( radAngle );
layoutElement.setLayoutBoundsPosition( w2 + (_x * radius) - 25, h2 + (_y * radius) - 10 );
}
}
}
}
<s:ItemRenderer
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo">
<s:states>
<s:State name="normal"/>
<s:State name="hovered"/>
</s:states>
<s:layout>
<s:BasicLayout/>
</s:layout>
<s:Button label="{ data }" baseColor.hovered="#FF0000" />
</s:ItemRenderer>
这个示例中使用的项目渲染器实际上是最基本的。它是一个只包含一个按钮的ItemRenderer实例,简单明了并且很容易看到产生的结果。
<?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/halo"
xmlns:local="*">
<s:creationComplete>
<![CDATA[
for ( var x:int = 0; x < 10; x++ ){
dataSource.addItem( dataSource.length );
}
]]>
</s:creationComplete>
<fx:Declarations>
<mx:ArrayCollection id="dataSource" />
</fx:Declarations>
<s:DataGroup
width="100%" height="100%"
dataProvider="{ dataSource }"
itemRenderer="SimpleItemRenderer">
<s:layout>
<local:CircularLayout />
</s:layout>
</s:DataGroup>
<mx:Button
left="5" bottom="5"
label="Click to Add a Button"
click="dataSource.addItem( dataSource.length )" />
</s:Application>
转载于:https://www.cnblogs.com/yaojian/archive/2011/08/25/2153095.html
Flex 4与自定义循环布局(转)相关推荐
- android 前台服务自定义布局不显示_Android自定义LinearLayout布局显示不完整的解决方法...
发现问题 原需求,在一个伸缩列表中,自定义LinearLayout继承LinearLayout动态添加布局. 然而实现的时候:一共遍历了30条数据,却只显示了一条 断点查看代码:遍历addView() ...
- Flutter: 弹性布局Flex(Expanded)、流式布局Wrap、Flow
用Android原生实现流式布局[实现例如app的很多标签]需要自定义View继承自ViewGroup,然后代码量也不小. 相关自定义View实现流式布局,请参考这位老兄的博客: https://bl ...
- 自定义布局和自定义流水布局(CollectionViewLayout和CollectionViewFlowLayout)实例
自定义布局和自定义流水布局(CollectionViewLayout和CollectionViewFlowLayout) 转载:https://www.jianshu.com/p/83f2d6ac7e ...
- R语言可视化、编写自定义函数可视化水平排序条形图(horizontal bar plot)、自定义图像布局模仿经济学人杂志可视化效果、右侧添加标签数值图像方框、自定义背景色、水平条形图中间线条等
R语言可视化.编写自定义函数可视化水平排序条形图(horizontal bar plot).自定义图像布局模仿经济学人杂志可视化效果.右侧添加标签数值图像方框.自定义背景色.水平条形图中间线条.网格线 ...
- display:flex 多栏多列布局
转自:http://www.360doc.com/content/14/0811/01/2633_400926000.shtml display:flex 多栏多列布局浏览器支持情况:火狐直接支持w3 ...
- 一个不错的讲解flex 3中自定义事件的文章
一个不错的讲解flex 3中自定义事件的文章 http://wangyisong.javaeye.com/blog/376118,一个不错的讲解flex 3中自定义事件的文章 posted on 20 ...
- 自定义ActionBar、Toolbar布局(解决自定义ActionBar布局左边始终有一点边距的问题)
转载地址:http://blog.csdn.net/zxt0601/article/details/50463319 先列出 自定义ActionBar布局左边始终有一点边距的问题的解决办法: 左边的那 ...
- 切换不同的数据状态布局,包含加载中、空数据和出错状态,可自定义状态布局
代码地址如下: http://www.demodashi.com/demo/12318.html StatusLayoutManager 切换不同的数据状态布局,包含加载中.空数据和出错状态. git ...
- beaver彼_如何使用Beaver Builder创建自定义WordPress布局
beaver彼 Do you want to learn how to create custom page layouts in WordPress? Beaver Builder allows y ...
- flex 两列多行布局
flex 两列多行布局 display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; 把这段 ...
最新文章
- 设置行间距_[EndNote]如何修改文末参考文献行间距?
- Makefile常用万能模板(包括静态链接库、动态链接库、可执行文件)
- 深入理解JVM(5)——虚拟机类加载机制
- 低至4.7折起!戴尔OptiPlex商用台式机限时特惠,重磅来袭!
- Fiori hide Header text in task list
- 【转】DICOM医学图像读取涉及到的医学坐标体系
- SparkStreaming - 窗口函数(窗口操作)
- 领域应用 | OMAHA联盟发布“疾病临床表现”、“中毒”知识图谱及OMAHA知识库
- 互联网行业人才格局大换血,BAT 已换位?
- mysql主从的原理_Mysql主从的原理
- Flutter 实现 仿Android原生启动模式SingleTask
- json对象数组转数组方法
- 看服务器硬盘序列号,获得服务器硬件信息(CPUID、硬盘号、主板序列号、IP地址等)...
- org apache catalina LifecycleException Failed to start comp
- 钉钉小程序之Page文件介绍
- Tracup|专业的项目管理工具如何帮助高效管理?
- SQL学习笔记6-决胜秋招
- 三天打鱼,两天晒网问题
- 史上最详细唇语识别数据集综述
- 【APICloud系列|36】 mobVerify免费短信验证码的实现
热门文章
- ul在Firefox和IE下的不同表现
- 四种数据库特性对比(Redis/Mysql/SQLite/MongoDB)
- vs2015 中无法链接strcasecmp 和 strncasecmp的解决办法
- options请求_HTTP 协议 POST 请求,为什么会有一个 OPTION?
- mybatis两个内置参数
- listenfd ---- accept事件
- 单片机与嵌入式的关系,单片机是嵌入式的子类
- iphone圆点怎么弄出来_iPhone11 怎么开启小圆圈?苹果11怎么打开小圆点?
- 4.自定义的Spring Boot Starters
- 数据库与表的操作之SQL Server 2012中的数据类型