gembin

OSGi, Eclipse Equinox, ECF, Virgo, Gemini, Apache Felix, Karaf, Aires, Camel, Eclipse RCP

HBase, Hadoop, ZooKeeper, Cassandra

Flex4, AS3, Swiz framework, GraniteDS, BlazeDS etc.

There is nothing that software can't fix. Unfortunately, there is also nothing that software can't completely fuck up. That gap is called talent.

About Me

 

How to use verticalCenter and horizontalCenter in a container with absolute layout


In this tutorial I will explain how you can use the verticalCenter and horizontalCenterconstraints in a container with absolute layout.

At this stage you probably already figured out how to use the leftrighttopbottomconstraints. But what about horizontalCenter and verticalCenter?

horizontalCenter is the distance from the center of the container in the horizontal where you want your component to appear. If you give it a positive value, the component will show up in the right half of the container. If you give it a negative value the component will appear in the left half.

<mx:Canvas width="500" height="500">
<mx:Button horizontalCenter="200" label="Right half of the container"/>
<mx:Button horizontalCenter="-200" label="Left half of the container"/>
</mx:Canvas>

If you try to combine horizontalCenter with left or right constraints, they will always be ignored as the horizontalCenter constraint always takes precedence.

<mx:Canvas width="500" height="500">
<mx:Button horizontalCenter="200" left="400" label="Button 1"/>
<mx:Button horizontalCenter="200" right="200" label="Button 2"/>
</mx:Canvas>

In the example above the two buttons will overlap because the value of the left andright coordinate is ignored.

verticalCenter is the distance from the center of the container in the vertical where you want your component to appear. If you give it a positive value, the component will show up in the bottom half of the container. If you give it a negative value the component will appear in the top half.

<mx:Canvas width="500" height="500">
<mx:Button verticalCenter="200" label="Bottom half of the container"/>
<mx:Button verticalCenter="-200" label="Top half of the container"/>
</mx:Canvas>

If you try to combine verticalCenter with top or bottom constraints, they will always be ignored as the verticalCenter constraint always takes precedence.

<mx:Canvas width="500" height="500">
<mx:Button verticalCenter="200" top="400" label="Button 1"/>
<mx:Button verticalCenter="200" bottom="200" label="Button 2"/>
</mx:Canvas>

In the example above the two buttons will overlap because the value of the top andbottom constraint is ignored.

The code below shows possible combinations of horizontalCenter and verticalCenterthat you can use to layout your components:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" height="520" width="520">
<mx:Button label="Left Center" horizontalCenter="-200" verticalCenter="0">
</mx:Button>
<mx:Button label="Center" horizontalCenter="0" verticalCenter="0">
</mx:Button>
<mx:Button label="Right Center" horizontalCenter="200" verticalCenter="0">
</mx:Button>
<mx:Button label="Top Left" horizontalCenter="-200" verticalCenter="-200">
</mx:Button>
<mx:Button label="Top Center" horizontalCenter="0" verticalCenter="-200">
</mx:Button>
<mx:Button label="Top Right" horizontalCenter="200" verticalCenter="-200">
</mx:Button>
<mx:Button label="Bottom Left" horizontalCenter="-200" verticalCenter="200">
</mx:Button>
<mx:Button label="Bottom Center" horizontalCenter="0" verticalCenter="200">
</mx:Button>
<mx:Button label="Bottom Right" horizontalCenter="200" verticalCenter="200">
</mx:Button>
<mx:Button label="Ignored right constraint" right="10" horizontalCenter="-200" verticalCenter="50">
</mx:Button>
<mx:Button label="Not ignored right constraint" right="10" verticalCenter="50">
</mx:Button>
<mx:Button label="Ignored top constraint" top="10" horizontalCenter="-200" verticalCenter="-50">
</mx:Button>
<mx:Button label="Not Ignored top constraint" top="10" horizontalCenter="-200">
</mx:Button>
</mx:Application>

posted on 2010-08-17 23:10 gembin 阅读(480) 评论(0)  编辑  收藏 所属分类: Flex4


只有注册用户登录后才能发表评论。


网站导航:
 

导航

统计

常用链接

留言簿(6)

随笔分类(440)

随笔档案(378)

文章档案(6)

新闻档案(1)

相册

收藏夹(9)

Adobe

Android

AS3

Blog-Links

Build

Design Pattern

Eclipse

Favorite Links

Flickr

Game Dev

HBase

Identity Management

IT resources

JEE

Language

OpenID

OSGi

SOA

Version Control

最新随笔

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜

free counters