手把手教你在显示设备上制作一个菜单

系统管理员 2021-05-12 11:50 531阅读 0赞

![20210112181706234.png_pic_center][]

**摘要**：程序中菜单的种类与菜单化程序具有明显的优势，程序的实现方式通常有两种：一种是基于命令行方式，即通过输入指令驱动程序实现相应的功能；二是基于菜单方式，即通过选择不同的菜单实现程序的不同功能。前者的最大缺点是必须精确掌握指令，对操作者而言，它不是十分方便；后者，则只要通过选择不同的菜单项，就可以实现不同的功能，因此，它便于操作，成为程序实现的主流方式。

菜单（menu）已经被广泛应用于各种程序中。可以毫不夸张地说，几乎所有程序都使用菜单驱动方式。因而，掌握基于菜单的程序开发是十分必要的。程序中使用的菜单种类繁多，常见的有：弹出菜单、下拉菜单、图标菜单、多级菜单等，界面形式也五花八门。

本例中我们通过一个显示屏和两个按键和led小灯就可以实现，当然显示设备可以是TFT彩屏也可以是0.96寸OLED小屏或者其他的显示设备，按键也可以用触摸屏代替，LED灯是对应菜单的响应操作，当然也可以用其他的器件代替。因为思路是一样的，大家可以举一反三的自行设计。

### 1、菜单设计 ###

通过 一 个按键控制箭头上下移动， 即该键相当于上下移动光标控制键； 通过另外一 个按键选中当前菜单项， 该键相当于回车确认键。按键1用于实现光标移动功能（箭头上下移动），按键2用于实现选择确认（回车键）功能。

### 2、实现思路 ###

菜单的实现方式有多种。就上述菜单而言，可以通过以下方法实现。  
（1）首先，显示上述初始画面。  
（2）然后，不停地捕捉按键1或按键2。如果是按键1，则首先清屏，然后将箭头放在菜单的第二项位置，整个菜单显示出来，这样感觉是光标下移了；如果光标已经位于最后一个菜单项，则移到第一个菜单项。如果是按键2，则表示选中光标所在的菜单项，则执行对应的功能。菜单的切换其实与动画的原理有点类似。

### 3.硬件电路 ###

硬件部分非常简单，只涉及两个按键、两个LED。按照所使用的实验板的原理图，对应的引脚关系为：  
（1）KEY1与引脚PA0相连，KEY2与引脚PE4相连。  
（2）LED0与引脚PE6相连，LED1与引脚PE5相连。  
（3）显示设备用自己现有的屏幕作为显示，TFT彩屏和oled都可以。

### 4、程序流程图 ###

先画好程序流程图，整理好显示思路与逻辑，之后按照步骤写出对应函数的驱动代码。最后下载实验显示即可。  
![20210112111252969.png_pic_center][]

## 5、具体代码 ##

这里设置了三个菜单，菜单显示函数如下：

void DisplayMenu(u8 t)
    { 	
    	switch(t)
    	{ 
    		case 1:	
    			LCD_Clear(WHITE);			
    			LCD_ShowString(20,20,200,24,24,(u8*)"Select:");
    			LCD_ShowString(20,50,200,24,24,(u8*)"-->");
    			LCD_ShowString(60,50,200,24,24,(u8*)"light led0");
    			LCD_ShowString(60,80,200,24,24,(u8*)"light led1");
    			LCD_ShowString(60,110,200,24,24,(u8*)"light two led");
    			break;		
    		case 2:
    			LCD_Clear(WHITE);			
    			LCD_ShowString(20,20,200,24,24,(u8*)"Select:");
    			LCD_ShowString(60,50,200,24,24,(u8*)"light led0");
    			LCD_ShowString(20,80,200,24,24,(u8*)"-->");
    			LCD_ShowString(60,80,200,24,24,(u8*)"light led1");
    			LCD_ShowString(60,110,200,24,24,(u8*)"light two led");		
    			break;
    		case 3:
    			LCD_Clear(WHITE);			
    			LCD_ShowString(20,20,200,24,24,(u8*)"Select:");
    			LCD_ShowString(60,50,200,24,24,(u8*)"light led0");
    			LCD_ShowString(60,80,200,24,24,(u8*)"light led1");
    			LCD_ShowString(20,110,200,24,24,(u8*)"-->");
    			LCD_ShowString(60,110,200,24,24,(u8*)"light two led");
    			break;
    	}
    }

接着就是检测按键按下以及处理函数

DisplayMenu(1);//显示初始菜单1
    while(1)
    { 
    	t=KEY_Scan(0);//按键检测哪一个按键按下
    	switch(t)
    	{ 
    		case 1: 			//KEY1 确定按键按下
    				flag=0;
    				ExecuteFunction(cur);//执行确定按键操作
    				break;
    		case 2: flag=1;		//KEY2 下移按键按下
    			   if(cur==3)	//如果是最后一个菜单 
    				   cur=1;   //重新指向菜单1
    			   else        //如果不是最后一个菜单 
    				   cur++;  //重新指向菜单+1
    			   break;		
    	}	
    	if(flag)
    	{ 
    		DisplayMenu(cur);//显示对应菜单画面
    		flag=0;
    	}
    }

最终结果如下：  
![20210112172346212.gif][]  
总结：菜单的切换就是不断地检测相应的按键按下，首先清屏，然后将箭头放在菜单的第二项，或者跳转到第二个画面，如果光标处于最后一个菜单项或者处于最后一个画面，则移动到第一个菜单项。按下—清屏—显示，三步即可。

微信公众号后台回复：**菜单**，获取本文相关代码。  
![2021011218160547.png_pic_center][]

[20210112181706234.png_pic_center]: /images/20210511/eda22487f2e04bc9af84e8810c178fff.png
[20210112111252969.png_pic_center]: /images/20210511/2b949b53c78045458ebb2a7f26bb0cda.png
[20210112172346212.gif]: /images/20210511/16d85ffdd8a04d409d7190bb3092cefd.png
[2021011218160547.png_pic_center]: /images/20210511/980f0525ccc7417fa0dc7812cf45579f.png