ToB企服应用市场:ToB评测及商务社交产业平台

标题: ImGui界面优化：使用图标字体、隐藏主窗口标题栏 [打印本页]
作者: 雁过留声    时间: 2023-9-1 11:59
标题: ImGui界面优化：使用图标字体、隐藏主窗口标题栏
目录

本文主要介绍ImGui应用中的一些界面优化方法，如果是第一次使用ImGui推荐从上一篇文章开始：使用C++界面框架ImGUI开发一个简单程序，最终的界面效果如下：

使用图标字体

下载IconFontCppHeaders里的IconsFontAwesome6.h文件引入到项目，然后下载fa-solid-900.ttf放到项目根目录，把系统字体目录下的msyh.ttc也移到根目录。项目文件如下：

参考IconFontCppHeaders的示例，字体加载的代码如下：
  1. float baseFontSize = 30.0f;
  2. ImFont* font = io.Fonts->AddFontFromFileTTF
  3. (
  4.     "msyh.ttc",
  5.     baseFontSize,
  6.     nullptr,
  7.     io.Fonts->GetGlyphRangesChineseFull()
  8. );
  9. IM_ASSERT(font != nullptr);
  11. // FontAwesome字体需要缩小2.0f/3.0f才能正确对齐
  12. float iconFontSize = baseFontSize * 2.0f / 3.0f;
  13. static const ImWchar icons_ranges[] = { ICON_MIN_FA, ICON_MAX_16_FA,0 };
  14. ImFontConfig icons_config;
  15. icons_config.MergeMode = true;
  16. icons_config.PixelSnapH = true;
  17. icons_config.GlyphMinAdvanceX = iconFontSize;
  18. io.Fonts->AddFontFromFileTTF(FONT_ICON_FILE_NAME_FAS, iconFontSize, icons_config, icons_ranges);
复制代码
使用方法：
  1. ImGui::Text("%s ", ICON_FA_ALIGN_CENTER);
  2. 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的目录，然后输入以下命令（任选一个）：
  1. //不压缩，使用C组，源代码大概50M
  2. binary_to_compressed_c.exe -nocompress msyh.ttc msyh >font_msyh.c
  3. //压缩，使用base85，源代码大概25M
  4. binary_to_compressed_c.exe -base85 msyh.ttc msyh >font_msyh.c
复制代码

因为压缩的源代码编译时报堆栈空间不足，并且实际的数组会大一些，我选择的是不压缩的源代码。
把生成的font_msyh.c添加到自己的项目，在main文件引入字体的命名空间，然后加载字体：
  1. #include "font_msyh.c"
  3. ImFont* font = io.Fonts->AddFontFromMemoryTTF
  4. (
  5.     (void*)msyh_data,
  6.     msyh_size,
  7.     30,
  8.     nullptr,
  9.     io.Fonts->GetGlyphRangesChineseFull()
  10. );
  11. IM_ASSERT(font != nullptr);
复制代码
注意msyh_data里面的msyh来自命令行的窗口，注意根据字体自己取一个名字。
结论：使用内存加载字体软件退出时会报错，暂时还解决不了，继续使用本地加载字体的方式 。
隐藏主窗口标题栏

主窗口的标题栏是后端自带的样式且不支持修改，不能自定义样式那就只能隐藏掉，眼不见为净。
本文使用的后端是 glfw+opengl3，ImGui 是 docking 分支，其它项目的实现方法可能会有所不同。
使用 glfw 创建一个 offscreen context ，在创建窗口前加入以下代码即可：
  1. // 设置 offscreen context 的标志位
  2. glfwWindowHint(GLFW_VISIBLE, GLFW_FALSE);
  4. // Create window with graphics context
  5. GLFWwindow* window = glfwCreateWindow(1280, 720, "演示程序", nullptr, nullptr);
复制代码
还需要 io.ConfigViewportsNoAutoMerge = true; 开启,同时关闭ConfigViewportsNoTaskBarIcon（默认关闭）。代码如下：
  1. ImGuiIO& io = ImGui::GetIO(); (void)io;
  2. io.ConfigFlags |= ImGuiConfigFlags_NavEnableKeyboard;     // Enable Keyboard Controls
  3. io.ConfigFlags |= ImGuiConfigFlags_NavEnableGamepad;      // Enable Gamepad Controls
  4. io.ConfigFlags |= ImGuiConfigFlags_DockingEnable;         // Enable Docking
  5. io.ConfigFlags |= ImGuiConfigFlags_ViewportsEnable;       // Enable Multi-Viewport / Platform Windows
  6. io.ConfigViewportsNoAutoMerge = true;
  7. //io.ConfigViewportsNoTaskBarIcon = true;
复制代码
注：如果不开启io.ConfigViewportsNoAutoMerge可能引起拖动窗口不小心拖动到隐藏的主窗口, 导致子窗口也隐藏的情况。
做完上面的步骤界面还是隐藏的，那是因为我们的停靠空间开启了填充标志，需要关闭：
  1. void RenderUI()
  2. {
  3.    //...
  4.    static bool opt_fullscreen = false;
  5.    //...
  6. }
复制代码
参考链接：IMGUI如何去掉外面窗口?
隐藏窗口后会导致一系列问题，比如关闭窗口、最大化等，下面会逐一说明。
增加程序退出

主窗口隐藏后会遇到一个问题，程序该怎么退出？解决思路是显示停靠空间的关闭按钮，检测到关闭按钮点击后关闭主窗口。
Application.h增加GetMainShouldClose函数：
  1. #pragma once
  2. #include "imgui.h"
  3. namespace App
  4. {
  5.     static bool MainOpen = true;
  6.     //程序是否退出
  7.     bool GetMainShouldClose();
  8.     //主UI函数，放停靠空间的代码
  9.     void RenderUI();
  11.     //...其它代码
  12. }
复制代码
Application.cpp还需要改动RenderUI函数：
  1. bool GetMainShouldClose()
  2. {
  3.     return !MainOpen;
  4. }
  5. void RenderUI()
  6. {
  7.     bool* p_open = &MainOpen;
  8.     static bool opt_fullscreen = false;
  9.     //...其它代码
  10.     ImGui::Begin("演示程序", p_open, window_flags);
  11.     //...其它代码
  12. }
复制代码
然后再main函数的 App::RenderUI() 后面判断是否退出程序：
  1. //...
  2. App::RenderUI();
  3. if (App::GetMainShouldClose())
  4. {
  5.     //关闭窗口，也可以做一些退出确认操作
  6.     glfwSetWindowShouldClose(window, GLFW_TRUE);
  7. }
  8. //...
复制代码
改进HideTabBar

原本的HideTabBar有问题，如果有新窗口停靠到中心位置会导致新窗口被覆盖隐藏，只能通过重置布局恢复。所以标题栏最好不隐藏，只隐藏前面的三角符号，这样也能允许用户自己拖动窗口。
优化代码如下：
  1. void HideTabBar()
  2. {
  3.     ImGuiWindowClass window_class;
  4.     window_class.DockNodeFlagsOverrideSet = ImGuiDockNodeFlags_NoWindowMenuButton;
  5.     //window_class.DockNodeFlagsOverrideSet = ImGuiDockNodeFlags_NoTabBar;
  6.     ImGui::SetNextWindowClass(&window_class);
  7. }
复制代码
窗口最大化

窗口最大化需要知道屏幕的尺寸，这一步涉及到具体的后端代码，需要先在main文件中获取屏幕尺寸。
在main函数前实现GetScreenSize函数，代码如下：
  1. static void GetScreenSize(int &width, int &height)
  2. {
  3.     //屏幕数量
  4.     int monitorCount;
  5.     GLFWmonitor** pMonitor = glfwGetMonitors(&monitorCount);
  6.     int screen_x, screen_y;
  7.     for (int i = 0; i < monitorCount; i++)
  8.     {
  9.         const GLFWvidmode* mode = glfwGetVideoMode(pMonitor[i]);
  10.         //屏幕大小
  11.         screen_x = mode->width;
  12.         screen_y = mode->height;
  13.     }
  14.     width = screen_x;
  15.     height = screen_y;
  16. }
复制代码
然后在main函数中将主窗口的大小设置为屏幕大小一致，代码如下：
  1. //获取屏幕尺寸
  2. int width, height;
  3. GetScreenSize(width, height);
  4. glfwWindowHint(GLFW_VISIBLE, GLFW_FALSE);
  5. // Create window with graphics context
  6. GLFWwindow* window = glfwCreateWindow(width, height, "演示程序", nullptr, nullptr);
复制代码
在App::RenderUI函数中的停靠空间渲染前设置空间大小，并在主题切换代码后加上大小切换的代码，代码如下：
  1. //...其它代码
  3. //设置最大化、最小化
  4. static bool IsMaximized = true;
  5. static bool LastMaximized = true;
  6. ImVec2 screenSize = ImGui::GetIO().DisplaySize;
  7. if (IsMaximized)
  8. {
  9.     if (LastMaximized != IsMaximized)
  10.     {
  11.         LastMaximized = IsMaximized;
  12.     }
  13.     ImGui::SetNextWindowPos(ImVec2(0, 0));
  14.     ImGui::SetNextWindowSize(screenSize);
  15.     //隐藏标题栏
  16.     //window_flags |= ImGuiWindowFlags_NoDecoration | ImGuiWindowFlags_NoMove | ImGuiWindowFlags_NoResize;
  17. }
  18. else
  19. {
  20.     if (LastMaximized != IsMaximized)
  21.     {
  22.         LastMaximized = IsMaximized;
  23.         ImGui::SetNextWindowPos(ImVec2(screenSize[0]*0.1, screenSize[1] * 0.1));
  24.         ImGui::SetNextWindowSize(ImVec2(screenSize[0] * 0.8, screenSize[1] * 0.8));
  25.     }
  26. }
  28. ImGui::Begin(ICON_FA_ANCHOR "演示程序", p_open, window_flags);
  30. //...其它代码
  32. //增加主题切换
  33. if (ImGui::BeginMenu(ICON_FA_THERMOMETER "主题（Other）"))
  34. {
  35.     if (ImGui::MenuItem("暗黑（Dark）")) { ImGui::StyleColorsDark(); }
  36.     if (ImGui::MenuItem("明亮（Light）")) { ImGui::StyleColorsLight(); }
  37.     if (ImGui::MenuItem("经典（Classic）")) { ImGui::StyleColorsClassic(); }
  39.     ImGui::EndMenu();
  40. }
  41. //增加窗口切换
  42. if (ImGui::BeginMenu(ICON_FA_TV "窗口（Windows）"))
  43. {
  44.     if (ImGui::MenuItem(ICON_FA_WINDOW_MAXIMIZE "最大（Max）")) { IsMaximized = true; }
  45.     if (ImGui::MenuItem(ICON_FA_WINDOW_RESTORE "默认（Default）")) { IsMaximized = false; }
  47.     ImGui::EndMenu();
  48. }
复制代码
总结

文中的主要的优化措施就是引入字体图标、隐藏主窗口，结合前一篇的文章，ImGui基本的功能都已经涉及到了。
文中还有一些遗留问题，比如：
目前的内容对于简单的项目来说基本够用，后面应该不会再继续更新ImGui相关的内容了，等项目中遇到问题再说。
项目源码链接：提取码: tv7n

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4