找回密码
 立即注册
Tizen|泰泽论坛,中国领先的泰泽Tizen论坛! › 泰泽网 ›Tizen开发破解 › 查看内容

Tizen应用程序创建UI屏幕布局

2015-10-26 19:22| 发布者: zouyang5| 查看: 42| 评论: 0|原作者: 流星悟语|来自: 泰泽网

摘要: 创建UI屏幕布局 本教程演示了如何可用EFL UI组件库编写UI屏幕布局使用布局。 它同时也突显出EFL在自由式布局类的功能布局以及布局在一个特定的序列(如线性或网格)。 创建UI布局 示例应用程序使用的UI组件,比 ...
创建UI屏幕布局

本教程演示了如何可用EFL UI组件库编写UI屏幕布局使用布局。 它同时也突显出EFL在自由式布局类的功能布局以及布局在一个特定的序列(如线性或网格)。

创建UI布局
示例应用程序使用的UI组件,比如 elm_naviframe 和 elm_toolbar 为视图管理、布局类,如 elm_table , elm_box , elm_grid 组成的屏幕,和UI组件,例如 elm_label 和 elm_image 视图内的内容。

创建UI布局:

1.创建应用程序的布局 create_base_gui () 功能:
  1. static void
  2. create_base_gui(appdata_s *ad)
  3. {
  4.    Elm_Object_Item *nf_it, *tabbar_it;
  5.    // Window
  6.    ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
  7.    elm_win_autodel_set(ad->win, EINA_TRUE);

  9.    evas_object_smart_callback_add(ad->win, "delete,request", win_delete_request_cb, NULL);
复制代码

2.添加 elm_conformant 组件的应用程序来装饰窗户和一个指标:
  1. // Conformant
  2.    ad->conform = elm_conformant_add(ad->win);
  3.    evas_object_size_hint_weight_set(ad->conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
  4.    elm_win_resize_object_add(ad->win, ad->conform);
  5.    evas_object_show(ad->conform);
复制代码

3.添加 elm_naviframe 组件作为视图管理器窗口,提供窗口标题的功能:
  1.   // Naviframe
  2.    ad->nf = elm_naviframe_add(ad->conform);
  3.    elm_object_content_set(ad->conform, ad->nf);
  4.    evas_object_show(ad->nf);
  5.    nf_it = elm_naviframe_item_push(ad->nf, "UiLayout", NULL, NULL, NULL, "tabbar/icon/notitle");

  7.    // Tabbar
  8.    ad->tabbar = create_toolbar(ad);
  9.    elm_object_item_part_content_set(nf_it, "tabbar", ad->tabbar);

  11.    // Set the first view
  12.    tabbar_it = elm_toolbar_first_item_get(ad->tabbar);
  13.    elm_toolbar_item_selected_set(tabbar_it, EINA_TRUE);

  15.    // Show the window after the base GUI is set up
  16.    evas_object_show(ad->win);

  18.    ecore_event_handler_add(ECORE_EVENT_KEY_DOWN, keydown_cb, NULL);
  19. }
复制代码

4.将工具栏添加到naviframe使用 create_toolbar () 功能:
  1. static Evas_Object*
  2. create_toolbar(appdata_s *ad)
  3. {
  4.    Evas_Object *tabbar;

  6.    tabbar = elm_toolbar_add(ad->nf);
  7.    elm_object_style_set(tabbar, "tabbar");
  8.    elm_toolbar_shrink_mode_set(tabbar, ELM_TOOLBAR_SHRINK_EXPAND);
  9.    elm_toolbar_transverse_expanded_set(tabbar, EINA_TRUE);

  11.    elm_toolbar_item_append(tabbar, NULL, "Box", tabbar_item_cb, ad);
  12.    elm_toolbar_item_append(tabbar, NULL, "Grid", tabbar_item_cb, ad);
  13.    elm_toolbar_item_append(tabbar, NULL, "Table", tabbar_item_cb, ad);

  15.    return tabbar;
  16. }
复制代码

下图说明UI布局
屏幕图:UI布局
UI屏幕布局
添加内容到屏幕上
添加内容到屏幕上:

1.组成一个盒子使用递归组合与布局 create_box_view () 功能:

  1. static Evas_Object*
  2. create_box_view(Evas_Object *parent)
  3. {
  4.    Evas_Object *box, *box1, *box2, *box3;

  6.    box = elm_box_add(parent);
  7.    elm_box_padding_set(box, 10, 10);
  8.    evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
  9.    evas_object_size_hint_align_set(box, EVAS_HINT_FILL, EVAS_HINT_FILL);

  11.    box1 = elm_box_add(box);
  12.    elm_box_horizontal_set(box1, EINA_TRUE);
  13.    elm_box_padding_set(box1, 8, 8);
  14.    evas_object_size_hint_weight_set(box1, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
  15.    evas_object_size_hint_align_set(box1, EVAS_HINT_FILL, EVAS_HINT_FILL);
  16.    evas_object_show(box1);

  18.    box2 = elm_box_add(box);
  19.    elm_box_padding_set(box2, 6, 6);
  20.    evas_object_size_hint_weight_set(box2, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
  21.    evas_object_size_hint_align_set(box2, EVAS_HINT_FILL, EVAS_HINT_FILL);
  22.    evas_object_show(box2);

  24.    box3 = elm_box_add(box);
  25.    elm_box_padding_set(box3, 5, 5);
  26.    evas_object_size_hint_weight_set(box3, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
  27.    evas_object_size_hint_align_set(box3, EVAS_HINT_FILL, EVAS_HINT_FILL);
  28.    elm_box_homogeneous_set(box3, EINA_FALSE);
  29.    evas_object_show(box3);
  30. }
复制代码


2.添加内容或另一个框布局。
  1. // Add an item to the box
  2. Evas_Object *item1 = create_content(box, "Item 1");
  3. evas_object_size_hint_min_set(item1, 0, 40);
  4. elm_box_pack_end(box, item1);
  5. elm_box_pack_end(box, box1);
  6. elm_box_pack_end(box, box3);
  7. elm_box_pack_end(box, create_content(box, "Item 4"));

  9. // Add an item to the box1
  10. elm_box_pack_end(box1, create_content(box1, "Item 2.1"));
  11. elm_box_pack_end(box1, box2);
  12. elm_box_pack_end(box1, create_content(box1, "Item 2.3"));

  14. // Add an item to the box2
  15. elm_box_pack_end(box2, create_content(box2, "Item 2.2.1"));
  16. elm_box_pack_end(box2, create_content(box2, "Item 2.2.2"));

  18. // Add an item to the box3
  19. elm_box_pack_end(box3, create_content(box3, "Item 3.1"));
  20. elm_box_pack_end(box3, create_content(box3, "Item 3.2"));
复制代码

框布局实现了政策在大小的计算。

3.组成一个表布局与内容和网格视图 create_table_view () 功能:

  1. static Evas_Object*
  2. create_table_view(Evas_Object *parent)
  3. {
  4.    Evas_Object *table, *item;

  6.    table = elm_table_add(parent);
  7.    elm_table_padding_set(table, 10, 10);
  8.    elm_table_homogeneous_set(table, EINA_TRUE);
  9.    evas_object_size_hint_weight_set(table, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
  10.    evas_object_size_hint_align_set(table, EVAS_HINT_FILL, EVAS_HINT_FILL);

  12.    item = create_content(table, "Item 1");
  13.    elm_table_pack(table, item, 0, 0, 2, 1);

  15.    item = create_content(table, "Item 2");
  16.    elm_table_pack(table, item, 2, 0, 1, 1);

  18.    item = create_content(table, "Item 3");
  19.    elm_table_pack(table, item, 0, 1, 3, 1);

  21.    // Add a grid view item
  22.    item = create_grid_view(table);
  23.    evas_object_show(item);
  24.    elm_table_pack(table, item, 0, 2, 3, 10);

  26.    return table;
  27. }
复制代码

表布局可以用于自由式布局,和标准布局,比如列表和网格。 它不考虑孩子的大小政策项目在计算大小。

4.组成的网格布局 create_grid_view () 函数,并使用盒子和表布局作为子元素包装在一个网格。
  1. static Evas_Object*
  2. create_grid_view(Evas_Object *parent)
  3. {
  4.    Evas_Object *grid, *item;

  6.    grid = elm_grid_add(parent);
  7.    evas_object_size_hint_weight_set(grid, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
  8.    evas_object_size_hint_align_set(grid, EVAS_HINT_FILL, EVAS_HINT_FILL);

  10.    // Red background for the grid
  11.    item = create_bg(grid, 255, 0, 0);
  12.    elm_grid_pack(grid, item, 0, 0, 100, 100);

  14.    // Add the item to the grid
  15.    item = create_content(grid, "Item1");
  16.    elm_grid_pack(grid, item, 1, 1, 98, 98);

  18.    item = create_content(grid, "Item2");
  19.    elm_grid_pack(grid, item, 2, 5, 20, 20);

  21.    item = create_content(grid, "Item3");
  22.    elm_grid_pack(grid, item, 23, 5, 76, 94);

  24.    item = create_content(grid, "Item4");
  25.    elm_grid_pack(grid, item, 2, 27, 20, 70);

  27.    // Black background for the box view item
  28.    item = create_bg(grid, 40, 40, 40);
  29.    elm_grid_pack(grid, item, 25, 10, 73, 87);

  31.    // Add the box view item to the grid
  32.    item = create_box_view(grid);
  33.    evas_object_show(item);
  34.    elm_grid_pack(grid, item, 26, 11, 71, 85);

  36.    return grid;
  37. }
复制代码

网格布局采用自由式布局,在大小评价孩子的项目,它不考虑孩子的大小政策项目。

使用基本的布局
开发Tizen本机应用程序时,建议您应用程序布局基于基本布局。 基地布局支持指示器和视图管理。 下面的图显示了线框和UI组件层次结构的基本布局:

图:基地布局线框和UI组件层次结构
UI屏幕布局

UI组件有以下角色:

窗口( Elm_win ):每一个从小学在一个窗口呈现UI组件。
一致( Elm_Conformant ):一致支持指示器区域和调整应用程序由于旋转或安全部队(键盘)。
Naviframe( Elm_Naviframe ):Naviframe充当视图管理器和选择提供了应用程序标题。 应用程序的主要布局添加到naviframe区域的观点。

示例设置应用程序与基础布局

移动 设置 应用程序包含一个列表,显示菜单。 组织应用程序,创建应用程序的布局与屏幕尺寸列表和地点布局naviframe的视图区域。

图:设置用户界面和布局
UI屏幕布局

示例应用程序商店应用程序与基础布局

组织移动 应用商店 应用程序中,添加一个照片卷轴基地布局,因为布局的总高度大于屏幕大小,因此你需要上下滚动屏幕内容。 如果布局比屏幕大,照片卷轴视图本身可滚动。

您可以使用一个列表或网格如果反复显示相同的对象。 然而,在这个示例应用程序,各种物品所示布局。

图:应用程序商店界面和布局
UI屏幕布局

示例计算器应用程序与一个定制的布局

移动 计算器 是一个很好的例子,一个例外的基本布局。 应用程序没有视图更改并没有应用程序标题。 这些是2原因必须使用Naviframe,您不需要添加Naviframe计算器。

你可以组织应用程序与容器组件的布局。 容器组件用于安排UI组件,包括基本的UI组件和其他容器组件。

图:计算器界面和布局
UI屏幕布局

示例电子邮件应用程序与一个定制的布局

移动 电子邮件 应用程序使用列表显示信息。 主要的观点是一样的在设置应用程序中,组成的屏幕大小显示邮件列表。 然而,电子邮件应用程序有一个额外的功能叫做抽屉,用于显示菜单层次结构。

开发应用程序作为Tizen本机应用程序中,添加一个布局一致,并添加一个naviframe布局。 这种布局有一个抽屉,naviframe内容区域,和它的样式名 “布局/抽屉面板” 。 使用此布局,使用以下代码:
  1. layout = elm_layout_add(parent);
  2. elm_layout_theme_set(layout, "layout", "drawer", "panel");
复制代码


样式包括零件定位抽屉和主要观点。 在抽屉里,你可以添加一个列表显示菜单。 在主要视图中,您可以添加一个naviframe组织的布局视图。

图:电子邮件用户界面和布局

UI屏幕布局

创建一个简单的时钟
下面的示例创建一个基本的时钟视图显示,当前城市和日期。 这个示例演示了如何使用一个盒子(容器组件)和标签来创建一个基本的布局。 UI应用程序包括以下组件:

Elm_window :基本画布上呈现在屏幕上
Elm_conformant :支持指示器区域
Elm_naviframe :视图管理器组件
Elm_box :容器组件布局其他UI组件
Elm_label :基本UI组件显示的文本标签

下图演示了简单的时钟应用程序的主要观点及其线框结构。

屏幕图:简单的时钟
UI屏幕布局

创建一个简单的时钟视图:

1.实现应用程序的数据结构 world_clock.c 文件:
  1. typedef struct appdata
  2. {
  3.    // Save the window
  4.    Evas_Object *win;
  5. }
  6. appdata_s;
复制代码


中的信息 appdata 用于整个系统。 在这个示例应用程序中,相关的信息处理硬件返回键。

2.创建基本的UI app_create () 功能:
  1. int
  2. main(int argc, char *argv[])
  3. {
  4.    appdata_s *ad = {0,};
  5.    app_event_callback_s event_callback = {0,};
  6.    int ret = 0;

  8.    event_callback.create = app_create;
  9.    event_callback.terminate = app_terminate;
  10.    event_callback.pause = app_pause;
  11.    event_callback.resume = app_resume;
  12.    event_callback.app_control = app_control;

  14.    ui_app_add_event_handler(&handlers[APP_EVENT_LOW_BATTERY], APP_EVENT_LOW_BATTERY, ui_app_low_battery, &ad);
  15.    ui_app_add_event_handler(&handlers[APP_EVENT_LOW_MEMORY], APP_EVENT_LOW_MEMORY, ui_app_low_memory, &ad);
  16.    ui_app_add_event_handler(&handlers[APP_EVENT_DEVICE_ORIENTATION_CHANGED], APP_EVENT_DEVICE_ORIENTATION_CHANGED, ui_app_orient_changed, &ad);
  17.    ui_app_add_event_handler(&handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED, ui_app_lang_changed, &ad);
  18.    ui_app_add_event_handler(&handlers[APP_EVENT_REGION_FORMAT_CHANGED], APP_EVENT_REGION_FORMAT_CHANGED, ui_app_region_changed, &ad);
  19.    ui_app_remove_event_handler(handlers[APP_EVENT_LOW_MEMORY]);

  21.    ret = ui_app_main(argc, argv, &event_callback, &ad);
  22.    if (ret != APP_ERROR_NONE)
  23.    {
  24.       dlog_print(DLOG_ERROR, LOG_TAG, "ui_app_main() is failed. err = %d", ret);
  25.    }

  27.    return ret;
  28. }

  30. static bool
  31. app_create(void *data)
  32. {
  33.    appdata_s *ad = data;
  34.    create_base_gui(ad);

  36.    return true;
  37. }
复制代码

3.使用 create_base_gui () 的函数来创建一个基本的布局窗口中,符合性,naviframe。 这是基本布局Tizen移动环境。
  1. // Window
  2. ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
  3. elm_win_autodel_set(ad->win, EINA_TRUE);

  5. // Conformant
  6. conform = elm_conformant_add(ad->win);
  7. elm_win_conformant_set(ad->win, EINA_TRUE);
  8. evas_object_size_hint_weight_set(conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
  9. elm_win_resize_object_add(ad->win, conform);
  10. evas_object_show(conform);

  12. // Naviframe
  13. nf = elm_naviframe_add(conform);
  14. elm_object_content_set(conform, nf);
  15. evas_object_show(nf);
复制代码

4.创建应用程序的主要布局。 在这个示例中,它包含一个盒子3标签。 标签显示时间、城市和日期。

设置文本标签。 你可以设置或装饰标签中的文本使用 elm_object_text_set () 函数。 您可以修改文字大小、颜色和厚度 < font_size > , <颜色> , < b > 元素。 添加标签到盒子,使用 elm_box_pack_end () 函数。
  1. // Add the box
  2. box = elm_box_add(nf);
  3. // Create a label
  4. label1 = elm_label_add(box);
  5. // Set text to the label with a tag
  6. elm_object_text_set(label1, "<font_size=110><color=#000000>07:26</color></font_size>");
  7. // Add the label to the box
  8. elm_box_pack_end(box, label1);
  9. // Change label visibility
  10. evas_object_show(label1);

  12. // Repeat with other labels

  14. evas_object_show(box);
复制代码


5.设置框作为一个新的视图。 你也可以设置应用程序的标题。 这些操作是由naviframe使用处理 elm_naviframe_item_push () 函数。 参数包括标题、UI组件的名称添加为一个新的视图,和naviframe风格。 的基本风格是用于一个简单的视图与正常的标题。
  1. elm_naviframe_item_push(nf, _("World Clock"), NULL, NULL, box, "basic");
复制代码

下面的图展示了应用程序的UI组件层次结构。

图:简单的时钟组件
UI屏幕布局

6.设置硬件键处理程序。 Tizen移动环境中支持多个硬件键,但只有在此示例返回键处理。

  1. eext_object_event_callback_add(ad->win, EEXT_CALLBACK_BACK, win_back_cb, ad);
复制代码


设置回调函数后, win_back_cb 回调是一个返回键被按下时调用。 的 win_back_cb () 回调隐藏窗口。

  1. static void
  2. win_back_cb(void *data , int type , void *event)
  3. {
  4.    appdata_s *ad = data;
  5.    elm_win_lower(ad->win);
  6. }
复制代码

创建一个复杂的时钟视图
下面的示例创建一个复杂的时钟视图。 示例演示了如何使用盒子组织基本布局。 UI应用程序包括以下组件:

Elm_window :基本画布上呈现在屏幕上
Elm_conformant :支持指示器区域
Elm_naviframe :视图管理器组件
Elm_box :容器组件布局其他UI组件
Elm_label :基本UI组件显示的文本标签
Elm_genlist :列表组件
Elm_button :简单的按钮
下图说明了复杂的时钟的主要视图示例应用程序和它的线框结构。

屏幕图:复杂的时钟

UI屏幕布局

创建一个复杂的时钟视图:

1.实现数据结构的基本UI world_clock 。 c 文件:
  1. typedef struct appdata
  2. {
  3.    // Save the window
  4.    Evas_Object *win;
  5. }
  6. appdata_s;
复制代码

中的信息 appdata 用于整个系统。 在这个示例应用程序中,相关的信息处理硬件返回键。

2.创建应用程序的基本UI app_create () 功能:
  1. int
  2. main(int argc, char *argv[])
  3. {
  4.    appdata_s *ad = {0,};
  5.    app_event_callback_s event_callback = {0,};
  6.    int ret = 0;

  8.    event_callback.create = app_create;
  9.    event_callback.terminate = app_terminate;
  10.    event_callback.pause = app_pause;
  11.    event_callback.resume = app_resume;
  12.    event_callback.app_control = app_control;

  14.    ui_app_add_event_handler(&handlers[APP_EVENT_LOW_BATTERY], APP_EVENT_LOW_BATTERY, ui_app_low_battery, &ad);
  15.    ui_app_add_event_handler(&handlers[APP_EVENT_LOW_MEMORY], APP_EVENT_LOW_MEMORY, ui_app_low_memory, &ad);
  16.    ui_app_add_event_handler(&handlers[APP_EVENT_DEVICE_ORIENTATION_CHANGED], APP_EVENT_DEVICE_ORIENTATION_CHANGED, ui_app_orient_changed, &ad);
  17.    ui_app_add_event_handler(&handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED, ui_app_lang_changed, &ad);
  18.    ui_app_add_event_handler(&handlers[APP_EVENT_REGION_FORMAT_CHANGED], APP_EVENT_REGION_FORMAT_CHANGED, ui_app_region_changed, &ad);
  19.    ui_app_remove_event_handler(handlers[APP_EVENT_LOW_MEMORY]);

  21.    ret = ui_app_main(argc, argv, &event_callback, &ad);
  22.    if (ret != APP_ERROR_NONE)
  23.    {
  24.       dlog_print(DLOG_ERROR, LOG_TAG, "ui_app_main() is failed. err = %d", ret);
  25.    }

  27.    return ret;
  28. }

  30. static bool
  31. app_create(void *data)
  32. {
  33.    appdata_s *ad = data;
  34.    create_base_gui(ad);

  36.    return true;
  37. }
复制代码

应用程序的基本UI包含时钟,列表,主要布局按钮。

3.创建时钟元素。 时钟元素包含3标签。 标签包装作为一个框组件,这是主要布局的一部分。
  1. static Evas_Object *
  2. create_clock(Evas_Object *nf)
  3. {
  4.    Evas_Object *box, *label1, *label2, *label3;

  6.    // Box
  7.    box = elm_box_add(nf);

  9.    label1 = elm_label_add(box);
  10.    elm_object_text_set(label1, "<font_size=110><color=#000000>07:26</color></font_size>");
  11.    elm_box_pack_end(box, label1);
  12.    evas_object_show(label1);

  14.    evas_object_show(box);

  16.    return box;
  17. }
复制代码

4.创建列表元素。 该元素包含一个城市列表。 是使用的UI组件 genlist ,这是一个复杂的列表能够显示信息与各种风格。
  1. static Evas_Object *
  2. create_list(Evas_Object *nf)
  3. {
  4.    Evas_Object* list;
  5.    Elm_Genlist_Item_Class *itc = NULL;
  6.    int i, num_of_item;
  7.    Elm_Object_Item *it;

  9.    list = elm_genlist_add(nf);
  10. }
复制代码

5.添加一个新条目类使用 Elm_Genlist_Item_Class 类。 添加一个新类之后,设置一个回调函数来检测当项目呈现。
  1. itc = elm_genlist_item_class_new();
  2. itc->item_style = "2line.top.4";
  3. itc->func.text_get = gl_text_get_cb;
  4. itc->func.content_get = NULL;
  5. itc->func.del = NULL;
复制代码

在这个应用程序中,所有的列表项,使用相同的是相似的 gl_text_get_cb () 回调函数用于设置文本,所以只有1创建条目类:
  1. static char*
  2. gl_text_get_cb(void *data, Evas_Object *obj, const char *part)
  3. {
  4.    item_data_s *id = data;
  5.    char buf[1024];

  7.    if (id->index == 0)
  8.    {
  9.       if (!strcmp(part, "elm.text.main.left.top"))
  10.       {
  11.          snprintf(buf, 1023, "%s", "07:26");

  13.          return strdup(buf);
  14.       }
  15.       else if (!strcmp(part, "elm.text.sub.right.top"))
  16.       {
  17.          snprintf(buf, 1023, "%s", "Cardiff");

  19.          return strdup(buf);
  20.       }
  21.       else if (!strcmp(part, "elm.text.sub.left.bottom"))
  22.       {
  23.          snprintf(buf, 1023, "%s", "Wen, Jan 1");

  25.          return strdup(buf);
  26.       }
  27.       else if (!strcmp(part, "elm.text.sub.right.bottom"))
  28.       {
  29.          snprintf(buf, 1023, "%s", "wales");

  31.          return strdup(buf);
  32.       }
  33.    }

  35.    return NULL;
  36. }
复制代码

6.附加物品使用列表 elm_genlist_item_append () 函数。 在这个应用程序中,3项补充道:
  1. num_of_item = 3;

  3. for (i = 0; i < num_of_item; i++)
  4. {
  5.    item_data_s *id = calloc(sizeof(item_data_s), 1);
  6.    id->index = i;
  7.    it = elm_genlist_item_append(list,
  8.                                 itc,
  9.                                 id,
  10.                                 NULL,
  11.                                 ELM_GENLIST_ITEM_NONE,
  12.                                 NULL,
  13.                                 id);
  14.    id->item = it;
  15. }
复制代码

7.创建的主要布局。 其他主要布局,布局元素合并在一起,并添加一个按钮。
  1. static void
  2. create_base_gui(appdata_s *ad)
  3. {
  4.    Evas_Object *conform, *nf, *box, *clock, *layout, *rect, *button;
  5.    // Window
  6.    ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
  7.    elm_win_autodel_set(ad->win, EINA_TRUE);

  9.    // Conformant
  10.    conform = elm_conformant_add(ad->win);
  11.    elm_win_conformant_set(ad->win, EINA_TRUE);
  12.    evas_object_size_hint_weight_set(conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
  13.    elm_win_resize_object_add(ad->win, conform);
  14.    evas_object_show(conform);

  16.    // Naviframe
  17.    nf = elm_naviframe_add(conform);
  18.    elm_object_content_set(conform, nf);
  19.    evas_object_show(nf);
复制代码
8.添加一个框组件。 框组件是用于组织的主要布局。 这个盒子展开尽可能填满整个视图。
  1. // Box
  2.    box = elm_box_add(nf);
  3.    evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
  4.    evas_object_size_hint_align_set(box, EVAS_HINT_FILL, EVAS_HINT_FILL);
复制代码


这个箱子包含以下元素:

时钟元素包含3标签。 的参数 evas_object_size_hint_weight_set () 函数是0.1意味着时钟盒的高度占据30%的可用区域。
  1.   clock = create_clock(nf);
  2.    evas_object_size_hint_weight_set(clock, EVAS_HINT_EXPAND, 0.3);
  3.    evas_object_size_hint_align_set(clock, EVAS_HINT_FILL, EVAS_HINT_FILL);
  4.    elm_box_pack_end(box, clock);
复制代码

列表元素是装进盒子里。 随着 genlist 元素没有确定大小,取决于它们的大小 布局 参数。
  1. layout = elm_layout_add(box);
  2.    elm_layout_theme_set(layout, "layout", "application", "default");
  3.    evas_object_size_hint_weight_set(layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
  4.    evas_object_size_hint_align_set(layout, EVAS_HINT_FILL, EVAS_HINT_FILL);
  5.    rect = create_list(nf);
  6.    elm_layout_content_set(layout, "elm.swallow.content", rect);
  7.    evas_object_show(rect);
  8.    evas_object_show(layout);
  9.    elm_box_pack_end(box, layout);
复制代码

按钮元素有一个回调函数来检测当按钮被单击时。
  1. button = elm_button_add(box);
  2.    evas_object_smart_callback_add(button, "clicked", btn_clicked_cb, NULL);
  3.    evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, 0.1);
  4.    evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);
  5.    elm_object_text_set(button, "Terminate");
  6.    evas_object_show(button);
  7.    elm_box_pack_end(box, button);
  8. }
复制代码


下面的图展示了应用程序的UI组件层次结构。

图:复杂的时钟组件
UI屏幕布局
9.设置硬件键处理程序:
  1. eext_object_event_callback_add(ad->win, EEXT_CALLBACK_BACK, win_back_cb, ad);
复制代码


设置回调函数后, win_back_cb () 回调是一个返回键被按下时调用。 的 win_back_cb () 回调隐藏窗口。
  1. static void
  2. win_back_cb(void *data , int type , void *event)
  3. {
  4.    appdata_s *ad = data;
  5.    elm_win_lower(ad->win);
  6. }
复制代码


路过
雷人
握手
鲜花
鸡蛋
收藏 分享 邀请
上一篇：Tizen应用程序Ctxpopup组件添加下一篇：Tizen应用中实现更多的选择
发表评论

最新评论

相关分类

QQ|泰泽应用|泰泽论坛|泰泽网|小黑屋|Archiver|手机版|泰泽邮箱|泰泽网 ( 蜀ICP备13024062号-1 )

GMT+8, 2023-9-7 04:23 , Processed in 0.040692 second(s), 24 queries .

Powered by Discuz! X3.5

© 2001-2023 Discuz! Team.

返回顶部