是否还在因为移植一些UI烦恼？（当初移植LVGL也就区区4000error而已，也就找不到一些屏幕的UI 驱动芯片代码罢了/(ㄒoㄒ)/~~）
是否还在考虑屏幕菜单的实现可行性？
这次介绍我自己写的多级菜单与UI显示（同B站built_in的BI架构教学）。
我们所需要的设备：至少需要你的屏幕画点函数，文本与图片显示代码。（也就是说至少屏幕驱动你必须有，要先点亮屏幕）
思路引导：
使用的是数组指针结构体的思路，主要是使用结构体去存储菜单子项与菜单层级的一些区分标志，然后使用指针去指向当前结构体下的结构体，类似于链表的思路，然后通过这个结构体数组去存储我们的菜单层，通过调用**菜单层，菜单子项与菜单指向等等以及回调函数**，能够形成一个简易的菜单结构，并且与文字显示与图片显示绑定。
建立我的菜单项：
// 菜单项结构体typedef struct{const char *name; // 菜单项名称void (*func)(void); // 菜单项回调函数} MENU_Item_t;
建立我的菜单层：
// 菜单结构体typedef struct MENU_t{MENU_Item_t *item; // 菜单项数组uint8_t item_num; // 菜单项数量uint8_t menu_flag; // 菜单层级标志uint8_t cur_item; // 当前选择的菜单项struct MENU_t *sub_menu; // 指向第二级菜单的指针struct MENU_t *sub1_menu; // 指向第三级菜单的指针} MENU_t;
文字菜单需要的菜单项名称与实现函数：
// 菜单项MENU_Item_t menu_item[] ={{"Item1", Item1_Callback},{"Item2", Item2_Callback},{"Item3", Item3_Callback},{"Item4", Item4_Callback},{"Item5", Item5_Callback},{"Item6", Item6_Callback},};// 二级菜单项MENU_Item_t second_menu_item[] ={{"second_Item1", SUB1_Callback},{"second_Item2", SUB2_Callback},{"second_Item3", SUB3_Callback},};// 三级菜单项MENU_Item_t third_menu_item[] ={{"third_Item1", Third1_Callback},{"third_Item2", Third2_Callback},{"third_Item3", Third3_Callback},{"third_Item4", Third4_Callback},};
void Item2_Callback(void){// 处理Item2的回调函数menu.cur_item = 1;}void Item3_Callback(void){// 处理Item3的回调函数menu.cur_item = 2;}//记得你编写的回调函数都需要初始化
我的BI架构，选择的是有一个简单的移动方框特效在切换选择子项，选择当前子项的时候是方框框住这个子项名称，到屏幕可见的菜单子项的时候能翻滚，显示更多的菜单子项（这种特效都可以自己修改的，我讲的是思路）：
//文字菜单显示void MENU_Text_Display(void){uint8_t i; //绘制文本菜单项变量uint8_t x=0,y=0; //显示屏横竖大小变量uint8_t menu_display; //显示标志位uint16_t pos; //定义像素变量char str[20]; //菜单项名字OLED_Clear(); //清空屏幕static uint8_t old_item=0; //旧选项框参数uint8_t old_y = y + old_item * OLED_Rectangle_Hight; //旧选项框坐标uint8_t new_y = y + menu.cur_item * OLED_Rectangle_Hight; //新选项框坐标uint8_t visiable_items = (menu.item_num<3) ? menu.item_num :3; //动态设置屏幕可见菜单子项数量uint8_t start_index = (menu.cur_item<2) ? 0 :menu.cur_item - 2; //根据当前选项计算起始项if(start_index + visiable_items > menu.item_num) //防止越界start_index = menu.item_num - visiable_items;for(i=0;i<visiable_items;i++){if(start_index + i < menu.item_num) //防止越界{sprintf((char*)&str,"%s",menu.item[start_index + i].name);OLED_ShowString(x+5,y+i* OLED_Rectangle_Hight+2,str,OLED_8X16); //绘制首次菜单项}}OLED_DrawRectangle(x,new_y,OLED_Width,OLED_Rectangle_Hight,OLED_UNFILLED); //绘制选项框if(menu.cur_item >=3){pos = 26; //选项框固定menu_display = 1; //显示大于屏幕项标志位置1}if(old_item != menu.cur_item){for(pos= old_y; pos!= new_y;pos += (new_y>old_y) ? 2:-2){OLED_Clear();for(i=0;i<visiable_items;i++){if(start_index + i < menu.item_num) //防止越界{sprintf((char*)&str,"%s",menu.item[start_index + i].name);OLED_ShowString(x+5,y+i* OLED_Rectangle_Hight+2,str,OLED_8X16); //绘制首次菜单项}}if(menu_display == 1)OLED_DrawRectangle(x,pos - (OLED_Rectangle_Hight *(menu.cur_item -2)),OLED_Width,OLED_Rectangle_Hight,OLED_UNFILLED); //固定大于显示项在第三个显示else{OLED_DrawRectangle(x,pos,OLED_Width,OLED_Rectangle_Hight,OLED_UNFILLED); //动态显示移动框OLED_Update();}delay_ms(20);}old_item = menu.cur_item; //交换显示项}OLED_Update();}
当然，也有图片显示的函数，
我们这时候的图片分配内存，直接上三张图片，一张左移，一张右移，一张显示，一样的通过
old_item != menu.cur_item
作为刷新条件，在通过
menu.cur_item - old_item
的差值，看看是左移（菜单项- - ），右移（菜单项++），然后可以通过刷新屏幕左右移动的位置，就可以实现简单的移动特效。而我们的显示图片又是与菜单子项挂钩的，所以直接
image_data[image_index]
就可以实现图片切换。
//图片菜单显示void MENU_Iamge_Display(uint8_t iamge_index){static uint8_t old_item=0; //保存上一次选项变量const uint8_t *image_data_level_1[] = {ear,game,chess,fish,badminton,music}; //一级菜单的图片const uint8_t *image_data_level_2[] = {book,tool,brush}; //二级菜单的图片const uint8_t *image_data_level_3[] = {caravan,shopping,telephone,telescope}; //三级菜单的图片const uint8_t **image_data; //指向图片数据数组的指针//根据菜单标志选择图片数组if(menu.menu_flag == 0)image_data = image_data_level_1;//一级菜单else if(menu.menu_flag == 1)image_data = image_data_level_2;//二级菜单else if(menu.menu_flag ==2)image_data = image_data_level_3;//三级菜单//计算图片数据大小size_t image_data_size;if(menu.menu_flag == 0)image_data_size = sizeof(image_data_level_1) / sizeof(image_data_level_1[0]);else if(menu.menu_flag == 1)image_data_size = sizeof(image_data_level_2) / sizeof(image_data_level_2[0]);else if(menu.menu_flag == 2)image_data_size = sizeof(image_data_level_3) / sizeof(image_data_level_3[0]);if(iamge_index < image_data_size){OLED_ShowImage(32,0,64,64,image_data[iamge_index]); //显示图片项OLED_ShowImage(0,16,32,32,left); //显示左移箭头OLED_ShowImage(96,16,32,32,right); //显示右移箭头OLED_Update();if(old_item != menu.cur_item){if(menu.cur_item - old_item < 0 ) //刷新一下左移箭头{OLED_ClearArea(0,16,32,32);OLED_Update();delay_ms(200);OLED_ShowImage(0,16,32,32,left);}else if(menu.cur_item - old_item > 0 ) //刷新一下右移箭头{OLED_ClearArea(96,16,32,32);OLED_Update();delay_ms(200);OLED_ShowImage(96,16,32,32,right);}OLED_Update();}old_item = menu.cur_item; //保存上一次选项}elsereturn;}
初始化我们的菜单：
一级菜单的时候，就只需要初始化一级菜单的菜单层级，菜单子项个数，菜单当前项，并且初始化菜单系统（
menu.item = menu_item;
）。我通过预处理命令，让我们上面定义的宏能够进行设置我们的多级菜单初始化，在第二，第三层菜单，我们可以通过
malloc
去给我们的菜单层级进行分配内存，同时通过指针的树状思路去指向下一层菜单，有点像链表的思路，进行初始化我们的多级菜单。
int MENU_Init(void){// 初始化一级菜单menu.item = menu_item;menu.item_num = sizeof(menu_item) / sizeof(menu_item[0]);menu.cur_item = 0;menu.menu_flag = 0;#if MENU_LEVEL >= 2menu.sub_menu = malloc(sizeof(MENU_t));if (menu.sub_menu != NULL){menu.sub_menu->item = second_menu_item;menu.sub_menu->item_num = sizeof(second_menu_item) / sizeof(second_menu_item[0]);menu.sub_menu->cur_item = 0;#if MENU_LEVEL == 3menu.sub_menu->sub1_menu = malloc(sizeof(MENU_t));if (menu.sub_menu->sub1_menu != NULL){menu.sub_menu->sub1_menu->item = third_menu_item;menu.sub_menu->sub1_menu->item_num = sizeof(third_menu_item) / sizeof(third_menu_item[0]);menu.sub_menu->sub1_menu->cur_item = 0; // 确保三级菜单的当前项初始化}else{// 处理内存分配失败的情况free(menu.sub_menu); // 释放之前分配的内存return -1; // 返回失败状态}#endif}elsereturn -1; // 返回失败状态#endifreturn 0; // 返回成功状态}
进入（这里我直接将当前菜单项，切换菜单层级，设置菜单下一层级菜单项等参数传进去，通过深拷贝当前菜单的内容，方便我们后面返回） 和返回菜单层级函数：
//进入菜单函数void MENU_INPUT(uint8_t cur_item_ok,MENU_t menu_ok,MENU_t *sub_menu_ok,uint8_t cur_item_next_ok,uint8_t menu_flag_ok){menu.cur_item = cur_item_ok;if(menu_flag_ok < MENU_LEVEL){prev_menu[menu_flag_ok] = malloc(sizeof(MENU_t));if(prev_menu[menu_flag_ok] != NULL){*prev_menu[menu_flag_ok] = menu_ok; //深拷贝当前菜单内容}elsereturn;}menu = *sub_menu_ok; //切换到二级菜单menu.cur_item = cur_item_next_ok; //设置当前项为0menu.menu_flag = menu_flag_ok; //设置为二级菜单MENU_Mode_chang();}//返回菜单函数void MENU_RETURN(void){if(menu.menu_flag == 1){menu = *prev_menu[menu.menu_flag]; //返回到上一项menu.cur_item = 0;menu.menu_flag = 0;}else if(menu.menu_flag == 2){menu = *prev_menu[menu.menu_flag]; //返回到上一项menu.cur_item = 0;menu.menu_flag = 1;}MENU_Mode_chang();}
最后附上控制代码：
//菜单控制代码void MENU_KeyScan(uint8_t key){switch(key){case 0:MENU_Mode_chang();break;case 1:if(menu.cur_item > 0){menu.cur_item--;MENU_Mode_chang();}break;case 2:if(menu.menu_flag < MENU_LEVEL){if(menu.menu_flag == 0 ){MENU_INPUT(NULL,menu,menu.sub2_menu,0,1); //进入二级菜单}else if(menu.menu_flag == 1 ){MENU_INPUT(NULL,menu,menu.sub3_menu,0,2); //进入三级菜单}}break;case 3:menu.item[menu.cur_item].func(); //执行当前项的回调函数break;case 4:MENU_RETURN();break;case 5:if(menu.cur_item < menu.item_num -1){menu.cur_item++;MENU_Mode_chang();}break;default :break;}}
我们只需要在我们单片机的main中进行调用我们的控制函数就可以实现功能（这边写的简单了点，想要深层编写可看我B站视频，出了三期教学手把手从0带你写出来，或者私信我，给你份更加完善的教学文档。）
效果展示与教学视频（OLED与TFT屏幕，RGB触摸移动（没录视频））：
BI架构菜单编写（一）哔哩哔哩bilibili
BI架构菜单编写（二）哔哩哔哩bilibili
BI架构菜单编写（三）哔哩哔哩bilibili
本文转载自: https://blog.csdn.net/m0_69390033/article/details/143793144
版权归原作者 built_in 所有， 如有侵权，请联系我们删除。
版权归原作者 built_in 所有， 如有侵权，请联系我们删除。