C++使用ImGUI框架開發(fā)一個簡單程序

更新時間：2023年08月16日 09:44:46 作者：二次元攻城獅

ImGui?是一個用于C++的用戶界面庫，跨平臺、無依賴，支持OpenGL、DirectX等多種渲染API，下面就跟隨小編一起學(xué)習(xí)一下如何使用ImGUI框架開發(fā)一個簡單程序吧

簡介

ImGui 是一個用于C++的用戶界面庫，跨平臺、無依賴，支持OpenGL、DirectX等多種渲染API，是一種即時UI（Immediate Mode User Interface）庫，保留模式與即時模式的區(qū)別參考保留模式與即時模式。ImGui渲染非?？?，但界面上有大量的數(shù)據(jù)集需要渲染可能會有一些問題，需要使用一些緩存技巧。緩存只是避免數(shù)據(jù)的更新邏輯耗時太久影響渲染，實(shí)際渲染過程不存在瓶頸。

本文最終實(shí)現(xiàn)的應(yīng)用效果如下：

使用示例

ImGui有master、docking兩個分支，鏈接如下：

主分支：https://github.com/ocornut/imgui/tree/master
docking分支：https://github.com/ocornut/imgui/tree/docking

推薦使用docking分支（支持窗口停靠），本文也是使用的docking分支，先把項目下載下來。

下載示例

從github下載示例，打開examples文件夾下的項目，有很多示例可以選：

我的電腦只有example_glfw_opengl和example_win32_directx兩個系列的示例能直接運(yùn)行起來，example_win32_directx的界面不知道為什么看起來很糊，所以只能選擇example_glfw_opengl3的示例來開始后續(xù)的內(nèi)容。

main文件

example_glfw_opengl3項目的源文件如下：

其中，main文件有很多有用的注釋和代碼片段，下面主要介紹主題、字體部分內(nèi)容。

設(shè)置ImGui風(fēng)格

ImGui提供Dark、Light、Classic三種風(fēng)格，示例中默認(rèn)使用Dark：

// Setup Dear ImGui style
ImGui::StyleColorsDark();
//ImGui::StyleColorsLight();
// Classic在示例注釋里面沒有提及，但源碼里面有對應(yīng)的函數(shù)
//ImGui::StyleColorsClassic();

Dark風(fēng)格：

Light風(fēng)格：

Classic 風(fēng)格：

自定義配色方案可參考上面設(shè)置風(fēng)格的函數(shù)實(shí)現(xiàn)，里面的顏色種類太多，后面會單獨(dú)寫一篇界面美化的文章。

設(shè)置字體

ImGui默認(rèn)字體說實(shí)話比較難看，我還是比較喜歡微軟雅黑：

//設(shè)置微軟雅黑字體,并指定字體大小
ImFont* font = io.Fonts->AddFontFromFileTTF
(
    "C:/Windows/Fonts/msyh.ttc",
    30,
    nullptr,
    //設(shè)置加載中文
    io.Fonts->GetGlyphRangesChineseFull()
);
//必須判斷一下字體有沒有加載成功
IM_ASSERT(font != nullptr);

注意一下，一定要使用GetGlyphRangesChineseFull()，使用GetGlyphRangesChineseSimplifiedCommon()的話會有部分中文加載不出來。上面加載字體有兩個問題：固定文件路徑、內(nèi)存占用過高，后面會單獨(dú)寫一篇關(guān)于字體的文章。

主循環(huán)

main函數(shù)的主循環(huán)類似其它界面框架的消息循環(huán)，里面有一些示例代碼需要刪除，簡化后的代碼大致如下：

while (!glfwWindowShouldClose(window))
{
    //一些注釋...
    glfwPollEvents();
    // Start the Dear ImGui frame
    ImGui_ImplOpenGL3_NewFrame();
    ImGui_ImplGlfw_NewFrame();
    ImGui::NewFrame();
    /*
    * 添加自己的代碼,App的實(shí)現(xiàn)見下面的代碼
    */
    App::RenderUI();
    // Rendering
    ImGui::Render();
    //一些代碼和注釋
    glfwSwapBuffers(window);
}

每幀的UI渲染都在App::RenderUI()函數(shù)里面執(zhí)行，具體實(shí)現(xiàn)參考下面的內(nèi)容。

添加Application類

實(shí)際項目中不可能把所有UI代碼放到Main函數(shù)里面，所以添加命名為Application的頭文件和源文件用來存放UI代碼。同時，創(chuàng)建一個App的命名空間并在Application.h中引入imgui.h頭文件，在源碼中添加一些示例。

頭文件內(nèi)容如下：

#pragma once
#include "imgui.h"
namespace App
{
    void RenderUI();
}

源碼文件如下：

#include "Application.h"
#include <iostream>
#include <string>
namespace App
{
    //選中結(jié)果
    bool isShowDrag=false;
    //字符串結(jié)果
    std::string text="";
    //拖拽值
    float fValue = 0.5f;
    void RenderUI()
    {
        //創(chuàng)建一個設(shè)置窗口
        ImGui::Begin("設(shè)置拖拽按鈕");
        //按鈕在單擊時返回true（大多數(shù)小部件在編輯/激活時返回true）
        if (ImGui::Button("按鈕"))
        {
            //單擊事件處理程序
        }
        //顯示一些文本（也可以使用字符串格式）
        ImGui::Text("這是一個中文字符串");
        // 緩沖區(qū)用于存儲文本輸入值
        char buffer[256] = ""; 
        ImGui::InputText("輸入框", buffer, sizeof(buffer));
        //編碼轉(zhuǎn)換
        std::string textU8 = buffer;
        ImGui::Checkbox("顯示拖拽", &isShowDrag);
        if (isShowDrag)
        {
            float value = 10.0f;
            ImGui::DragFloat(u8"值",&value);
        }
        //使用從0.0f到1.0f的滑塊編輯1個浮動
        ImGui::SliderFloat("float", &fValue, 0.0f, 1.0f);
        ImGui::SameLine();
        ImGui::Text("Value %f", fValue);
        ImGui::End();
    }
}

運(yùn)行結(jié)果如下：

中文編碼問題

在上述例子中，有一個關(guān)于中文字符串的問題需要注意。默認(rèn)情況下，VS使用ANSI編碼格式的字符串，因此ImGui會顯示為？？？？。

關(guān)于這個問題，網(wǎng)上提供了幾種解決方案：

在字符串前面添加u8前綴，例如：ImGui::Begin(u8"顯示中文");
將字符串轉(zhuǎn)換為UTF-8編碼格式后再傳入，例如：ImGui::Begin(string_to_utf8("顯示中文").c_str());
使用記事本將源碼文件另存為UTF-8格式（推薦使用），參考B站視頻：imgui 幫助 19

推薦使用第三種方法，它簡單快速。第一種方法實(shí)際上沒有作用，依然會顯示亂碼。第二種方法可能會導(dǎo)致部分代碼轉(zhuǎn)換為換行符，從而導(dǎo)致編譯錯誤。第三種方法只需修改文件的編碼格式，之后可以直接使用中文，無需添加u8前綴。

需要注意的是，將源碼文件另存為UTF-8格式只解決了顯示問題，并沒有解決中文輸入問題。文本框控件中的中文字符串值采用的是UTF-8格式。如果需要在代碼中打印或保存文本框的輸入值，需要將其轉(zhuǎn)換為ANSI編碼?？梢詤⒖糃++字符串編碼轉(zhuǎn)換進(jìn)行轉(zhuǎn)換。需要注意的是，使用標(biāo)準(zhǔn)庫版本的編碼轉(zhuǎn)換可能存在多線程bug。

界面設(shè)計

界面整體使用"左導(dǎo)航右內(nèi)容"布局，窗口標(biāo)題下面最多加一個菜單欄用來設(shè)置一下業(yè)務(wù)無關(guān)的邏輯（如界面主題、?？窟x項等），界面效果見文章開頭。下面會介紹怎么創(chuàng)建這樣一個界面，包括一些需要注意的問題。

關(guān)于imgui_demo.cpp

imgui_demo.cpp有8000多行代碼，里面有各種有用的示例代碼，下面需要樹控件和?？靠臻g的代碼都是從這里拷貝改造的?？梢韵日{(diào)用ImGui::ShowDemoWindow()查看示例顯示效果，并根據(jù)渲染的字符串到代碼里面進(jìn)行搜索，如搜索Basic trees、DockSpace等。

創(chuàng)建?？靠臻g

ImGui的docking分支雖然支持?？?，但需要使用者主動去創(chuàng)建才能使用。把ShowExampleAppDockSpace函數(shù)從imgui_demo.cpp復(fù)制到Application.cpp的RenderUI函數(shù)里面，稍微改造刪除一些代碼、注釋。代碼如下：

void RenderUI()
{
    //p_open不需要，改成nullptr
    bool* p_open = nullptr;
    static bool opt_fullscreen = true;
    static bool opt_padding = false;
    static ImGuiDockNodeFlags dockspace_flags = ImGuiDockNodeFlags_None;    ImGuiWindowFlags window_flags = ImGuiWindowFlags_MenuBar | ImGuiWindowFlags_NoDocking;
    if (opt_fullscreen)
    {
        const ImGuiViewport* viewport = ImGui::GetMainViewport();
        ImGui::SetNextWindowPos(viewport->WorkPos);
        ImGui::SetNextWindowSize(viewport->WorkSize);
        ImGui::SetNextWindowViewport(viewport->ID);
        ImGui::PushStyleVar(ImGuiStyleVar_WindowRounding, 0.0f);
        ImGui::PushStyleVar(ImGuiStyleVar_WindowBorderSize, 0.0f);
        window_flags |= ImGuiWindowFlags_NoTitleBar | ImGuiWindowFlags_NoCollapse | ImGuiWindowFlags_NoResize | ImGuiWindowFlags_NoMove;
        window_flags |= ImGuiWindowFlags_NoBringToFrontOnFocus | ImGuiWindowFlags_NoNavFocus;
    }
    else
    {
        dockspace_flags &= ~ImGuiDockNodeFlags_PassthruCentralNode;
    }    if (dockspace_flags & ImGuiDockNodeFlags_PassthruCentralNode)
        window_flags |= ImGuiWindowFlags_NoBackground;    if (!opt_padding)
        ImGui::PushStyleVar(ImGuiStyleVar_WindowPadding, ImVec2(0.0f, 0.0f));
    ImGui::Begin("DockSpace Demo", p_open, window_flags);
    if (!opt_padding)
        ImGui::PopStyleVar();    if (opt_fullscreen)
        ImGui::PopStyleVar(2);    // Submit the DockSpace
    ImGuiIO& io = ImGui::GetIO();
    if (io.ConfigFlags & ImGuiConfigFlags_DockingEnable)
    {
        ImGuiID dockspace_id = ImGui::GetID("MyDockSpace");
        ImGui::DockSpace(dockspace_id, ImVec2(0.0f, 0.0f), dockspace_flags);
    }
    else
    {
        //不關(guān)閉Docking
        //ShowDockingDisabledMessage();
    }    if (ImGui::BeginMenuBar())
    {
        //菜單做一些漢化
        if (ImGui::BeginMenu("選項（Options）"))
        {
            ImGui::MenuItem("全屏（Fullscreen）", NULL, &opt_fullscreen);
            ImGui::MenuItem("填充（Padding）", NULL, &opt_padding);
            ImGui::Separator();            if (ImGui::MenuItem("標(biāo)志：不分割（Flag: NoSplit）", "", (dockspace_flags & ImGuiDockNodeFlags_NoSplit) != 0)) { dockspace_flags ^=mGuiDockNodeFlags_NoSplit; }
            if (ImGui::MenuItem("標(biāo)志：不調(diào)整大?。‵lag: NoResize）", "", (dockspace_flags & ImGuiDockNodeFlags_NoResize) != 0)) { dockspace_flags ^=mGuiDockNodeFlags_NoResize; }
            if (ImGui::MenuItem("標(biāo)志：不停靠在中心節(jié)點(diǎn)（Flag: NoDockingInCentralNode）", "", (dockspace_flags & ImGuiDockNodeFlags_NoDockingInCentralNode) != 0)) {ockspace_flags ^= ImGuiDockNodeFlags_NoDockingInCentralNode; }
            if (ImGui::MenuItem("標(biāo)志：自動隱藏選項卡欄（Flag: AutoHideTabBar）", "", (dockspace_flags & ImGuiDockNodeFlags_AutoHideTabBar) != 0)) { dockspace_flags= ImGuiDockNodeFlags_AutoHideTabBar; }
            if (ImGui::MenuItem("標(biāo)志：中心節(jié)點(diǎn)篩選器（Flag: PassthruCentralNode）", "", (dockspace_flags & ImGuiDockNodeFlags_PassthruCentralNode) != 0,pt_fullscreen)) { dockspace_flags ^= ImGuiDockNodeFlags_PassthruCentralNode; }
            ImGui::Separator();
            //不關(guān)閉菜單
           /* if (ImGui::MenuItem("Close", NULL, false, p_open != NULL))
                *p_open = false;*/
            ImGui::EndMenu();
        }
        //增加主題切換
        if (ImGui::BeginMenu("主題（Other）"))
        {
            if (ImGui::MenuItem("暗黑（Dark）")) { ImGui::StyleColorsDark(); }
            if (ImGui::MenuItem("明亮（Light）")) { ImGui::StyleColorsLight(); }
            if (ImGui::MenuItem("經(jīng)典（Classic）")) { ImGui::StyleColorsClassic(); }
            ImGui::EndMenu();
        }
        //HelpMarker 不需要
        ImGui::EndMenuBar();
    }
    /**添加自己的窗口**/
    ShowTreeView();
    ShowMainView();
    ImGui::End();
}

創(chuàng)建頁面

先在Application.h文件中定義需要用到的一些函數(shù)：

#pragma once
#include "imgui.h"
namespace App
{
    //主UI函數(shù)，放?？靠臻g的代碼
    void RenderUI();
    //隱藏窗口的TabBar
    void HideTabBar();
    //導(dǎo)航頁面
    void ShowTreeView();
    //內(nèi)容頁面
    void ShowMainView();
    /*
    * 內(nèi)容頁面0-5
    */
    void ShowPageView0();
    void ShowPageView1();
    void ShowPageView2();
    void ShowPageView3();
    void ShowPageView4();
}

隱藏窗口標(biāo)簽欄

正常情況下窗口創(chuàng)建后會有一個標(biāo)簽欄，這個很影響界面外觀需要去掉，參考github上面的issues：以編程方式完成停靠和隱藏選項卡欄。沒次創(chuàng)建窗口時，需要在ImGui::Begin前面調(diào)用，代碼如下：

#include <imgui_internal.h>
void HideTabBar()
{
    ImGuiWindowClass window_class;
    window_class.DockNodeFlagsOverrideSet = ImGuiDockNodeFlags_NoTabBar;
    ImGui::SetNextWindowClass(&window_class);
}

創(chuàng)建導(dǎo)航頁面

導(dǎo)航頁面本質(zhì)上就是一個樹控件，使用ImGui自帶的控件樣式即可，代碼也是從demo里面拷貝到Application.cpp的，如下所示：

//一級索引
int FirstIdx = 0;
//二級索引
int SecondIdx = 0;
//導(dǎo)航頁面
void ShowTreeView()
{
    HideTabBar();
    ImGui::Begin("導(dǎo)航窗口");
    if (ImGui::TreeNode("功能選項"))
    {
        for (int i = 0; i < 5; i++)
        {
            if (i == 0)
                ImGui::SetNextItemOpen(true, ImGuiCond_Once);
            if (ImGui::TreeNode((void*)(intptr_t)i, "功能 %d", i))
            {
                ImGui::Text("圖標(biāo)");
                ImGui::SameLine();
                if (ImGui::SmallButton("按鈕1")) { FirstIdx = i; SecondIdx = 0; }
                ImGui::Text("圖標(biāo)");
                ImGui::SameLine();
                if (ImGui::SmallButton("按鈕2")) { FirstIdx = i; SecondIdx = 1; }
                ImGui::TreePop();
            }
        }
        ImGui::TreePop();
    }
    if (ImGui::TreeNode("其它選項"))
    {
        ImGui::Text("圖標(biāo)");
        ImGui::SameLine();
        if (ImGui::SmallButton("按鈕")) { }
        ImGui::TreePop();
    }
    ImGui::End();
}

注：上面的“圖標(biāo)”使用圖標(biāo)字體就可以顯示真正的圖標(biāo)，圖標(biāo)字體的加載留到后續(xù)的文章再說。

創(chuàng)建內(nèi)容頁面

內(nèi)容頁面根據(jù)導(dǎo)航的索引確定需要渲染的內(nèi)容，為了避免頁面關(guān)于單調(diào)，里面加了一個表格控件和選項卡控件的示例，代碼如下：

//內(nèi)容頁面
void ShowMainView()
{
    HideTabBar();
    // 清除之前的內(nèi)容
    ImGui::Begin("頁面窗口");
    switch (FirstIdx)
    {
    case 0:
        ShowPageView0();
        break;
    case 1:
        ShowPageView1();
        break;
    case 2:
        ShowPageView2();
        break;
    case 3:
        ShowPageView3();
        break;
    case 4:
        ShowPageView4();
        break;
    default:
        break;
    }
    ImGui::End();
}
void ShowPageView0()
{
    ImGui::Text("功能%d -> 按鈕%d -> 頁面0", FirstIdx,SecondIdx);
    //一個表格示例
    static ImGuiTableFlags flags =
        ImGuiTableFlags_SizingFixedFit |
        ImGuiTableFlags_RowBg |
        ImGuiTableFlags_Borders |
        ImGuiTableFlags_Resizable |
        ImGuiTableFlags_Reorderable |
        ImGuiTableFlags_Hideable;
    if (ImGui::BeginTable("table0", 3, flags))
    {
        ImGui::TableSetupColumn("AAA", ImGuiTableColumnFlags_WidthFixed);
        ImGui::TableSetupColumn("BBB", ImGuiTableColumnFlags_WidthFixed);
        ImGui::TableSetupColumn("CCC", ImGuiTableColumnFlags_WidthStretch);
        ImGui::TableHeadersRow();
        for (int row = 0; row < 5; row++)
        {
            ImGui::TableNextRow();
            for (int column = 0; column < 3; column++)
            {
                ImGui::TableSetColumnIndex(column);
                ImGui::Text("%s %d,%d", (column == 2) ? "Stretch" : "Fixed", column, row);
            }
        }
        ImGui::EndTable();
    }
}
void ShowPageView1()
{
    ImGui::Text("功能%d -> 按鈕%d -> 頁面1", FirstIdx, SecondIdx);
    //選項卡示例
    ImGuiTabBarFlags tab_bar_flags = ImGuiTabBarFlags_None;
    if (ImGui::BeginTabBar("MyTabBar", tab_bar_flags))
    {
        if (ImGui::BeginTabItem("Avocado"))
        {
            ImGui::Text("This is the Avocado tab!\nblah blah blah blah blah");
            ImGui::EndTabItem();
        }
        if (ImGui::BeginTabItem("Broccoli"))
        {
            ImGui::Text("This is the Broccoli tab!\nblah blah blah blah blah");
            ImGui::EndTabItem();
        }
        if (ImGui::BeginTabItem("Cucumber"))
        {
            ImGui::Text("This is the Cucumber tab!\nblah blah blah blah blah");
            ImGui::EndTabItem();
        }
        ImGui::EndTabBar();
    }
}
void ShowPageView2() { ImGui::Text("功能%d -> 按鈕%d -> 頁面2", FirstIdx, SecondIdx); }
void ShowPageView3() { ImGui::Text("功能%d -> 按鈕%d -> 頁面3", FirstIdx, SecondIdx); }
void ShowPageView4() { ImGui::Text("功能%d -> 按鈕%d -> 頁面4", FirstIdx, SecondIdx); }

隱藏控制臺窗口

隱藏控制臺窗口一般都是調(diào)用HWND hWnd = GetConsoleWindow()獲取控制臺窗口，然后使用ShowWindow(hWnd, SW_HIDE)隱藏窗口，這里使用另一種更合理的方法。

右擊項目“屬性->鏈接器->系統(tǒng)->子系統(tǒng)”，將控制臺改為窗口，如下圖所示：

然后將main函數(shù)改成WinMain函數(shù)，代碼如下：

// Main code
//int main(int, char**)
int WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine, int nCmdShow)

如果使用的不是win32，還需要引用以下頭文件：

#include <windows.h>

順便把程序標(biāo)題也改一下，代碼如下：

// Create window with graphics context
GLFWwindow* window = glfwCreateWindow(1280, 720, "演示程序", nullptr, nullptr);

打包程序

將生成的exe文件重命名為App.exe單獨(dú)放到一個文件夾，初次打開需要手動調(diào)整布局，程序退出時布局自動保存在ImGui.ini文件中。最后打包的文件如下所示：

可以看到exe文件很小，只有500多KB。

總結(jié)

待解決問題

本文記錄初次使用ImGui的整個過程，解決了使用過程中的大部分問題，但還有一些細(xì)節(jié)問題需要解決：

字體內(nèi)存加載方式時軟件退出報錯
字體文件過大時加載耗時導(dǎo)致白屏
程序圖標(biāo)自定義，默認(rèn)窗體標(biāo)題欄的自定義
控件外觀自定義，加載圖標(biāo)字體作為控件圖標(biāo)

這些問題后面會每個單獨(dú)寫一篇文章處理，目前的內(nèi)容已經(jīng)可以開發(fā)一些簡單的應(yīng)用。

開發(fā)優(yōu)勢

ImGui界面框架是我使用過開發(fā)體驗(yàn)的最好的界面框架，有種在C++中使用Winform開發(fā)的感覺，甚至比Winform開發(fā)更簡單。這里要點(diǎn)名吐槽MFC，如果不是工作所迫我是絕對不會用它的。個人感覺ImGui良好的開發(fā)體驗(yàn)主要來自兩方面：