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

›Layouts

Introduction

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

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

    Build a project targeting…

    • Android
    • iOS
    • Linux
    • macOS
    • Windows
    • Web
  • Introduction to OpenFL

UI Components

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

Layouts

  • Intro to Layouts
  • AnchorLayout
  • HorizontalLayout
  • HorizontalListLayout
  • HorizontalDistributedLayout
  • ResponsiveGridLayout
  • VerticalLayout
  • VerticalListFixedRowLayout
  • VerticalListLayout
  • VerticalDistributedLayout

Styles and Skins

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

Custom UI Components

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

Miscellaneous

  • CLI commands
  • Collections
  • haxedef options
  • Install Prerelease Builds
Edit

How to use HorizontalDistributedLayout with Feathers UI containers

The HorizontalDistributedLayout class may be used to position the children of a container from left to right, in a single row — where the total width of the container is distributed equally to the widths of each child. In other words, each child will have the same width, and their sum is equal to the total width of the container.

The Basics

Create a LayoutGroup container, add it to the display list, and then add a few children to the container.

var container = new LayoutGroup();
this.addChild(container);

var child1 = new Button();
child1.text = "One";
container.addChild(child1);

var child2 = new Button();
child2.text = "Two";
container.addChild(child2);

var child3 = new Button();
child3.text = "Three";
container.addChild(child3);

Set the container's layout property to a new HorizontalDistributedLayout instance.

container.layout = new HorizontalDistributedLayout();

By default, the first child will be positioned in the top-left corner. Each additional child will be positioned to the right of the previous child — creating a single, horizontal row.

The following sections will introduce a number of properties that may be used to adjust the positioning and sizing of children in the layout.

Spacing

The padding is the space around the edges of the container that will contain no children. Padding may be added on each side, including top, right, bottom, and left.

layout.paddingTop = 10.0;
layout.paddingRight = 15.0;
layout.paddingBottom = 10.0;
layout.paddingLeft = 15.0;

The gap refers to the space, measured in pixels, between each child in the container.

layout.gap = 5.0;

Related Links

  • feathers.layout.HorizontalDistributedLayout API Documentation
Last updated on 4/27/2020
← HorizontalListLayoutResponsiveGridLayout →
  • The Basics
    • Spacing
  • Related Links
Feathers UI
Feathers UI
  • Downloads
  • Showcase
  • Testimonials
  • Join Github Sponsors
  • Make a Donation
Haxe / OpenFL
  • Documentation
  • API Reference
  • Samples
  • GitHub
  • Issue Tracker
ActionScript / Starling
  • Documentation
  • API Reference
  • Samples
  • GitHub
  • Issue Tracker
Feathers SDK (Starling)
  • Documentation
  • GitHub
Community
  • Forum
  • Discord
  • Stack Overflow
News & Updates
  • Blog (RSS, Atom)
  • Twitter
Copyright © 2021 Bowler Hat LLC — Illustrations by unDraw.