STM32

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

2020-01-01 17:57发布

站内问答 / STM32/STM8
12805 8 8
本帖最后由 Jmhh247 于 2019-9-25 20:18 编辑

关键字： emwin, 侧边导航

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


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


---
- 侧边导航

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

linux-page.png (21.53 KB, 下载次数: 0) 下载附件 2019-9-25 20:10 上传

---
- 代码实现

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


1. 结构体类型


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


2. 结构体定义


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


3. 选中效果代码


  2. // ok
  3. static button_set_check(WM_MESSAGE *pMsg)
  4. {
  5.     WM_HWIN hItem;
  6.     BTN_USER_SKIN * pBtnData;

  8.     // uncheck all
  9.     for (int i = 0; i < GUI_COUNTOF(BtnSkinData); i++) {

  11.         hItem = WM_GetDialogItem(pMsg->hWin, ID_BUTTON_1 + i);

  13.         BUTTON_GetUserData(hItem, &pBtnData, sizeof(pBtnData));


  16.         pBtnData->Check = 0;

  18.         pBtnData->colorUnPress = GUI_DARKGRAY;
  19.     }


  22.     // check self
  23.     BUTTON_GetUserData(pMsg->hWinSrc, &pBtnData, sizeof(pBtnData));

  25.     // 增加选中线
  26.     pBtnData->Check = ZL_BTN_CHKMODE_RIGHT;

  28.     // 修改选中后颜 {MOD}
  29.     pBtnData->colorUnPress = GUI_ORANGE;


  32.     // 无效化，触发重绘
  33.     WM_InvalidateWindow(pMsg->hWin);
  34. }
复制代码


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

---

最后是工程源码：    emwin-uidemo6-cbprj.zip (7.49 MB, 下载次数: 14) 2019-9-25 20:12 上传 点击文件名下载附件


友情提示: 此问题已得到解决，问题已经关闭,关闭后问题禁止继续编辑，回答。
该问题目前已经被作者或者管理员关闭, 无法添加新回复
7条回答
Jmhh247
1楼-- · 2020-01-02 18:58
测试一下： 使用emWin原生MULTIPAGE控件的侧边导航


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


---
- 动态展示

multipage-left.gif (134.3 KB, 下载次数: 0)

下载附件

2019-9-26 16:15 上传

---
- 核心代码

  1.     // 0--你懂的
  2.     hItem = WM_GetDialogItem(pMsg->hWin, ID_MULTIPAGE_0);


  5.     // 1--设置标题栏在底部
  6.     MULTIPAGE_SetAlign(hItem, MULTIPAGE_ALIGN_LEFT | MULTIPAGE_ALIGN_BOTTOM);


  9.     // 2--旋转标题栏到左侧
  10.     MULTIPAGE_SetRotation(hItem, MULTIPAGE_CF_ROTATE_CW);

  12.     // 3--设置皮肤，目的实现标题栏文字水平
  13.     MULTIPAGE_SetSkin(hItem, multipage_drawskin);
复制代码


  1.     // 4--皮肤实现函数，左侧边导航实现ok
  2.     int multipage_drawskin(const WIDGET_ITEM_DRAW_INFO* pItem)
  3.     {
  4.         GUI_RECT rect;
  5.         char acBuf[20];


  8.         switch (pItem->Cmd)
  9.         {
  10.         case WIDGET_ITEM_DRAW_TEXT:

  12.                 MULTIPAGE_GetPageText(pItem->hWin, pItem->ItemIndex, acBuf, sizeof(acBuf));

  14.                 rect.x0 = pItem->x0;
  15.                 rect.x1 = pItem->x1;
  16.                 rect.y0 = pItem->y0;
  17.                 rect.y1 = pItem->y1;


  20.                 GUI_SetFont(MULTIPAGE_GetFont(pItem->hWin));
  21.                 GUI_SetTextMode(GUI_TM_TRANS);
  22.                 GUI_SetColor(MULTIPAGE_GetTextColor(pItem->hWin, pItem->ItemIndex));


  25.                 GUI_DispStringInRect(acBuf, &rect, GUI_TA_HCENTER | GUI_TA_VCENTER);


  28.             break;

  30.         default:
  31.             {
  32.                 return MULTIPAGE_DrawSkinFlex(pItem);
  33.             }
  34.         }
  35.         return 0;
  36.     }
复制代码






上一页 1 2

一周热门 更多>