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

Jmhh247 · 发表于 2019-9-23 20:18:24

关键字： emwin, 侧边导航

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

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

---
- 侧边导航

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

---
- APP截图

下面是部分APP截图

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

侧边栏导航选中效果

---
- 代码实现

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

1. 结构体类型

typedef struct {
int Check;
GUI_COLOR colorPressed;
GUI_COLOR colorUnPress;
GUI_FONT *iconFont;
char iconName[6];
char btnText[10];
} BTN_USER_SKIN;

复制代码

2. 结构体定义

static BTN_USER_SKIN BtnSkinData[] = {
{ZL_BTN_CHKMODE_RIGHT, GUI_ORANGE, GUI_ORANGE, &awefont24, "\uf0f6", "stm8"},
{ZL_BTN_CHKMODE_NO, GUI_ORANGE, GUI_DARKGRAY, &awefont24, "\uf030", "stm32"},
{ZL_BTN_CHKMODE_NO, GUI_ORANGE, GUI_DARKGRAY, &awefont24, "\uf008", "mcu"},
{ZL_BTN_CHKMODE_NO, GUI_ORANGE, GUI_DARKGRAY, &awefont24, "\uf226", "linux"},
{ZL_BTN_CHKMODE_NO, GUI_ORANGE, GUI_DARKGRAY, &awefont24, "\uf144", "audio"},
{ZL_BTN_CHKMODE_NO, GUI_ORANGE, GUI_DARKGRAY, &awefont24, "\uf2b5", NULL},
};

复制代码

3. 选中效果代码

// ok
static button_set_check(WM_MESSAGE *pMsg)
{
WM_HWIN hItem;
BTN_USER_SKIN * pBtnData;
// uncheck all
for (int i = 0; i < GUI_COUNTOF(BtnSkinData); i++) {
hItem = WM_GetDialogItem(pMsg->hWin, ID_BUTTON_1 + i);
BUTTON_GetUserData(hItem, &pBtnData, sizeof(pBtnData));
pBtnData->Check = 0;
pBtnData->colorUnPress = GUI_DARKGRAY;
}
// check self
BUTTON_GetUserData(pMsg->hWinSrc, &pBtnData, sizeof(pBtnData));
// 增加选中线
pBtnData->Check = ZL_BTN_CHKMODE_RIGHT;
// 修改选中后颜色
pBtnData->colorUnPress = GUI_ORANGE;
// 无效化，触发重绘
WM_InvalidateWindow(pMsg->hWin);
}

复制代码

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

最后是工程源码：

emwin-uidemo6-cbprj.zip (7.49 MB, 下载次数: 624)

Jmhh247 · 发表于 2019-9-23 20:20:08

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

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

myxiaonia · 发表于 2019-9-23 22:01:57

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

eric2013 · 发表于 2019-9-24 00:26:17

非常感谢楼主分享。

caicaptain2 · 发表于 2019-9-24 08:35:04

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

Jmhh247 · 发表于 2019-9-24 08:48:25

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

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

cz123123 · 发表于 2019-9-24 09:00:00

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

caicaptain2 · 发表于 2019-9-25 07:48:30

本帖最后由 caicaptain2 于 2019-9-25 07:52 编辑

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

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

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

cz123123 · 发表于 2019-9-25 09:53:22

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

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

chenlijian80 · 发表于 2019-9-25 10:56:05

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

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

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

Jmhh247 · 发表于 2019-9-25 13:45:50

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

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

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

Jmhh247 · 发表于 2019-9-25 14:11:20

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

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

myxiaonia · 发表于 2019-9-25 14:30:52

swipelistdemo_480*272

是不是你要的

Jmhh247 · 发表于 2019-9-25 14:54:01

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

是不是你要的

多谢！我去看看

ihavedone · 发表于 2019-9-25 18:21:00

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

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

Jmhh247 · 发表于 2019-9-25 20:02:25

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

这个好，回头试试

Jmhh247 · 发表于 2019-9-26 16:04:29

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

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

---

- 动态展示

---

- 核心代码

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

复制代码

// 4--皮肤实现函数，左侧边导航实现ok
int multipage_drawskin(const WIDGET_ITEM_DRAW_INFO* pItem)
{
GUI_RECT rect;
char acBuf[20];
switch (pItem->Cmd)
{
case WIDGET_ITEM_DRAW_TEXT:
MULTIPAGE_GetPageText(pItem->hWin, pItem->ItemIndex, acBuf, sizeof(acBuf));
rect.x0 = pItem->x0;
rect.x1 = pItem->x1;
rect.y0 = pItem->y0;
rect.y1 = pItem->y1;
GUI_SetFont(MULTIPAGE_GetFont(pItem->hWin));
GUI_SetTextMode(GUI_TM_TRANS);
GUI_SetColor(MULTIPAGE_GetTextColor(pItem->hWin, pItem->ItemIndex));
GUI_DispStringInRect(acBuf, &rect, GUI_TA_HCENTER | GUI_TA_VCENTER);
break;
default:
{
return MULTIPAGE_DrawSkinFlex(pItem);
}
}
return 0;
}

复制代码

ihavedone · 发表于 2019-9-27 11:34:46

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

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

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

Jmhh247 · 发表于 2019-9-27 13:36:15

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

多谢指教

chfanjiang · 发表于 2019-10-3 09:17:44

非常感謝樓主分享。

yx410100 · 发表于 2020-11-29 11:10:25

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

xk2yx · 发表于 2021-3-31 08:01:58

emwin侧边导航框架，，谢谢

newbe · 发表于 2021-12-9 11:33:27

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

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

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

hot_springs · 发表于 2022-7-27 17:09:51

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

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

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

oprfid123 · 发表于 2022-7-27 17:53:28

思路不错

		自动登录	找回密码
密码			立即注册

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

评分

评分