文章目录

1.LV_EVENT_GESTURE事件的回调函数
2.较为完整的代码
3.工程源码

今天看了一下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_albumpageui_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_Image1ui_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_btnswitchui_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_Labbtnswitchui_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.工程源码

【测试代码完整工程】是在韦东山老师的开源工程上改动的。

LVGL笔记(6)-电子相册使用手势切换图片(windows仿真)相关推荐

安卓学习笔记14：安卓手势操作编程
文章目录零.学习目标一.安卓手势操作原理二.安卓手势类与接口 1.MotionEvent 2.GestureDetector 3.OnGestureListener 三.教学案例--利用手势切换 ...
Android基础学习笔记14：安卓手势编程
学习目标能理解手势操作原理能利用手势操作实现切换功能现代智能手机都支持触屏手势操作,可以方便地实现多种功能,最常见的是通过上下左右滑动手势实现切换功能. 一安卓手势操作原理在安卓系统中,每一次 ...
jQuery箭头切换图片 - 学习笔记
jQuery箭头切换图片布局 3d位移变形原点 jQuery transform:translate3d(x,y,z): x 代表横向坐标移向量的长度 y 代表纵向坐标 ...
JavaScript基础15-day17【BOM(Navigator、History、Location)、定时器、切换图片练习、轮播图】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
【转】Android android listview的HeadView左右切换图片（仿新浪，网易，百度等切换图片）...
首先我们还是看一些示例:(网易,新浪,百度) 下面我简单的介绍下实现方法:其实就是listview addHeaderView.只不过这个view是一个可以切换图片的view,至于这个vie ...
LVGL笔记(1)-使用《avilib》库播放avi视频（lvgl在windows模拟运行）
文章目录 1.函数简介 1.1 avi_t *AVI_open_input_file(const char *filename, int getIndex) 1.2 long AVI_video_fr ...
Android之GestureDetector-简单手势操作及通过手势缩放图片，我离职后面试收割小米等大厂offer
Android提供了手势检测,并为其提供了相应的监听器,需要用到的类是GestureDetector,其实例代表了一个手势检测器,创建GestureDetector时需要传入一个GestureDete ...
java 滑块控制图片渐变切换_Android实现滑动屏幕切换图片
本文实例为大家分享了Android实现滑动屏幕切换图片的具体代码,供大家参考,具体内容如下 activity_main.xml 文件代码: xmlns:app="http://schemas ...
Android (滑动屏幕切换图片的实现)
一.首先实现界面部分代码: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout x ...

LVGL笔记(6)-电子相册使用手势切换图片(windows仿真)

文章目录

1.LV_EVENT_GESTURE事件的回调函数

2.较为完整的代码

3.工程源码

LVGL笔记(6)-电子相册使用手势切换图片(windows仿真)相关推荐

最新文章

热门文章