Go-GTK   レイアウト

ホーム   Goチュートリアル


レイアウト


GTK では、GUI パーツのことをウィジェット(widget)と呼びます。 GUI アプリケーション・フレームワークにとって、ウィジェットをどのようにしてレイアウトするかは大事なことです。

GTK では、コンテナー(container)と呼ばれるもので、ウィジェットをレイアウトします。コンテナーも、またウィジェットで、コンテナー・ウィジェットと呼ばれることもあります。

コンテナーは、内部にウィジェットを配置できるウィジェットです。 GTK には、Fixed、Alignment、Box、Table というコンテナーが用意されています。これらのコンテナーは目には見えません。

Fixed

Fixed は、内部に配置するウィジェットの位置を、x 座標とy 座標をピクセル単位で指定して配置します。

fixed.go


package main

import (
	"github.com/mattn/go-gtk/gtk"
	"os"
)

func main() {
	gtk	.  Init(&os.Args)
	window	:= gtk.NewWindow(gtk.WINDOW_TOPLEVEL)
	window	.  SetTitle("Fixed")
	window	.  Connect("destroy", gtk.MainQuit)
	
	fixed	:= gtk.NewFixed()
	window	.  Add(fixed)
	
	button1	:= gtk.NewButtonWithLabel("button 1")
	fixed	.  Put(button1, 150, 50)
	button1	.  SetSizeRequest(80,28)
	
	button2	:= gtk.NewButtonWithLabel("button 2")
	fixed	.  Put(button2, 15, 15)
	button2	.  SetSizeRequest(80,28)
	
	button3	:= gtk.NewButtonWithLabel("button 3")
	fixed	.  Put(button3, 100, 100)
	button3	.  SetSizeRequest(80,28)
	
	window	.  ShowAll()
	window	.  SetSizeRequest(400, 250)
	gtk	.  Main()
}
    


実行方法

ターミナルで、panel.go を保存したディレクトリに移動して、次のコードを実行してください。


go run fixed.go
    


実行結果


ウィンドウの大きさをいろいろ変えてみて、レイアウトがどうなるか見てください。アプリケーションを終了するには、ウィンドウを閉じてください。

アプリケーションの挙動がおかしい場合は、アプリケーションを次の方法でコンパイルしてください。


go build fixed.go
	

ディレクトリ内に、fixed という実行ファイルが出来上がりますので、ダブルクリックで起動してください。


Alignment

Alignment は内部に配置するウィジェットを、コンテナー内の左か右か、上か下かを指定して配置します。左右に拡大することも、上下に拡大することもできます。

alignment.go


package main

import (
	"github.com/mattn/go-gtk/gtk"
	"os"
)

func main() {
	gtk	.  Init(&os.Args)
	window	:= gtk.NewWindow(gtk.WINDOW_TOPLEVEL)
	window	.  SetTitle("Alignment")
	window	.  Connect("destroy", gtk.MainQuit)
	
	align	:= gtk.NewAlignment(0.5, 0.5, 0.5, 0.5)
	button:= gtk.NewButtonWithLabel("button")
	
	align	.  Add(button)
	window	.  Add(align)
	
	
	
	window	.  ShowAll()
	window	.  SetSizeRequest(400, 250)
	gtk	.  Main()
}
    


実行方法

ターミナルで、alignment.go を保存したディレクトリに移動して、次のコードで実行してください。


go run alignment.go
	


実行結果


ウィンドウの大きさをいろいろと変えてみて、レイアウトがどうなるか見てください。 アプリケーションを終了するには、ウィンドウを閉じてください。


Box

Box コンテナーには、ウィジェットを縦に配置する VBox と、横に配置する HBox があります。

box.go


package main

import (
	"github.com/mattn/go-gtk/gtk"
	"os"
)

func main() {
	gtk	.  Init(&os.Args)
	window	:= gtk.NewWindow(gtk.WINDOW_TOPLEVEL)
	window	.  SetTitle("Box")
	window	.  SetPosition(gtk.WIN_POS_CENTER)
	window	.  SetBorderWidth(10)
	window	.  Connect("destroy", gtk.MainQuit)
	
	vbox	:= gtk.NewVBox(false, 5)
	
	valign	:= gtk.NewAlignment(0, 1, 0, 0)
	vbox	.  Add(valign)
	window	.  Add(vbox)
	
	hbox	:= gtk.NewHBox(true, 3)
	
	okBtn	:= gtk.NewButtonWithLabel("OK")
	okBtn	.  SetSizeRequest(80, 28)
	hbox	.  Add(okBtn)
	cancel	:= gtk.NewButtonWithLabel("Cancel")
	hbox	.  Add(cancel)
	
	halign	:= gtk.NewAlignment(1, 0, 0, 0)
	halign	.  Add(hbox)
	
	vbox	.  PackStart(halign, false, false, 0)

	window	.  ShowAll()
	window	.  SetSizeRequest(400, 250)
	gtk	.  Main()
}
	


実行方法

ターミナルで、box.go を保存したディレクトリに移動して、次のコードで実行してください。


go run box.go
	


実行結果


ウィンドウの大きさをいろいろと変えてみて、レイアウトがどうなるか見てください。アプリケーションを終了するには、ウィンドウを閉じてください。


Table

Table コンテナーは、内部に配置するウィジェットを、行と列を指定して、マス目状に配置します。

table.go


package main

import (
	"github.com/mattn/go-gtk/gtk"
	"os"
)

func main() {
	gtk	.  Init(&os.Args)
	window	:= gtk.NewWindow(gtk.WINDOW_TOPLEVEL)
	window	.  SetTitle("Table")
	window	.  Connect("destroy", gtk.MainQuit)
	window	.  SetBorderWidth(10)
	
	table	:= gtk.NewTable(3, 2, false)
	window	.  Add(table)
	
	label1	:= gtk.NewLabel("Title")
	align1	:= gtk.NewAlignment(0, 0, 0, 0)
	align1	.  Add(label1)
	
	label2	:= gtk.NewLabel("Author")
	align2	:= gtk.NewAlignment(0, 0, 0, 0)
	align2	.  Add(label2)
	
	label3	:= gtk.NewLabel("Review")
	align3	:= gtk.NewAlignment(0, 0, 0, 0)
	align3	.  Add(label3)
	
	table	.  Attach(align1, 0, 1, 0, 1, gtk.FILL, gtk.FILL, 5, 5)
	table	.  Attach(align2, 0, 1, 1, 2, gtk.FILL, gtk.FILL, 5, 5)
	table	.  Attach(align3, 0, 1, 2, 3, gtk.FILL, gtk.FILL, 5, 5)
	
	entry1:= gtk.NewEntry()
	entry2	:= gtk.NewEntry()
	
	tview	:= gtk.NewTextView()
	frame	:= gtk.NewFrame("")
	frame	.  Add(tview)
	swin	:= gtk.NewScrolledWindow(nil, nil)
	swin	.  SetPolicy(gtk.POLICY_AUTOMATIC, gtk.POLICY_AUTOMATIC)
	swin	.  AddWithViewPort(frame)
	
	table	.  Attach(entry1, 1, 2, 0, 1, gtk.EXPAND|gtk.FILL, gtk.FILL, 5, 5)
	table	.  Attach(entry2, 1, 2, 1, 2, gtk.EXPAND|gtk.FILL, gtk.FILL, 5, 5)
	table	.  Attach(swin  , 1, 2, 2, 3, gtk.EXPAND|gtk.FILL, gtk.EXPAND|gtk.FILL, 5, 5)
	
	window	.  ShowAll()
	window	.  SetSizeRequest(400, 250)
	gtk	.  Main()
}
	


実行方法

ターミナルで、table.go を保存したディレクトリに移動して、次のコードで実行してください。


go run table.go
	


実行結果


ウィンドウの大きさをいろいろと変えてみて、レイアウトがどうなるか見てください。アプリケーションを終了するには、ウィンドウを閉じてください。



135 visits
Posted: Jul. 27, 2019
Update: Jul. 28, 2019

ホーム   Goチュートリアル   目次