Custom Tab Navigator
Today I was thinking again how developers from picnik.com have created their user interface. Especially I was impressed by custom Tab Navigator.
It looks simply and well cut. In fact it is not so difficult to recreate picnik’s tab navigator.
They are using embedded Trebuchet MS fonts which is installed together with Vista OS. Easy part. More difficult task is customize Tab look and feel in order to achieve rounded selected tab on bottom.
I did it by using custom style class which extends ProgrammaticSkin base class.
package com.figaro.components
{
import mx.skins.ProgrammaticSkin;
import flash.display.Graphics;
public class TabNavigatorNiceSkin extends ProgrammaticSkin {
public function TabNavigatorNiceSkin():void {
super();
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
super.updateDisplayList(unscaledWidth, unscaledHeight);
var g:Graphics = graphics;
g.clear();
// upper tab rect
drawRoundRect(0,0,unscaledWidth, unscaledHeight,
10,0xFFFFFFF,1,null,"linear",null,null);
// bottm tab rect
drawRoundRect(0,unscaledHeight -10 ,unscaledWidth,
10,0,0xFFFFFFF,1,null,"linear",null,null);
// corners
g.lineStyle(3, 0xFFFFFF);
// left corner
g.moveTo(-3,unscaledHeight);
g.curveTo(0,unscaledHeight, 0, unscaledHeight - 3 );
// right corner
g.moveTo(3 + unscaledWidth ,unscaledHeight);
g.curveTo(unscaledWidth,unscaledHeight, unscaledWidth, unscaledHeight - 3 );
}
}
}
Result you can see beneath. Right click on mouse if you want to see the code.
Obviously there are many ways to archive this same result.
Nice drawing api skin but I don’t think they made it as tab navigator component there is no default keyboard actions on their component
It’s better to use Viewstack.
by the way try to do the same with css
anyway
keep it up