Tizen应用程序创建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);
   
8. 
   
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");
   
6. 
   
7.    // Tabbar
   
8.    ad->tabbar = create_toolbar(ad);
   
9.    elm_object_item_part_content_set(nf_it, "tabbar", ad->tabbar);
   
10. 
    
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);
    
14. 
    
15.    // Show the window after the base GUI is set up
    
16.    evas_object_show(ad->win);
    
17. 
    
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;
   
5. 
   
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);
   
10. 
    
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);
    
14. 
    
15.    return tabbar;
    
16. }

复制代码

下图说明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;
   
5. 
   
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);
   
10. 
    
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);
    
17. 
    
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);
    
23. 
    
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"));
   
8. 
   
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"));
    
13. 
    
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"));
    
17. 
    
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;
   
5. 
   
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);
    
11. 
    
12.    item = create_content(table, "Item 1");
    
13.    elm_table_pack(table, item, 0, 0, 2, 1);
    
14. 
    
15.    item = create_content(table, "Item 2");
    
16.    elm_table_pack(table, item, 2, 0, 1, 1);
    
17. 
    
18.    item = create_content(table, "Item 3");
    
19.    elm_table_pack(table, item, 0, 1, 3, 1);
    
20. 
    
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);
    
25. 
    
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;
   
5. 
   
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);
   
9. 
   
10.    // Red background for the grid
    
11.    item = create_bg(grid, 255, 0, 0);
    
12.    elm_grid_pack(grid, item, 0, 0, 100, 100);
    
13. 
    
14.    // Add the item to the grid
    
15.    item = create_content(grid, "Item1");
    
16.    elm_grid_pack(grid, item, 1, 1, 98, 98);
    
17. 
    
18.    item = create_content(grid, "Item2");
    
19.    elm_grid_pack(grid, item, 2, 5, 20, 20);
    
20. 
    
21.    item = create_content(grid, "Item3");
    
22.    elm_grid_pack(grid, item, 23, 5, 76, 94);
    
23. 
    
24.    item = create_content(grid, "Item4");
    
25.    elm_grid_pack(grid, item, 2, 27, 20, 70);
    
26. 
    
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);
    
30. 
    
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);
    
35. 
    
36.    return grid;
    
37. }

复制代码

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

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

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


UI组件有以下角色:

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

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

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

图:设置用户界面和布局


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

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

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

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


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

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

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

图:计算器界面和布局


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

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

开发应用程序作为Tizen本机应用程序中,添加一个布局一致,并添加一个naviframe布局。 这种布局有一个抽屉,naviframe内容区域,和它的样式名 “布局/抽屉面板” 。 使用此布局,使用以下代码:

1. layout = elm_layout_add(parent);
   
2. elm_layout_theme_set(layout, "layout", "drawer", "panel");

复制代码

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

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



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

Elm_window :基本画布上呈现在屏幕上
Elm_conformant :支持指示器区域
Elm_naviframe :视图管理器组件
Elm_box :容器组件布局其他UI组件
Elm_label :基本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;
   
7. 
   
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;
    
13. 
    
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]);
    
20. 
    
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.    }
    
26. 
    
27.    return ret;
    
28. }
    
29. 
    
30. static bool
    
31. app_create(void *data)
    
32. {
    
33.    appdata_s *ad = data;
    
34.    create_base_gui(ad);
    
35. 
    
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);
   
4. 
   
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);
    
11. 
    
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);
    
11. 
    
12. // Repeat with other labels
    
13. 
    
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组件层次结构。

图:简单的时钟组件


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 :简单的按钮
下图说明了复杂的时钟的主要视图示例应用程序和它的线框结构。

屏幕图:复杂的时钟



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

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;
   
7. 
   
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;
    
13. 
    
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]);
    
20. 
    
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.    }
    
26. 
    
27.    return ret;
    
28. }
    
29. 
    
30. static bool
    
31. app_create(void *data)
    
32. {
    
33.    appdata_s *ad = data;
    
34.    create_base_gui(ad);
    
35. 
    
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;
   
5. 
   
6.    // Box
   
7.    box = elm_box_add(nf);
   
8. 
   
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);
    
13. 
    
14.    evas_object_show(box);
    
15. 
    
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;
   
8. 
   
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];
   
6. 
   
7.    if (id->index == 0)
   
8.    {
   
9.       if (!strcmp(part, "elm.text.main.left.top"))
   
10.       {
    
11.          snprintf(buf, 1023, "%s", "07:26");
    
12. 
    
13.          return strdup(buf);
    
14.       }
    
15.       else if (!strcmp(part, "elm.text.sub.right.top"))
    
16.       {
    
17.          snprintf(buf, 1023, "%s", "Cardiff");
    
18. 
    
19.          return strdup(buf);
    
20.       }
    
21.       else if (!strcmp(part, "elm.text.sub.left.bottom"))
    
22.       {
    
23.          snprintf(buf, 1023, "%s", "Wen, Jan 1");
    
24. 
    
25.          return strdup(buf);
    
26.       }
    
27.       else if (!strcmp(part, "elm.text.sub.right.bottom"))
    
28.       {
    
29.          snprintf(buf, 1023, "%s", "wales");
    
30. 
    
31.          return strdup(buf);
    
32.       }
    
33.    }
    
34. 
    
35.    return NULL;
    
36. }

复制代码

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

1. num_of_item = 3;
   
2. 
   
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);
   
8. 
   
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);
    
15. 
    
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组件层次结构。

图:复杂的时钟组件

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. }

复制代码