CN101727315B - 实现按钮类面板控件操作显示的方法 - Google Patents

Abstract

本发明涉及一种实现按钮类面板控件操作显示的方法，包括绘制与按钮类面板控件中各个窗格所对应的控件普通状态显示图片和控件点击状态显示图片、为按钮类面板控件加载控件普通状态显示图片和控件点击状态显示图片、设置该按钮类面板控件的窗格属性、接收用户点击按钮类面板控件的操作，并判断被选中的窗格、对被选中的窗格读取控件点击状态显示图片并绘制、对未选中的窗格读取控件普通状态显示图片并绘制。采用该种实现按钮类面板控件操作显示的方法，所产生的控件具有很强的配置特性，灵活性较高，工作性能稳定可靠、适用范围较为广泛。

Description

实现按钮类面板控件操作显示的方法

技术领域

本发明涉及嵌入式系统领域，特别涉及嵌入式系统中控件显示技术领域，具体是指一种嵌入式系统中实现按钮类面板控件操作显示的方法。

背景技术

随着手机硬件地不断发展，触摸屏变得越来越普遍，而触摸屏应用中，用到按钮类控件的地方也越来越多。但是，如果用传统的按钮类控件来开发应用的话，会把应用程序写得很复杂，开发人员需要关心很多问题。

请参阅图1所示，这是一个典型的手机拨号面板，图中的各个数字键为普通按钮，触笔点击时会下凹，松开时会上抬，给人一种动画的效果。如果这些按钮用传统的按钮控件(Button)来实现的话，那么，开发人员所要关心的东西就相当多，既要创建多个控件，又要关心各个控件所产生的事件，并针对各个事件做出相应的动作。这样，使得代码的逻辑变得复杂，而且很冗余，容易出错。像进度条和音量调节器等应用，虽然也有相应现成的控件可以实现，但在如今强调个性化的背景下，用这些传统控件去实现换肤等功能，将是一件相当困难的事。

发明内容

鉴于以上内容，有必要提供一种能够充分利用图片资源与控件特性、配置灵活方便、简单易用、有效降低出错概率和开发工作量、工作性能稳定可靠、适用范围较为广泛的实现按钮类面板控件操作显示的方法。

一种实现按钮类面板控件操作显示的方法，所述的方法包括以下步骤：(1)绘制与该按钮类面板控件中各个窗格所对应的控件普通状态显示图片和控件点击状态显示图片；(2)初始化所绘制的图片，为该按钮类面板控件加载所述的控件普通状态显示图片和控件点击状态显示图片；(3)设置该按钮类面板控件的窗格属性；(4)接收用户点击该按钮类面板控件的操作，并判断出被选中的窗格；(5)针对被选中的窗格，读取对应的控件点击状态显示图片并绘制该被选中的窗格；及(6)针对未选中的窗格，读取对应的控件普通状态显示图片并绘制该未选中的窗格。

相较于现有技术，所述的实现按钮类面板控件操作显示的方法，充分利用了图片资源、用户操作习惯与控件特性，并将这三者融合起来，产生出了简单易用、灵活配置的控件显示实现方法，合并了原本分散的代码逻辑，减少了其冗余度，以最小的资源代价完成以前较为庞大的工程，并在一定程度上减少了程序的出错概率；同时通过该方法所产生的控件具有很强的配置特性，可以做到换风格的功能，还可实现动态换主题、皮肤、位置等用户界面(UI)风格，而且无须对程序做任何的改动，不仅减少了开发人员的开发周期、代码量和出错概率，而且提供了一定的灵活性，工作性能稳定可靠、适用范围较为广泛，为构件化软件技术在嵌入式系统中的进一步应用和发展奠定了坚实的基础。

附图说明

图1A、1B分别为移动设备拨号按钮面板控件在未选中和选中状态下的显示示意图。

图2为采用绘图方式进行单个按钮类面板控件操作显示的流程图。

图3为采用图片方式进行单个按钮类面板控件操作显示的流程图。

图4为本发明的实现按钮类面板控件操作显示的方法的流程图。

具体实施方式

为了能够更清楚地理解本发明的技术内容，特举以下实施例详细说明。

在本较佳实施例中，先撇开消息事件、方法等控制逻辑因素，仅从视图部分来观察按钮(button)控件的实现。

如图1A所示，为按钮面板控件在未选中状态下的显示示意图，其中的控件可视为处于“普通状态”。图1B为按钮面板所有控件在选中状态下的显示示意图，其中的控件全是“下凹状态”。

参阅图2所示，为采用绘图方式进行单个按钮类面板控件操作显示的流程图。首先，步骤S2，以鼠标操作为例，点击按钮控件。按钮可以简化为两种不同的外观，即，被鼠标点击前，以普通状态呈现一种外观；被鼠标点击后，以下凹状态呈现另一种外观。如此，通过两种不同外观可让用户了解该按钮被选中了。按钮的这两种不同外观，是由按钮控件内部的当前状态来决定的，它可以通过用户的鼠标点击、键盘敲击，开发人员调用按钮接口等途径来改变。

步骤S4，判断按钮控件是否被选中，如果是则执行步骤S6，否则，执行步骤S8。

步骤S6，绘制该按钮控件被点击后的外观，即下凹状态。

步骤S8，绘制该按钮控件的普通外观，即未被点击的状态。

上述所说的绘制外观，对控件的实现来说，可以通过调用图形系统的绘图函数，由用户自己绘制出两个状态外观。但这种做法可能会导致所绘制的状态外观不够美观，并且对于控件来说，调用图形系统的绘图函数进行绘制也过于复杂。在本较佳实施例中，可将控件的外观用图片来代替自己绘制，如此既可简化操作，而且也较为美观，容易控制控件的外观，具体流程可参照图3所示。

请参阅图3所示，为采用图片方式进行单个按钮类面板控件操作显示的流程图。在本流程中，将图2所述的控件外观用两张不同的图片表示，并根据控件内部当前的状态(普通与选中)来显示其中的一张，从而达到不同视图的变化效果。

步骤S10，以鼠标操作为例，点击按钮控件。

步骤S12，判断该按钮类面板的控件是否被选中，如果是则执行步骤S14，否则，执行步骤S16。

步骤S14，针对被选中的控件，调用点击状态的图片，即显示该按钮控件为下凹的图片，然后执行步骤S18。

步骤S16，针对未选中的控件，调用普通状态的图片，表示该按钮控件未选中。

步骤S18，根据所获取的点击状态的图片以及普通状态的图片绘制图片。

请参阅图4所示，为本发明的实现按钮类面板控件操作显示的方法的流程图。图4所示流程扩展了如图3所述的原理，仍然只有两张大小相同的图片，只是对应的内容有所不同。如图1中，图1A与图1B的差别只在于对应按钮的不同，图1A为普通状态，图1B为下凹状态。开发人员指定图片中的一块区域(为便于下文描述，将区域定义为窗格)，当用户点击这块区域(窗格)时，该窗格的状态变为选中状态，绘制控件时，则会调用第二张图片里相应这个窗格位置的部分；而其他窗格则为普通状态，则可沿用第一张图片中除被点击的窗格外的其他部分。运用本流程所示的方法，开发人员可以只利用两张图片模拟出许多的按钮控件。

步骤S20，绘制图片。根据应用界面的特点，绘制两张图片，一张用于显示控件的普通状态，如图1A，另一张用于显示控件被点击后的下凹状态，如图1B。绘制的两张图片要求图片的大小一致，不能点击的部分内容要一样，两张图片的区别之处在于可点击的部分，即为窗格。

步骤S22，设置图片属性，即初始化上述两张图，调用SetPanelImages设置给控件，相关程序如下所示：

           SetPanelImages(

                [in]IImage*upImage，

                [in]IImage*downImage)；

其中，IImage为图像对象接口，由应用开发人员初始化，并加载相应的图片。upImage是普通状态的图片，不能为空，否则就不能正常显示。downImage是下凹状态的图片，当点击窗格时，会调用到这张图片。

步骤S24，根据UI的设计，设置窗格属性，其数据结构如下所示：

    struct ImagePanelPane{

         int   x；

         int   y；

         int   width；

         int   height；

         int   carveX；

         int   carveY；

         int   index；

         PaneStyle style；

         bool checked；

         bool enabled；

         bool visible；

         in    tacceleratorKey；

         wchar_t*text；

}

所述的设置窗格属性主要包括如下设置内容：

(1)窗格在控件中的显示位置(x，y，width，height)；

(2)窗格取自图片的对应位置(carveX，carveY)；

(3)窗格的操作风格(style)，其中PaneStyle为窗格的操作风格，它是一个枚举值；

(4)窗格内的显示信息，例如，显示文本(text)；

(5)窗格的状态信息，如是否可视，是否被选中等(checked，enabled，visible)；

(6)用户索引(index)，该值指定了窗格的ID，用户可通过此值来对窗格进行操作。其中，由于用户操作习惯及应用的不同，窗格拥有如下4种不同的风格：

一，按钮风格：类似于按钮控件，当鼠标在窗格上面按下时，用下凹状态中该区域的图片，当松开鼠标时，则用普通状态的图片。

二，检验栏(CheckBox)风格：当鼠标在窗格上面第一次点击时，用下凹状态的图片，当再次点击后，用普通状态的图片

三，检验栏组(CheckBoxGroup)风格：在所有具有此风格的窗格中，只有一个是下凹状态的，其余为普通状态。当点击其中一个普通状态的窗格后，该普通状态的窗格将变成下凹状态，而原先呈下凹状态的窗格将变为普通状态。

四，手动检验(ManualCheck)风格：用户可以根据鼠标、键盘事件，或自身的逻辑，通过控件提供的方法，来控制窗格的状态。

步骤S26，注册事件，即当点击了某个窗格后，控件会发出窗格被选中(PaneSelected)的事件。如果开发人员想关心此事件，并在用户点击窗格后做出相应的动作，那么，需要注册该事件的回调，并在此回调里做相应的逻辑。

步骤S28，根据所接收的用户点击该控件的操作，逐一判断该按钮类面板控件中的窗格是否被选中。如果窗格被选中，则执行步骤S30，如果窗格未选中，则执行步骤S32。

步骤S30，针对被选中的窗格，读取呈下凹状态的图片(如图1B)并从中攫取该被点击的窗格所在位置的图片，然后执行步骤S34。

步骤S32，针对未选中的窗格，读取呈普通状态的图片(如图1A)并从中攫取该未被点击的窗格所在位置的图片，然后执行步骤S34。

步骤S34，根据所攫取的图片绘制窗格。

步骤S36，判断该按钮类面板控件中的所有窗格是否都已绘制完成，若已经完成则结束本流程，否则，流程返回至步骤S28。

以上流程是一个简易按钮面板的应用步骤，用户可以通过键盘鼠标等手段操作其中的按钮。如果想要做到更复杂的效果，可以用SetImagePane来重新设置指定窗格的区域，所运用的函数声明类似于：

SetImagePane(

        [in]int index，

        [in]ImagePanelPane*pane)。

此外，还可通过方法SetPanePosition重新设置指定窗格的位置，所运用的函数声明类似于：

SetPanePosition(

        [in]int index，

        [in]int dstX，

        [in]int dstY)；

通过以上两个函数的应用，开发人员可以做出更为复杂的应用，如调节音量的拖动条等。

在此说明书中，本发明已参照其特定的实施例作了描述。但是，很显然仍可以作出各种修改和变换而不背离本发明的精神和范围。因此，说明书和附图应被认为是说明性的而非限制性的。

Claims (7)

1.一种实现按钮类面板控件操作显示的方法，该方法包括以下步骤：

(1)绘制与该按钮类面板控件所对应的控件普通状态显示图片和控件点击状态显示图片；

(2)初始化所绘制的图片，为该按钮类面板控件加载所述的控件普通状态显示图片和控件点击状态显示图片；

(3)设置该按钮类面板控件的窗格属性，包括：设置各个窗格所取自的控件普通状态显示图片和控件点击状态显示图片的对应位置；

(4)接收用户点击该按钮类面板控件的操作，并判断出被选中的窗格；

(5)针对被选中的窗格，根据步骤(3)中所设置的窗格在控件点击状态显示图片中对应的位置读取对应的控件点击状态显示图片并绘制该被选中的窗格；及

(6)针对未选中的窗格，读取对应的控件普通状态显示图片并绘制该未选中的窗格。

2.根据权利要求1所述的实现按钮类面板控件操作显示的方法，其特征在于，所述的步骤(3)包括以下步骤：

设置各个窗格在所述的按钮类面板控件中的显示位置；

设置各个窗格的操作风格类型；

设置各个窗格内的显示信息；

设置各个窗格的状态信息；及

设置各个窗格的用户索引。

3.根据权利要求2所述的实现按钮类面板控件操作显示的方法，其特征在于，所述的窗格的操作风格类型包括：

按钮风格：当鼠标在该窗格上面按下时用控件点击状态显示图片中该窗格所在区域的图片，当松开鼠标时用控件普通状态显示图片中该窗格所在区域的图片；

检验栏风格：当鼠标在该窗格上面点击时用控件点击状态显示图片中该窗格所在区域的图片，当鼠标在该窗格上面再次点击时用控件普通状态显示图片中该窗格所在区域的图片；

检验栏组风格：仅有一个窗格处于被选中状态，其余窗格为未选中的普通状态；

手动检验风格：用于控制相应窗格的选中状态。

4.根据权利要求3所述的实现按钮类面板控件操作显示的方法，其特征在于，所述的手动检验风格是通过对鼠标、键盘的操作、通过该按钮类面板控件的自身逻辑状态或者通过该按钮类面板控件所提供的接口方法实现对相应窗格的选中状态进行控制。

5.根据权利要求2所述的实现按钮类面板控件操作显示的方法，其特征在于，所述的窗格的状态信息包括窗格是否可视、窗格是否被选中。

6.根据权利要求1或2所述的实现按钮类面板控件操作显示的方法，其特征在于，所述的步骤(3)还包括以下步骤：

设置所述的按钮类面板控件的窗格在所述按钮类面板控件中的区域以及在所述控件普通状态显示图片和控件点击状态显示图片中所对应的区域。

7.根据权利要求1或2所述的实现按钮类面板控件操作显示的方法，其特征在于，所述的步骤(3)还包括以下步骤：

设置所述的按钮类面板控件的窗格在所述按钮类面板控件中所对应的位置。

Images