LittleVGL 学习笔记1-标签，风格，字体
亢保赫
LittleVGL 学习笔记（一）
设置父类
- 建立显示屏scr为父类，显示屏一般父类为显示屏
lv_obj_t* scr = lv_scr_act();
建立标签子类
- 声明标签子类
举例：lv_obj_t* label1；
- 在父类中创建标签子类
/****************************************************************************************************
*@par : 该子类存在的父类，比如显示屏scr
*@copy : 传入的参数，一般为NULL
*******************************************************************************************************/
lv_obj_t * lv_label_create(lv_obj_t * par, const lv_obj_t * copy)
举例：label1 = lv_label_create(scr, NULL);
- 设置标签模式
enum {
//标签宽度随文本大小改变
LV_LABEL_LONG_EXPAND, /**< Expand the object size to the text size*/
//标签高度随文本大小改变，自动换行
LV_LABEL_LONG_BREAK, /**< Keep the object width, break the too long lines and expand the object
height*/
//文本长度超过标签长度部分显示。。。
LV_LABEL_LONG_DOT, /**< Keep the size and write dots at the end if the text is too long*/
//文本长度超过标签长度前后滚动
LV_LABEL_LONG_SROLL, /**< Keep the size and roll the text back and forth*/
//文本长度超过标签长度循环滚动
LV_LABEL_LONG_SROLL_CIRC, /**< Keep the size and roll the text circularly,text lenth must more than the label lenth*/
文本长度超过标签长度本分不显示
LV_LABEL_LONG_CROP, /**< Keep the size and crop the text out of it*/
};
/****************************************************************************************************
*@label: 标签名称
*@lv_label_long_mode_t : 标签模式
*******************************************************************************************************/
void lv_label_set_long_mode（lv_obj_t * label, lv_label_long_mode_t long_mode);
举例：lv_label_set_long_mode（label1, LV_LABEL_LONG_EXPAND);
- 设置标签宽度/高度/尺寸
/****************************************************************************************************
*@obj： 标签名称
*@w： 标签宽度
*******************************************************************************************************/
void lv_label_set_width(lv_obj_t * obj, lv_coord_t w)
举例：lv_label_set_width(label1,100);
/****************************************************************************************************
*@obj： 标签名称
*@h： 标签高度
*******************************************************************************************************/
void lv_obj_set_height(lv_obj_t * obj, lv_coord_t h)
举例：lv_obj_set_height(label1,100);
/****************************************************************************************************
*@obj： 标签名称
*@w: 标签长度
*@h： 标签高度
*******************************************************************************************************/
void lv_obj_set_size(lv_obj_t * obj, lv_coord_t w, lv_coord_t h)
举例：lv_obj_set_height(label1,100,100);
- 设置标签风格
/****************************************************************************************************
*@label： 标签名称
*@type： 标签类型
*@style： 标签风格
*******************************************************************************************************/
static inline void lv_label_set_style(lv_obj_t * label, lv_label_style_t type, const lv_style_t * style)
举例：lv_label_set_style(label1,LV_LABEL_STYLE_MAIN,&lv_style_plain_color);
设定自定义风格：
风格结构体定义
typedef struct
{
uint8_t glass : 1; /**< 1: Do not inherit this style*/
/** Object background. */
struct
{
//上半部分颜色
lv_color_t main_color; /**< Object's main background color. */
//下半部分颜色
lv_color_t grad_color; /**< Second color. If not equal to `main_color` a gradient will be drawn for the background. */
//4角的圆角弧度
lv_coord_t radius; /**< Object's corner radius. You can use #LV_RADIUS_CIRCLE if you want to draw a circle. */
//透明度
lv_opa_t opa; /**< Object's opacity (0-255). */
//边框设置
struct
{
//边框颜色
lv_color_t color; /**< Border color */
//边框宽度
lv_coord_t width; /**< Border width */
//边框位置-上/下/左/右
lv_border_part_t part; /**< Which borders to draw */
//边框阴影
lv_opa_t opa; /**< Border opacity. */
} border;
//阴影设置
struct
{
//阴影颜色
lv_color_t color;
//阴影宽度
lv_coord_t width;
//阴影类型
lv_shadow_type_t type; /**< Which parts of the shadow to draw */
} shadow;
//边距设置
struct
{
lv_coord_t top;
lv_coord_t bottom;
lv_coord_t left;
lv_coord_t right;
lv_coord_t inner;
} padding;
} body;
/** Style for text drawn by this object. */
//文字设置
struct
{
//文本颜色
lv_color_t color; /**< Text color */
//文本选中颜色
lv_color_t sel_color; /**< Text selection background color. */
//文本字体
const lv_font_t * font;
//文本间距
lv_coord_t letter_space; /**< Space between letters */
//文本行距
lv_coord_t line_space; /**< Space between lines (vertical) */
//文本透明度
lv_opa_t opa; /**< Text opacity */
} text;
/**< Style of images. */
//图片设置
struct
{
lv_color_t color; /**< Color to recolor the image with */
lv_opa_t intense; /**< Opacity of recoloring (0 means no recoloring) */
lv_opa_t opa; /**< Opacity of whole image */
} image;
/**< Style of lines (not borders). */
struct
{
lv_color_t color;
lv_coord_t width;
lv_opa_t opa;
uint8_t rounded : 1; /**< 1: rounded line endings*/
} line;
} lv_style_t;
//一定要定义static或者全局变量，否则会无法显示
static lv_style_t my_style;
//将lv_style_plain_color复制到my_style中，这样可以只配置自己需要的参数
lv_style_copy(&my_style,&lv_style_plain_color)
//上下部分颜色不一样将出现渐变色效果
my_style.body.main_color = LV_COLOR_BLUE;
my_style.body.grad_color = LV_COLOR_YELLOW;
//4角变成5mm圆角
my_style.body.radius = 5;
//边框透明度设置0~255，255为不透明
my_style.body.opa = LV_OPA_COVER;
//边距设置
my_style.body.padding.top = 10;
//阴影设置
my_style.body.shadow.type = LV_SHADOW_FULL;
my_style.body.shadow.width = 10;
my_style.body.shadow.color = LV_COLOR_RED;
//边框设置
my_style.body.border.color = LV_COLOR_BLACK;
my_style.body.border.width = 1;
my_style.body.border.part = LV_BORDER_FULL;
my_style.body.border.opa = LV_OPA_100;
//文字设置
my_style.text.color = LV_COLOR_RED;
my_style.text.font = &lv_font_roboto_28; //字体选择
my_style.text.line_space = 10; //文字间水平距离
my_style.text.letter_space = 10; //文字间垂直距离
- 使能背景绘制
/****************************************************************************************************
*@label 标签名称
*@en 是否使能
*******************************************************************************************************/
void lv_label_set_body_draw(lv_obj_t * label, bool en)
举例：lv_label_set_body_draw(label1,true);
- 使能标签点击功能(非必要)
/****************************************************************************************************
*@label 标签名称
*@en 是否使能
*******************************************************************************************************/
void lv_label_set_click(lv_obj_t * label, bool en)
举例：
lv_label_set_click(label1,true);
lv_obj_set_event_cb(label1,event_handler);//设置事件回调函数
- 设置标签文本
/****************************************************************************************************
*@label 标签名称
*@en 是否使能
*@text 显示的文本
*******************************************************************************************************/
void lv_label_set_recolor(lv_obj_t * label, bool en)
void lv_label_set_text(lv_obj_t * label, const char * text)
举例：
lv_label_set_recolor(label2,true);//使能文本重绘色功能,不需要可以不用
lv_label_set_text(label2,"Please #00ff00 click #me!");//设置文本
9.位置对齐：如标签的位置对齐
/** Object alignment. */
enum {
LV_ALIGN_CENTER = 0,
LV_ALIGN_IN_TOP_LEFT,
LV_ALIGN_IN_TOP_MID,
LV_ALIGN_IN_TOP_RIGHT,
LV_ALIGN_IN_BOTTOM_LEFT,
LV_ALIGN_IN_BOTTOM_MID,
LV_ALIGN_IN_BOTTOM_RIGHT,
LV_ALIGN_IN_LEFT_MID,
LV_ALIGN_IN_RIGHT_MID,
LV_ALIGN_OUT_TOP_LEFT,
LV_ALIGN_OUT_TOP_MID,
LV_ALIGN_OUT_TOP_RIGHT,
LV_ALIGN_OUT_BOTTOM_LEFT,
LV_ALIGN_OUT_BOTTOM_MID,
LV_ALIGN_OUT_BOTTOM_RIGHT,
LV_ALIGN_OUT_LEFT_TOP,
LV_ALIGN_OUT_LEFT_MID,
LV_ALIGN_OUT_LEFT_BOTTOM,
LV_ALIGN_OUT_RIGHT_TOP,
LV_ALIGN_OUT_RIGHT_MID,
LV_ALIGN_OUT_RIGHT_BOTTOM,
};
/****************************************************************************************************
*@obj： 名称
*@base： 对齐基准，如果是NULL则选择父类
*@align： 对齐位置
*@x_mod： x偏移位置
*@y_mod： y偏移位置
*******************************************************************************************************/
void lv_obj_align(lv_obj_t * obj, const lv_obj_t * base, lv_align_t align, lv_coord_t x_mod, lv_coord_t y_mod)
举例：lv_obj_align(label2,NULL,LV_ALIGN_CENTER,0,0);
- 标签文本对齐
enum {
LV_LABEL_ALIGN_LEFT, /**< Align text to left */
LV_LABEL_ALIGN_CENTER, /**< Align text to center */
LV_LABEL_ALIGN_RIGHT, /**< Align text to right */
};
/****************************************************************************************************
*@label： 标签名称
*@align： 对齐位置
*******************************************************************************************************/
void lv_label_set_align(lv_obj_t * label, lv_label_align_t align)
举例：lv_label_set_align(label1,LV_LABEL_ALIGN_CENTER);
- 标签内文本颜色重绘（非必要）
/****************************************************************************************************
*@label： 标签名称
*@en： 使能
*******************************************************************************************************/
void lv_label_set_recolor(lv_obj_t * label, bool en)
举例：
lv_label_set_recolor(label1,true);
lv_label_set_text(label1,"Please #00ff00 click #me!");//#颜色 #设置文本颜色
- 标签内文本插入与剪切
插入
/****************************************************************************************************
*@label： 标签名称
*@pos: 插入位置
*@txt： 插入文本内容
*******************************************************************************************************/
void lv_label_ins_text(lv_obj_t * label, uint32_t pos, const char * txt)
举例：lv_label_ins_text(label1,0,"OK");//在0位置插入ok
剪切
/****************************************************************************************************
*@label： 标签名称
*@pos: 插入位置
*@cnt： 剪切的字符数
*******************************************************************************************************/
void lv_label_cut_text(lv_obj_t * label, uint32_t pos, uint32_t cnt)
举例：lv_label_cut_text(label1,0,2);//从0位置剪切2个字符
- 标签内文本动画速度：专门针对LV_LABEL_LONG_SROLL与LV_LABEL_LONG_SROLL_CIRC
/****************************************************************************************************
*@label： 标签名称
*@anim_speed: 动画速度
*******************************************************************************************************/
void lv_label_set_anim_speed(lv_obj_t * label, uint16_t anim_speed)
举例：lv_label_set_anim_speed(label1,20);
类似资料：