1、概述
lv_label 标签控件是 LVGL（Light and Versatile Embedded Graphics Library）中最基础控件之一，使用也十分频繁，主要作用就如标签的意义一样，用来显示文本信息的。就如学习的第一行代码都是hello world 一样，学习 LVGL 的使用也可以从创建第一个 label 标签控件开始。
label 标签控件既可以动态修改文本内容，也可以通过接口来引用一个外部的char_array 文本指针修改文本内容，这样 LVGL 内部不会为这个文本内容分配堆空间，从而可以减少内存的使用，label 标签控件还支持自定义图标字体、换行部分文本重绘色等显示功能，有着 6 种文本显示模式。
2、长文本显示模式
通过 lv_label_set_long_mode(lv_obj_t * label, lv_label_long_mode_t long_mode); 接口设置 LVGL 标签控件的 6 种文本显示模式，long_mode 参数的取值会影响到标签对象的大小，默认值下长文本模式默认为 LV_LABEL_LONG_EXPAND。
下面是 6 种 long_mode 参数的模式 ：
1）LV_LABEL_LONG_EXPAND
该模式下，lv_obj_set_size 接口所设置的标签控件大小无效，标签的高宽会随着文本的内容进行横向和纵向的扩展，不自动换行但可以通过长文本种 ‘\n’ 字符换行。
2) LV_LABEL_LONG_BREAK
该模式下，lv_obj_set_size 接口所设置的标签控件大小，仅宽度有效，会随文本内容自动换行，高度随之纵向的扩展。
3) LV_LABEL_LONG_DOT
该模式下，lv_obj_set_size 接口所设置的标签控件大小，宽高度有效，会随文本内容自动换行，显示不下时，在文本的末尾显示一个 ‘...‘ 省略号，可设置省略号的数目。
4) LV_LABEL_LONG_SROLL
该模式下，lv_obj_set_size 接口所设置的标签控件大小，宽高度有效，当显示不下时，会左右反复滚动显示。
5) LV_LABEL_LONG_SROLL_CIRC
该模式下，lv_obj_set_size 接口所设置的标签控件大小，宽高度有效，当显示不下时，会向右环形滚动显示。
6) LV_LABEL_LONG_CROP
该模式下，lv_obj_set_size 接口所设置的标签控件大小，宽高度有效，当显示不下时，不显示超出部分如被剪切一样。
需注意！ lv_label_set_long_mode（）接口调用与 lv_obj_set_size（）接口调用的顺序需要注意，lv_label_set_long_mode（）需要放在lv_obj_set_size（）前。
3、文本重绘色功能
LVGL 有着较为特别的重绘色功能，可在一个标签里可以含有多种不同颜色的文本，重绘色格式：#十六进制颜色值 文本#
十六进制颜色值和文本之间至少得有一个空格。
void lv_label_set_recolor(lv_obj_t * label, bool en); 接口使能文本重绘色功能。
4、图标字体
标签控件可以显示一些常用小图标，当作字体来显示，但如同字体一样只能显示单色，支持重绘色功能。
在 lv_symbol_def.h 头文件有关于系统自带的图标字符，需要申明字体以及 LV_FONT_DECLARE 宏的定义。
4.1、创建图标字体
首先获取 ttf/woff/woff2 格式的字体文件，可以在网上搜索免费图标网站，
下载得到 iconfont.ttf 字体文件后，接下来通过创建图标字库的命令，
lv_font_conv --no-compress --format lvgl --font “iconfont.ttf 字体文件目录地址 ” -o “ 创建图标字体地址 \my_font_icon_30.c” --bpp 4 --size 30 –r 0xe7e0,0xed6a
4.2、使用图标字体
① 在程序开始处申明字体，就可以在配置标签样式中设置使用字体
LV_FONT_DECLARE(my_font_30); //申明字体
//定义图标
#define MY_ICON_WIFI "\xEE\x9F\xA0" // 图标
#define MY_ICON_USB "\xEE\xB5\xAA" // 图标
lv_style_set_text_font(&style_screen_label_1_main, LV_STATE_DEFAULT, & my_font_30);
② 而设置文本需要使用图标的编码调用，需要先将图标的 unicode 编码转换为 utf-8 编码，如在线转换网址： http://www.ltg.ed.ac.uk/~richard/utf-8.cgi
③ 在设置标签文本时使用图标的编码调用
lv_label_set_text(ui->screen_label_1, "#6A2B00 "MY_ICON_BATTERY"##6A2B00 "MY_ICON_YUANGUANG"##6A2B00 "MY_ICON_ENGINE"#");
图标字体显示
5、标签控件演示代码
void setup_scr_screen(lv_ui *ui)
{
//Write codes screen
ui->screen = lv_obj_create(NULL, NULL);
//Write codes screen_label_1
ui->screen_label_1 = lv_label_create(ui->screen, NULL);
lv_label_set_text(ui->screen_label_1, "文本的内容横向纵向扩展");
lv_label_set_long_mode(ui->screen_label_1, LV_LABEL_LONG_BREAK);
lv_label_set_align(ui->screen_label_1, LV_LABEL_ALIGN_CENTER);
//Write style LV_LABEL_PART_MAIN for screen_label_1
static lv_style_t style_screen_label_1_main;
lv_style_init(&style_screen_label_1_main);
//Write style state: LV_STATE_DEFAULT for style_screen_label_1_main
lv_style_set_radius(&style_screen_label_1_main, LV_STATE_DEFAULT, 0);
lv_style_set_bg_color(&style_screen_label_1_main, LV_STATE_DEFAULT, lv_color_make(0xff, 0xff, 0xff));
lv_style_set_bg_grad_color(&style_screen_label_1_main, LV_STATE_DEFAULT, lv_color_make(0xff, 0xff, 0xff));
lv_style_set_bg_grad_dir(&style_screen_label_1_main, LV_STATE_DEFAULT, LV_GRAD_DIR_VER);
lv_style_set_bg_opa(&style_screen_label_1_main, LV_STATE_DEFAULT, 160);
lv_style_set_text_color(&style_screen_label_1_main, LV_STATE_DEFAULT, lv_color_make(0x00, 0x00, 0x00));
lv_style_set_text_font(&style_screen_label_1_main, LV_STATE_DEFAULT, &lv_font_simsun_30);
lv_style_set_text_letter_space(&style_screen_label_1_main, LV_STATE_DEFAULT, 2);
lv_style_set_pad_left(&style_screen_label_1_main, LV_STATE_DEFAULT, 0);
lv_style_set_pad_right(&style_screen_label_1_main, LV_STATE_DEFAULT, 0);
lv_style_set_pad_top(&style_screen_label_1_main, LV_STATE_DEFAULT, 0);
lv_style_set_pad_bottom(&style_screen_label_1_main, LV_STATE_DEFAULT, 0);
lv_obj_add_style(ui->screen_label_1, LV_LABEL_PART_MAIN, &style_screen_label_1_main);
lv_obj_set_pos(ui->screen_label_1, 0, 173);
lv_obj_set_size(ui->screen_label_1, 720, 0);
}
6、参考资料
【LVGL 官方文档】
https://docs.lvgl.io/7.11/overview/object.html
【正点原子 手把手教你学 LittleVGL】
http://www.openedv.com/docs/book-videos/zdyzshipin/4free/littleVGL.html
【LVGL 官网】
评论