19 October 2010

Custom Flex 4 HornLayout variation

Few days ago I presented custom Flex 4 TriangleLayout. Another variation of this layout would be when individual items are ordered from left to right, unlike in TrinagleLayout where items are placed top to bottom.



Code is almost the same, just a minor differences.

HornLayout.as


package com.flash2nd.layout {

// author: http://flanture.blogspot.com - www.flash2nd.com
// license: http://creativecommons.org/licenses/by/3.0/
// October 2010

import mx.core.ILayoutElement;
import mx.utils.ObjectUtil;

import spark.layouts.supportClasses.LayoutBase;

public class HornLayout extends LayoutBase {

public function HornLayout() {
super();
}

override public function measure():void {
super.measure();
}

override public function updateDisplayList(width:Number, height:Number):void {
super.updateDisplayList(width,height);

if(target){
var count:int = target.numElements;
var layoutElement:ILayoutElement;
var startX:Number = 0;
var startY:Number = target.height/2;
var shift:int = 1;

for(var i:int = 1; i < count+1; i++){
// find current level
var level:int = findLevel(i);

layoutElement = target.getElementAt(i-1);
layoutElement.setLayoutBoundsSize(NaN,NaN);

var elWidth:Number = layoutElement.getLayoutBoundsWidth();
var elHeight:Number = layoutElement.getLayoutBoundsHeight();

if (level !== findLevel(i-1)) {
shift = i;
}

var x:Number = startX + elWidth * (level - 1) * 2;
var y:Number = startY - elHeight * (level - 1) + (i % shift) * elHeight * 2;

layoutElement.setLayoutBoundsPosition(x,y);
}
}

}

private function findLevel(index:int):int {
var levelCounter:int = 1;
var sum:int = 1;
while (sum < index) {
sum += levelCounter;
if (sum <= index) {
levelCounter += 1;
}
}
return levelCounter;
}

}
}



HornLayoutTest.mxml


<?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/mx"
xmlns:layout="com.flash2nd.layout.*"
width="100%" height="100%">


<s:layout>
<layout:HornLayout/>
</s:layout>

<s:Button label="Button A"/>
<s:Button label="Button B"/>
<s:Button label="Button C"/>
<s:Button label="Button D"/>
<s:Button label="Button E"/>
<s:Button label="Button F"/>
<s:Button label="Button G"/>
<s:Button label="Button H"/>
<s:Button label="Button I"/>
<s:Button label="Button J"/>
<s:Button label="Button K"/>
<s:Button label="Button L"/>
<s:Button label="Button M"/>
<s:Button label="Button N"/>
<s:Button label="Button O"/>
<s:Button label="Button P"/>
<s:Button label="Button Q"/>
<s:Button label="Button R"/>

</s:Application>


sharing is caring :)
thanx.

*_*

0 comments:

 

template by blogger templates