How to make custom-shaped tabs in Flex

Flex gives you decent tab components that are simple to use, but if you want a shape more interesting than a rectangle with rounded corners, it takes a little extra work.

Start with a basic TabBar:

which gets you this…

If you just want the corners to look different, you can easily change the corner radiuses of the TabBar. In order to get a totally different shape, you need to use skins.

In FlashBuilder, select New->MXML Skin and choose TabBar for a host component. Now create one more, selecting a host of ButtonBarButton this time. You’ll get the default skins for each, which is an easy starting point.

In the TabBar tag, add a skinclass attribute that points at your new TabBar skin. In the TabBar skin, change the skinclass of the ButtonBarButton (in the data group item renderer) to point to your new button skin. Try running it. If everything works, you can start customizing the skins.

Most of the work happens in the button skin. Notice the Rect components under the States. Remove them all. We’re going to simplify things for this example.

To get a different shape for your tabs, you can define a vector shape with a Path. Here we put the Path inside of a group just to give a little more flexibility in the display. Add it to the skin where the rects were. The Path graphic’s shape is determined by its data element. M indicates the starting position, L writes lines between coordinates, and Z closes the path.

Now the tabs will look like this:

A different shape! But not terribly attractive. In a perfect world, you or someone else designs your graphics in Illustrator, imports them into Catalyst, then copies the data element from its code view. A simple path is easy enough to free style but they quickly get more complicated if you’re doing anything more interesting.

This entry was posted in flex, software and tagged . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *