泰泽论坛 › Tizen/HTML5开发专区 › Tizen应用程序创建UI屏幕布局

流星悟语 发表于 2015-10-26 19:19:42

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 () 功能:
static void
create_base_gui(appdata_s *ad)
{
   Elm_Object_Item *nf_it, *tabbar_it;
   // Window
   ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
   elm_win_autodel_set(ad->win, EINA_TRUE);

   evas_object_smart_callback_add(ad->win, "delete,request", win_delete_request_cb, NULL);
2.添加 elm_conformant 组件的应用程序来装饰窗户和一个指标:
// Conformant
   ad->conform = elm_conformant_add(ad->win);
   evas_object_size_hint_weight_set(ad->conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
   elm_win_resize_object_add(ad->win, ad->conform);
   evas_object_show(ad->conform);
3.添加 elm_naviframe 组件作为视图管理器窗口,提供窗口标题的功能:
// Naviframe
   ad->nf = elm_naviframe_add(ad->conform);
   elm_object_content_set(ad->conform, ad->nf);
   evas_object_show(ad->nf);
   nf_it = elm_naviframe_item_push(ad->nf, "UiLayout", NULL, NULL, NULL, "tabbar/icon/notitle");

   // Tabbar
   ad->tabbar = create_toolbar(ad);
   elm_object_item_part_content_set(nf_it, "tabbar", ad->tabbar);

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

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

   ecore_event_handler_add(ECORE_EVENT_KEY_DOWN, keydown_cb, NULL);
}
4.将工具栏添加到naviframe使用 create_toolbar () 功能:
static Evas_Object*
create_toolbar(appdata_s *ad)
{
   Evas_Object *tabbar;

   tabbar = elm_toolbar_add(ad->nf);
   elm_object_style_set(tabbar, "tabbar");
   elm_toolbar_shrink_mode_set(tabbar, ELM_TOOLBAR_SHRINK_EXPAND);
   elm_toolbar_transverse_expanded_set(tabbar, EINA_TRUE);

   elm_toolbar_item_append(tabbar, NULL, "Box", tabbar_item_cb, ad);
   elm_toolbar_item_append(tabbar, NULL, "Grid", tabbar_item_cb, ad);
   elm_toolbar_item_append(tabbar, NULL, "Table", tabbar_item_cb, ad);

   return tabbar;
}
下图说明UI布局
屏幕图:UI布局

添加内容到屏幕上
添加内容到屏幕上:

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

static Evas_Object*
create_box_view(Evas_Object *parent)
{
   Evas_Object *box, *box1, *box2, *box3;

   box = elm_box_add(parent);
   elm_box_padding_set(box, 10, 10);
   evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
   evas_object_size_hint_align_set(box, EVAS_HINT_FILL, EVAS_HINT_FILL);

   box1 = elm_box_add(box);
   elm_box_horizontal_set(box1, EINA_TRUE);
   elm_box_padding_set(box1, 8, 8);
   evas_object_size_hint_weight_set(box1, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
   evas_object_size_hint_align_set(box1, EVAS_HINT_FILL, EVAS_HINT_FILL);
   evas_object_show(box1);

   box2 = elm_box_add(box);
   elm_box_padding_set(box2, 6, 6);
   evas_object_size_hint_weight_set(box2, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
   evas_object_size_hint_align_set(box2, EVAS_HINT_FILL, EVAS_HINT_FILL);
   evas_object_show(box2);

   box3 = elm_box_add(box);
   elm_box_padding_set(box3, 5, 5);
   evas_object_size_hint_weight_set(box3, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
   evas_object_size_hint_align_set(box3, EVAS_HINT_FILL, EVAS_HINT_FILL);
   elm_box_homogeneous_set(box3, EINA_FALSE);
   evas_object_show(box3);
}

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

// Add an item to the box1
elm_box_pack_end(box1, create_content(box1, "Item 2.1"));
elm_box_pack_end(box1, box2);
elm_box_pack_end(box1, create_content(box1, "Item 2.3"));

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

// Add an item to the box3
elm_box_pack_end(box3, create_content(box3, "Item 3.1"));
elm_box_pack_end(box3, create_content(box3, "Item 3.2"));
框布局实现了政策在大小的计算。

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

static Evas_Object*
create_table_view(Evas_Object *parent)
{
   Evas_Object *table, *item;

   table = elm_table_add(parent);
   elm_table_padding_set(table, 10, 10);
   elm_table_homogeneous_set(table, EINA_TRUE);
   evas_object_size_hint_weight_set(table, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
   evas_object_size_hint_align_set(table, EVAS_HINT_FILL, EVAS_HINT_FILL);

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

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

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

   // Add a grid view item
   item = create_grid_view(table);
   evas_object_show(item);
   elm_table_pack(table, item, 0, 2, 3, 10);

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

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

   grid = elm_grid_add(parent);
   evas_object_size_hint_weight_set(grid, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
   evas_object_size_hint_align_set(grid, EVAS_HINT_FILL, EVAS_HINT_FILL);

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

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

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

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

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

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

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

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

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

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


UI组件有以下角色:

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

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

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

图:设置用户界面和布局


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

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

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

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


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

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

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

图:计算器界面和布局


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

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

开发应用程序作为Tizen本机应用程序中,添加一个布局一致,并添加一个naviframe布局。 这种布局有一个抽屉,naviframe内容区域,和它的样式名 “布局/抽屉面板” 。 使用此布局,使用以下代码:
layout = elm_layout_add(parent);
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 文件:
typedef struct appdata
{
   // Save the window
   Evas_Object *win;
}
appdata_s;

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

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

   event_callback.create = app_create;
   event_callback.terminate = app_terminate;
   event_callback.pause = app_pause;
   event_callback.resume = app_resume;
   event_callback.app_control = app_control;

   ui_app_add_event_handler(&handlers, APP_EVENT_LOW_BATTERY, ui_app_low_battery, &ad);
   ui_app_add_event_handler(&handlers, APP_EVENT_LOW_MEMORY, ui_app_low_memory, &ad);
   ui_app_add_event_handler(&handlers, APP_EVENT_DEVICE_ORIENTATION_CHANGED, ui_app_orient_changed, &ad);
   ui_app_add_event_handler(&handlers, APP_EVENT_LANGUAGE_CHANGED, ui_app_lang_changed, &ad);
   ui_app_add_event_handler(&handlers, APP_EVENT_REGION_FORMAT_CHANGED, ui_app_region_changed, &ad);
   ui_app_remove_event_handler(handlers);

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

   return ret;
}

static bool
app_create(void *data)
{
   appdata_s *ad = data;
   create_base_gui(ad);

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

// Conformant
conform = elm_conformant_add(ad->win);
elm_win_conformant_set(ad->win, EINA_TRUE);
evas_object_size_hint_weight_set(conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
elm_win_resize_object_add(ad->win, conform);
evas_object_show(conform);

// Naviframe
nf = elm_naviframe_add(conform);
elm_object_content_set(conform, nf);
evas_object_show(nf);
4.创建应用程序的主要布局。 在这个示例中,它包含一个盒子3标签。 标签显示时间、城市和日期。

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

// Repeat with other labels

evas_object_show(box);

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

图:简单的时钟组件


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

eext_object_event_callback_add(ad->win, EEXT_CALLBACK_BACK, win_back_cb, ad);

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

static void
win_back_cb(void *data , int type , void *event)
{
   appdata_s *ad = data;
   elm_win_lower(ad->win);
}
创建一个复杂的时钟视图
下面的示例创建一个复杂的时钟视图。 示例演示了如何使用盒子组织基本布局。 UI应用程序包括以下组件:

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

屏幕图:复杂的时钟



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

1.实现数据结构的基本UI world_clock 。 c 文件:
typedef struct appdata
{
   // Save the window
   Evas_Object *win;
}
appdata_s;
中的信息 appdata 用于整个系统。 在这个示例应用程序中,相关的信息处理硬件返回键。

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

   event_callback.create = app_create;
   event_callback.terminate = app_terminate;
   event_callback.pause = app_pause;
   event_callback.resume = app_resume;
   event_callback.app_control = app_control;

   ui_app_add_event_handler(&handlers, APP_EVENT_LOW_BATTERY, ui_app_low_battery, &ad);
   ui_app_add_event_handler(&handlers, APP_EVENT_LOW_MEMORY, ui_app_low_memory, &ad);
   ui_app_add_event_handler(&handlers, APP_EVENT_DEVICE_ORIENTATION_CHANGED, ui_app_orient_changed, &ad);
   ui_app_add_event_handler(&handlers, APP_EVENT_LANGUAGE_CHANGED, ui_app_lang_changed, &ad);
   ui_app_add_event_handler(&handlers, APP_EVENT_REGION_FORMAT_CHANGED, ui_app_region_changed, &ad);
   ui_app_remove_event_handler(handlers);

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

   return ret;
}

static bool
app_create(void *data)
{
   appdata_s *ad = data;
   create_base_gui(ad);

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

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

   // Box
   box = elm_box_add(nf);

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

   evas_object_show(box);

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

   list = elm_genlist_add(nf);
}
5.添加一个新条目类使用 Elm_Genlist_Item_Class 类。 添加一个新类之后,设置一个回调函数来检测当项目呈现。
itc = elm_genlist_item_class_new();
itc->item_style = "2line.top.4";
itc->func.text_get = gl_text_get_cb;
itc->func.content_get = NULL;
itc->func.del = NULL;
在这个应用程序中,所有的列表项,使用相同的是相似的 gl_text_get_cb () 回调函数用于设置文本,所以只有1创建条目类:
static char*
gl_text_get_cb(void *data, Evas_Object *obj, const char *part)
{
   item_data_s *id = data;
   char buf;

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

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

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

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

         return strdup(buf);
      }
   }

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

for (i = 0; i < num_of_item; i++)
{
   item_data_s *id = calloc(sizeof(item_data_s), 1);
   id->index = i;
   it = elm_genlist_item_append(list,
                              itc,
                              id,
                              NULL,
                              ELM_GENLIST_ITEM_NONE,
                              NULL,
                              id);
   id->item = it;
}
7.创建的主要布局。 其他主要布局,布局元素合并在一起,并添加一个按钮。
static void
create_base_gui(appdata_s *ad)
{
   Evas_Object *conform, *nf, *box, *clock, *layout, *rect, *button;
   // Window
   ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
   elm_win_autodel_set(ad->win, EINA_TRUE);

   // Conformant
   conform = elm_conformant_add(ad->win);
   elm_win_conformant_set(ad->win, EINA_TRUE);
   evas_object_size_hint_weight_set(conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
   elm_win_resize_object_add(ad->win, conform);
   evas_object_show(conform);

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

这个箱子包含以下元素:

时钟元素包含3标签。 的参数 evas_object_size_hint_weight_set () 函数是0.1意味着时钟盒的高度占据30%的可用区域。
clock = create_clock(nf);
   evas_object_size_hint_weight_set(clock, EVAS_HINT_EXPAND, 0.3);
   evas_object_size_hint_align_set(clock, EVAS_HINT_FILL, EVAS_HINT_FILL);
   elm_box_pack_end(box, clock);
列表元素是装进盒子里。 随着 genlist 元素没有确定大小,取决于它们的大小 布局 参数。
layout = elm_layout_add(box);
   elm_layout_theme_set(layout, "layout", "application", "default");
   evas_object_size_hint_weight_set(layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
   evas_object_size_hint_align_set(layout, EVAS_HINT_FILL, EVAS_HINT_FILL);
   rect = create_list(nf);
   elm_layout_content_set(layout, "elm.swallow.content", rect);
   evas_object_show(rect);
   evas_object_show(layout);
   elm_box_pack_end(box, layout);
按钮元素有一个回调函数来检测当按钮被单击时。
button = elm_button_add(box);
   evas_object_smart_callback_add(button, "clicked", btn_clicked_cb, NULL);
   evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, 0.1);
   evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);
   elm_object_text_set(button, "Terminate");
   evas_object_show(button);
   elm_box_pack_end(box, button);
}

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

图:复杂的时钟组件

9.设置硬件键处理程序:
eext_object_event_callback_add(ad->win, EEXT_CALLBACK_BACK, win_back_cb, ad);

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

查看完整版本: Tizen应用程序创建UI屏幕布局