|
|
Hi,
on IRC we discussed Morphic layouts tonight and I thought I'd post an
example here. For many simple tasks ProportionalLayout works fine. In
it, for each edge of a morph you specify a fraction of the container's
extent as "anchor", plus an offset in pixels. The position of an edge
is then simply determined by
fraction * extent + offset
So fraction=0 offset=10 means 10 pixels inwards from the left or top
edge (as in the green and yellow morphs below), while fraction=1
offset=-10 means 10 pixels inward from the right or bottom edge (cyan
and blue morphs). Fraction=0.5 is the center, and you can add an
offset of course (right edge of magenta and left edge of cyan).
Select this in a workspace, do-it, and resize the resulting morph.
Then change one number, select and do-it again, and compare both.
===========================
bigMorph := Morph new color: Color red; extent: 200@200; layoutPolicy:
ProportionalLayout new.
greenMorph := Morph new color: Color green.
bigMorph addMorph: greenMorph fullFrame: (LayoutFrame
fractions: (Rectangle left: 0 right: 1 top: 0 bottom: 0)
offsets: (Rectangle left: 10 right: -10 top: 10 bottom: 30)).
yellowMorph := Morph new color: Color yellow.
bigMorph addMorph: yellowMorph fullFrame: (LayoutFrame
fractions: (Rectangle left: 0 right: 0 top: 0 bottom: 1)
offsets: (Rectangle left: 10 right: 50 top: 40 bottom: -40)).
cyanMorph := Morph new color: Color cyan.
bigMorph addMorph: cyanMorph fullFrame: (LayoutFrame
fractions: (Rectangle left: 0.5 right: 1 top: 0 bottom: 1)
offsets: (Rectangle left: 5 right: -10 top: 40 bottom: -40)).
magentaMorph := Morph new color: Color magenta.
bigMorph addMorph: magentaMorph fullFrame: (LayoutFrame
fractions: (Rectangle left: 0 right: 0.5 top: 0 bottom: 1)
offsets: (Rectangle left: 60 right: -5 top: 40 bottom: -40)).
blueMorph := Morph new.
bigMorph addMorph: blueMorph fullFrame: (LayoutFrame
fractions: (Rectangle left: 0 right: 1 top: 1 bottom: 1)
offsets: (Rectangle left: 10 right: -10 top: -30 bottom: -10)).
bigMorph openInHand
===========================
It"s much easier to see what happens using #left:right:top:bottom: to
make the layout frames than if you write it in the more common
#corner: notation (a mistake I made on IRC today).
HTH,
- Bert -
|
Locked
