ClutterLayout を使ってみる

昨日の拡大縮小は、今日のための布石です。今日は ClutterStage に ClutterLayout を指定して、 ClutterStage の大きさを変更した時に内部の ClutterActor が適宜整列してくれるようにします。
まずは C です。

#include <clutter/clutter.h>

#define MAX_ITEM 20

int
main (int argc, char *argv[])
{
	ClutterActor *stage;

	ClutterLayoutManager *layout;
	ClutterActor *items[MAX_ITEM];
	gint i;

	if (clutter_init (&argc, &argv) != CLUTTER_INIT_SUCCESS)
	{
		return 1;
	}

	stage = clutter_stage_new ();
	clutter_stage_set_user_resizable (CLUTTER_STAGE (stage), TRUE);
	g_signal_connect (stage, "destroy", G_CALLBACK (clutter_main_quit), NULL);

	layout = clutter_box_layout_new ();
	clutter_box_layout_set_orientation (CLUTTER_BOX_LAYOUT (layout), CLUTTER_ORIENTATION_VERTICAL);
	clutter_box_layout_set_homogeneous (CLUTTER_BOX_LAYOUT (layout), TRUE);
	clutter_actor_set_layout_manager (stage, layout);

	for (i = 0; i < MAX_ITEM; i++)
	{
		items[i] = clutter_text_new ();
		clutter_text_set_text (CLUTTER_TEXT (items[i]), g_strdup_printf ("Item %d", i));
		clutter_box_layout_pack (CLUTTER_BOX_LAYOUT (layout), items[i],
			TRUE, TRUE, TRUE, CLUTTER_BOX_ALIGNMENT_START, CLUTTER_BOX_ALIGNMENT_CENTER);
	}
	clutter_actor_show (stage);
	clutter_main ();

	return 0;
}

clutter_box_layout_new() でボックスタイプ(一列に整列)のClutterLayoutManagerを作成し、clutter_box_layout_set_orientation() で列の方向を指定し(今回は垂直方向)、clutter_box_layout_set_homogeneous() を TRUE にすることで、内部の ClutterActor の大きさを均一にします。
clutter_actor_set_layout_manager() で ClutterStage に ClutterLayoutManager を割り当てます。
それから、#define MAX_ITEM 20 個の ClutterText を clutter_box_layout_pack() で追加します。

起動したら、 satge の大きさを変更してください。今回は最小値を設けていないので、どもまででも小さくなります。

次は Gjs のサンプルです。

#! /usr/bin/env gjs
const Clutter = imports.gi.Clutter;

const MAX_ITEM = 20;

Clutter.init(null);
let stage = new Clutter.Stage();
stage.set_user_resizable(true);
stage.connect('destroy', Clutter.main_quit);

let layout = new Clutter.BoxLayout();
layout.set_orientation(Clutter.Orientation.VERTICAL);
layout.set_homogeneous(true);
stage.set_layout_manager(layout);

let items = new Array();
for (i = 0; i < MAX_ITEM; i++) {
	items[i] = new Clutter.Text();
	items[i].set_text("Item " + i);
	layout.pack(items[i], true, true, true, Clutter.BoxAlignment.START, Clutter.BoxAlignment.CENTER);
}

stage.show();
Clutter.main();

JavaScript なので、 let items = new Array(); しています。JavaScript ほうが可変なので楽ですね。