go-uiでの画面レイアウト

こんにちは。scarvizです。

今回はgo-uiでの画面レイアウトについて色々試してみたので紹介します。

「(GOPATH)/src/github.com/visualfc/go-ui/examples」のサンプルとか、
「(GOPATH)/src/github.com/visualfc/go-ui/ui」のソースコードを参考にしました。






■今回作ったもの
画像を読み込んで表示するアプリを作ってみました。
ソースコードは下記に置いています。
https://bitbucket.org/scarviz/src/src/4a33b433a435/Go/20120907

いっぱいコメントつけているので、参考になれば幸いです。
もしかすると、次回以降に説明するかもしれないです。

1．まずは、初期画面は以下です。

テキストボックスと、ボタンを横並びに配置しています。
テキストボックスに画像のパス(フルパス)を入れて、「画像表示」ボタンを押下すると、次のようになります。

テキストボックスと、ボタンの下にGopherの画像が表示されていますね。

■レイアウトの説明
1．どうやって配置しているかというと、まず初期画面では、縦レイアウトの「VBoxLayout」をメインにして、その中に横レイアウトの「HBoxLayout」を配置しました。
そして、「HBoxLayout」の中にテキストボックスと、ボタンを配置すれば、横に並ぶ形になります。
以下のような感じです。

2．画像パスを入力してボタンを押下すると、縦レイアウトの「VBoxLauout」の中に画像を配置するようにしました。
なので、「HBoxLayout」と画像が縦に並ぶ形になります。
以下のような感じです。

3．こんな感じで組み合わせていくことで、自在に配置することが出来るんですね。
レイアウトの種類はたぶん下の5つになると思います。
他にもあったよ！っていう方は教えてください！

VBoxLayout　　　：　縦レイアウト
HBoxLayout　　　：　横レイアウト
StackedLayout　：　縦横最大表示
BoxLayout 　　　：　VBoxLayoutとHBoxLayoutのベース
baseLayout　　　：　レイアウトのベース

上の3つがレイアウトとして使って、下の2つはベースなので、go-uiのソースでこれらが出てきたら、設定したりして使える関数なんだなと推測できます。

4．今回作成したアプリのソースコードから、レイアウトの書き方を一部抜粋してみました。
レイアウトはmain_ui関数の中で扱っています。


// ウィジェット(C＃とかでいうフォーム)定義
w := ui.NewWidget()

// ウィジェットのレイアウト定義
// 縦レイアウト
vbox := ui.NewVBoxLayout()
// 横レイアウト
hbox := ui.NewHBoxLayout()

// ボタン定義
btn := ui.NewButton()

// 横レイアウトにボタンを加える
hbox.AddWidget(btn)

// 縦レイアウトに横レイアウトを設定する
vbox.AddLayout(hbox)

// 縦レイアウトをウィジェットに設定する
w.SetLayout(vbox)


ボタンとか、テキストボックスはAddWidget関数でレイアウトに設定して、レイアウトにレイアウトを入れ込むときは、AddLayout関数を使います。
そして、ウィジェットにレイアウトを設定するのは、SetLayout関数を使います。
配置場所はAddしていった順に、縦レイアウトなら上から下へ、横レイアウトなら左から右に配置されていきます。



細かい設定が分かんないところもあるんですが、とりあえずはレイアウトが出来たら、その中にボタンなどを入れていくだけなので、
それっぽいアプリが簡単に作れますね！

examplesにあるサンプルを見てみると、色んなコントロールを配置していたりします。
レイアウトを組み合わせて、それらのコントロールを配置していけば良さそうですね。

ちなみに、uiにあるuiobjs.goから各レイアウトとコントロールが確認できます。Eclipseのアウトラインを使えば楽に見れますよ。
※アウトラインは「ウィンドウ」→「ビューの表示」→「アウトライン」で表示されます。

Go言語の基本的な話とか、go-uiの説明とかすっ飛ばしていますが、何となく触れて動くのを体験するのも楽しいと思うので、ぜひ色々レイアウトを組み合わせてみてください！