LVGL -按键的图标创建下

1 图标

1.1 内置图标

LVGL 内建符号（Symbols）是一组特殊字符，它们作为图标嵌入在标签（lv_label）中。你可以像使用文本一样直接使用它们，非常适合在按钮、标签、状态栏等 UI 元素中显示图标。你可以选择 Font Awesome 或其他图标字体，并将其直接嵌入应用中。LVGL 内建图标字体（如 LV_SYMBOL_*）是可以改变大小的。通过调整 lv_label 的样式和字体大小，可以轻松改变图标的显示大小

1.2 常见符号例举

LV_SYMBOL_OK	 ✔️ 确认 / 勾号
LV_SYMBOL_CLOSE	 ❌ 关闭 / 叉
LV_SYMBOL_POWER	🔌 电源
LV_SYMBOL_SETTINGS	⚙️ 设置 / 齿轮
LV_SYMBOL_WIFI	📶 Wi-Fi
LV_SYMBOL_BLUETOOTH	📳 蓝牙
LV_SYMBOL_BATTERY_FULL	🔋 电池满
LV_SYMBOL_BATTERY_3	🔋 电量 75%
LV_SYMBOL_BATTERY_2	🔋 电量 50%
LV_SYMBOL_BATTERY_1	🔋 电量 25%
LV_SYMBOL_BATTERY_EMPTY	🔋 电池空
LV_SYMBOL_CHARGE	⚡ 充电符号
LV_SYMBOL_USB	🔌 USB
LV_SYMBOL_TRASH	🗑️ 垃圾桶
LV_SYMBOL_EDIT	✏️ 编辑
LV_SYMBOL_SAVE	💾 保存
LV_SYMBOL_HOME	🏠 首页
LV_SYMBOL_DOWNLOAD	⬇️ 下载
LV_SYMBOL_DRIVE	💽 存储设备
LV_SYMBOL_REFRESH	🔄 刷新
LV_SYMBOL_VOLUME	🔊 音量
LV_SYMBOL_MUTE	🔇 静音
LV_SYMBOL_LEFT	◀️ 左箭头
LV_SYMBOL_RIGHT	▶️ 右箭头
LV_SYMBOL_UP	▲ 上箭头
LV_SYMBOL_DOWN	▼ 下箭头
LV_SYMBOL_WARNING	⚠️ 警告 }
LV_SYMBOL_SHUFFLE	🔀 随机
LV_SYMBOL_LOOP	🔁 循环
LV_SYMBOL_PLAY	▶️ 播放
LV_SYMBOL_PAUSE	⏸️ 暂停
LV_SYMBOL_STOP	⏹️ 停止
LV_SYMBOL_PREV	⏮️ 上一曲
LV_SYMBOL_NEXT	⏭️ 下一曲
LV_SYMBOL_EJECT	⏏️ 弹出
LV_SYMBOL_KEYBOARD	⌨️ 键盘
LV_SYMBOL_GPS	🧭 GPS

你可以使用 lv_obj_set_style_text_font() 改变符号的显示大小：

1.3 演示代码

#include "lvgl.h"
// 创建带图标的按钮
void create_btn_with_icon(void)
{
            
    lv_obj_t *btn = lv_btn_create(lv_scr_act());
    lv_obj_set_size(btn, 150, 50);
    lv_obj_align(btn, LV_ALIGN_CENTER, 0, 50);

    // 添加图标（使用 Unicode 字符，比如 Font Awesome 图标）
    lv_obj_t *label = lv_label_create(btn);
    lv_label_set_text(label, LV_SYMBOL_WIFI);  // 使用内置的图标符号
    lv_obj_set_style_text_font(label, &lv_font_montserrat_32, 0);  // 改变为 32px 大小
    lv_obj_center(label);
}

2 自创图标字体

通常的步骤是将字体文件嵌入到 LVGL 项目中，之后在代码中使用该字体。

2.1 下载图标字体

从icomoon的官网下载图片。选择你需要图标或者购买的图标。点击生成字库。

2.2 为每个图标，申城一个符号编码（Unicode Symbols ）。然后点击下载

2.3 找到生成字库，如图所示。

2.4 转换字体为 LVGL 可用的格式：

使用 LVGL 自带的 fontconvert 工具，将字体文件（如 TTF 文件）转换为 LVGL 可用的 C 代码。

参数配置：

2.4.1 Bpp（Bits Per Pixel）含义：每个像素所使用的位数，用于表示该字体像素的“颜色深度”或“灰度级别”。

2.4.2 height in px 转换后字体的像素高度，设置生成的字体的垂直高度（以像素为单位）。

height = 16 表示生成的字体字符，其高度最大为 16 像素，适合小图标或正常文本。
height = 32 会生成一个较大的字体，字符高度为 32 像素，更适合大按钮或标题。
height = 64 会生成超大字体，一般用于视觉焦点较强的区域，但占用内存更大。

2.4.3 Range 的作用：

它决定了你要导出的字体中包含哪些字符，以便节省空间、提高性能。因为很多字体文件（如 TTF）中包含数千字符，但嵌入式项目往往只需要几十或几百个。

2.5 将字体文件包含到项目中

把 myicon.c 文件添加到你的项目源文件中。

2.6 在 LVGL 中设置字体

通过 lv_obj_set_style_text_font() 来设置自定义字体。
uXXXX 只能表示最多 4 位（U+FFFF 以下），对于 5 位及以上（U+10000 ~ U+10FFFF），，要用 U000XXXXX。

2.6.1 配置代码

2.6.2 显示图标

3 使用图片作为图标

如果你想用自定义图片作为图标（比如 PNG、JPG），你需要将图片转化为 LVGL 支持的格式（例如，LV_IMG_DECLARE）。

3.1 使用图片作为图标

首先，假设你已经有一个图标图片（比如一个 .png 格式的图标），你需要将它转换成 LVGL 支持的格式。或者从可以从图标网站下载。

3.2 减少代码体积，可以提前修改尺寸

3.3 将图片转换为 C 文件

使用 LVGL 的 imageconverter 工具（在 LVGL 官方工具包中）将图标图片转换为 C 代码。然后将这个 C 文件包含到项目中。

3.4：加载和显示图标

假设你已经转换了一个 blood. c 文件，其中包含了图标的 C 数据。

#include "lvgl.h"
#include "my_icon.c"  // 引入转换后的图片数据文件

// 创建一个按钮，并在按钮上显示图标
void create_btn_with_image(void)
{
            
    lv_obj_t *btn = lv_btn_create(lv_scr_act());
    lv_obj_set_size(btn, 150, 50);
    lv_obj_align(btn, LV_ALIGN_CENTER, 0, 50);

    // 创建一个图片对象作为图标
    lv_obj_t *img = lv_img_create(btn);
    lv_img_set_src(img, &my_icon);  // 使用转换后的图片对象
    lv_obj_center(img);  // 图片居中
}

文章版权归作者所有，未经允许请勿转载。如内容涉嫌侵权，请在本页底部进入<联系我们>进行举报投诉!

THE END