Home

Awesome

MiaoUI library

MiaoUI是一套轻量级高性能的跨平台DirectUI渲染引擎库 并用于我们的一些内部项目

MiaoUI Core 仅用于内部项目 如果你具有访问权限请转到MiaoUI仓库 本页面仅为面向开源项目的MiaoUI Lite页面

MiaoUI Lite

MiaoUI Lite 是 MiaoUI Core 的精简版 去除了大部分小型项目不常用的功能 并完全开放源代码 可以为小型项目提供快速美观的配置GUI 本项目也可作为一个起始框架来自定义改造

部分功能需要在Mui_Config.h中启用对应的宏定义

功能差异

XML语法

MiaoUI使用XML作为中间语言来创建UI 例如

<UIControl size="100%,100%" align="Center" bgColor="@hex:ffffff">
  <UIControl autoSize="true" align="LinearV">
    <UILabel fontSize="14" text="hello world!" fontColor="50,150,50,255" />
    <UIButton pos="0,5" text="click here" />
  </UIControl>
</UIControl>

screenshot

Lite版本完全兼容Core版本的XML控件语法 Core的代码可以直接迁移至Lite 反之亦然 但请注意版本对应 Lite版本从2.0.8开始 兼容Core 2.1.0的语法

完整的控件属性列表详见AttribName.txtGeometryXML.txt文件

或者直接查看对应控件的头文件 例如 Mui_Button.h 所有控件的属性列表都在头文件有注释

若要从Core版本迁移到Lite版本 部分功能Lite不支持 以下列表列出具体项目

<details> <summary>平台支持</summary>
平台支持Core v2.1.0Lite v2.0.8
Windows7+XP+
Android7+
LinuxX11 GUI
</details> <details> <summary>用户层API</summary>
控件Core v2.1.0Lite v2.0.8
UIButton
UICheckBox
UIColorPicker
UIComBox
UIControl
UIEditBox
UIEffectLayer
UIGroup
UIIconBtn
UIImgBox
UIImgListBox
UILabel
UIListBox
UIMenu
UINavBarBasic
UIPanel
UIProgress
UIScroll
UISlider
UISwitch
UIVideoPlayer
UIPage
UIDialogPage
UITabPage
资源类Core v2.1.0Lite v2.0.8
DMResFile V1
DMResFile V2
其他功能Core v2.1.0Lite v2.0.8
SVG图像渲染
缓动和动画效果
GPU硬件加速
内存字体加载器
滤镜效果
帧缓存和批渲染
EditBox硬件加速
亮/暗模式默认样式仅亮模式
D3D设备丢失资源重建支持
UIBasicWindow脏区域支持
高DPI缩放支持
</details> <details> <summary>底层API</summary>
图形后端适用平台Core v2.1.0Lite v2.0.8
GDIPlus 1.0Windows
Direct2D 1.1/D3D11Windows
OpenGL Core 3.3Windows/Linux
OpenGL ES 3.2Android

GDIPlus渲染器不支持以下接口

Render:
Font:
音频后端适用平台Core v2.1.0Lite v2.0.8
DirectSoundWindows
OpenSL ESWindows
PulseAudioLinux
解码器Core v2.1.0Lite v2.0.8
wave
mp3
ogg
ffmpeg(可选)
</details>

快速开始

先决条件

Lite版本仅支持Windows 使用Visual Studio进行开发 如果要支持Windows XP 你需要改用MSVC v141 WindowsXP工具集 MiaoUI基于C++17标准编写

你可以转到Release页面下载已经编译好的库 或者自行编译

如果要自行编译 请继续阅读以下内容

克隆本储存库 然后打开MiaoUI.sln 此解决方案分为3个项目 按需进行编译

  1. MiaoUILite - 项目核心库
  2. MiaoUITest - 用于测试的一个项目 可以测试库是否正常运行
  3. DmResEditor - DMResFile V1的文件编辑器 如果你打算使用这个文件系统 可以用它编辑dm资源文件

在编译之前 你可以修改MiaoUILite项目下的Mui_Config.h文件来控制一些功能的开关

生成并运行MiaoUITest项目这会自动编译MiaoUILite库 生成后的库文件位于.\MiaoUI\library目录下

注意 项目默认是静态链接的 Release:/MT Debug:/MTD 如果你想使用运行库 可以修改编译选项

开始使用

<details> <summary>一个简单的demo</summary>

创建一个新的C++项目 并设置好附加库目录到MiaoUI的library文件夹 添加MiaoUI的src\include目录到附加头文件目录 无需向编译器添加附加库文件名 mui头文件已经添加了链接指令

项目必须基于C++17及以上

#include "Mui.h"

using namespace Mui;

int APIENTRY wWinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPWSTR lpCmdLine, int nCmdShow)
{
  //注意 MiaoUI支持每个显示器的高DPI缩放 你可以在清单设置 或使用代码告诉系统 DPI由我们自己管理
  //Windows 8+才支持此API 低版本系统无需设置
  SetProcessDpiAwarenessContext(DPI_AWARENESS_CONTEXT_PER_MONITOR_AWARE_V2);

  //设置MiaoUI默认的异常最后处理函数 你也可以自己设置回调 空留为默认
  M_SetLastExceptionNotify();

  //初始化界面库 全局仅有一个MiaoUI类
  MiaoUI engine;
  std::wstring err;
  if (!engine.InitEngine(err))
  {
    MessageBoxW(nullptr, (L"MiaoUI初始化失败! 错误信息: " + err).c_str(), L"error", MB_ICONERROR);
    return 0;
  }

  //创建窗口上下文
  std::wstring title = L"MiaoUI Demo " + std::wstring(Settings::MuiEngineVer) + L" - Test";
  MWindowCtx* windowCtx = engine.CreateWindowCtx(UIRect(0, 0, 452, 328), MiaoUI::MWindowType::Normal, title, true, true);

  //加载默认的UI样式
  windowCtx->XML()->LoadDefaultStyle();

  //绑定全局控件事件回调
  windowCtx->SetEventCallback([](MWindowCtx* ctx, UINotifyEvent event, Ctrl::UIControl* control, _m_param param)
  {
    //你可以通过全局事件回调和MUIEVENT宏来处理控件事件
    //也可以通过绑定对应控件的EventSlot来单独处理
    if (MUIEVENT(Event_Mouse_LDown, L"test_button"))
    {
      MessageBoxW(ctx->Base()->GetWindowHandle<HWND>(), L"hello world!", L"msg", MB_OK);
      return true;
    }
    return false;
  });

  //初始化窗口
  bool result = windowCtx->InitWindow([](MWindowCtx* ctx, Ctrl::UIControl* root, XML::MuiXML* xmlUI)
  {
    //可以通过MXMLCODE宏内联XML代码
    std::wstring_view xml = MXMLCODE(
    <UIControl size="100%,100%" align="Center" bgColor="@hex:ffffff">
      <UIControl autoSize="true" align="LinearV">
        <UILabel fontSize="14" text="hello world!" fontColor="50,150,50,255" />
        <UIButton pos="0,5" text="click here" name="test_button" />
      </UIControl>
    </UIControl>
    );

    return xmlUI->CreateUIFromXML(root, xml.data());
  }, false);
  if(!result)
  {
    MessageBoxW(nullptr, L"初始化窗口失败!XML代码不正确", L"error", MB_ICONERROR);
    return 0;
  }

  //可以访问窗口类设置更多
  auto base = windowCtx->Base();

  base->CenterWindow();
  
  //base->ShowDebugRect(true); //显示控件边界区域 用于调试
  //base->SetRenderMode(true); //启用即时渲染模式 可用于连续画面或者压力测试

  base->ShowWindow(true);

  //base->SetMaxFPSLimit(60); //限制渲染的最大帧率

  //窗口消息循环 直到窗口关闭
  windowCtx->EventLoop();
  return 0;
}
</details>

依赖