【emWin实战教程V2.0】第63章 STemWin皮肤色设置方法

参与人数 1

转最新教程
本章节为大家讲解STemWin皮肤色，皮肤色就是控件的外设效果，设置皮肤色就是设置控件的外观。很多时候，根据项目要求需要设置出不同外观的界面，此时设置皮肤色就派上用场了。
63.1 初学者重要提示
63.2 皮肤色设置基础知识
63.3 皮肤色相关API函数
63.4 皮肤色属性修改方法
63.5 自定义皮肤色回调函数的方法
63.6 实验例程说明（RTOS）
63.7 实验例程说明（裸机）
63.8 总结

lee_st · 2017-4-1 15:01:53

63.1 初学者重要提示

1、建议初学者在学习本章节前，将官方手册中皮肤章节开头的基础知识也学习下。
2、设置控件的皮肤有两种方法，一种是设置控件的皮肤回调函数，另一种是设置皮肤的属性，本章节主要为大家讲解这两种方法。

lee_st · 2017-4-1 15:02:04

3、皮肤色的所有API函数在emWin手册中都有讲解，下图是中文版手册里面通用API函数位置，具体到支持皮肤色的控件，在此手册的18.8小节到18.16小节分别进行说明。

lee_st · 2017-4-1 15:02:17

下图是英文版手册里面通用API函数的位置，具体到支持皮肤色的控件，在此手册的22.8小节到22.19小节分别进行说明：

lee_st · 2017-4-1 15:02:30

63.2 皮肤色设置基础知识

      总的来说，控件的外观设置可以分为两种，一种是经典的外观设置，另一种就是本章节要讲解的皮肤色设置。这两种方式的API函数完全是独立的，各自操作各自的，互不通用。
      前面第47章节为大家讲解的按钮控件自定义回调函数实现各种按钮效果可以认为是第三种设置方法。
大家仅需知道这种方法也可以设置外观即可，无需纠结这种方法应该属于前面两种外观设置的哪一类。
u  经典外观
      经典的外观设置函数比较简单，主要是一些背景色设置，比如按钮控件的BUTTON_SetBkColor()函数，单选按钮的RADIO_SetBkColor()和滑块控件的SLIDER_SetBkColor()等。另外还有一小部分控件带有自绘制函数，比如列表框的LISTBOX_SetOwnerDraw函数，通过此函数也可以设置外观。
u  皮肤色设置
      这个是我们本章节的重点，设置控件的皮肤有两种方法，一种是设置控件的皮肤回调函数，另一种是设置皮肤的属性。本章节把这两种方法给大家讲解下如何使用。

lee_st · 2017-4-1 15:02:43

emWin5.32支持皮肤色的控件以及对应的默认皮肤回调函数：

控件默认的皮肤色回调函数是被emWin库封装起来的，用户是无法查看的。

lee_st · 2017-4-1 15:02:54

63.3 皮肤色相关API函数

下面是控件通用的皮肤设置函数，注意，函数的前缀可以是任何支持皮肤色的控件前缀，比如BUTTON，CHECKBOX，FRAMEWIN等：

图片:63.4.png

lee_st · 2017-4-1 15:03:08

这几个函数可以简单的分成以下四组进行说明：
u  _DrawSkinFlex()
   此函数是单独一组，这个函数在用户自定义皮肤回调函数的时候才会用到。皮肤回调函数的命令是非常多的，用户自定义皮肤回调函数时无法将这些命令全部都实现，此时就可以调用这个函数来处理未实现的命令，依然采用默认方式实现。
u  _GetSkinFlexProps()
u  _SetSkinFlexProps()
      这两个函数是一组，一个是用来获取控件的皮肤属性，另一个是用来设置皮肤属性。
u  _SetDefaultSkin()
u  _SetSkin()
      这两个函数是一组，用来设置皮肤色回调函数的，其中函数_SetDefaultSkin()是设置此种类型的所有控件，而函数_SetSkin()仅是指定此种类型控件中的某一个。比如函数BUTTON_SetDefaultSkin()设置所有按钮控件，而函数BUTTON_SetSkin仅是指定某一个按钮控件。
u  _SetDefaultSkinClassic()
u  _SetSkinClassic()
      这两个函数是一组，用来设置经典外观，其中函数_SetDefaultSkinClassic()是设置此种类型的所有控件，而函数_SetSkinClassic()仅是指定此种类型控件中的某一个。比如函数BUTTON_SetDefaultSkinClassic()设置所有按钮控件，而函数BUTTON_SetSkinClassic()仅是指定某一个按钮控件。

lee_st · 2017-4-1 15:03:22

63.4 皮肤色属性修改方法

这种方法简单易用，推荐初学者使用。但是具体到某个控件时该如何实现呢？我们这里以按钮控件为例进行说明（任何其它控件都是一样的思路），每个支持皮肤色的控件，手册中都有专门的讲解，下面是中文版手册中按钮部分的讲解：

lee_st · 2017-4-1 15:03:32

在这个小节的开头，手册给出按钮控件的皮肤设计细节：

lee_st · 2017-4-1 15:03:57

针对上面截图中的每个字母，手册中都专门给出了解释：

lee_st · 2017-4-2 13:34:02

为了配置这些选项，emWin专门将其定义为结构体BUTTON_SKINFLEX_PROPS：

lee_st · 2017-4-2 13:34:42

有了这个结构体后，用户只需配合函数BUTTON_GetSkinFlexProps()和BUTTON_SetSkinFlexProps()就可以设置皮肤色属性了。另外要注意，使用这两个函数配置的时候，按钮控件是有按下，聚焦，启用和禁止四种状态的皮肤色，用户要根据需要设置相应的状态。

lee_st · 2017-4-2 13:35:21

这里我们举一个可以在模拟器上面运行的完整代码如下，此代码对应的例子是V6-603_STemWin实验_控件皮肤色设置之皮肤属性修改法（模拟器）：
/*********************************************************************
*                                                                   *
*             SEGGER Microcontroller GmbH & Co. KG             *
*       Solutions for real time microcontroller applications       *
*                                                                   *
**********************************************************************
*                                                                   *
* C-file generated by:                                              *
*                                                                   *
*       GUI_Builder for emWin version 5.32                         *
*       Compiled Oct  8 2015, 11:59:02                            *
*       (c) 2015 Segger Microcontroller GmbH & Co. KG             *
*                                                                   *
**********************************************************************
*                                                                   *
*       Internet: www.segger.com  Support: support@segger.com    *
*                                                                   *
**********************************************************************
*/
// USER START (Optionally insert additional includes)
// USER END
#include "DIALOG.h"
/*********************************************************************
*
*    Defines
*
**********************************************************************
*/
#define ID_FRAMEWIN_0 (GUI_ID_USER + 0x00)
#define ID_BUTTON_0 (GUI_ID_USER + 0x01)
// USER START (Optionally insert additional defines)
// USER END
/*********************************************************************
*
*    Static data
*
**********************************************************************
*/
// USER START (Optionally insert additional static data)
// USER END
/*********************************************************************
*
*    _aDialogCreate
*/
static const GUI_WIDGET_CREATE_INFO _aDialogCreate[] = {
  { FRAMEWIN_CreateIndirect, "Framewin", ID_FRAMEWIN_0, 0, 0, 800, 480, 0, 0x64, 0 },
  { BUTTON_CreateIndirect, "Button", ID_BUTTON_0, 34, 35, 177, 52, 0, 0x0, 0 },
  // USER START (Optionally insert additional widgets)
  // USER END
};
/*********************************************************************
*
*    Static code
*
**********************************************************************
*/
// USER START (Optionally insert additional static code)
// USER END
/*********************************************************************
*
*    _cbDialog
*/
static void _cbDialog(WM_MESSAGE * pMsg) {
  WM_HWIN hItem;
  int    NCode;
  int    Id;
  BUTTON_SKINFLEX_PROPS BUTTON_Props; //--------------（1）
  // USER START (Optionally insert additional variables)
  // USER END
  switch (pMsg->MsgId) {
  case WM_INIT_DIALOG:
//
// Initialization of 'Framewin'
//
hItem = pMsg->hWin;
FRAMEWIN_SetFont(hItem, GUI_FONT_32B_ASCII);
FRAMEWIN_SetText(hItem, "armfly");
FRAMEWIN_SetTextAlign(hItem, GUI_TA_HCENTER | GUI_TA_VCENTER);
//
// Initialization of 'Button'
//
hItem = WM_GetDialogItem(pMsg->hWin, ID_BUTTON_0);
BUTTON_SetFont(hItem, GUI_FONT_20_1);
BUTTON_SetText(hItem, "Button");
   /* 获取按钮启动状态的皮肤 */
   BUTTON_GetSkinFlexProps(&BUTTON_Props, BUTTON_SKINFLEX_PI_ENABLED); //--------------（2）
   BUTTON_Props.aColorFrame[0] = 0x000080FF;                         //--------------（3）
   BUTTON_Props.aColorFrame[1] = 0x000080FF;
   BUTTON_Props.aColorFrame[2] = 0x000080FF;
   BUTTON_Props.aColorLower[0] = 0x000080FF;
   BUTTON_Props.aColorLower[1] = 0x000080FF;

   BUTTON_Props.aColorUpper[0] = 0x000080FF;
   BUTTON_Props.aColorUpper[1] = 0x000080FF;
   /* 设置按下启动状态的皮肤色 */
   BUTTON_SetSkinFlexProps(&BUTTON_Props, BUTTON_SKINFLEX_PI_ENABLED); //--------------（4）
   /* 设置聚焦状态的皮肤色 */
   BUTTON_SetSkinFlexProps(&BUTTON_Props, BUTTON_SKINFLEX_PI_FOCUSSED); //--------------（5）
   BUTTON_Props.aColorFrame[0] = GUI_GREEN;
   BUTTON_Props.aColorFrame[1] = GUI_GREEN;
   BUTTON_Props.aColorFrame[2] = GUI_GREEN;
   BUTTON_Props.aColorLower[0] = GUI_GREEN;
   BUTTON_Props.aColorLower[1] = GUI_GREEN;

   BUTTON_Props.aColorUpper[0] = GUI_GREEN;
   BUTTON_Props.aColorUpper[1] = GUI_GREEN;
   /* 设置按下状态的皮肤色 */
   BUTTON_SetSkinFlexProps(&BUTTON_Props, BUTTON_SKINFLEX_PI_PRESSED); //--------------（6）
// USER START (Optionally insert additional code for further widget initialization)
// USER END
break;
  case WM_NOTIFY_PARENT:
Id = WM_GetId(pMsg->hWinSrc);
NCode = pMsg->Data.v;
switch(Id) {
case ID_BUTTON_0: // Notifications sent by 'Button'
   switch(NCode) {
   case WM_NOTIFICATION_CLICKED:
      // USER START (Optionally insert code for reacting on notification message)
      // USER END
      break;
   case WM_NOTIFICATION_RELEASED:
      // USER START (Optionally insert code for reacting on notification message)
      // USER END
      break;
   // USER START (Optionally insert additional code for further notification handling)
   // USER END
   }
   break;
// USER START (Optionally insert additional code for further Ids)
// USER END
}
break;
  // USER START (Optionally insert additional message handling)
  // USER END
  default:
WM_DefaultProc(pMsg);
break;
  }
}
/*********************************************************************
*
*    Public code
*
**********************************************************************
*/
/*********************************************************************
*
*    CreateFramewin
*/
WM_HWIN CreateFramewin(void);
WM_HWIN CreateFramewin(void) {
  WM_HWIN hWin;
  hWin = GUI_CreateDialogBox(_aDialogCreate, GUI_COUNTOF(_aDialogCreate), _cbDialog, WM_HBKWIN, 0, 0);
  return hWin;
}

lee_st · 2017-4-2 13:35:25

/*********************************************************************
*                                                                   *
*             SEGGER Microcontroller GmbH & Co. KG             *
*       Solutions for real time microcontroller applications       *
*                                                                   *
**********************************************************************
*                                                                   *
* C-file generated by:                                              *
*                                                                   *
*       GUI_Builder for emWin version 5.32                         *
*       Compiled Oct  8 2015, 11:59:02                            *
*       (c) 2015 Segger Microcontroller GmbH & Co. KG             *
*                                                                   *
**********************************************************************
*                                                                   *
*       Internet: www.segger.com  Support: support@segger.com    *
*                                                                   *
**********************************************************************
*/
// USER START (Optionally insert additional includes)
// USER END
#include "DIALOG.h"
/*********************************************************************
*
*    Defines
*
**********************************************************************
*/
#define ID_FRAMEWIN_0 (GUI_ID_USER + 0x00)
#define ID_BUTTON_0 (GUI_ID_USER + 0x01)
// USER START (Optionally insert additional defines)
// USER END
/*********************************************************************
*
*    Static data
*
**********************************************************************
*/
// USER START (Optionally insert additional static data)
// USER END
/*********************************************************************
*
*    _aDialogCreate
*/
static const GUI_WIDGET_CREATE_INFO _aDialogCreate[] = {
  { FRAMEWIN_CreateIndirect, "Framewin", ID_FRAMEWIN_0, 0, 0, 800, 480, 0, 0x64, 0 },
  { BUTTON_CreateIndirect, "Button", ID_BUTTON_0, 34, 35, 177, 52, 0, 0x0, 0 },
  // USER START (Optionally insert additional widgets)
  // USER END
};
/*********************************************************************
*
*    Static code
*
**********************************************************************
*/
// USER START (Optionally insert additional static code)
// USER END
/*********************************************************************
*
*    _cbDialog
*/
static void _cbDialog(WM_MESSAGE * pMsg) {
  WM_HWIN hItem;
  int    NCode;
  int    Id;
  BUTTON_SKINFLEX_PROPS BUTTON_Props; //--------------（1）
  // USER START (Optionally insert additional variables)
  // USER END
  switch (pMsg->MsgId) {
  case WM_INIT_DIALOG:
//
// Initialization of 'Framewin'
//
hItem = pMsg->hWin;
FRAMEWIN_SetFont(hItem, GUI_FONT_32B_ASCII);
FRAMEWIN_SetText(hItem, "armfly");
FRAMEWIN_SetTextAlign(hItem, GUI_TA_HCENTER | GUI_TA_VCENTER);
//
// Initialization of 'Button'
//
hItem = WM_GetDialogItem(pMsg->hWin, ID_BUTTON_0);
BUTTON_SetFont(hItem, GUI_FONT_20_1);
BUTTON_SetText(hItem, "Button");
   /* 获取按钮启动状态的皮肤 */
   BUTTON_GetSkinFlexProps(&BUTTON_Props, BUTTON_SKINFLEX_PI_ENABLED); //--------------（2）
   BUTTON_Props.aColorFrame[0] = 0x000080FF;                         //--------------（3）
   BUTTON_Props.aColorFrame[1] = 0x000080FF;
   BUTTON_Props.aColorFrame[2] = 0x000080FF;
   BUTTON_Props.aColorLower[0] = 0x000080FF;
   BUTTON_Props.aColorLower[1] = 0x000080FF;

   BUTTON_Props.aColorUpper[0] = 0x000080FF;
   BUTTON_Props.aColorUpper[1] = 0x000080FF;
   /* 设置按下启动状态的皮肤色 */
   BUTTON_SetSkinFlexProps(&BUTTON_Props, BUTTON_SKINFLEX_PI_ENABLED); //--------------（4）
   /* 设置聚焦状态的皮肤色 */
   BUTTON_SetSkinFlexProps(&BUTTON_Props, BUTTON_SKINFLEX_PI_FOCUSSED); //--------------（5）
   BUTTON_Props.aColorFrame[0] = GUI_GREEN;
   BUTTON_Props.aColorFrame[1] = GUI_GREEN;
   BUTTON_Props.aColorFrame[2] = GUI_GREEN;
   BUTTON_Props.aColorLower[0] = GUI_GREEN;
   BUTTON_Props.aColorLower[1] = GUI_GREEN;

   BUTTON_Props.aColorUpper[0] = GUI_GREEN;
   BUTTON_Props.aColorUpper[1] = GUI_GREEN;
   /* 设置按下状态的皮肤色 */
   BUTTON_SetSkinFlexProps(&BUTTON_Props, BUTTON_SKINFLEX_PI_PRESSED); //--------------（6）
// USER START (Optionally insert additional code for further widget initialization)
// USER END
break;
  case WM_NOTIFY_PARENT:
Id = WM_GetId(pMsg->hWinSrc);
NCode = pMsg->Data.v;
switch(Id) {
case ID_BUTTON_0: // Notifications sent by 'Button'
   switch(NCode) {
   case WM_NOTIFICATION_CLICKED:
      // USER START (Optionally insert code for reacting on notification message)
      // USER END
      break;
   case WM_NOTIFICATION_RELEASED:
      // USER START (Optionally insert code for reacting on notification message)
      // USER END
      break;
   // USER START (Optionally insert additional code for further notification handling)
   // USER END
   }
   break;
// USER START (Optionally insert additional code for further Ids)
// USER END
}
break;
  // USER START (Optionally insert additional message handling)
  // USER END
  default:
WM_DefaultProc(pMsg);
break;
  }
}
/*********************************************************************
*
*    Public code
*
**********************************************************************
*/
/*********************************************************************
*
*    CreateFramewin
*/
WM_HWIN CreateFramewin(void);
WM_HWIN CreateFramewin(void) {
  WM_HWIN hWin;
  hWin = GUI_CreateDialogBox(_aDialogCreate, GUI_COUNTOF(_aDialogCreate), _cbDialog, WM_HBKWIN, 0, 0);
  return hWin;
}

lee_st · 2017-4-2 13:35:36

/*********************************************************************
*
*    MainTask
*/
void MainTask(void)
{
   /* 初始化 */
   GUI_Init();
   /* 窗口自动使用存储设备 */
   WM_SetCreateFlags(WM_CF_MEMDEV);
   /* 创建对话框，使用GUIBulder5.32生成的对话框创建函数 */
   CreateFramewin();
   while(1)
   {
      GUI_Delay(10);
   }
}

lee_st · 2017-4-2 13:35:46

创建的这个例子相对比较容易，主要是在对话框上面创建了一个按钮控件，并修改了按钮的皮肤属性。
1.    定义按钮的皮肤色结构体变量BUTTON_SKINFLEX_PROPS。
2.    通过函数BUTTON_GetSkinFlexProps获取按钮启动状态时的皮肤属性，启动状态对应的索引是BUTTON_SKINFLEX_PI_ENABLED。
3.    我们这里将按钮的皮肤参数全部设置为同一种颜色0x000080FF，实现扁平化效果。未设置的皮肤参数依然使用系统默认的。

lee_st · 2017-4-2 13:35:56

4.    通过函数BUTTON_SetSkinFlexProps设置按钮启动状态时的皮肤属性，启动状态对应的索引是BUTTON_SKINFLEX_PI_ENABLED。
5.    通过函数BUTTON_SetSkinFlexProps设置按钮聚焦状态时的皮肤属性，聚焦状态对应的索引是BUTTON_SKINFLEX_PI_FOCUSSED。
6.    通过函数BUTTON_SetSkinFlexProps设置按钮按下状态的皮肤属性，按下状态对应的索引是BUTTON_SKINFLEX_PI_PRESSED。