Feathers UI
  • Docs
  • API
  • Showcase
  • Blog
  • Community

›Styles and Skins

Introduction

  • Getting Started
  • Installation
  • Create a new project in…

    • Command line terminal
    • HaxeDevelop
    • Moonshine IDE
    • Visual Studio Code

    Build a project targeting…

    • Android
    • Electron
    • HashLink VM
    • iOS
    • Linux
    • macOS
    • Neko VM
    • Web
    • Windows
  • Introduction to OpenFL

UI Components

  • Intro to UI components
  • Alert
  • Application
  • AssetLoader
  • Button
  • ButtonBar
  • Callout
  • Check
  • ComboBox
  • DatePicker
  • HDividedBox / VDividedBox
  • Drawer
  • Form / FormItem
  • GridView
  • GroupListView
  • Header
  • HierarchicalItemRenderer
  • ItemRenderer
  • Label
  • LayoutGroup
  • LayoutGroupItemRenderer
  • ListView
  • NumericStepper
  • PageIndicator
  • PageNavigator
  • Panel
  • PopUpDatePicker
  • PopUpListView
  • HProgressBar / VProgressBar
  • Radio
  • RouterNavigator
  • HScrollBar / VScrollBar
  • ScrollContainer
  • HSlider / VSlider
  • StackNavigator
  • TabBar
  • TabNavigator
  • TextArea
  • TextCallout
  • TextInput
  • ToggleButton
  • ToggleSwitch
  • TreeGridView
  • TreeView

Layouts

  • Intro to Layouts
  • AnchorLayout
  • FlowRowsLayout
  • HorizontalLayout
  • HorizontalListLayout
  • HorizontalDistributedLayout
  • ResponsiveGridLayout
  • TiledRowsLayout
  • TiledRowsListLayout
  • PagedTiledRowsListLayout
  • VerticalLayout
  • VerticalListFixedRowLayout
  • VerticalListLayout
  • VerticalDistributedLayout
  • Layout Data
  • Custom layouts

Styles and Skins

  • Intro to skins
  • Common shape skins
  • Custom programmatic skins
  • Intro to themes
  • Create a custom theme

Animation

  • Navigator animated transitions
  • Custom navigator transitions

Custom UI Components

  • Custom UI components
  • Component lifecycle
  • Custom item renderers
  • Class-based item renderers

Miscellaneous

  • CLI commands
  • Collections
  • Focus management
  • haxedef options
  • Displaying pop-ups
  • Semantic versioning
  • Tool-tips
  • Cookbook
  • Install Prerelease Builds
Edit

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 {
    graphics.clear();
    graphics.lineStyle(10.0, 0xff6666);
    graphics.beginFill(0xffcccc);
    graphics.moveTo(20.0, 5.0);
    graphics.lineTo(actualWidth - 20.0, 5.0);
    graphics.curveTo(actualWidth - 20.0, 20.0, actualWidth - 5.0, 20.0);
    graphics.lineTo(actualWidth - 5.0, actualHeight - 20.0);
    graphics.curveTo(actualWidth - 20.0, actualHeight - 20.0, actualWidth - 20.0, actualHeight - 5.0);
    graphics.lineTo(20.0, actualHeight - 5.0);
    graphics.curveTo(20.0, actualHeight - 20.0, 5.0, actualHeight - 20.0);
    graphics.lineTo(5.0, 20.0);
    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.

  • Sample: Custom Programmatic Skin (Source Code on Github)
  • Sample: Custom Programmatic Skin with States (Source Code on Github)
  • Sample: Animated Skin with Tween (Source Code on Github)
Last updated on 6/15/2022
← Common shape skinsIntro to themes →
  • Sample projects
Feathers UI
Feathers UI
  • Downloads
  • Showcase
  • Testimonials
  • Premium Support
Documentation
  • Getting Started
  • API Reference
  • Samples
    Github
  • Source Code
  • Issue Tracker
Community
  • Forum
  • Discord
  • Stack Overflow
News & Updates
  • Blog (RSS, Atom)
  • Twitter
Make a Donation
  • Join Github Sponsors
  • Donate with PayPal
  • Buy a T-Shirt
Copyright © 2022 Bowler Hat LLC — Illustrations by unDraw.