• 使用圖標字體
  • 擴展：記憶體載入字體
• 隱藏主視窗標題欄
  • 增加程式退出
  • 改進HideTabBar
  • 視窗最大化
• 總結

使用圖標字體

下載IconFontCppHeaders里的IconsFontAwesome6.h文件引入到項目，然後下載fa-solid-900.ttf放到項目根目錄，把系統字體目錄下的msyh.ttc也移到根目錄。項目文件如下：

參考IconFontCppHeaders的示例，字體載入的代碼如下：

float baseFontSize = 30.0f;
ImFont* font = io.Fonts->AddFontFromFileTTF
(
    "msyh.ttc",
    baseFontSize,
    nullptr,
    io.Fonts->GetGlyphRangesChineseFull()
);
IM_ASSERT(font != nullptr);

// FontAwesome字體需要縮小2.0f/3.0f才能正確對齊
float iconFontSize = baseFontSize * 2.0f / 3.0f;
static const ImWchar icons_ranges[] = { ICON_MIN_FA, ICON_MAX_16_FA,0 };
ImFontConfig icons_config;
icons_config.MergeMode = true;
icons_config.PixelSnapH = true;
icons_config.GlyphMinAdvanceX = iconFontSize;
io.Fonts->AddFontFromFileTTF(FONT_ICON_FILE_NAME_FAS, iconFontSize, icons_config, icons_ranges);

使用方法：

ImGui::Text("%s ", ICON_FA_ALIGN_CENTER);
ImGui::Button(ICON_FA_ALIGN_CENTER " Search");

示例中所有圖標都已經列出來了方便使用時查看（示例源碼見文章末尾的項目鏈接），如下圖所示：

擴展：記憶體載入字體

先新建一個控制台項目，把ImGui項目misc\fonts路徑下的binary_to_compressed_c.cpp文件添加到控制台項目，編譯得到binary_to_compressed_c.exe。

把需要載入的字體文件（如msyh.ttc）和上面的exe放到同一目錄：

在命令行視窗通過cd 命令導航到上面exe的目錄，然後輸入以下命令（任選一個）：

//不壓縮，使用C組，源代碼大概50M
binary_to_compressed_c.exe -nocompress msyh.ttc msyh >font_msyh.c
//壓縮，使用base85，源代碼大概25M
binary_to_compressed_c.exe -base85 msyh.ttc msyh >font_msyh.c

因為壓縮的源代碼編譯時報堆棧空間不足，並且實際的數組會大一些，我選擇的是不壓縮的源代碼。

把生成的font_msyh.c添加到自己的項目，在main文件引入字體的命名空間，然後載入字體：

#include "font_msyh.c"

ImFont* font = io.Fonts->AddFontFromMemoryTTF
(
    (void*)msyh_data,
    msyh_size,
    30,
    nullptr,
    io.Fonts->GetGlyphRangesChineseFull()
);
IM_ASSERT(font != nullptr);

註意msyh_data裡面的msyh來自命令行的視窗，註意根據字體自己取一個名字。

結論：使用記憶體載入字體軟體退出時會報錯，暫時還解決不了，繼續使用本地載入字體的方式 。

隱藏主視窗標題欄

主視窗的標題欄是後端自帶的樣式且不支持修改，不能自定義樣式那就只能隱藏掉，眼不見為凈。
本文使用的後端是 glfw+opengl3，ImGui 是 docking 分支，其它項目的實現方法可能會有所不同。

使用 glfw 創建一個 offscreen context ，在創建視窗前加入以下代碼即可：

// 設置 offscreen context 的標誌位
glfwWindowHint(GLFW_VISIBLE, GLFW_FALSE);

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

還需要 io.ConfigViewportsNoAutoMerge = true; 開啟,同時關閉ConfigViewportsNoTaskBarIcon（預設關閉）。代碼如下：

ImGuiIO& io = ImGui::GetIO(); (void)io;
io.ConfigFlags |= ImGuiConfigFlags_NavEnableKeyboard;     // Enable Keyboard Controls
io.ConfigFlags |= ImGuiConfigFlags_NavEnableGamepad;      // Enable Gamepad Controls
io.ConfigFlags |= ImGuiConfigFlags_DockingEnable;         // Enable Docking
io.ConfigFlags |= ImGuiConfigFlags_ViewportsEnable;       // Enable Multi-Viewport / Platform Windows
io.ConfigViewportsNoAutoMerge = true;
//io.ConfigViewportsNoTaskBarIcon = true;

註：如果不開啟io.ConfigViewportsNoAutoMerge可能引起拖動視窗不小心拖動到隱藏的主視窗, 導致子視窗也隱藏的情況。

做完上面的步驟界面還是隱藏的，那是因為我們的停靠空間開啟了填充標誌，需要關閉：

void RenderUI()
{
   //...
   static bool opt_fullscreen = false;
   //...
}

參考鏈接：IMGUI如何去掉外面視窗?

隱藏視窗後會導致一系列問題，比如關閉視窗、最大化等，下麵會逐一說明。

增加程式退出

主視窗隱藏後會遇到一個問題，程式該怎麼退出？解決思路是顯示停靠空間的關閉按鈕，檢測到關閉按鈕點擊後關閉主視窗。
Application.h增加GetMainShouldClose函數：

#pragma once
#include "imgui.h"
namespace App
{
    static bool MainOpen = true;
    //程式是否退出
    bool GetMainShouldClose();
    //主UI函數，放停靠空間的代碼
    void RenderUI();

    //...其它代碼
}

Application.cpp還需要改動RenderUI函數：

bool GetMainShouldClose()
{
    return !MainOpen;
}
void RenderUI()
{
    bool* p_open = &MainOpen;
    static bool opt_fullscreen = false;
    //...其它代碼
    ImGui::Begin("演示程式", p_open, window_flags);
    //...其它代碼
}

然後再main函數的 App::RenderUI() 後面判斷是否退出程式：

//...
App::RenderUI();
if (App::GetMainShouldClose())
{
    //關閉視窗，也可以做一些退出確認操作
    glfwSetWindowShouldClose(window, GLFW_TRUE);
}
//...

改進HideTabBar

原本的HideTabBar有問題，如果有新視窗停靠到中心位置會導致新視窗被覆蓋隱藏，只能通過重置佈局恢復。所以標題欄最好不隱藏，只隱藏前面的三角符號，這樣也能允許用戶自己拖動視窗。
優化代碼如下：

void HideTabBar()
{
    ImGuiWindowClass window_class;
    window_class.DockNodeFlagsOverrideSet = ImGuiDockNodeFlags_NoWindowMenuButton;
    //window_class.DockNodeFlagsOverrideSet = ImGuiDockNodeFlags_NoTabBar;
    ImGui::SetNextWindowClass(&window_class);
}

視窗最大化

視窗最大化需要知道屏幕的尺寸，這一步涉及到具體的後端代碼，需要先在main文件中獲取屏幕尺寸。

在main函數前實現GetScreenSize函數，代碼如下：

static void GetScreenSize(int &width, int &height)
{
    //屏幕數量
    int monitorCount;
    GLFWmonitor** pMonitor = glfwGetMonitors(&monitorCount);
    int screen_x, screen_y;
    for (int i = 0; i < monitorCount; i++)
    {
        const GLFWvidmode* mode = glfwGetVideoMode(pMonitor[i]);
        //屏幕大小
        screen_x = mode->width;
        screen_y = mode->height;
    }
    width = screen_x;
    height = screen_y;
}

然後在main函數中將主視窗的大小設置為屏幕大小一致，代碼如下：

 //獲取屏幕尺寸
 int width, height;
 GetScreenSize(width, height);
 glfwWindowHint(GLFW_VISIBLE, GLFW_FALSE);
 // Create window with graphics context
 GLFWwindow* window = glfwCreateWindow(width, height, "演示程式", nullptr, nullptr);

在App::RenderUI函數中的停靠空間渲染前設置空間大小，併在主題切換代碼後加上大小切換的代碼，代碼如下：

//...其它代碼

//設置最大化、最小化
static bool IsMaximized = true;
static bool LastMaximized = true;
ImVec2 screenSize = ImGui::GetIO().DisplaySize;
if (IsMaximized)
{
    if (LastMaximized != IsMaximized)
    {
        LastMaximized = IsMaximized;
    }
    ImGui::SetNextWindowPos(ImVec2(0, 0));
    ImGui::SetNextWindowSize(screenSize);
    //隱藏標題欄
    //window_flags |= ImGuiWindowFlags_NoDecoration | ImGuiWindowFlags_NoMove | ImGuiWindowFlags_NoResize;
}
else
{
    if (LastMaximized != IsMaximized)
    {
        LastMaximized = IsMaximized;
        ImGui::SetNextWindowPos(ImVec2(screenSize[0]*0.1, screenSize[1] * 0.1));
        ImGui::SetNextWindowSize(ImVec2(screenSize[0] * 0.8, screenSize[1] * 0.8));
    }
}

ImGui::Begin(ICON_FA_ANCHOR "演示程式", p_open, window_flags);

//...其它代碼

//增加主題切換
if (ImGui::BeginMenu(ICON_FA_THERMOMETER "主題（Other）"))
{
    if (ImGui::MenuItem("暗黑（Dark）")) { ImGui::StyleColorsDark(); }
    if (ImGui::MenuItem("明亮（Light）")) { ImGui::StyleColorsLight(); }
    if (ImGui::MenuItem("經典（Classic）")) { ImGui::StyleColorsClassic(); }

    ImGui::EndMenu();
}
//增加視窗切換
if (ImGui::BeginMenu(ICON_FA_TV "視窗（Windows）"))
{
    if (ImGui::MenuItem(ICON_FA_WINDOW_MAXIMIZE "最大（Max）")) { IsMaximized = true; }
    if (ImGui::MenuItem(ICON_FA_WINDOW_RESTORE "預設（Default）")) { IsMaximized = false; }

    ImGui::EndMenu();
}

總結

文中的主要的優化措施就是引入字體圖標、隱藏主視窗，結合前一篇的文章，ImGui基本的功能都已經涉及到了。

文中還有一些遺留問題，比如：

• 全屏無法覆蓋系統的任務欄
• 標題欄沒有自定義
• 記憶體載入字體報錯
• 任務欄視窗圖標自定義

目前的內容對於簡單的項目來說基本夠用，後面應該不會再繼續更新ImGui相關的內容了，等項目中遇到問題再說。

項目源碼鏈接：提取碼: tv7n