WhyCan Forum(哇酷开发者社区)

Jmhh247

会员

注册时间： 2018-12-21

已发帖子： 262

积分： 262

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

关键字： 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

Jmhh247

会员

注册时间： 2018-12-21

已发帖子： 262

积分： 262

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

表面上为了节约服务器空间，实际上是为了节约上传时间，本帖子工程里面是不带字体文件的。

需要去上个帖子里面下载字体文件，并复制到工程目录内。

Jmhh247

会员

注册时间： 2018-12-21

已发帖子： 262

积分： 262

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

点击“我的照片”就进去了。(偷懒没说明，想着就六个图标，都点一遍就知道了。。。)

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 可以了。

但是楼主的第三个图片， 左侧导航那个界面怎么点进去呢？

Jmhh247

会员

注册时间： 2018-12-21

已发帖子： 262

积分： 262

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

多向晕哥学习！

感谢楼主分享! 跟帖学习中。

[原创开源]emwin导航界面支持Awesome图标字体: https://whycan.cn/t_2917.html

Jmhh247

会员

注册时间： 2018-12-21

已发帖子： 262

积分： 262

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

测试一下： 使用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;
    }

Jmhh247

会员

注册时间： 2018-12-21

已发帖子： 262

积分： 262

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

是鼠标，在电脑上操作的，codeblocks仿真

请问TAB页选中是 键盘， 还是鼠标完成的？

Jmhh247

会员

注册时间： 2018-12-21

已发帖子： 262

积分： 262

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

别啊，晕哥

多提意见，我学习

优秀， 又可以借鉴了.