wxWidgets   レイアウト

ホーム   C/C++チュートリアル

レイアウト


GUI プログラミングにおいて、GUI パーツ(GUI 部品)のレイアウト(layout、配置)は大事な事項です。
wxWidgets は、フレーム(ウィンドウのこと)やパネル(panel)と呼ばれるものに GUI パーツ(GUI 部品)を配置することができますが、より柔軟に配置するために、サイザー(sizer)と呼ばれるものを併用します。なお、wxWidgets では GUI パーツ(GUI 部品)のことを ウィジェット(widget)と呼びます。

フレーム


フレーム(Frame)は、ウィンドウのことです。フレームには一つのウィジェットしか配置できません。またフレームに配置されたウィジェットは、フレーム一杯に広がることになります。


frame.cpp

#include <wx/wx.h>

class Frame : public wxFrame
{
public:
    Frame();
};

class App : public wxApp
{
public:
    virtual bool OnInit();
};

Frame::Frame() : wxFrame(NULL, -1, "Frame")
{
    wxButton *button = new wxButton(this, -1, "Button");
    Center();
}

IMPLEMENT_APP(App)

bool App::OnInit()
{
    Frame *frame = new Frame();
    frame->Show();
    return true;
}
	


実行結果

Windows
macOS

macOS のボタンは、縦には拡大しません

パネル


パネル(panel)と呼ばれるものを使うと複数のウィジェットを配置することができます。パネルに配置されたウィジェットの位置は絶対的なものになります。


panel.cpp


#include <wx/wx.h>

class Panel : public wxFrame
{
public:
    Panel();
};

class App : public wxApp
{
public:
    virtual bool OnInit();
};

Panel::Panel() : wxFrame(NULL, -1, "Panel")
{
    wxPanel *panel = new wxPanel(this);
    new wxButton(panel, -1, "Button 1", wxPoint(20, 20));
    new wxButton(panel, -1, "Button 2", wxPoint(60, 60));
    new wxButton(panel, -1, "Button 3", wxPoint(100, 100));
}

IMPLEMENT_APP(App)

bool App::OnInit()
{
    Panel *panel = new Panel();
    panel->Show();
    return true;
}
    


実行結果


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

ボックスサイザー


ボックスサイザー(BoxSizer)というものを使うと、ウィンドウの大きさに合わせて、ウィジェットの配置位置を調整する柔軟なレイアウトができるようになります。


boxsizer.cpp


#include <wx/wx.h>

class BoxSizer : public wxFrame
{
public:
    BoxSizer();
};

class App : public wxApp
{
public:
    virtual bool OnInit();
};

BoxSizer::BoxSizer() : wxFrame(NULL, -1, "BoxSizer")
{
    wxBoxSizer *hbox   = new wxBoxSizer(wxHORIZONTAL);
    wxBoxSizer *vbox   = new wxBoxSizer(wxVERTICAL);
    SetSizer(vbox);
    wxButton   *button = new wxButton(this, -1, "Button");
    hbox->Add(button, 0, wxALIGN_CENTER);
    vbox->Add(hbox,   1, wxALIGN_CENTER);
}

IMPLEMENT_APP(App)

bool App::OnInit()
{
    BoxSizer *boxsizer = new BoxSizer();
    boxsizer->Show();
    return true;
}
    



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


buttons.cpp


#include <wx/wx.h>

class Buttons : public wxFrame
{
public:
    Buttons();
};

class App : public wxApp
{
public:
    virtual bool OnInit();
};

Buttons::Buttons() : wxFrame(NULL, -1, "Buttons")
{
    wxPanel    *panel	 = new wxPanel(this, -1);
    wxBoxSizer *vbox	 = new wxBoxSizer(wxVERTICAL);
    wxBoxSizer *hbox	 = new wxBoxSizer(wxHORIZONTAL);
    wxTextCtrl *textctrl = new wxTextCtrl(panel, -1, "", wxPoint(-1, -1), wxSize(-1, -1), wxTE_MULTILINE);
    wxButton   *ok		 = new wxButton(panel, -1, "Ok");
    wxButton   *cancel	 = new wxButton(panel, -1, "Cancel");
    
    vbox->Add(textctrl, 1, wxEXPAND | wxALL, 5);
    hbox->Add(ok);
    hbox->Add(cancel, 0, wxLEFT, 5);
    vbox->Add(hbox, 0, wxALIGN_RIGHT | wxRIGHT | wxBOTTOM, 5);
    
    panel->SetSizer(vbox);
}

IMPLEMENT_APP(App)

bool App::OnInit()
{
    Buttons *buttons = new Buttons();
    buttons->Show();
    return true;
}
    



ウィンドウの大きさをいろいろと変えてみて、レイアウトがどうなるか見てください。アプリケーションを終了するには、ウィンドウを閉じてください。
macOSの場合は、パネルと組み合わせることによって、パネルの部分をクリックして、テキストコントロールのフォーカスを消すことができます。


application.cpp


#include <wx/wx.h>

class Application : public wxFrame
{
public:
    Application();
};

class App : public wxApp
{
public:
    virtual bool OnInit();
};

Application::Application() : wxFrame(NULL, -1, "Application", wxPoint(-1, -1), wxSize(450, 400))
{
    wxPanel    *panel = new wxPanel(this, -1);
    wxBoxSizer *vbox  = new wxBoxSizer(wxVERTICAL);
    
    wxBoxSizer *hbox1 = new wxBoxSizer(wxHORIZONTAL);
    wxStaticText *st1 = new wxStaticText(panel, -1, "StaticText");
    hbox1->Add(st1, 0, wxRIGHT, 8);
    wxTextCtrl *tc    = new wxTextCtrl(panel, -1);
    hbox1->Add(tc, 1);
    vbox->Add(hbox1, 0, wxEXPAND | wxLEFT | wxRIGHT | wxTOP, 10);
    
    vbox->Add(-1, 10);
    
    wxBoxSizer *hbox2 = new wxBoxSizer(wxHORIZONTAL);
    wxStaticText *st2 = new wxStaticText(panel, -1, "StaticText");
    hbox2->Add(st2, 0);
    vbox->Add(hbox2, 0, wxLEFT | wxTOP, 10);
    
    vbox->Add(-1, 10);
    
    wxBoxSizer *hbox3 = new wxBoxSizer(wxHORIZONTAL);
    wxTextCtrl *tc2   = new wxTextCtrl(panel, -1, "", wxPoint(-1, -1), wxSize(-1, -1), wxTE_MULTILINE);
    hbox3->Add(tc2, 1, wxEXPAND);
    vbox->Add(hbox3, 1, wxLEFT | wxRIGHT | wxEXPAND, 10);
    
    vbox->Add(-1, 25);
    
    wxBoxSizer *hbox4 = new wxBoxSizer(wxHORIZONTAL);
    wxCheckBox *cb1   = new wxCheckBox(panel, -1, "CheckBox");
    hbox4->Add(cb1);
    wxCheckBox *cb2   = new wxCheckBox(panel, -1, "CheckBox");
    hbox4->Add(cb2, 0, wxLEFT, 10);
    wxCheckBox *cb3   = new wxCheckBox(panel, -1, "CheckBox");
    hbox4->Add(cb3, 0, wxLEFT, 10);
    vbox->Add(hbox4, 0, wxLEFT, 10);
    
    vbox->Add(-1, 25);
    
    wxBoxSizer *hbox5 = new wxBoxSizer(wxHORIZONTAL);
    wxButton   *btn1  = new wxButton(panel, -1, "Button");
    hbox5->Add(btn1, 0);
    wxButton   *btn2  = new wxButton(panel, -1, "Button");
    hbox5->Add(btn2, 0, wxLEFT | wxBOTTOM, 5);
    vbox->Add(hbox5, 0, wxALIGN_RIGHT | wxRIGHT, 10);
    
    panel->SetSizer(vbox);
}

IMPLEMENT_APP(App)

bool App::OnInit()
{
    Application *application = new Application();
    application->Show();
    return true;
}
	



ウィンドウの大きさをいろいろと変えてみて、レイアウトがどうなるか見てください。アプリケーションを終了するには、ウィンドウを閉じてください。
またパネルを使うことによって、タブキーでウィジェット間を移動できるようになります。

フレックスグリッドサイザー


flexgridsizer.cpp


#include <wx/wx.h>

class FlexGridSizer : public wxFrame
{
public:
    FlexGridSizer();
};

class App : public wxApp
{
public:
    virtual bool OnInit();
};

FlexGridSizer::FlexGridSizer() : wxFrame(NULL, -1, "FlexGridSizer")
{
    wxPanel *panel = new wxPanel(this, -1);
    wxBoxSizer *hbox = new wxBoxSizer(wxHORIZONTAL);
    wxFlexGridSizer *fgs = new wxFlexGridSizer(3, 2, 9, 25);
    
    wxStaticText *title  = new wxStaticText(panel, -1, "Title");
    wxStaticText *author = new wxStaticText(panel, -1, "Authjor");
    wxStaticText *review = new wxStaticText(panel, -1, "Review");
    
    wxTextCtrl   *tc1    = new wxTextCtrl(panel, -1);
    wxTextCtrl   *tc2    = new wxTextCtrl(panel, -1);
    wxTextCtrl   *tc3    = new wxTextCtrl(panel, -1, "", wxPoint(-1, -1), wxSize(-1, -1), wxTE_MULTILINE);
    
    fgs->Add(title);
    fgs->Add(tc1, 1, wxEXPAND);
    fgs->Add(author);
    fgs->Add(tc2, 1, wxEXPAND);
    fgs->Add(review, 1, wxEXPAND);
    fgs->Add(tc3, 1, wxEXPAND);
    
    fgs->AddGrowableCol(1, 1);
    fgs->AddGrowableRow(2, 1);
    
    hbox->Add(fgs, 1, wxALL | wxEXPAND, 15);
    panel->SetSizer(hbox);
}

IMPLEMENT_APP(App)

bool App::OnInit()
{
    FlexGridSizer *fgs = new FlexGridSizer();
    fgs->Show();
    return true;
}
	




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


191 visits
Posted: Nov. 25, 2019
Update: Nov. 26, 2019

ホーム   C/C++チュートリアル   目次