找回密码
 立即注册
查看: 3527|回复: 0

Tizen IDE中使用Edje颜色类

[复制链接]
发表于 2015-10-24 19:06:00 | 显示全部楼层 |阅读模式
本教程演示了如何改变的颜色使用Edje颜色类2个或更多的部分。

如果一部分被分配一个颜色类,设置颜色值这类会导致所有这些部分乘以颜色值。 设置值类影响在所有部分颜色类在流程级别,而在对象级别,它只影响部分在一个指定的对象。

创建一个简单的应用程序菜单和单独为每个Edje屏幕动画功能:

Tizen IDE > UI应用/ UI application> EDC Tizen本地项目 并创建一个新项目命名 colorclass 。

打开 colorclass 。 edc 文件并把它换成下面的代码:

  1.                rel2.relative: 0.2 0.4;
  2.                color2: 255 255 255 255;
  3.                color3: 255 255 255 255;
  4.                text
  5.                {
  6.                   text: "B:";
  7.                   size: 44;
  8.                }
  9.             }
  10.          }
  11.          part
  12.          {
  13.             name: "textC";
  14.             type: TEXT;
  15.             effect: OUTLINE_SHADOW;
  16.             description
  17.             {
  18.                state: "default" 0.0;
  19.                color_class: "C";
  20.                rel1.relative: 0.0 0.4;
  21.                rel2.relative: 0.2 0.6;
  22.                color2: 255 255 255 255;
  23.                color3: 255 255 255 255;
  24.                text
  25.                {
  26.                   text: "C:";
  27.                   size: 44;
  28.                }
  29.             }
  30.          }
  31.          part
  32.          {
  33.             name: "rect1";
  34.             type: RECT;
  35.             description
  36.             {
  37.                state: "default" 0.0;
  38.                color_class: "A";
  39.                rel1.relative: 0.2 0.0;
  40.                rel2.relative: 0.4 0.2;
  41.             }
  42.          }
  43.          part
  44.          {
  45.             name: "rect2";
  46.             type: RECT;
  47.             description
  48.             {
  49.                state: "default" 0.0;
  50.                color_class: "B";
  51.                rel1.relative: 0.4 0.2;
  52.                rel2.relative: 0.6 0.4;
  53.             }
  54.          }
  55.          part
  56.          {
  57.             name: "rect3";
  58.             type: RECT;
  59.             description
  60.             {
  61.                state: "default" 0.0;
  62.                color_class: "A";
  63.                rel1.relative: 0.6 0.0;
  64.                rel2.relative: 0.8 0.2;
  65.             }
  66.          }
  67.          part
  68.          {
  69.             name: "rect4";
  70.             type: RECT;
  71.             description
  72.             {
  73.                state: "default" 0.0;
  74.                color_class: "B";
  75.                rel1.relative: 0.8 0.2;
  76.                rel2.relative: 1.0 0.4;
  77.             }
  78.          }
  79.          part
  80.          {
  81.             name: "rect5";
  82.             type: RECT;
  83.             description
  84.             {
  85.                state: "default" 0.0;
  86.                color: 125 0 0 255;
  87.                color_class: "C";
  88.                rel1.relative: 0.6 0.4;
  89.                rel2.relative: 0.8 0.6;
  90.             }
  91.          }
  92.          part
  93.          {
  94.             name: "rect6";
  95.             type: RECT;
  96.             description
  97.             {
  98.                state: "default" 0.0;
  99.                color: 255 255 255 255;
  100.                color_class: "C";
  101.                rel1.relative: 0.8 0.4;
  102.                rel2.relative: 1.0 0.6;
  103.             }
  104.          }
  105.          part
  106.          {
  107.             name: "swallow.btn1";
  108.             type: SWALLOW;
  109.             description
  110.             {
  111.                state: "default" 0.0;
  112.                rel1.relative: 0.0 0.8;
  113.                rel2.relative: 0.45 1.0;
  114.             }
  115.          }
  116.          part
  117.          {
  118.             name: "swallow.btn2";
  119.             type: SWALLOW;
  120.             description
  121.             {
  122.                state: "default" 0.0;
  123.                rel1.relative: 0.55 0.8;
  124.                rel2.relative: 1.0 1.0;
  125.             }
  126.          }
  127.       }
  128.    }
  129. }
复制代码


设置颜色的一部分 color_class 颜色color 值。 看到颜色类如何影响阴影和轮廓颜色,这些颜色可以设置为白色的部分:
  1. color2: 255 255 255 255;
  2. color3: 255 255 255 255;
复制代码


部分与 color_class “C” 有不同的颜色,因为他们的基本颜色是不同的。

3.取代 create_base_gui () 函数使用以下代码:

  1. static void
  2. btn1_cb(void *data, Evas_Object *obj, void *event_info)
  3. {
  4.    edje_color_class_set("A", rand()%255, rand()%255, rand()%255, 255,
  5.                         rand()%255, rand()%255, rand()%255, 255,
  6.                         rand()%255, rand()%255, rand()%255, 255);
  7. }
  8. static void
  9. btn2_cb(void *data, Evas_Object *obj, void *event_info)
  10. {
  11.    edje_color_class_set("B", rand()%255, rand()%255, rand()%255, 255,
  12.                         rand()%255, rand()%255, rand()%255, 255,
  13.                         rand()%255, rand()%255, rand()%255, 255);
  14. }

  15. static void
  16. create_base_gui(appdata_s *ad)
  17. {
  18.    char edj_path[PATH_MAX] = {0, };

  19.    // Window
  20.    ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
  21.    elm_win_conformant_set(ad->win, EINA_TRUE);
  22.    elm_win_autodel_set(ad->win, EINA_TRUE);

  23.    if (elm_win_wm_rotation_supported_get(ad->win))
  24.    {
  25.       int rots[4] = { 0, 90, 180, 270 };
  26.       elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
  27.    }

  28.    evas_object_smart_callback_add(ad->win, "delete,request", win_delete_request_cb, NULL);

  29.    // Conformant
  30.    ad->conform = elm_conformant_add(ad->win);
  31.    elm_win_indicator_mode_set(ad->win, ELM_WIN_INDICATOR_SHOW);
  32.    elm_win_indicator_opacity_set(ad->win, ELM_WIN_INDICATOR_OPAQUE);
  33.    evas_object_size_hint_weight_set(ad->conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
  34.    elm_win_resize_object_add(ad->win, ad->conform);
  35.    evas_object_show(ad->conform);

  36.    // Base layout
  37.    app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
  38.    ad->layout = elm_layout_add(ad->win);
  39.    elm_layout_file_set(ad->layout, edj_path, GRP_MAIN);
  40.    evas_object_size_hint_weight_set(ad->layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
  41.    eext_object_event_callback_add(ad->layout, EEXT_CALLBACK_BACK, layout_back_cb, ad);
  42.    elm_object_content_set(ad->conform, ad->layout);

  43.    // Buttons
  44.    ad->btn1 = elm_button_add(ad->win);
  45.    elm_object_part_content_set(ad->layout, "swallow.btn1", ad->btn1);
  46.    evas_object_smart_callback_add(ad->btn1, "clicked", btn1_cb, ad);
  47.    elm_object_part_text_set(ad->btn1, NULL, "Change A");
  48.    ad->btn2 = elm_button_add(ad->win);
  49.    elm_object_part_content_set(ad->layout, "swallow.btn2", ad->btn2);
  50.    evas_object_smart_callback_add(ad->btn2, "clicked", btn2_cb, ad);
  51.    elm_object_part_text_set(ad->btn2, NULL, "Change B");

  52.    // Show the window
  53.    evas_object_show(ad->win);
  54. }
复制代码


按下 改变一个 按钮颜色变化的所有部分 color_class 设置为 “A” 但不影响其他部分。 实际的 color , color2 , color3 值保持不变但颜色类值变化。

您可以省略的颜色类声明 .edc 文件和部分地区仍然使用它。 没有视觉效果,除非你改变颜色类的代码。 例如,您可以注释掉颜色类 “B” 当你按下,看看会发生什么 改变B 按钮。

图:Edje colorclass应用程序

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×
欢迎来到泰泽网:http://www.tizennet.com/ 泰泽论坛:http://bbs.tizennet.com/ 好没有内涵哦,快到设置中更改这个无聊的签名吧!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-11-1 10:24 , Processed in 0.067978 second(s), 22 queries .

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表