MTK的GUI 设计

 

目录

前言
第一章    待机
第二章  主菜单
第三章    状态栏
第四章  标题栏
第五章  softkey bar
第六章
第七章
第八章
第九章

 

前言

MTK的高仿和新的UI设计涉及到待机，主菜单，二级菜单，标题栏，状态栏，弹出框等等。MTK的界面都是由一些控件组合而成，那么一个界面的重新布局，要经历那些步骤呢？下面就来讨论一下。

首先要考虑好当前界面需要那些功能，每个功能需要什么控件来实现。对于具体的控件，要确定它的有效区域（剪切区域），包括宽度和高度，还有背景的宽度和高度，以及背景是用图片还是用颜色填充，都是我们需要在设计之前要考虑的，完了就是把我们常用的宽度和高度用宏定义起来，并准备需要的一些背景图片。

 

第一章      待机界面

待机界面常见的显示元素一般如下：

状态栏，时间，日期，运营商，快捷菜单和一些动态显示菜单。接下我们需要在纸上画出它们的布局图，每个元素要显示的位置和大小。下面我们就逐个讲解上面的一些元素是如何显示的。

第一 ，状态栏，这个我们在讲状态栏的那章专门介绍。

第二 ，时间和日期，如果我们要实现我们自己风格的时间和日期，我们可以新定义一个时间日期类型，我们可以在枚举DT_DISPLAY_TYPE中添加一个新定义的变量，例如：DT_HTC_DIGITAL_CLOCK，然后在函数set_dt_display（）设定该时间日期显示类型中，包含哪些元素，比如是模拟时钟还是数字时钟，是否日期显示和星期显示。那如何设定呢，首先我们要wgui_clock_create（）创制一个时间日期类型，常用几种类型如下：

GUI_CLOCK_MAINLCD_TYPE_ANALOG  //模拟时钟

GUI_CLOCK_MAINLCD_TYPE_DIGITAL_TIME_SMALL  //小数字时钟

GUI_CLOCK_MAINLCD_TYPE_DIGITAL_TIME_IMAGE  //数字时钟，时间数字用图片来实现

GUI_CLOCK_MAINLCD_TYPE_DIGITAL_TIME     //数字时钟

GUI_CLOCK_MAINLCD_TYPE_DIGITAL_DAY      //日期时钟（年月日显示）

GUI_CLOCK_MAINLCD_TYPE_DIGITAL_DATE     //星期显示

然后在show_main_LCD_date_time函数中加入该DT类型的显示和hide_main_LCD_date_time函数中加入该DT类型的背景显示。

接下来，我们需要定义各个时间，日期，日历控件的坐标和宽度，对于固定不变的元素，我们建议用宏控制，这样便于代码的维护和可读性，例如

#if defined(__MMI_HTC_IDLE_DIGITAL__)

                   #define HTC_DATE_BACKGROUND_X                    

                   #define HTC_DATE_BACKGROUND_Y                         

                   #define HTC_DATE_BACKGROUND_WIDTH                 

                   #define HTC_DATE_BACKGROUND_HRIGHT                  

                   #define HTC_DATE_X                                               

                   #define HTC_DATE_Y                                               

                   #define HTC_DATE_WIDTH                                       

                   #define HTC_DATE_HRIGHT                           

                  

        #define DIGITAL_BACKGROUND_X1                       

        #define DIGITAL_BACKGROUND_Y1                       

                   #define DIGITAL_BACKGROUND_X2                        

        #define DIGITAL_BACKGROUND_Y2                       

        #define DIGITAL_BACKGROUND_WIDTH                     

        #define DIGITAL_BACKGROUND_HEIGHT                  

#endif

接下来我们只需要在Gui_clock.c中每个对应的函数中修改一下剪切区域，背景图片及显示位置就可以了。时间都是在函数gui_clock_show()里显示的，其中模拟时钟显示函数为gui_clock_show_analog_clock_dial（），而数字时钟，日历，星期显示都在函数gui_clock_show_digital（）中。

第三 运营商的状态信息

运营商的显示函数就是wgui_cat033_show_network_name()和wgui_cat033_show_network_status(),一般只是调整下显示位置即可。

第四 快捷菜单和动态显示菜单

其实这两部分我们可以放在一起，用同一个结构体来定义，只不过一个用图标显示，一个用菜单显示，另外加上一个显示标志show_flag就可以了。

举例如下：

#if defined(__MMI_HTC_IDLE_DIGITAL__)

#define  __HTC_IDLE_SHORTCUT_MAX_NUM__     (8)

#define  __HTC_IDLE_SHORTCUT_ICON_NUM__     (4) //图标显示个数

#define  __HTC_IDLE_SHORTCUT_MENU_NUM__    (4) //菜单显示个数

#define  __HTC_IDLE_SHORTCUT_MENU_BG_X__    (0)

#define  __HTC_IDLE_SHORTCUT_MENU_WIDTH__   (280)

#define  __HTC_IDLE_SHORTCUT_MENU_HEIGHT__   (40)

U8 g_htc_short_index = 0;

typedef struct _htc_position

{

         U16 start_x;

         U16 start_y;

         U16 width;

         U16 height;

}htc_pos;

typedef struct _htc_idel_shortcut

{

         UI_string_ID_type string;

         UI_image_ID_type  icon;

         UI_image_ID_type  icon_sel;

         htc_pos           short_pos;

         void (*entry_fun) (void);

         U8   show_flag;

}htc_shortcut;

htc_shortcut g_htc_idle_shct[__HTC_IDLE_SHORTCUT_MAX_NUM__]

{

}

#endif

然后定义一个ready_show函数，来决定该short_cut是否显示。

然后定义一下show函数和上下左右中的按键注册函数，并用一个register函数包装起来，放在mmi_idle_entry_idle_screen()，mmi_idle_entry_searching_screen()中就可以了。

最后，别忘了在wgui_cat033_redraw()中调用show_main_LCD_dt_display(),show_shortcut()函数来显示以上元素，这样基本上一个待机界面就完成了。

当然，我们在设计的时候还要考虑要不要显示BUTTON，以及背光上锁时的界面显示。

 

第二章      主菜单

主菜单界面也是分几大块，状态栏，标题栏，context，还有button.

而一般我们需要重点修改的地方就是context.这里面包括设定主菜单的行数，列数，宽度和高度，当然我们也可以设定把具体项的坐标放在一个二维数组里，还要设定一些菜单的显示属性（包括图片显示，文字显示等等）。

例如，我们先把一些位置固定好。

#if defined(__MMI_HTC_MAINMENU__)

#define MAIN_MENU_ANIMATION_WIDTH   100

#define MAIN_MENU_ANIMATION_HEIGHT   78

const U16 gMainMenuAnimationPos[12][2]=

{

         {11,65},    {111,65},   {211,65},

         {11,144},   {111,144},   {211,144},   

         {11,223},   {111,223},   {211,223},

         {11,302},  {111,302},   {211,302},

};

#endif

然后，进入主菜单函数ShowCategory14Screen(),这里我们先要设定我们的动画对定义的图片id,设定 gMainMenuAnimation[i]的值，再通过函数move_fixed_matrix()设定context的（x,y）坐标，通过函数resize_fixed_matrix()设定context的宽度和高度，再通过函数configure_fixed_matrix()设定context的每个菜单项的宽度和高度，以及函数和列数。我们还可以设定菜单的一些显示属性，例如

MMI_fixed_icontext_menuitem.flags &= ~UI_MENUITEM_CENTER_ICON_Y;

MMI_fixed_icontext_menuitem.flags |= UI_MENUITEM_CENTER_TEXT_X;这样我们的主菜单的context布局基本完成。

接下来，我们就进入show_fixed_matrix()看看主菜单的context是如何被画出来的，进入该函数后，我们发现三个函数。

mtk_UI_show_fixed_matrix_menu()  //主菜单绘画函数

gui_show_fixed_matrix_menu()     //主菜单绘画函数,具体区别看看代码就知道了

gui_show_fixed_icontext_menuitem()   //每个菜单项的绘画函数

由于我们改变了菜单的宽度和高度，以及位置，所以我们要调整一下显示坐标的位置和剪切区域的位置就可以了。

在这里提示两点，第一，gui_show_fixed_icontext_menuitem()是所有菜单的绘画函数，而要修改主菜单，我们只要搜索关键字MATRIX_MENU 就可以了.第二，动画的背景绘画函数是gui_show_animation_with_background_filler().

 

 

 

 

 

 

 

 

第三章      状态栏

状态栏位于我们手机的最顶格，常见有信号图标，电源信号图标，未读短信图标，数字时间等等。而我们常见的一些修改比如固定副卡图标的位置，状态栏图标靠左（或者靠右显示），状态栏显示标题等。

一般在修改之前，我们先在gui_switch.h中，先确定状态栏的宽度和高度，标题栏的宽度和高度等。

下面我们就跟着模拟器显示都涉及到哪些函数。我们从函数dm_setup_and_draw_status_icons()开始，dm_setup_and_draw_status_icons()àshow_title_status_icon()àwgui_status_icon_bar_update().wgui_status_icon_bar_update()是主要的画状态栏的函数，下面我们就来重点来分析这个函数。

在函数wgui_status_icon_bar_update()中，首先执行的是函数gui_status_icon_bar_arrange_oem()，所有状态栏中元素的坐标都是在该函数中确定的，包括信号图标，电源信号图标，数字时钟图标，还有特别的如标题栏图标（标题在状态中显示），当然如果我们要特别修改某些状态栏图标的坐标也是在该函数。接下来就进入真正画的函数gui_status_icon_bar_show_oem().

在函数wgui_status_icon_bar_update()中,首先是画状态栏的背景，gui_status_icon_bar_hide_oem,里面还包括一些常见的背景绘画函数，例如gui_status_icon_bar_show_mainlcd_horizontal_background_oem()，

gui_status_icon_bar_show_mainlcd_vertical_background_oem()等，在这些函数里，我们可以争对不同的界面选择不同的背景图面。画完背景就要画里面的内容了，首先会画一些图标，如信号图标等，在函数gui_status_icon_bar_show_icon_oem()中。再画一些其他元素，例如数字时钟，代码如下element = &wgui_status_icon_bar_elements[bar->element_list[i]]，element->show，当然如果我们还有一些定制的东西要显示，例如标题栏在状态栏中显示，只要在函数里gui_status_icon_bar_show_oem()调用draw_title_in_statusbar ()就可以了，这样状态栏就显示完毕了。

 

第四章      标题栏

通常在我们context的上方有个标题栏，一般显示的是当前高亮菜单的名称，标题栏改动一般不大，主要是显示方式，是正常显示还是滚动显示，还要就是显示的位置，宽度和高度。

一般默认的显示方式设置在函数gui_title_create_ex()里，例如正常方式显示就是gui_title_struct *t, t->style = GUI_TITLE_STYLE_NORMAL。现在我们还是从它一般的开始函数dm_setup_and_draw_title()跟起吧。

在函数dm_setup_and_draw_title()的一开始，我们看到函数这样一句代码，*UICtrlAccessPtr_p = dm_get_coordinates(*UICtrlAccessPtr_p, &dm_title_info)，它给标题栏的x,y,width,height赋值，分别为MMI_TITLE_X, MMI_TITLE_Y, MMI_TITLE_WIDTH, MMI_TITLE_HEIGHT.如果我们需要在一些指定的界面修改的画，我们可以在下面用函数move_title(x,y), resize_title(width,height), wgui_title_set_style(GUI_TITLE_STYLE_LEFTALIGN)去设置标题栏。接下来就进入函数draw_title()里开始真正去画title了。

在draw_title(),我们看到三个函数

wgui_title_set_style(GUI_TITLE_STYLE_NORMAL) //设置标题栏显示风格

wgui_title_set_parameter()  //把坐标，长宽，图标，标题栏的名称传给title_bar.这里我们可以把一些不需要显示的图片或者字串置成空。

wgui_title_show(GUI_TITLE_PART_ALL) //显示标题栏

gui_title_oem_show_background() //画背景

在函数wgui_title_show()里，按照显示风格的不同，有不同的显示函数，例如gui_title_show_normal(),gui_title_show_scrolling ()等，这里我们重点分析一下gui_title_show_scrolling ()函数。在gui_title_show_scrolling()里，我们看到title 默认的显示是居中显示(起始坐标和字串长度有关)，我们不想居中显示，可以把起始坐标固定，这样基本上title就画完了。

 

第五章      Softkey Bar

现在我们讲讲softkey bar,开始做之前，现在gui_switch.h里面把softkey的宽度和高度设置好。现在还是从函数dm_setup_and_draw_button_bar()说起。

在函数dm_setup_and_draw_button_bar()里，先画它的背景，背景函数wgui_softkey_oem_hide(),真正画背景的函数是show_softkey_background_with_clipping().画softkey的函数是show_softkey().

还有个常用到的函数是redraw_softkey(),当有按键发生时，该函数会被执行。在redraw_softkey()中，有个函数enable_softkey_background()，当该函数被执行时，才能显示softkey bar 的背景。