213 lines
6 KiB
Text
213 lines
6 KiB
Text
class:: FlowLayout
|
|
summary:: A view decorator which autowraps the view contents
|
|
categories:: GUI>Layout
|
|
related:: Classes/SCContainerView, Classes/CompositeView
|
|
|
|
description::
|
|
FlowLayout is a decorator which automatically arranges views inside a container view in a row, and starts a new row if there is not enough space left for the next view. link::Classes/Window:: and link::Classes/CompositeView:: both have code::addFlowLayout:: methods which assign FlowLayout to their view decorators and return the decorator.
|
|
|
|
classmethods::
|
|
|
|
method:: new
|
|
argument:: bounds
|
|
An instance of link::Classes/Rect::. Normally set to the code::parent.bounds::.
|
|
argument:: margin
|
|
An instance of link::Classes/Point::. The horizontal and vertical inner margins, within which the parent's subviews are placed.
|
|
argument:: gap
|
|
An instance of link::Classes/Point::. The horizontal and vertical layout gap between the subviews.
|
|
|
|
discussion::
|
|
Example:
|
|
code::
|
|
(
|
|
w = Window.new.front;
|
|
//change the gaps and margins to see how they work
|
|
w.view.decorator = FlowLayout( w.view.bounds, 10@10, 20@5 );
|
|
16.do{ Slider2D( w.view,80@80 ).background_( Color.rand ) };
|
|
)
|
|
::
|
|
You can also write:
|
|
code::
|
|
(
|
|
w = Window.new.front;
|
|
w.addFlowLayout( 10@10, 20@5 ); // a shortcut method, see SCContainerView
|
|
16.do{ Slider2D( w.view,80@80 ).background_( Color.rand ) };
|
|
)
|
|
::
|
|
|
|
instancemethods::
|
|
|
|
subsection:: Accessing Instance Variables
|
|
|
|
method:: nextLine
|
|
Forces the decorator to start a new line:
|
|
code::
|
|
(
|
|
w = Window.new;
|
|
q = w.addFlowLayout( 10@10, 20@5 );
|
|
Slider2D( w.view,140@140 ).background_( Color.rand );
|
|
q.nextLine;
|
|
Slider2D( w.view,140@140 ).background_( Color.rand );
|
|
w.front;
|
|
)
|
|
::
|
|
|
|
method:: indentedRemaining
|
|
Returns and instance of link::Classes/Rect::. This is a very useful method which tells you how much space is left in a row, before the next row starts. The height of code::indentedRemaining::, is the full height remaining in the FlowLayout.
|
|
code::
|
|
(
|
|
//normally you will only use the width of indentedRemaining
|
|
w = Window.new;
|
|
w.view.decorator = d = FlowLayout.new( w.view.bounds, 10@10, 20@5 );
|
|
Slider2D( w.view,150@150 ).background_( Color.rand );
|
|
Slider2D( w.view,150@150 ).background_( Color.rand );
|
|
Slider( w.view, d.indentedRemaining.width@150) //fits this view perfectly to the right innerBounds
|
|
.background_( Color.rand );
|
|
w.front;
|
|
)
|
|
::
|
|
Compare this with:
|
|
code::
|
|
( //here the third view is fit to both the right and bottom innerBounds
|
|
w = Window.new;
|
|
w.view.decorator = d = FlowLayout.new( w.view.bounds, 10@10, 20@5 );
|
|
Slider2D( w.view,140@140 ).background_( Color.rand );
|
|
Slider2D( w.view,140@140 ).background_( Color.rand );
|
|
d.nextLine;
|
|
Slider2D( w.view, d.indentedRemaining ).background_( Color.rand );
|
|
w.front;
|
|
)
|
|
::
|
|
|
|
method:: bounds
|
|
The outer bounds in which the decorator places the subviews in the parent view.
|
|
argument:: b
|
|
An instance of link::Classes/Rect::.
|
|
|
|
method:: innerBounds
|
|
Returns the bounds inset by margin.
|
|
|
|
method:: gap
|
|
The horizontal and vertical layout gap between the subviews.
|
|
argument:: arg1
|
|
An instance of link::Classes/Point::.
|
|
|
|
method:: margin
|
|
The horizontal and vertical inner margins, within which the parent's subviews are placed.
|
|
argument:: arg1
|
|
An instance of link::Classes/Point::.
|
|
|
|
|
|
subsection:: Subclassing and Internal Methods
|
|
|
|
The following methods are usually not used directly or are called by a primitive. Programmers can still call or override these as needed.
|
|
|
|
method:: left
|
|
Get the current left indentation or manually set it.
|
|
argument:: arg1
|
|
A number.
|
|
discussion::
|
|
code::
|
|
(
|
|
w = Window.new;
|
|
w.view.decorator = d = FlowLayout.new( w.view.bounds, 10@10, 20@5 );
|
|
Slider2D( w.view,150@150 ).background_( Color.rand );
|
|
d.left_(220); //manually set the new indentation
|
|
Slider2D( w.view,150@150 ).background_( Color.rand );
|
|
w.front;
|
|
)
|
|
::
|
|
|
|
method:: top
|
|
Get the current top indentation or manually set it.
|
|
argument:: arg1
|
|
A number.
|
|
discussion::
|
|
code::
|
|
(
|
|
w = Window.new;
|
|
w.view.decorator = d = FlowLayout.new( w.view.bounds, 10@10, 20@5 );
|
|
Slider2D( w.view,150@150 ).background_( Color.rand );
|
|
d.top_(50); //manually set the new indentation
|
|
Slider2D( w.view,150@150 ).background_( Color.rand );
|
|
Slider2D( w.view,150@150 ).background_( Color.rand );
|
|
w.front;
|
|
)
|
|
::
|
|
|
|
method:: shift
|
|
Set the current left and top indentation (see above).
|
|
|
|
method:: maxHeight
|
|
Get/set maximium height of the subviews in the current position.
|
|
argument:: arg1
|
|
A number.
|
|
discussion::
|
|
code::
|
|
(
|
|
w = Window.new;
|
|
w.view.decorator = d = FlowLayout.new( w.view.bounds, 10@10, 20@5 );
|
|
Slider2D( w.view,100@160 ).background_( Color.rand );
|
|
Slider2D( w.view,150@150 ).background_( Color.rand );
|
|
"first row maxHeight: " ++ d.maxHeight.postln;
|
|
Slider2D( w.view,150@150 ).background_( Color.rand );
|
|
"second row maxHeight: " ++ d.maxHeight.postln;
|
|
w.front;
|
|
)
|
|
::
|
|
|
|
method:: maxRight
|
|
Get/set maximium right of the subviews in the current position.
|
|
argument:: arg1
|
|
A number.
|
|
discussion::
|
|
code::
|
|
(
|
|
w = Window.new;
|
|
w.view.decorator = d = FlowLayout.new( w.view.bounds, 10@10, 20@5 );
|
|
Slider2D( w.view,100@160 ).background_( Color.rand );
|
|
"first row maxRight: " ++ d.maxRight.postln;
|
|
Slider2D( w.view,150@150 ).background_( Color.rand );
|
|
Slider2D( w.view,150@150 ).background_( Color.rand );
|
|
"second row maxRight: " ++ d.maxRight.postln;
|
|
w.front;
|
|
)
|
|
::
|
|
|
|
method:: currentBounds
|
|
Gets a link::Classes/Rect:: with code::bounds.width:: and code::height = top + maxHeight::.
|
|
discussion::
|
|
code::
|
|
(
|
|
w = Window.new;
|
|
w.view.decorator = d = FlowLayout.new( w.view.bounds, 10@10, 10@5 );
|
|
Slider2D( w.view,100@160 ).background_( Color.rand );
|
|
d.currentBounds.postln;
|
|
Slider2D( w.view,150@150 ).background_( Color.rand );
|
|
d.currentBounds.postln;
|
|
Slider2D( w.view,150@150 ).background_( Color.rand );
|
|
d.currentBounds.postln;
|
|
w.front;
|
|
)
|
|
::
|
|
|
|
method:: used
|
|
Gets a link::Classes/Rect:: with the space actually used.
|
|
discussion::
|
|
code::
|
|
(
|
|
w = Window.new;
|
|
w.view.decorator = d = FlowLayout.new( w.view.bounds, 10@10, 20@5 );
|
|
Slider2D( w.view,100@160 ).background_( Color.rand );
|
|
d.used.postln;
|
|
Slider2D( w.view,150@150 ).background_( Color.rand );
|
|
d.used.postln;
|
|
Slider2D( w.view,150@150 ).background_( Color.rand );
|
|
d.used.postln;
|
|
w.front;
|
|
)
|
|
::
|
|
|
|
method:: reset
|
|
Resets the layout mechanism to 0,0.
|
|
|