关键字: 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
离线
表面上为了节约服务器空间,实际上是为了节约上传时间,本帖子工程里面是不带字体文件的。
需要去上个帖子里面下载字体文件,并复制到工程目录内。
离线
6666666 继续紧跟楼主步伐,
一开始发现 C:\Windows\Fonts\msyh.ttf 会引起错误, 然后挂了。
后来网上下载了一个 msyh.ttf 可以了。
但是楼主的第三个图片, 左侧导航那个界面怎么点进去呢?
离线
原来上一个包里面已经有了 msyh.ttf, 直接拷过来就可以用了: emwin-uidemo5-cbprj.zip
离线
点击“我的照片”就进去了。(偷懒没说明,想着就六个图标,都点一遍就知道了。。。)
https://whycan.cn/files/members/1947/2019-09-21_141217.png
https://whycan.cn/files/members/1947/2019-09-21_141354.png
6666666 继续紧跟楼主步伐,
一开始发现 C:\Windows\Fonts\msyh.ttf 会引起错误, 然后挂了。
后来网上下载了一个 msyh.ttf 可以了。
但是楼主的第三个图片, 左侧导航那个界面怎么点进去呢?
离线
眼拙眼拙, 可以了, 谢谢楼主大神, 楼主辛苦了!
离线
离线
测试一下: 使用emWin原生MULTIPAGE控件的侧边导航
(只是测试,比较简陋~)
---
- 动态展示
---
- 核心代码
// 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);
// 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;
}
离线
是鼠标,在电脑上操作的,codeblocks仿真
请问TAB页选中是 键盘, 还是鼠标完成的?
离线
别啊,晕哥
多提意见,我学习
优秀, 又可以借鉴了.
离线
感谢楼主分享, 已加入本站精华帖汇总:
185. [原创开源]emwin导航界面支持Awesome图标字体
186. [原创开源]emwin侧边导航框架支持按钮选中效果
187. [原创开源]emwin自定义控件1-卡片面板
188. [原创开源]emwin自定义控件2--环形进度条
离线
感谢楼主及晕哥,下了几去学习EMWIN.
离线
EMWIN 学习过一点时间,感觉版本比较稳定,谢谢分享。
离线
ui框架挺多的,不知哪个好用。。。
离线
多谢,学习了,多级按键如何设置
离线
学习了,楼主给力!
离线