1

LVGL 是一个灵活强大的图形库,多用于嵌入式系统。其中,文本标签(label)是我们比较常用的一个组件,UI 一般会使用文本居中的设计,但我在实践中发现,LVGL 并没有使文本居中的接口供调用,这里就分享一种使 label 的文本居中的方式。

1 先看一段 label 相关的代码

const char* content = "this is for test";
// 在 root 上创建一个文本标签,并居中显示
lv_obj_t* label = lv_label_create(root);
lv_obj_center(label);
// 这里将边框显示出来,方便我们观察文字的位置
lv_obj_set_style_border_width(label, 2, 0);
lv_obj_set_style_border_color(label, lv_color_black(), 0);
// 红色文字,使用默认字体
lv_obj_set_style_text_color(label, lv_color_hex(0xFF0000), 0);
// label 的 size 设置的偏大,方便观察文字在其中的相对位置
lv_obj_set_size(label, 200, 50);
lv_label_set_text(label, content);

上面这段代码跑出来是什么样的呢?如下图,因为 label 的高度(50)是远大于文本的高度的,文本的默认对齐位置是左上角,所以就呈现了图中的效果。
image.png
我找了一会,发现有个函数叫 lv_obj_set_style_text_align(),看起来像是设置文字对齐方式的,让我们先试一下。

// 前面代码不变,省略了
lv_obj_set_style_text_align(label, LV_ALIGN_CENTER, 0);
lv_obj_set_size(label, 200, 50);
lv_label_set_text(label, content);

现在是什么样的效果呢?一点变化也没有,不用怀疑,我确实重新跑了一次代码,这也是新的结果。
image.png

2 如何让 label 中的文字居中呢?

其实也很简单,我们使用 pad 来调节文字的位置即可。如图所示,一个 label 的文本其实在中间,四边都是有 pad 存在的,我们可以控制 pad 的高(宽)度,来间接控制文本内容在 label 中的相对位置。
image.png

代码如下

// 前面代码不变,省略了
lv_obj_set_size(label, 200, 50);
lv_label_set_text(label, content);
auto fontHeight = lv_font_get_line_height(LV_FONT_DEFAULT);
auto verPad = (50 - fontHeight)/2;
lv_obj_set_style_pad_top(label, verPpad, 0);
auto textWidth = lv_txt_get_width(content, strlen(content), LV_FONT_DEFAULT, 0);
auto horPad = (200 - textWidth)/2;
lv_obj_set_style_pad_left(label, horPad, 0);

我们通过 lv_font_get_line_height 来计算出文本的实际高度,进而计算出上下 pad 的高度,水平方向也是同理。效果图如下,文本已经居中了。

image.png

实际上,竖直方向的居中用的比较多,水平方向一般不用管,我们通常会在该方向使用自适应宽度,文本自然就会在中间了。

3 总结

让 label 的文本居中其实比较简单,掌握了 label 组件的布局就容易理解,可以使用 pad 来间接控制文本的位置。


会灰的飞猫
34 声望0 粉丝

移动端、嵌入式领域系统开发工程师,分享 Android、c++、java 相关的经验