[原创开源]emwin侧边导航框架支持按钮选中效果

Jmhh247

关键字： emwin, 侧边导航

这是一个用emwin写的主页面导航+侧边导航的通用程序框架，emwin仿真环境用的是codeblocks(16或17都可)。


接上篇《[原创开源]emwin导航界面支持Awesome图标字体》，本篇主要介绍了侧边栏导航的通用程序框架。(由于只是程序框架，所以并不涉及界面美化，我知道丑，所以先说出来~)


---
- 侧边导航

在横屏设备中，侧边导航有着大量的应用，下面的截图来自最近沉迷的手游《QQ飞车》。（飞车一局2分钟左右，比王者玩起来轻松太多了，当然我主要是为看它的GUI设计~）




---
- APP截图

下面是部分APP截图

主页面按钮选中边线，可以任意设四边的其中一边(演示，通常主页面不需要)





侧边栏导航选中效果






---
- 代码实现

##### 原理就是用emwin系统的皮肤设置函数+按钮私有数据。这相当于一种自定义控件实现的简单方法，通过不同的函数+数据结构就能实现不同功能的控件。

1. 结构体类型

1. typedef struct {
   
2.     int Check;
   
3.     GUI_COLOR colorPressed;
   
4.     GUI_COLOR colorUnPress;
   
5.     GUI_FONT *iconFont;
   
6.     char iconName[6];
   
7.     char btnText[10];
   
8. } BTN_USER_SKIN;

复制代码

2. 结构体定义

1. static BTN_USER_SKIN BtnSkinData[] = {
   
2.     {ZL_BTN_CHKMODE_RIGHT, GUI_ORANGE, GUI_ORANGE, &awefont24, "\uf0f6", "stm8"},
   
3.     {ZL_BTN_CHKMODE_NO, GUI_ORANGE, GUI_DARKGRAY, &awefont24, "\uf030", "stm32"},
   
4.     {ZL_BTN_CHKMODE_NO, GUI_ORANGE, GUI_DARKGRAY, &awefont24, "\uf008", "mcu"},
   
5.     {ZL_BTN_CHKMODE_NO, GUI_ORANGE, GUI_DARKGRAY, &awefont24, "\uf226", "linux"},
   
6.     {ZL_BTN_CHKMODE_NO, GUI_ORANGE, GUI_DARKGRAY, &awefont24, "\uf144", "audio"},
   
7.     {ZL_BTN_CHKMODE_NO, GUI_ORANGE, GUI_DARKGRAY, &awefont24, "\uf2b5", NULL},
   
8. };

复制代码

3. 选中效果代码

1. // ok
   
2. static button_set_check(WM_MESSAGE *pMsg)
   
3. {
   
4. WM_HWIN hItem;
   
5. BTN_USER_SKIN * pBtnData;
   
6. 
   
7. // uncheck all
   
8. for (int i = 0; i < GUI_COUNTOF(BtnSkinData); i++) {
   
9. 
   
10. hItem = WM_GetDialogItem(pMsg->hWin, ID_BUTTON_1 + i);
    
11. 
    
12. BUTTON_GetUserData(hItem, &pBtnData, sizeof(pBtnData));
    
13. 
    
14. 
    
15. pBtnData->Check = 0;
    
16. 
    
17. pBtnData->colorUnPress = GUI_DARKGRAY;
    
18. }
    
19. 
    
20. 
    
21. // check self
    
22. BUTTON_GetUserData(pMsg->hWinSrc, &pBtnData, sizeof(pBtnData));
    
23. 
    
24. // 增加选中线
    
25. pBtnData->Check = ZL_BTN_CHKMODE_RIGHT;
    
26. 
    
27. // 修改选中后颜色
    
28. pBtnData->colorUnPress = GUI_ORANGE;
    
29. 
    
30. 
    
31. // 无效化，触发重绘
    
32. WM_InvalidateWindow(pMsg->hWin);
    
33. }

复制代码

控制篇幅，只列出部分代码。


最后是工程源码：    emwin-uidemo6-cbprj.zip (7.49 MB, 下载次数: 617)

2019-9-23 20:10 上传

点击文件名下载附件

Jmhh247

为了节约上传时间和服务器空间，本帖工程内不带字体文件。

需要到上个帖子下载字体文件，复制到本帖工程内。

myxiaonia

侧边导航，emwin有官方例程的

eric2013

非常感谢楼主分享。

caicaptain2

不错，横屏用这种界面看着很舒适。示波器的很多菜单也是这种模式。在配合侧面的实体按钮，就非常友好了。

Jmhh247

myxiaonia 发表于 2019-9-23 22:01
侧边导航，emwin有官方例程的

版主大佬，方便说下例程的名字不，我没找到，想学习下

cz123123

侧边导航栏，我用的是listbox这个做的重绘。效果也一样。。

caicaptain2

cz123123 发表于 2019-9-24 09:00
侧边导航栏，我用的是listbox这个做的重绘。效果也一样。。

这个思路不错！ 节省RAM空间啊！
listbox放左边，右边是父窗口的重绘和其他控件的重绘。

emwin的手册中有这个例子，每个项目加上图片和文字，也很灵活。

cz123123

caicaptain2 发表于 2019-9-25 07:48
这个思路不错！ 节省RAM空间啊！
listbox放左边，右边是父窗口的重绘和其他控件的重绘。

一个父窗口 套入listbox和右侧窗口，，然后直接打开右侧窗口就行了。。具体的效果有，，但代码没整理。。有空开源看看。。

chenlijian80

Jmhh247 发表于 2019-9-23 20:20
为了节约上传时间和服务器空间，本帖工程内不带字体文件。

需要到上个帖子下载字体文件，复制到本帖工程 ...

请教个问题，上个帖子在哪里呀，学习一下。。

Jmhh247

chenlijian80 发表于 2019-9-25 10:56
请教个问题，上个帖子在哪里呀，学习一下。。

我的头像，点主题进去就有。。。

- [STemWin] [原创开源]emWin导航界面支持Awesome图标字体 http://www.armbbs.cn/forum.php?m ... id=94945&extra=

Jmhh247

caicaptain2 发表于 2019-9-25 07:48
这个思路不错！ 节省RAM空间啊！
listbox放左边，右边是父窗口的重绘和其他控件的重绘。

如果MULTIPAGE控件支持把标题按钮放到左边(右边)，直接就能用了吧。。。

myxiaonia

swipelistdemo_480*272

是不是你要的

Jmhh247

myxiaonia 发表于 2019-9-25 14:30
swipelistdemo_480*272

是不是你要的

多谢！我去看看

ihavedone

Jmhh247 发表于 2019-9-25 14:11
如果MULTIPAGE控件支持把标题按钮放到左边(右边)，直接就能用了吧。。。

MULTIPAGE_SetRotation
这个函数就可以，把标签放上面调用这个函数，标签就变右边去了。
把标签方下面调用这个函数，标签就变左边去了。

Jmhh247

ihavedone 发表于 2019-9-25 18:21
MULTIPAGE_SetRotation
这个函数就可以，把标签放上面调用这个函数，标签就变右边去了。
把标签方下面 ...

这个好，回头试试

Jmhh247

测试一下： 使用emWin原生MULTIPAGE控件的侧边导航

（只是测试，比较简陋~）


---

- 动态展示




---

- 核心代码

1. <p>
   
2. </p><p>// 0--你懂的
   
3. hItem = WM_GetDialogItem(pMsg->hWin, ID_MULTIPAGE_0);
   
4. 
   
5. 
   
6. // 1--设置标题栏在底部
   
7. MULTIPAGE_SetAlign(hItem, MULTIPAGE_ALIGN_LEFT | MULTIPAGE_ALIGN_BOTTOM);
   
8. 
   
9. 
   
10. // 2--旋转标题栏到左侧
    
11. MULTIPAGE_SetRotation(hItem, MULTIPAGE_CF_ROTATE_CW);
    
12. 
    
13. // 3--设置皮肤，目的实现标题栏文字水平
    
14. MULTIPAGE_SetSkin(hItem, multipage_drawskin);
    
15. </p>

复制代码

1. 
   
2. // 4--皮肤实现函数，左侧边导航实现ok
   
3. int multipage_drawskin(const WIDGET_ITEM_DRAW_INFO* pItem)
   
4. {
   
5.     GUI_RECT rect;
   
6.     char acBuf[20];
   
7. 
   
8. 
   
9.     switch (pItem->Cmd)
   
10.     {
    
11.     case WIDGET_ITEM_DRAW_TEXT:
    
12. 
    
13.             MULTIPAGE_GetPageText(pItem->hWin, pItem->ItemIndex, acBuf, sizeof(acBuf));
    
14. 
    
15.             rect.x0 = pItem->x0;
    
16.             rect.x1 = pItem->x1;
    
17.             rect.y0 = pItem->y0;
    
18.             rect.y1 = pItem->y1;
    
19. 
    
20. 
    
21.             GUI_SetFont(MULTIPAGE_GetFont(pItem->hWin));
    
22.             GUI_SetTextMode(GUI_TM_TRANS);
    
23.             GUI_SetColor(MULTIPAGE_GetTextColor(pItem->hWin, pItem->ItemIndex));
    
24. 
    
25. 
    
26.             GUI_DispStringInRect(acBuf, &rect, GUI_TA_HCENTER | GUI_TA_VCENTER);
    
27. 
    
28. 
    
29.         break;
    
30. 
    
31.     default:
    
32.         {
    
33.             return MULTIPAGE_DrawSkinFlex(pItem);
    
34.         }
    
35.     }
    
36.     return 0;
    
37. }
    

复制代码

ihavedone

Jmhh247 发表于 2019-9-26 16:04
测试一下： 使用emWin原生MULTIPAGE控件的侧边导航

（只是测试，比较简陋~）

还可以设置图片，带Ex的函数可以指定图片的坐标，不带Ex的函数可以指定对齐方式。把这个配合着你上面的写字的函数用起来，基本可以实现各种侧边栏效果了。

Jmhh247

ihavedone 发表于 2019-9-27 11:34
还可以设置图片，带Ex的函数可以指定图片的坐标，不带Ex的函数可以指定对齐方式。把这个配合着你上 ...

多谢指教

chfanjiang

非常感謝樓主分享。

yx410100

请教一下，在MULTIPAGE控件下添加一个带日历控件的窗口，在codeblocks下仿真可以显示正常，在stm32f429板上运行就无法显示日控件，不添加到MULTIPAGE控件下，单独显示带日历控件的窗口也正常。

xk2yx

emwin侧边导航框架  ，，谢谢

newbe

Jmhh247 发表于 2019-9-26 16:04
测试一下： 使用emWin原生MULTIPAGE控件的侧边导航

（只是测试，比较简陋~）

楼主，我测试了下你的multipage修改代码，为什么没有你那种效果

hot_springs

Jmhh247 发表于 2019-9-26 16:04
测试一下： 使用emWin原生MULTIPAGE控件的侧边导航

（只是测试，比较简陋~）

在这个程序的基础上，如果一共需要有10个page，但是multipage左侧的高度只能显示5个，剩下5个显示不出来；
那么，如何通过上下按键实现左侧类似滚动的效果，比如：当前选中page5，再按down键，则左侧变为
page2
page3
page4
page5
page6

oprfid123

思路不错