View this PageEdit this PageAttachments to this PageHistory of this PageHomeRecent ChangesSearch the SwikiHelp Guide

funfunfun32

PREV ------ ● TOP ● ------ NEXTUploaded Image: fmrph.jpg


もうちょい!レイアウト

レイアウトでもうちょっといろいろな設定を試してみるでする。
はじめはいろいろありすぎて頭がこんがらがっちまうですが
まあ、ひとつづつゆっくりと理解していけば良いんじゃないすか!
ってなことで・・・・

■センタリングの設定

「並べる方向」のセンタリングからっす。
--------------------------------------------
rm _ RectangleMorph new.
rm extent: 200@100.
rm color: Color yellow.
rm borderWidth: 1.
rm layoutPolicy: TableLayout new.
rm listDirection: #leftToRight.
rm wrapDirection: #topToBottom.
rm listCentering: #center.
rm wrapCentering: #topToBottm.
i _ 20.
20 timesRepeat: [ r _ RectangleMorph new.
		r color: Color white.
		r extent: 20@15.
		r borderWidth: 1.
		r borderColor: Color red.
		s _ StringMorph new. 
		s contents: i asString.
		i _ i  - 1.
		r addMorph: s.
		rm addMorph: r ].
rm openInWorld
--------------------------------------------
Alt + d ( Cmd + d )

Uploaded Image: image13.jpg


Uploaded Image: image14.jpg



「折り返す方向」のセンタリング
--------------------------------------------
rm listCentering: #center.
rm wrapCentering: #center.
--------------------------------------------
Alt + d ( Cmd + d )

Uploaded Image: image15.jpg


Uploaded Image: image16.jpg



「並べる方向」に均等に並べるってやつやね。
--------------------------------------------
rm listCentering: #justified.
rm wrapCentering: #topToBottm.
--------------------------------------------
Alt + d ( Cmd + d )

Uploaded Image: image17.jpg


「19」と「20」がなるほどな結果となってます。
まあこうゆう時は透明なダミーのモーフとか入れるんでしょうね。

Uploaded Image: image18.jpg



「折り返す方向」も均等にしてみるっす。
--------------------------------------------
rm listCentering: #justified.
rm wrapCentering: #justified.
--------------------------------------------
Alt + d ( Cmd + d )

Uploaded Image: image19.jpg


Uploaded Image: image20.jpg



■リサイジングってやつね

配置されているサブモーフに合わせてオーナー(土台のモーフね)の
大きさを変えちゃえるです。

その前にあまりいろいろ設定しすぎると違いが良くわからんチンになるので
この2行を元の設定に戻してからね・・・。
--------------------------------------------
rm listCentering: #leftToRight.
rm wrapCentering: #topToBottm.
--------------------------------------------
Alt + d ( Cmd + d )

Uploaded Image: image21.jpg


はい元にもどったね。

Uploaded Image: image22.jpg



では「並べる方向」に「shrinkWrp」を設定しまする。
--------------------------------------------
rm _ RectangleMorph new.
rm extent: 200@100.
rm color: Color yellow.
rm borderWidth: 1.
rm layoutPolicy: TableLayout new.
rm listDirection: #leftToRight.
rm wrapDirection: #topToBottom.
rm listCentering: #leftToRight.
rm wrapCentering: #topToBottm.
rm hResizing: #shrinkWrap.
i _ 20.
20 timesRepeat: [ r _ RectangleMorph new.
		r color: Color white.
		r extent: 20@15.
		r borderWidth: 1.
		r borderColor: Color red.
		s _ StringMorph new. 
		s contents: i asString.
		i _ i  - 1.
		r addMorph: s.
		rm addMorph: r ].
rm openInWorld
--------------------------------------------
Alt + d ( Cmd + d )

Uploaded Image: image23.jpg



「並ぶ方向」(この場合は横方向)の余計な余白がなくなったね。

Uploaded Image: image25.jpg



「折り返す方向」にも「shrinkWrp」を設定しまする。
--------------------------------------------
rm _ RectangleMorph new.
rm extent: 200@100.
rm color: Color yellow.
rm borderWidth: 1.
rm layoutPolicy: TableLayout new.
rm listDirection: #leftToRight.
rm wrapDirection: #topToBottom.
rm listCentering: #leftToRight.
rm wrapCentering: #topToBottm.
rm hResizing: #shrinkWrap.	
rm vResizing: #shrinkWrap.
i _ 20.
20 timesRepeat: [ r _ RectangleMorph new.
		r color: Color white.
		r extent: 20@15.
		r borderWidth: 1.
		r borderColor: Color red.
		s _ StringMorph new. 
		s contents: i asString.
		i _ i  - 1.
		r addMorph: s.
		rm addMorph: r ].
rm openInWorld
--------------------------------------------
Alt + d ( Cmd + d )

Uploaded Image: image26.jpg


「折り返す方向」(この場合縦方向)の余白もなくなりましたです。

Uploaded Image: image27.jpg


実はリサイジングには「SpaceFill」ってのがあるんだけど、それはこの次のページでやるです。


■オーナーとサブモーフとの間隔(レイアウトインセット)

オーナーとの間隔をみるとサブモーフがくっついちゃってるじゃん?
サブモーフにもっとゆとりのあるレイアウトライフを送ってほしいって時にはこれだすね。
オーナーとサブモーフとの間隔を「10」に設定するです。
--------------------------------------------
rm _ RectangleMorph new.
rm extent: 200@100.
rm color: Color yellow.
rm borderWidth: 1.
rm layoutPolicy: TableLayout new.
rm listDirection: #leftToRight.
rm wrapDirection: #topToBottom.
rm listCentering: #leftToRight.
rm wrapCentering: #topToBottm.
rm hResizing: #shrinkWrap.	
rm vResizing: #shrinkWrap.	
rm layoutInset: 10.
i _ 20.
20 timesRepeat: [ r _ RectangleMorph new.
		r color: Color white.
		r extent: 20@15.
		r borderWidth: 1.
		r borderColor: Color red.
		s _ StringMorph new. 
		s contents: i asString.
		i _ i  - 1.
		r addMorph: s.
		rm addMorph: r ].
rm openInWorld
--------------------------------------------
Alt + d ( Cmd + d )

Uploaded Image: image28.jpg


ね!ゆとりが出て来たでしょ?

Uploaded Image: image29.jpg



■サブモーフ同士の間隔(セルインセット)

サブモーフ(セル)同士ももうちょっとゆとりの生活をさせたいときは
このセルインセットをつかうよろし。
セル同士の間隔を「5」に設定します。
--------------------------------------------
rm _ RectangleMorph new.
rm extent: 200@100.
rm color: Color yellow.
rm borderWidth: 1.
rm layoutPolicy: TableLayout new.
rm listDirection: #leftToRight.
rm wrapDirection: #topToBottom.
rm listCentering: #leftToRight.
rm wrapCentering: #topToBottm.
rm hResizing: #shrinkWrap.	
rm vResizing: #shrinkWrap.	
rm layoutInset: 10.
rm cellInset: 5.
i _ 20.
20 timesRepeat: [ r _ RectangleMorph new.
		r color: Color white.
		r extent: 20@15.
		r borderWidth: 1.
		r borderColor: Color red.
		s _ StringMorph new. 
		s contents: i asString.
		i _ i  - 1.
		r addMorph: s.
		rm addMorph: r ].
rm openInWorld
--------------------------------------------
Alt + d ( Cmd + d )

Uploaded Image: image30.jpg


これでサブモーフ同士にきょりが出来てよいコミュニケーション関係になることでしょう。
(う〜ん、なんか主旨がずれてきてるな・・・・)

Uploaded Image: image31.jpg


だいたい、こんな感じじゃないでしょか?

Uploaded Image: image32.jpg


PREV ------ ● TOP ● ------ NEXT







■ MEMO ■

Sunday, 14 March 2004, 5:05:27 pm
最後の図はListを横方向、Wrapを縦方向と勘違いしてたときに作ったやつです。でもまあ「並ぶ方向」を左から右、「折り返す方向」を上から下ってことでみるといいか!と思って載せて置きました。--thoru

Links to this Page