魅惑の Qyoto (2) - Layout

Qyoto (Qt) でウィジェットを配置するには、Hello Wold! で紹介したサンプルのように絶対座標を指定する方法の他に、レイアウトマネージャを使う方法があります。レイアウトには「ボックスレイアウト」「グリッドレイアウト」「フォームレイアウト」そして「スタックトレイアウト」の四種類がありますが、その内最初の 2 つを使ってウィジェットを配置するサンプルを紹介します。

ここでは二種類のサンプルを紹介しますが、どちらもベタなコーディングで申し訳ありません（もう少し繰り返しを無くしたすっきりしたコーディングにしたいのですが、できていません）。

Fedora 20 における Mono / Qyoto の開発環境の主要なパッケージは、前回と同じく以下の通りです。

• mono-core-3.4.0-2.fc20.x86_64
• qt-4.8.6-5.fc20.x86_64
• qyoto-4.12.5-1.fc20.x86_64
• qyoto-devel-4.12.5-1.fc20.x86_64

ボックスレイアウト

縦方向 (QVBoxLayout) あるいは横方向 (QHBoxLayout) にウィジェットを配置するレイアウトマネージャです。レイアウトマネージャを組み合わせて、縦横にウィジェットを配置することができます。

参考サイト 1. に掲載されているサンプルをベースにしたボックスレイアウトのサンプルを示します。

List: boxlayout.cs

using System;
using Qyoto;

/**
 * ZetCode Qyoto C# tutorial
 *
 * In this program, use box layouts
 * to position two buttons in the
 * bottom right corner of the window.
 *
 * @author Jan Bodnar
 * website zetcode.com
 * last modified October 2012
 *
 * modified by Fuhito Suguri
 * last modified 14-May-2014
 */

public class QyotoApp : QWidget 
{
    public QyotoApp() 
    {
        WindowTitle = "BoxLayout";

        InitUI();

        Move(300, 300);
        Show();
    }

    void InitUI() 
    {    
        QPushButton but_1 = new QPushButton("１", this);
        QPushButton but_2 = new QPushButton("２", this);
        QPushButton but_3 = new QPushButton("３", this);
        QPushButton but_4 = new QPushButton("４", this);
        QPushButton but_5 = new QPushButton("５", this);

        but_1.SetSizePolicy(QSizePolicy.Policy.Expanding, QSizePolicy.Policy.Expanding);
        but_2.SetSizePolicy(QSizePolicy.Policy.Expanding, QSizePolicy.Policy.Expanding);
        but_3.SetSizePolicy(QSizePolicy.Policy.Expanding, QSizePolicy.Policy.Expanding);
        but_4.SetSizePolicy(QSizePolicy.Policy.Expanding, QSizePolicy.Policy.Expanding);
        but_5.SetSizePolicy(QSizePolicy.Policy.Expanding, QSizePolicy.Policy.Expanding);

        QVBoxLayout vbox = new QVBoxLayout(this);
        QHBoxLayout hbox1 = new QHBoxLayout();
        QHBoxLayout hbox2 = new QHBoxLayout();

        hbox1.AddWidget(but_1);
        hbox1.AddWidget(but_2);
        hbox1.AddWidget(but_3);

        hbox2.AddWidget(but_4);
        hbox2.AddWidget(but_5);

        vbox.AddLayout(hbox1);
        vbox.AddLayout(hbox2);
    }

    [STAThread]
    public static int Main(String[] args) 
    {
        new QApplication(args);
        new QyotoApp();
        return QApplication.Exec();
    }
}

コンパイルおよび実行例を以下に示します。

$ mcs boxlayout.cs -pkg:qyoto
$ mono boxlayout.exe

グリッドレイアウト

QGridLayout は、格子状にウィジェットを配置するレイアウトマネージャです。

次に、同じく参考サイト 1. に掲載されているサンプルをベースにした QGridLayout のサンプルを示します。

List: gridlayout.cs

using System;
using Qyoto;

/**
 * ZetCode Qyoto C# tutorial
 *
 * In this program, use the QGridLayout manager
 * to create a New Folder example.
 *
 * @author Jan Bodnar
 * website zetcode.com
 * last modified October 2012
 *
 * modified by Fuhito Suguri
 * last modified 14-May-2014
 */

public class QyotoApp : QWidget 
{
    public QyotoApp() 
    {
        WindowTitle = "GridLayout";

        InitUI();

        Move(300, 300);
        Show();
    }

    void InitUI() 
    {
        QGridLayout grid = new QGridLayout(this);

        QPushButton but_1 = new QPushButton("１", this);
        QPushButton but_2 = new QPushButton("２", this);
        QPushButton but_3 = new QPushButton("３", this);
        QPushButton but_4 = new QPushButton("４", this);
        QPushButton but_5 = new QPushButton("５", this);

        but_1.SetSizePolicy(QSizePolicy.Policy.Expanding, QSizePolicy.Policy.Expanding);
        but_2.SetSizePolicy(QSizePolicy.Policy.Expanding, QSizePolicy.Policy.Expanding);
        but_3.SetSizePolicy(QSizePolicy.Policy.Expanding, QSizePolicy.Policy.Expanding);
        but_4.SetSizePolicy(QSizePolicy.Policy.Expanding, QSizePolicy.Policy.Expanding);
        but_5.SetSizePolicy(QSizePolicy.Policy.Expanding, QSizePolicy.Policy.Expanding);

        grid.AddWidget(but_1, 0, 0);
        grid.AddWidget(but_2, 0, 1);
        grid.AddWidget(but_3, 0, 2);
        grid.AddWidget(but_4, 1, 0);
        grid.AddWidget(but_5, 1, 1, 1, 2);
    }

    [STAThread]
    public static int Main(String[] args) 
    {
        new QApplication(args);
        new QyotoApp();
        return QApplication.Exec();
    }
}

コンパイルおよび実行例を以下に示します。

$ mcs gridlayout.cs -pkg:qyoto
$ mono gridlayout.exe

参考サイト

1. C# Qyoto tutorial
2. Qyoto: Main Page - Qyoto Documentation