Simple Bar
void lv_example_bar_1(void)
{
lv_obj_t * bar1 = lv_bar_create(lv_scr_act()); //创建Bar对象
lv_obj_set_size(bar1, 200, 20); //设置宽为200，高为20
lv_obj_center(bar1); //居中显示
lv_bar_set_value(bar1, 70, LV_ANIM_OFF); //设置进度值为70,动画效果为OFF
}
- 运行效果图
static void lv_example_bar_2(void)
{
static lv_style_t style_bg; //背景style
static lv_style_t style_indic; //指示器style
lv_style_init(&style_bg);
lv_style_set_border_color(&style_bg, lv_palette_main(LV_PALETTE_BLUE)); //设置背景色
lv_style_set_border_width(&style_bg, 2); // 设置边框宽度
lv_style_set_pad_all(&style_bg, 6); /*To make the indicator smaller*/
lv_style_set_radius(&style_bg, 6); //设置倒角
lv_style_set_anim_time(&style_bg, 1000); //设置动画时间
lv_style_init(&style_indic);
lv_style_set_bg_opa(&style_indic, LV_OPA_COVER); //设置背景透明度
lv_style_set_bg_color(&style_indic, lv_palette_main(LV_PALETTE_BLUE)); //设置背景色
lv_style_set_radius(&style_indic, 3);//设置指示器倒角
lv_obj_t* bar = lv_bar_create(lv_scr_act()); //创建Bar
lv_obj_remove_style_all(bar); /*To have a clean start*/
lv_obj_add_style(bar, &style_bg, 0); //添加背景style
lv_obj_add_style(bar, &style_indic, LV_PART_INDICATOR);//添加指示器style
lv_obj_set_size(bar, 200, 20); //设置大小
lv_obj_center(bar); // 居中显示
lv_bar_set_value(bar, 100, LV_ANIM_ON); //设置进度值为100，开启动画特性
}
- 运行效果
- 动画执行回调
static void set_temp(void* bar, int32_t temp)
{
lv_bar_set_value(bar, temp, LV_ANIM_ON); //设置Bar进度值
}
- 创建Temperature Bar
static void lv_example_bar_3(void)
{
static lv_style_t style_indic; //指示器style
lv_style_init(&style_indic);
lv_style_set_bg_opa(&style_indic, LV_OPA_COVER); //透明度为LV_OPA_COVER
lv_style_set_bg_color(&style_indic, lv_palette_main(LV_PALETTE_RED)); //指示器背景为LV_PALETTE_RED
lv_style_set_bg_grad_color(&style_indic, lv_palette_main(LV_PALETTE_BLUE));//指示器渐变色为LV_PALETTE_BLUE
lv_style_set_bg_grad_dir(&style_indic, LV_GRAD_DIR_VER);//渐变色方向为LV_GRAD_DIR_VER
lv_obj_t* bar = lv_bar_create(lv_scr_act()); //创建Bar
lv_obj_add_style(bar, &style_indic, LV_PART_INDICATOR);//添加style
lv_obj_set_size(bar, 20, 200);//设置大小
lv_obj_center(bar); //居中显示
lv_bar_set_range(bar, -20, 40);／／设置Bar最小值为-20，最大值为40
lv_anim_t a;
lv_anim_init(&a);
lv_anim_set_exec_cb(&a, set_temp);//设置动画执行回调set_temp
lv_anim_set_time(&a, 3000); //动画时间为3000毫秒
lv_anim_set_playback_time(&a, 3000);//回播时间为3000毫秒
lv_anim_set_var(&a, bar); //设置动画执行对象为bar
lv_anim_set_values(&a, -20, 40); //动画播放start为-20，end为40
lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);//无限重复执行
lv_anim_start(&a);//启动动画
}
- 运行效果
static void lv_example_bar_4(void)
{
LV_IMG_DECLARE(img_skew_strip); //声明image资源img_skew_strip
static lv_style_t style_indic;
lv_style_init(&style_indic);
lv_style_set_bg_img_src(&style_indic, &img_skew_strip);//设置背景图片为img_skew_strip
lv_style_set_bg_img_tiled(&style_indic, true);
lv_style_set_bg_img_opa(&style_indic, LV_OPA_30); //透明度为LV_OPA_30
lv_obj_t* bar = lv_bar_create(lv_scr_act()); //创建Bar对象
lv_obj_add_style(bar, &style_indic, LV_PART_INDICATOR);//添加style
lv_obj_set_size(bar, 260, 20); //设置大小
lv_obj_center(bar); //居中显示
lv_bar_set_mode(bar, LV_BAR_MODE_RANGE);//设置Bar mode为LV_BAR_MODE_RANGE
lv_bar_set_value(bar, 90, LV_ANIM_OFF); //设置Bar进度条值为90
lv_bar_set_start_value(bar, 20, LV_ANIM_OFF); //设置Bar起始值为20
}
- 运行效果图
static void lv_example_bar_5(void)
{
lv_obj_t* label;
lv_obj_t* bar_ltr = lv_bar_create(lv_scr_act()); //创建左到右对齐使用的Bar对象，默认对齐方式
lv_obj_set_size(bar_ltr, 200, 20);//设置大小
lv_bar_set_value(bar_ltr, 70, LV_ANIM_OFF);//设置进度为70%
lv_obj_align(bar_ltr, LV_ALIGN_CENTER, 0, -30);//居中垂直向上偏移30对齐屏幕
label = lv_label_create(lv_scr_act()); //创建Label对象
lv_label_set_text(label, "Left to Right base direction"); //显示内容Left to Right base direction
lv_obj_align_to(label, bar_ltr, LV_ALIGN_OUT_TOP_MID, 0, -5);//与bar_ltr对象的外框顶部居中向上偏移5对齐
lv_obj_t* bar_rtl = lv_bar_create(lv_scr_act());//创建右到左对齐使用的Bar对象
lv_obj_set_style_base_dir(bar_rtl, LV_BASE_DIR_RTL, 0);//设置右到左对齐方向
lv_obj_set_size(bar_rtl, 200, 20); //设置大小
lv_bar_set_value(bar_rtl, 70, LV_ANIM_OFF); //进度为70%
lv_obj_align(bar_rtl, LV_ALIGN_CENTER, 0, 30);//与屏幕居中向下偏移30对齐
label = lv_label_create(lv_scr_act());
lv_label_set_text(label, "Right to Left base direction"); //显示label内容
lv_obj_align_to(label, bar_rtl, LV_ALIGN_OUT_TOP_MID, 0, -5);//与bar_rtl对象的外框顶部居中向上偏移5对齐
}
- 运行效果图
/**
* @brieaf 动画执行回调函数
*/
static void set_value(void* bar, int32_t v)
{
lv_bar_set_value(bar, v, LV_ANIM_OFF); //设置Bar进度条值
}
/**
* @brieaf 绘制结束回调函数
*/
static void event_cb(lv_event_t* e)
{
lv_obj_draw_part_dsc_t* dsc = lv_event_get_param(e);//获取绘制描述符
if (dsc->part != LV_PART_INDICATOR) return; //只对指示器绘制部分处理
lv_obj_t* obj = lv_event_get_target(e); //获取绘制obj对象
lv_draw_label_dsc_t label_dsc;
lv_draw_label_dsc_init(&label_dsc); //初时化label绘制描述符
label_dsc.font = LV_FONT_DEFAULT; //设置默认绘制字体
char buf[8];
lv_snprintf(buf, sizeof(buf), "%d", lv_bar_get_value(obj)); //将Bar进度条值格式化成字符串
lv_point_t txt_size;
lv_txt_get_size(&txt_size, buf, label_dsc.font, label_dsc.letter_space, label_dsc.line_space, LV_COORD_MAX, label_dsc.flag); //获取显示字符串大小
lv_area_t txt_area;
/*If the indicator is long enough put the text inside on the right*/
if (lv_area_get_width(dsc->draw_area) > txt_size.x + 20) { //Bar指示器宽度 > 显示字符大小+20个像素点
txt_area.x2 = dsc->draw_area->x2 - 5; //计算label位置x2
txt_area.x1 = txt_area.x2 - txt_size.x + 1;//计算label位置x1
label_dsc.color = lv_color_white(); //label字体白色
}
/*If the indicator is still short put the text out of it on the right*/
else {
txt_area.x1 = dsc->draw_area->x2 + 5;
txt_area.x2 = txt_area.x1 + txt_size.x - 1;
label_dsc.color = lv_color_black(); //label黑示字体
}
txt_area.y1 = dsc->draw_area->y1 + (lv_area_get_height(dsc->draw_area) - txt_size.y) / 2;//计算label在Bar中的y1位置
txt_area.y2 = txt_area.y1 + txt_size.y - 1;//计算label在Bar中y2的位置
lv_draw_label(&txt_area, dsc->clip_area, &label_dsc, buf, NULL); //绘制label内容
}
/**
* Custom drawer on the bar to display the current value
*/
static void lv_example_bar_6(void)
{
lv_obj_t* bar = lv_bar_create(lv_scr_act()); //创建Bar对象
lv_obj_add_event_cb(bar, event_cb, LV_EVENT_DRAW_PART_END, NULL); //增加LV_EVENT_DRAW_PART_END回调事件
lv_obj_set_size(bar, 200, 20); //设置大小
lv_obj_center(bar); //屏幕居中显示
lv_anim_t a;
lv_anim_init(&a); //初时化动画变量a
lv_anim_set_var(&a, bar); //关联动画操作对象bar
lv_anim_set_values(&a, 0, 100); //设置动画值从0~100变化
lv_anim_set_exec_cb(&a, set_value); //设置动画执行回调函数
lv_anim_set_time(&a, 2000); //设置动画时间为2000毫秒
lv_anim_set_playback_time(&a, 2000); //设置动画回播时间为2000毫秒
lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE); //动画无限重复
lv_anim_start(&a); //启动动画
}
- 运行效果图
