02 U8G2 API实战：从基础绘图到交互界面开发

1. U8G2图形库基础入门

如果你正在开发嵌入式设备的图形界面，U8G2绝对是个不可多得的好帮手。这个轻量级的图形库支持超过200种单色显示屏，从常见的OLED到LCD都能完美适配。我最初接触U8G2是在一个智能家居项目上，当时需要在128x64的OLED屏上显示温湿度数据，试了几种方案后发现U8G2的兼容性和易用性最为出色。

U8G2的核心优势在于它的硬件抽象层设计。无论你的显示屏使用I2C、SPI还是8位并行接口，U8G2都能通过统一的API进行操作。这意味着你可以在不同硬件平台上复用相同的代码，大大提高了开发效率。记得有次项目中途需要更换显示屏型号，原本担心要重写大量代码，结果发现只需修改初始化函数的一行参数就搞定了。

安装U8G2非常简单，以Arduino平台为例：

cpp复制#include <U8g2lib.h>
// 对于SSD1306驱动的128x64 OLED屏(I2C接口)
U8G2_SSD1306_128X64_NONAME_F u8g2(U8G2_R0);

这个初始化语句中，U8G2_R0表示不旋转屏幕，如果你的设备需要倒置显示，可以改为U8G2_R2。实际项目中我发现，合理利用旋转功能可以优化设备的人机工程学设计，比如将车载设备的屏幕旋转180度更便于驾驶员查看。

2. 基础绘图功能详解

2.1 像素与线条绘制

任何图形界面都从最基础的像素开始。U8G2提供了丰富的绘图函数，我们先从最简单的点线面说起。u8g2_DrawPixel是最基础的函数，但别小看它，通过合理组合可以创造出各种效果。

cpp复制// 绘制散点图示例
void drawScatterPlot() {
  u8g2_FirstPage(&u8g2);
  do {
    for(int i=0; i<20; i++){
      int x = random(128);
      int y = random(64);
      u8g2_DrawPixel(&u8g2, x, y);
    }
  } while(u8g2_NextPage(&u8g2));
}

画线函数u8g2_DrawLine在实际项目中特别实用。我曾用它来绘制折线图显示传感器数据变化趋势。需要注意的是，斜线在低分辨率屏幕上可能会出现锯齿，这时可以使用u8g2_DrawHLine和u8g2_DrawVLine来优化水平垂直线的显示效果。

2.2 几何图形绘制

U8G2支持各种几何图形，从简单的矩形到复杂的椭圆都能轻松绘制。u8g2_DrawBox和u8g2_DrawFrame的区别在于前者是实心矩形，后者是空心框线。在开发菜单界面时，我常用它们来突出显示选中项。

圆形绘制有个实用技巧：u8g2_DrawCircle的最后一个参数可以控制只绘制部分圆弧。这在制作仪表盘界面时特别有用：

cpp复制// 绘制270度圆弧的仪表盘
u8g2_DrawCircle(&u8g2, 64, 32, 30, U8G2_DRAW_UPPER_LEFT|U8G2_DRAW_UPPER_RIGHT);

对于需要圆角的设计，u8g2_DrawRBox和u8g2_DrawRFrame是更好的选择。它们的最后一个参数控制圆角半径，我建议半径值不要超过宽度或高度的一半，否则显示效果会不理想。

3. 文本显示与字体处理

3.1 基本文本输出

U8G2的文本显示功能相当强大，支持多种字体和编码格式。u8g2_DrawStr适用于ASCII字符，而u8g2_DrawUTF8则支持中文等多字节字符。在实际项目中我发现，正确设置字体是文本显示的关键：

cpp复制// 设置字体(必须先于绘制文本调用)
u8g2.setFont(u8g2_font_wqy16_t_gb2312); // 文泉驿16点阵中文字体
u8g2.drawUTF8(10, 30, "温度:25℃"); 

字体资源会占用宝贵的Flash空间，特别是在资源有限的MCU上。我的经验是只包含需要的字体和字符集，比如如果只需要显示数字，就选用精简的数字字体。U8G2库提供了字体裁剪工具，可以进一步优化字体大小。

3.2 高级文本特性

文本对齐是界面美化的重要技巧。U8G2虽然没有直接提供对齐函数，但可以通过计算字符串宽度来实现：

cpp复制// 右对齐文本示例
int strWidth = u8g2.getUTF8Width("25℃");
u8g2.drawUTF8(128-strWidth-5, 30, "25℃");

对于需要动态刷新的数值显示，我推荐使用u8g2_SetFontMode设置透明模式，这样可以避免频繁清屏导致的闪烁：

cpp复制u8g2.setFontMode(1); // 启用透明模式
u8g2.setDrawColor(1);
// 后续文本绘制将不会覆盖背景

4. 交互控件开发实战

4.1 按钮与菜单实现

交互式界面离不开按钮控件。U8G2提供了u8g2_DrawButtonUTF8函数来创建带边框的按钮，它的flags参数可以控制边框样式和阴影效果。在最近的一个项目中，我这样实现按钮交互：

cpp复制// 按钮状态管理
bool isButtonPressed(int x, int y, int w, int h, int touchX, int touchY) {
  return (touchX>x && touchX<x+w && touchY>y && touchY<y+h);
}

// 绘制带按压效果的按钮
void drawButton(const char* text, bool pressed) {
  uint8_t flags = U8G2_BTN_BW1;
  if(pressed) flags |= U8G2_BTN_INV;
  u8g2.drawButtonUTF8(50, 30, flags, 0, 2, 2, text);
}

对于更复杂的菜单系统，可以使用u8g2_UserInterfaceSelectionList创建下拉列表。我习惯将菜单数据与显示逻辑分离，这样更易于维护：

cpp复制const char *menuItems = "温度设置\n湿度设置\n亮度调节\n系统信息";
uint8_t selected = 0;

void showMenu() {
  selected = u8g2.userInterfaceSelectionList("主菜单", selected, menuItems);
}

4.2 数值输入与调整

参数配置界面通常需要数值输入功能。U8G2的u8g2_UserInterfaceInputValue函数提供了现成的解决方案：

cpp复制uint8_t temperature = 25;
void adjustTemperature() {
  u8g2.userInterfaceInputValue("温度设置", "目标值:", &temperature, 10, 30, 2, "℃");
}

在实际项目中，我发现这个函数的回调机制不够灵活，于是自己实现了基于旋转编码器的数值调节界面。核心思路是利用u8g2_DrawBox绘制进度条，配合编码器的脉冲计数来改变数值：

cpp复制void drawProgressBar(int value, int min, int max) {
  int width = map(value, min, max, 0, 100);
  u8g2.drawFrame(10, 40, 100, 10);
  u8g2.drawBox(10, 40, width, 10);
}

5. 高级技巧与性能优化

5.1 局部刷新与双缓冲

低功耗设备通常需要优化显示刷新。U8G2的u8g2_SetClipWindow函数可以限定刷新区域，显著降低功耗：

cpp复制// 只刷新屏幕右侧30像素宽的区域
u8g2.setClipWindow(98, 0, 128, 64);
u8g2.drawBox(100, 10, 20, 20);
u8g2.setMaxClipWindow(); // 恢复全屏刷新

对于动态界面，双缓冲技术可以消除闪烁。U8G2默认使用全缓冲模式，但在资源紧张时可以考虑改用页面缓冲：

cpp复制// 使用页面缓冲模式初始化
U8G2_SSD1306_128X64_NONAME_1 u8g2(U8G2_R0);

5.2 自定义图形与图标

虽然U8G2提供了基本图形，但专业界面往往需要自定义图标。我通常使用XBM格式的位图，这种格式兼容性好且易于转换：

cpp复制// 自定义温度图标
const unsigned char temp_icon[] = {
  0x1C, 0x22, 0x22, 0x22, 0x1C, 0x00, 0x1C, 0x22
};

void drawCustomIcon() {
  u8g2.drawXBM(0, 0, 8, 8, temp_icon);
}

制作XBM位图时，我推荐使用在线转换工具如"Online Image Converter"，将PNG图片转换为C数组格式。记得调整对比度并简化细节，因为单色显示屏无法表现太多灰度层次。

6. 项目实战：智能家居控制面板

结合前面介绍的技术，我们来开发一个完整的智能家居控制面板。这个案例来自我最近完成的一个实际项目，包含了温度显示、模式切换和设置菜单等典型功能。

首先定义界面结构：

cpp复制enum Screen {
  SCREEN_HOME,
  SCREEN_MENU,
  SCREEN_SETTINGS
};

Screen currentScreen = SCREEN_HOME;

主界面实现：

cpp复制void drawHomeScreen(float temp, float humi) {
  char buffer[20];
  u8g2.setFont(u8g2_font_helvB12_tr);
  
  // 温度显示
  sprintf(buffer, "%.1f℃", temp);
  u8g2.drawUTF8(10, 20, "温度:");
  u8g2.drawUTF8(60, 20, buffer);
  
  // 湿度显示
  sprintf(buffer, "%.1f%%", humi);
  u8g2.drawUTF8(10, 40, "湿度:");
  u8g2.drawUTF8(60, 40, buffer);
  
  // 底部状态栏
  u8g2.drawHLine(0, 50, 128);
  u8g2.drawUTF8(10, 63, "主页 菜单 设置");
}

菜单导航处理：

cpp复制void handleTouchEvent(int x, int y) {
  if(currentScreen == SCREEN_HOME) {
    if(y > 50) { // 点击了底部导航
      if(x < 40) currentScreen = SCREEN_HOME;
      else if(x < 80) currentScreen = SCREEN_MENU;
      else currentScreen = SCREEN_SETTINGS;
    }
  }
}

这个案例展示了如何将U8G2的各种功能组合成完整界面。在实际开发中，建议采用模块化设计，将不同屏幕的代码分离到不同文件中，并通过状态机管理界面切换。