在这一节将向我们演示如何在Adobe Flex Builder中创建基于约束的布局。当用户调整程序窗口时,基于约束的布局保证我们用户界面中的组件进行自动调整。
设置我们的工程
在我们开始这一节之前,我们要先完成下面的任务:
如果我们还没有创建工程,创建Lessons工程。
确保打开了自动构建选项。
了解Flex中的基于约束的布局
当用户调整一个Flex程序窗口时,我们希望布局中的组件可以进行自动调整。当用户调整程序窗口时,一个约束的布局可以调整组件的尺寸和位置。
为了创建一个基于约束的布局,我们必须使用一个容器,而这个容器的layout属性要设置为absolute(layout="absolute")。这个属性给了我们使用absolute位置来设置组件位置与尺寸的灵活性,同时也提供了当容器被调整时设置与移动组件的约束的能力。例如,如果我们希望当用户将程序窗口变宽时,一个TextInput文本框可以伸展,我们可以用容器的左右边界来界定这个控件,这样文本框的宽度就可以用窗口的宽度来设定。
在Flex中,所有的约束都是相对于容器的边界来设置的。他们不可以相对于其他控件进行设置。现在我们了解了基本的概念,我们可以在Flex Builder中创建一个简单的布局并且定义约束。
插入与放置组件
创建基于约束的布局的第一步就是要在一个容器中放置组件,这个容器的layout属性设置为absolute。这个属性可以使得我们在这个容器中将组件拖放到任何位置。为了象素点的精度,我们可以设置X与Y坐标。
在这一节中,我们在简单的反馈表单中插入并放置组件。
1 在浏览视图中选择Lessons工程,选择File>New>MXML Application,创建一个名为Layout.mxml的工程。
2 将Layout.mxml文件设置为默认编译的文件。
3 在MXML编辑器的设计模式中,通过从组件视图中拖放组件来和Layout.mxml文件中添加一个Lable和一个TextInput控件。
4 使用鼠标将Label与TextInput控件并肩放置在从容器顶部算起60象素处。
5 在Flex属性视图中,扩展属性的Common与Layout类。
出现设置common与Layout属性的选项。
如果我们看到一个属性表而不是前面的样子,点击标准视图按钮。
1 选择Label控件并设置为如下的属性:
Text: Email
X: 20
Y: 60
2 选择TextInput控件并设置为如下的属性:
X: 90
Y: 60
Width: 300
3 切换到MXML编辑器的代码模式,Layout.mxml文件应包含如下的代码:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Label x="20" y="60" text="Email"/>
<mx:TextInput x="90" y="60" width="300"/>
</mx:Application>
4 添加其余的Flex控件,如下面的代码所示:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Label x="20" y="60" text="Email"/>
<mx:TextInput x="90" y="60" width="300"/>
<mx:Label x="20" y="90" text="Comments"/>
<mx:TextArea x="90" y="90" width="300" />
<mx:Button x="330" y="150" label="Send"/>
</mx:Application>
布局预览图如下:
5 保存文件
Flex Builder会编译这个程序。
6 运行程序。
程序的运行效果如下图所示:
7 拖放浏览器窗口使得程序窗口变大或变小。
这些组件保持他们相对于窗口左边与上边的位置,但是当我们调整浏览器窗口时这些组件并不会伸展与压缩。例如,当我们使得浏览器窗口变得更窄时,发送按钮就会消息,而TextArea与TextInput控件也会部分消失。
下一步就是为这个布局设置约束,这样当我们调整程序窗口时这些组件就会自动调整。
定义布局约束
在我们的布局中放置组件以后,我们定义布局约束,这样当用户调整程序窗口时,组件可以自动调整。
1 在MXML编辑器的设计模式中,选择TextInput控件(EMail地址)。
2 在Flex属性视图时,确保了属性的布局类。布局类包含了用于设置锚点的选项:
3 在这个视图中通过选择左和右锚点复选框来为TextInput控件定义布局约束,然后指定距窗口左边90,距窗口右边60,如下图所示:
这两个复选框将TextInput控件相对于窗口的左边与右边固定在屏幕上。与文本框相关的数字指明了控件距离窗体边框的距离。
左边界是固定控件所必须的,这样当用户水平调整程序窗口时,他会自动扩展或压缩。如果没有左边界的定位,控件就会滑向左边或是右边。
在MXML代码中这些约束如下进行表式:
<mx:TextInput y="60" left="90" right="60"/>
4 在编辑器的设计模式中,选择TextInput控件,在Flex属性视图中,选择四个角的复选框,并且指定如下的距离:
Left: 90
Right: 60
Top: 90
Bottom: 190
在Flex属性视图中,TextArea控件视图如下:
5 选择按钮控件,在Flex属性视图中,点击右与下锚点复选框,并且指定距右边界为60,距下边界为150。如下图所示:
这两个复选框将按钮控件固定在窗口右下角。没有锚点将控件相对于左边与上边固定,当用户调整程序时,控件就会水平或是垂直进行移动。
6 保存文件,当编译完成时运行程序。
程序的运行结果如下:
分享到:
相关推荐
创建布局助手是为了解决基于约束的布局的问题,在该约束中,对于相同尺寸类别但具有不同屏幕尺寸的尺寸类别,开发人员受其约束。 布局助手将使开发人员可以自由地为每个设备更新约束,各种UI元素的字体。 安装 可可...
CLAutoLayoutTemplates 基于模板创建 UIView 约束。 这个库背后的概念是允许创建自动布局约束的“模板”,并在需要时将它们应用到视图(有或没有动画)。 这是在故事板或 nib 文件中保留所有自动布局定义的好方法。 ...
折叠约束布局 这是基于DroidCon SF视频分钟)创建的,旨在回答 这个想法是在Conslapsing工具栏上将ConstraintLayout与两个ConstraintSets一起使用。 当工具栏折叠时,这将为您创建的动画提供更大的灵活性。
- 基于GA的车间设施布局优化 - 各设施长宽、功能关系、物流量、搬运成本数据均在Excel中 - 待优化的两个变量分别存放设施的横纵坐标、横纵摆放抉择 - 设置了适应度函数和约束条件 - 完整matlab代码,main直接运行 ...
主题界面设计图框架 主题UI是一个库,用于基于基于约束的设计原则创建可主题化的用户界面。 使用灵活的API来构建一流的开发人员人体工程学,从而构建自定义组件库,设计系统,Web应用程序,Gatsby主题等。 文档: : ...
:droplet: 素描液1.7.6 和为您带来的合作项目Fluid是一个Sketch插件,它提供了一种创建更多基于约束的响应式设计的方法。 它基于“自动布局”约束。 :package: :white_medium_star: :down_arrow_selector:安装使用...
创意产业中的人工智能:回顾概述:人工智能在创意产业的应用arXiv 2020 ,神经设计网络:带约束的图形布局生成基于约束的布局生成ECCV 2020 ,用于自动图形设计的属性条件布局GAN IEEE可视化和计算机图形学交易2020...
它使用String或API类型检查的约束来格式化布局。 MigLayout可以生成流动的,基于网格的,绝对的(带有链接),分组的和对接的布局。 您再也不必切换到另一个布局管理器了! MigLayout创建为手动编码布局,而Matisse...
3.5 节对容器使用基于约束的布局 3.6 节在容器内为子组件设置最大、最小尺寸 3.7 节为容器指定行和列的约束 3.8 节使用约束条件为文本创建排版流程(Layout Flows) 3.9 节在容器内控制滚动和溢出 3.10 节控制Box 组件...
欢迎使用Enaml Enaml是一种编程语言和框架,可用于以最少的工作量创建...基于约束的布局引擎(基于Kiwi构建)。 与数据模型工具(基于Atom构建)集成。 一个(可选)编辑器,使您可以在键入代码时查看结果。 完善的文件
基于约束的布局引擎(基于构建)。 与数据模型工具(基于构建)集成。 一个(可选)编辑器,使您可以在键入代码时查看结果。 一个文档齐全且易于理解的代码库,以及带有大量可用示例的文档。 许多流行的编辑器...
路由约束 小结 第12章胖模型、瘦控制器 关注点分离 服务与行为 小结 第四部分应用实例 第13章构建购物车 购物车需求 购物车项目 JavaScript捆绑与最小化 小结 第14章构建数据模型 Code—First模型 ...
StackScrollView :warning: 该示例正在使用演示组件。 StackScrollView没有默认组件。... StackCell需要基于约束的布局。 用法 基本用法 let stack = StackScrollView () stack. append ( view : ... ) stack
它覆盖了系统开发的整个周期,除了开发类模型之外,还包括事务进程分析,使用案例需求,动态模型,组件和布局,系统管理,非功能需求,用户界面设计,测试和维护等。完美的企业级解决方案,用于可视化、分析、建模、...
Pinocchio 的目标是成为创建约束的薄包装,仅此而已。 注意:这主要是在这一点上的概念证明。 随着时间的推移,我可能会将其发展成真实的东西,但现在我不会基于此发布任何东西。句法语法几乎完全匹配 ...
CJFloatingLabel 是作为 CoinJar Touch 的一部分而设计的 UI 组件。 受 Google 聚合物项目的启发,CJFloatingLabel ...我们在 CoinJar 使用基于约束的布局,并且由于我们在代码中创建所有视图,我们已经非常习惯使用
书中还深入讲述了其他ASP.NET图书遗漏的高级主题,如自定义控件的创建、图像处理、加密等。此外,《ASP.NET 4高级程序设计(第4版)》专门提供了两章的内容来教你如何用Ajax 技术制作快速响应的页面,以及如何使用微软...