Create custom programmatic skins for Feathers UI components
ProgrammaticSkin may be used as a base class for drawing custom graphics to use as a skin for a Feathers UI component. While the framework provides a number of built-in skins with common shapes, like rectangles, circles, and ellipses, sometimes a design needs a more customize appearance with multiple borders, transparent overlays, or even animations.
The code below is based on the custom-programmatic-skin sample project. Full source code for this sample is available on Github.
To create a custom programmatic skin, subclass ProgrammaticSkin and override its update() method.
class CustomSkin extends ProgrammaticSkin {
public function new() {
super();
}
override private function update():Void {
// draw your skin here
}
}
Inside the update() method, draw vector graphics or add/update children to achieve the requirements of the design.
override private function update():Void {
this.graphics.clear();
this.graphics.lineStyle(10.0, 0xff6666);
this.graphics.beginFill(0xffcccc);
this.graphics.moveTo(20.0, 5.0);
this.graphics.lineTo(this.actualWidth - 20.0, 5.0);
this.graphics.curveTo(this.actualWidth - 20.0, 20.0, this.actualWidth - 5.0, 20.0);
this.graphics.lineTo(this.actualWidth - 5.0, this.actualHeight - 20.0);
this.graphics.curveTo(this.actualWidth - 20.0, this.actualHeight - 20.0, this.actualWidth - 20.0, this.actualHeight - 5.0);
this.graphics.lineTo(20.0, this.actualHeight - 5.0);
this.graphics.curveTo(20.0, this.actualHeight - 20.0, 5.0, this.actualHeight - 20.0);
this.graphics.lineTo(5.0, 20.0);
this.graphics.curveTo(20.0, 20.0, 20.0, 5.0);
}
Whether you've set the dimensions explicitly, or they've been calculated dynamically, the actualWidth and actualHeight properties will contain the correct values for drawing your graphics or applying a layout.
Sample projects
Several sample projects demonstrate how to create different types of custom programmatic skins for Feathers UI components.