Flex3 界面布局教程

对于一个拥有丰富组件的GUI设计工具来说，界面的布局技术成为界面美化的一个重要方面。Flex从控件的功能上大致提供了两种方法：容器（控制布局），组件（提供GUI实质功能处理）。使用容器分层次管理GUI是当前的趋势,Flex也使用了此种方式,主观上我们认为它把我们界面上的组件通过容器进行了分组或分类布局管理。

接下来，我将通过简单的示例逐个介绍各种界面布局的设计。

Canvas layout容器

Canvas的界面布局，它定义了一个矩形框架的区域，用来放置用户的容器和控件。不像其他的组件，你不能放任Flex的控件。你必须指定absolute或者constraint-based来指定组件的位置。Absolute模式必须指定x,y坐标。 Constrain-based必须指定side, baseline,或者center anchors. 接下来具体介绍两种布局方式：

Absolute模式：你可以指定x,y坐标来指定每个组件的在容器的位置。坐标的是相对canvas 容器的左上角来设计的。即容器的左上角坐标为(0,0). X.y可以为正负值，如果是负值的话，组件就会放在超出容器可是范围的位置。当然可以利用Actionscript来完成移动的操作，这就涉及到的event事件。




<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" width="219" height="230">
    <mx:Canvas id="mycanvas" height="182" width="200"
     borderStyle="solid" backgroundColor="white">
        <mx:Button x="10" y="10" label="button1"/>
        <mx:Button x="50" y="67" label="Button2"/>
        <mx:Button x="92" y="129" label="Button3"/>            
    </mx:Canvas>
</mx:WindowedApplication>

效果如下图：

constraint-based模式：这个分别介绍canvas 的Vbox以及Hbox的两种组合。Canvas通常有x,y指定组件的位置，x,y默认的应该是0.所以你如果不指定x,那么将把组件放在x=0,的位置。这样有可能出现重叠现象。当然也可以指定其他模式的布局，比如Vbox,或者Hbox。这样就可以不指定x,y了。





<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Canvas
width="340" height="247"
backgroundColor="#FFFFFF">
<mx:VBox id="vb"
     left="10"
       right="248"
       y="26"
       height="153"
       backgroundColor="#A9C0E7">
        <mx:Button label="button1" width="74"/>
       <mx:Button label="Button2"/>
       <mx:Button label="Button3"/>
       </mx:VBox>
<mx:HBox id="hBox2"
       left="100"
       right="27"
       y="26"
       height="153"
       backgroundColor="#A9C0E7">
       <mx:Button label="button4" />
       <mx:Button label="Button5"/>
       <mx:Button label="Button6"/>
   </mx:HBox>
   <mx:Button label="Button8" y="200"/>
   <mx:Button label="Button7" y="190"/>
 </mx:Canvas>

</mx:WindowedApplication>

效果如下图：

Vbox或者Hbox 布局


前面介绍的把Vbox或者Hbox嵌入Canvas。其实他们本身都是一个容器，可以独立使用的。效果跟上面图中显示的是一样的。所以关于VBox，HBox就不再加以介绍了。举个例子好了：




<?xml version="1.0"?>
<!-- containers\layouts\VBoxSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:VBox borderStyle="solid"
      paddingTop="10"
      paddingBottom="10"
      paddingLeft="10"
      paddingRight="10">
    <mx:Button id="fname" label="Button 1"/>
   <mx:Button id="lname" label="Button 2"/>
   <mx:Button id="addr1" label="Button 3"/>
   <mx:ComboBox id="state">
  <mx:ArrayCollection>
   <mx:String>ComboBox 1</mx:String>
  </mx:ArrayCollection>
 </mx:ComboBox>
 </mx:VBox>
</mx:Application>

效果图如下：

ControlBar layout容器

你可以把controlbar和panel 或者titlewindow容器组合起来使用。这样做的好处容器里的组件可以被panel或者titlewindow里的组件共用。（原文：You use the ControlBar container with a Panel or TitleWindow container to hold components that can be shared by the other children in the Panel or TitleWindow container.）举个例子：




<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
private function addToCart():void {
// Handle event.
}
]]>
</mx:Script>
  <mx:Panel title="My Application"
      paddingTop="10" paddingBottom="10"
      paddingLeft="10" paddingRight="10">
  <mx:HBox width="250" height="200">
   <!-- Area for your catalog. -->
  </mx:HBox>
  <mx:ControlBar width="250">
   <mx:Label text="Quantity"/>
 <mx:NumericStepper/>
  <!-- Use Spacer to push Button control to the right. -->
  <mx:Spacer width="100%"/>
    <mx:Button label="Add to Cart"
    click="addToCart();"/>
  </mx:ControlBar>
 </mx:Panel>
</mx:WindowedApplication>

效果图：

ApplicationControlBar容器

这个主要用来做界面顶部的导航条。这个容器menubar, combox button等组件。举个例子：




<?xml version="1.0"?>
<!-- containers\layouts\AppCBarSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
]]>
</mx:Script>
<mx:XMLList id="menuXML">
<menuitem label="File">
<menuitem label="New" data="New"/>
<menuitem label="Open" data="Open"/>
<menuitem label="Save" data="Save"/>
<menuitem label="Exit" data="Exit"/>
</menuitem>
<menuitem label="Edit">
<menuitem label="Cut" data="Cut"/>
<menuitem label="Copy" data="Copy"/>
<menuitem label="Paste" data="Paste"/>
</menuitem>
<menuitem label="View"/>
</mx:XMLList>
<mx:Array id="cmbDP">
<mx:String>Item 1</mx:String>
<mx:String>Item 2</mx:String>
<mx:String>Item 3</mx:String>
</mx:Array>
<mx:ApplicationControlBar id="dockedBar"
dock="true">
<mx:MenuBar height="100%"
dataProvider="{menuXML}"
labelField="@label"
showRoot="true"/>
<mx:HBox paddingBottom="5"
paddingTop="5">
<mx:ComboBox dataProvider="{cmbDP}"/>
<mx:Spacer width="100%"/>
<mx:TextInput id="myTI" text=""/>
<mx:Button id="srch1"
label="Search"
click="Alert.show('Searching')"/>
</mx:HBox>
</mx:ApplicationControlBar>
<mx:TextArea width="300" height="200"/>
</mx:Application>

效果图：

DividedBox, HDividedBox和VDividedBox 布局

其实呢，DividedBox,与Box 是非常类似的，唯一不同的在于它子Box板块自建加入了一条分隔条，用户可以更具自己需要来调整各个子Box板块的大小。子Box板块的分布可以分成两种，水平以及垂直的。比如：

实现的代码如下：




<?xml version="1.0"?>
<!-- containers\layouts\HDivBoxSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor="white">
<mx:Script>
<![CDATA[
private function myGrid_initialize():void {
myGrid.dataProvider = [
{Artist:'Pavement', Album:'Slanted and Enchanted',
Price:11.99, Comment:'One of their best. 4 Stars.'},
{Artist:'Pavement', Album:'Brighten the Corners',
Price:11.99, Comment:'My favorite.'}
];
}
]]>
</mx:Script>
<mx:HDividedBox width="100%" height="100%">
<mx:Tree id="tree1"
width="30%" height="100%"
labelField="@label"
showRoot="true">
<mx:XMLList>
<menuitem label="Products">
<menuitem label="Posters" isBranch="true"/>
<menuitem label="CDs">
<menuitem label="Pavement"/>
<menuitem label="Pavarotti"/>
<menuitem label="Phish"/>
</menuitem>
<menuitem label="T-shirts" isBranch="true"/>
<menuitem label="Tickets" isBranch="true"/>
</menuitem>
</mx:XMLList>
</mx:Tree>
<mx:VDividedBox width="70%" height="100%">
<mx:DataGrid id="myGrid"
width="100%" height="100%"
initialize="myGrid_initialize();"
change="currentMessage.text=
event.currentTarget.selectedItem.Comment;"/>
<mx:TextArea id="currentMessage"
width="100%"
height="60"
text="One of their best. 4 Stars."/>
</mx:VDividedBox>
</mx:HDividedBox>
</mx:Application>

赞 (0)

相关推荐

  • Flex3 界面布局教程

    Flex3 界面布局教程

    对于一个拥有丰富组件的GUI设计工具来说,界面的布局技术成为界面美化的一个重要方面.Flex从控件的功能上大致提供了两种方法:容器(控制布局),组件(提供GUI实质功能处理).使用容器分层次管理GUI是当前的趋势,Flex也使用了此种方式,主观上我们认为它把我们界面上的组件通过容器进行了分组或分类布局管理. 接下来,我将通过简单的示例逐个介绍各种界面布局的设计. Canvas layout容器 Canvas的界面布局,它定义了一个矩形框架的区域,用来放置用户的容器和控件.不像其他的组件,你不能放

  • Flex3 界面布局教程 第二篇

    Flex3 界面布局教程 第二篇

    Form表单布局 Form容器是Flex 表单中处于最外层的容器,负责控制表单的大小,以及布局,通常表单中都是垂直布局,并且靠左对齐的.这个容器可以包含FormHeading以及FormItem.举个简单的例子. <!-- containers\layouts\FormComplete.mxml --><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"><mx:Script><![

  • Python GUI编程学习笔记之tkinter界面布局显示详解

    本文实例讲述了Python GUI编程学习笔记之tkinter界面布局显示.分享给大家供大家参考,具体如下: 相关内容: pack 介绍 常用参数 使用情况 常用函数 grid 介绍 常用参数 使用情况 常用函数 place 介绍 常用参数 使用情况 常用函数 首发时间:2018-03-04 14:20 pack: 介绍: pack几何管理器按行或列打包小部件. 可以使用填充fill,展开expand和靠边side等选项来控制此几何体管理器. pack的排放控件的形式就像将一个个控件按大小从上到

  • Android WebView 应用界面开发教程

    Android WebView 应用界面开发教程

    WebView组件本身就是一个浏览器实现,Android5.0增强的WebView基于Chromium M37,直接支持WebRTC.WebAudio.WebGL.开发者可以直接在WebView中使用聚合(Polymer)和Material设计. 一.WebView浏览网页(加载线上URL) WebView提供了很多方法执行浏览器操作,常用方法如下: void goBack():后退 void goForward():前进. void goBackOrForward(int step):step

  • Oracle数据库及图形化界面安装教程图解

    首先在电脑D盘(或者其他不是C盘的磁盘,一般软件不会安装到C盘,否则会拖慢电脑的运行速度,造成电脑卡顿)新建文件夹并命名,这里命名oracle;按住Ctrl键,鼠标同时选中win64_11gR2_database_1of2.zip和win64_11gR2_database_2of2.zip两个压缩包,右键解压到oracle文件夹,将得到database文件,如图1: 图1 双击打开database文件夹如图2,双击setup.exe应用文件进行安装. 图2 安装步骤如下:. (1)选择"下一步&

  • IntelliJ IDEA 的使用界面图文教程

    是否还记得在博文「IntelliJ IDEA 安装目录的核心文件讲解」中,这张充满神秘色彩的图片呢?进入她,让我们一起感受她的魅力吧! 如上图所示,打开 IntelliJ IDEA 后,首先迎接我们的就是这个界面: 标注 1:Create New Project创建一个新的项目: 标注 2:Import Project导入一个已有的项目: 标注 3: Open打开一个已有的项目: 标注 4:Check out from Version Control可以通过服务器上的项目地址 Checkout(

  • android实现上下左右滑动界面布局

    本文实例为大家分享了android实现滑动界面布局的具体代码,供大家参考,具体内容如下 1.我使用的是ScrollView嵌套HorizontalScrollView让ScrollView负责上下滑动HorizontalScrollView负责左右滑动 2.以下代码提供了思路和完成手段,请根据具体业务去进行修改,我试过使用recyclerview进行自定义,发现一旦有了复杂业务之后会掉帧卡顿所以使用了这种方法 XML布局 <?xml version="1.0" encoding=

  • flex(弹性布局)教程之常用布局

    目录 一.Flex 布局是什么? 任何一个容器都可以指定为 Flex 布局. 行内元素也可以使用 Flex 布局. Webkit 内核的浏览器,必须加上-webkit前缀. 二.常用布局 公共样式: 垂直居中 子元素左右分布 水平垂直居中 水平垂直居中 图标在上文字在下 子元素平分父元素,且自适应等高 子元素平分父元素,两边对齐中间自适应相同宽度间隔,且自动换行 三栏布局,两边固定宽中间自适应 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便.完整.响应式地实现各种页面布局

  • SwiftUI 登录界面布局实现示例详解

    SwiftUI 登录界面布局实现示例详解

    目录 引言 页面分析-元素构成 实战编程-背景图片 实战编程-说明文字 实战编程-登录方式 实战编程-辅助文字 本章小结 引言 为了更好地了解和学习SwiftUI,我们快速学习SwiftUI的三种基本布局:HStack水平布局容器.VStack垂直布局容器.ZStack层叠布局容器. 在实际开发过程中,登录页面是移动端产品必不可少的页面,也是很好的练手项目. 接下来,我们将用10分钟来构建一个登录页面布局,以下面UI设计稿为例: 页面分析-元素构成 采用自顶向下的设计思想拆解UI设计稿的元素,可

  • iOS界面布局简化UIStackView使用详解

    目录 前言 UIStackView布局思想 distribution: alignment: UIStackView用法 初始化 添加.删除子视图 排列方向 布局方式 对齐方式 间距 前言 在过去iOS页面布局较为传统,大多数人使用Frame或者AutoLayout来布局,在iOS9以后,引入了UIStackView.UIStackView是用于线性布局的控件,可以自动管理子视图布局,自动填充.它借鉴了前端的布局算法Flexbox,可以简便地实现各种页面布局. UIStackView虽然已经不是

随机推荐