LVGL笔记(6)-电子相册使用手势切换图片(windows仿真)
今天看了一下lvgl的EVENT枚举，有一个事件 LV_EVENT_GESTURE 是响应手势滑屏的，就把电子相册的按键改为手势操作。
参考文章：
1.作者：weixin_46964996，文章： LVGL 的 LV_EVENT_GESTURE
2.我自己的文章： LVGL笔记(2)-电子相册（windows模拟和ESP32-S3）
先看看效果：
手势滑动相册
1.LV_EVENT_GESTURE事件的回调函数
这个lvgl的事件好像没什么可说的，直接上源码：
static void albumpage_gesture_cb(lv_event_t * e)
{
lv_event_code_t event = lv_event_get_code(e);
if(event == LV_EVENT_GESTURE) {
// 等待触屏释放
lv_indev_wait_release(lv_indev_get_act());
// 获取方向
lv_dir_t dir = lv_indev_get_gesture_dir(lv_indev_get_act());
switch(dir){
case LV_DIR_LEFT:
imganmitoleft(); printf("to left\n");
break;
case LV_DIR_RIGHT:
imganmitoright(); printf("to right\n");
break;
}
}
}
方向的定义在头文件 《lvgl/src/misc/lv_area.h》 中：
enum {
LV_DIR_NONE = 0x00,
LV_DIR_LEFT = (1 << 0),
LV_DIR_RIGHT = (1 << 1),
LV_DIR_TOP = (1 << 2),
LV_DIR_BOTTOM = (1 << 3),
LV_DIR_HOR = LV_DIR_LEFT | LV_DIR_RIGHT,
LV_DIR_VER = LV_DIR_TOP | LV_DIR_BOTTOM,
LV_DIR_ALL = LV_DIR_HOR | LV_DIR_VER,
};
typedef uint8_t lv_dir_t;
在相册的界面中设置回调函数：
void ui_albumpage_screen_init(lv_obj_t *parent)
{
......
lv_obj_add_event_cb(lv_scr_act(), albumpage_gesture_cb, LV_EVENT_GESTURE, NULL);
......
}
2.较为完整的代码
void imganmitoright()
{
// 如果不是最后一个，指向下一个指针
if(g_curImg_p->index < (imgs_total_nums) ){
g_curImg_p = _lv_ll_get_next(&ll_test, g_curImg_p);
sprintf(g_fullPath,"%s/%s",g_curPath,g_curImg_p->name);
printf(g_fullPath);
lv_img_set_src(ui_Image1, g_fullPath);
// 显示图片的总数和索引
sprintf(g_fullPath,"%d/%d,exit",g_curImg_p->index,imgs_total_nums);
lv_label_set_text(ui_Labbtnswitch, g_fullPath);
}
}
void imganmitoleft()
{
// 如果不是第一个，指向上一个指针
if(g_curImg_p->index > 1 ){
g_curImg_p = _lv_ll_get_prev(&ll_test, g_curImg_p);
sprintf(g_fullPath,"%s/%s",g_curPath,g_curImg_p->name);
printf(g_fullPath);
lv_img_set_src(ui_Image1, g_fullPath);
// 显示图片的总数和索引
sprintf(g_fullPath,"%d/%d,exit",g_curImg_p->index,imgs_total_nums);
lv_label_set_text(ui_Labbtnswitch, g_fullPath);
}
}
static void albumpage_gesture_cb(lv_event_t * e)
{
lv_event_code_t event = lv_event_get_code(e);
if(event == LV_EVENT_GESTURE) {
lv_indev_wait_release(lv_indev_get_act());
lv_dir_t dir = lv_indev_get_gesture_dir(lv_indev_get_act());
switch(dir){
case LV_DIR_LEFT:
imganmitoleft();
printf("to left\n");
break;
case LV_DIR_RIGHT:
imganmitoright();
printf("to right\n");
break;
}
}
}
static void ui_event_btnswitch(lv_event_t *e)
{
lv_event_code_t event = lv_event_get_code(e);
lv_obj_t * ta = lv_event_get_target(e);
if(event == LV_EVENT_CLICKED) {
extern lv_obj_t * file_explorer;
// 隐藏图片浏览界面
lv_obj_add_flag(ui_albumpage, LV_OBJ_FLAG_HIDDEN);
// 显示文件浏览界面
lv_obj_clear_flag(file_explorer, LV_OBJ_FLAG_HIDDEN);
}
}
/ SCREENS
void ui_albumpage_screen_init(lv_obj_t *parent)
{
// 0.ui_albumpage
ui_albumpage = lv_obj_create(parent);
lv_obj_clear_flag(ui_albumpage, LV_OBJ_FLAG_SCROLLABLE);
lv_obj_set_size(ui_albumpage, LV_HOR_RES, LV_VER_RES); // 设置屏幕大小
lv_obj_set_style_bg_color(ui_albumpage, lv_color_hex(0x000000), LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_bg_opa(ui_albumpage, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_border_width(ui_albumpage,0,LV_STATE_DEFAULT);
lv_obj_center(ui_albumpage);
// 1.ui_Image1
ui_Image1 = lv_img_create(ui_albumpage);
lv_obj_set_style_border_width(ui_Image1,0,LV_STATE_DEFAULT);
lv_obj_set_width(ui_Image1, 800);
lv_obj_set_height(ui_Image1, 480);
lv_obj_set_x(ui_Image1, 0);
lv_obj_set_y(ui_Image1, 0);
lv_obj_set_align(ui_Image1, LV_ALIGN_CENTER);
lv_obj_add_flag(ui_Image1, LV_OBJ_FLAG_ADV_HITTEST);
lv_obj_clear_flag(ui_Image1, LV_OBJ_FLAG_SCROLLABLE);
lv_obj_add_event_cb(lv_scr_act(), albumpage_gesture_cb, LV_EVENT_GESTURE, NULL);
// 2.ui_btnswitch
ui_btnswitch = lv_btn_create(ui_albumpage);
lv_obj_set_width(ui_btnswitch, 80);
lv_obj_set_height(ui_btnswitch,40);
lv_obj_align(ui_btnswitch,LV_ALIGN_BOTTOM_MID,0,0);
lv_obj_add_flag(ui_btnswitch, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
lv_obj_clear_flag(ui_btnswitch, LV_OBJ_FLAG_SCROLLABLE);
lv_obj_add_event_cb(ui_btnswitch, ui_event_btnswitch, LV_EVENT_ALL, NULL);
lv_obj_set_style_radius(ui_btnswitch, 40, LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_bg_color(ui_btnswitch, lv_color_hex(0xFFFFFF), LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_bg_opa(ui_btnswitch, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_radius(ui_btnswitch, 40, LV_PART_MAIN | LV_STATE_PRESSED);
lv_obj_set_style_bg_color(ui_btnswitch, lv_color_hex(0xFFFFFF), LV_PART_MAIN | LV_STATE_PRESSED);
lv_obj_set_style_bg_opa(ui_btnswitch, 50, LV_PART_MAIN | LV_STATE_PRESSED);
lv_obj_set_style_shadow_width(ui_btnswitch,0,LV_PART_MAIN | LV_STATE_DEFAULT);
// 3.ui_Labbtnswitch
ui_Labbtnswitch = lv_label_create(ui_btnswitch);
lv_obj_set_width(ui_Labbtnswitch, LV_SIZE_CONTENT);
lv_obj_set_height(ui_Labbtnswitch, LV_SIZE_CONTENT);
lv_obj_set_x(ui_Labbtnswitch, 0);
lv_obj_set_y(ui_Labbtnswitch, 0);
lv_obj_set_align(ui_Labbtnswitch, LV_ALIGN_CENTER);
lv_label_set_text(ui_Labbtnswitch, "exit");
}
3.工程源码
【测试代码完整工程】是在韦东山老师的开源工程上改动的。
