Gtk+GladeでのWidgetを重ね合わせる方法 - Elsaの技術日記(徒然なるままに)

今回はWidgetを重畳させるための方法についてまとめたいと思います。

前回まででGtk + GladeでGUIの方法をまとめてました。
elsammit-beginnerblg.hatenablog.com
elsammit-beginnerblg.hatenablog.com

どうやってWidgetを重ねて表示すればよいか分からず困っていたんですよね。。。
やっと分かったので忘れないようにまとめておきたいと思います！！

■前提条件
■Gladeを用いたWidget重ね合わせ方法
■Gladeを用いたWidget重ね合わせ方法～実際にコード書く～
■コードを実行してみる
■最後に

■前提条件

gladeとGtkがインストールされていることを条件とします。

結論！！
Gladeを使えば簡単でした！！

まずはGladeを立ち上げます。
Gladeはこちらのコマンドを利用すれば立ち上がります。

glade

立ち上がった後、WindowとGridもしくはBoxを配置します。
GridやBoxは2つ以上空欄が空くように用意してください。
そして、Imageなどの画像表示用のWidgetを設置します。
こんな感じになるかと思います。
f:id:Elsammit:20210202222334p:plain

では、実際にWidgetを重ね合わせていきます！！

Overlay Widgetを配置します。
Overlayはこちらの通り、コンテナーに入っております。
f:id:Elsammit:20210202222051p:plain

Overlay Widgetを先ほど設置したWidgetとは異なる空き領域にセットします。
f:id:Elsammit:20210202222826p:plain

その後、Overlay上にlabelなどをセットします。
今回はlabelをセットしました。
セットした結果はこんな感じです。
f:id:Elsammit:20210202223113p:plain

そして、、、
先ほどセットしたOverlayを選択の上、
プロパティで"パッキング"を選択。
始めにセットしたWidgetと同じ位置となるようにアタッチを移動させます。
今回は上下にWidgetを配置したので、上下方向のアタッチを動かします。
結果はこんな感じになります。
f:id:Elsammit:20210202223649p:plain

これでWidgetの重ね合わせは完了です！！

では先ほどGladeで作成したGUIを表示するためのコードを記載します。

と言ってもコードは今までご紹介した方法でOKです。
今回作成したコードはこんな感じになりました。

test.cppファイル

#include <gtkmm.h>
#include "test.h"

MainWin *mainWin = nullptr;

MainWin::MainWin(BaseObjectType* cobject, const Glib::RefPtr<Gtk::Builder>& refGlade) :
    Gtk::Window(cobject), builder(refGlade) {
    this->builder->get_widget("TestLabel", this->TestLabel);
    this->builder->get_widget("TestImg", this->TestImg);
    this->TestLabel->override_color(Gdk::RGBA("white"), Gtk::STATE_FLAG_NORMAL);
    this->TestImg->set("./lena.jpg");
}

MainWin::~MainWin(){

}

int main(int argc, char** argv) {
    Gtk::Main app(argc, argv);

	Glib::RefPtr<Gtk::Builder> builder = Gtk::Builder::create_from_file("MainWIndow5.glade"); 

	builder->get_widget_derived("TestWindow",mainWin); 
    Gtk::Main::run(*mainWin);
}

test.h

class MainWin : public Gtk::Window {
    Gtk::Window TestWindow;
    Gtk::Label *TestLabel;
    Gtk::Image *TestImg;
    Glib::RefPtr<Gtk::Builder> builder;

public:
    int test = 0;
    MainWin(BaseObjectType* cobject, const Glib::RefPtr<Gtk::Builder>& refGlade);
    virtual ~MainWin();
};

Widget名ですがそれぞれこちらのようにしました。
Window：TestWindow
Label：TestLabel
Image：TestImg