Tizen IDE中使用Edje颜色类

流星悟语

本教程演示了如何改变的颜色使用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. 
    
16. static void
    
17. create_base_gui(appdata_s *ad)
    
18. {
    
19.    char edj_path[PATH_MAX] = {0, };
    
20. 
    
21.    // Window
    
22.    ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
    
23.    elm_win_conformant_set(ad->win, EINA_TRUE);
    
24.    elm_win_autodel_set(ad->win, EINA_TRUE);
    
25. 
    
26.    if (elm_win_wm_rotation_supported_get(ad->win))
    
27.    {
    
28.       int rots[4] = { 0, 90, 180, 270 };
    
29.       elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
    
30.    }
    
31. 
    
32.    evas_object_smart_callback_add(ad->win, "delete,request", win_delete_request_cb, NULL);
    
33. 
    
34.    // Conformant
    
35.    ad->conform = elm_conformant_add(ad->win);
    
36.    elm_win_indicator_mode_set(ad->win, ELM_WIN_INDICATOR_SHOW);
    
37.    elm_win_indicator_opacity_set(ad->win, ELM_WIN_INDICATOR_OPAQUE);
    
38.    evas_object_size_hint_weight_set(ad->conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
    
39.    elm_win_resize_object_add(ad->win, ad->conform);
    
40.    evas_object_show(ad->conform);
    
41. 
    
42.    // Base layout
    
43.    app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
    
44.    ad->layout = elm_layout_add(ad->win);
    
45.    elm_layout_file_set(ad->layout, edj_path, GRP_MAIN);
    
46.    evas_object_size_hint_weight_set(ad->layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
    
47.    eext_object_event_callback_add(ad->layout, EEXT_CALLBACK_BACK, layout_back_cb, ad);
    
48.    elm_object_content_set(ad->conform, ad->layout);
    
49. 
    
50.    // Buttons
    
51.    ad->btn1 = elm_button_add(ad->win);
    
52.    elm_object_part_content_set(ad->layout, "swallow.btn1", ad->btn1);
    
53.    evas_object_smart_callback_add(ad->btn1, "clicked", btn1_cb, ad);
    
54.    elm_object_part_text_set(ad->btn1, NULL, "Change A");
    
55.    ad->btn2 = elm_button_add(ad->win);
    
56.    elm_object_part_content_set(ad->layout, "swallow.btn2", ad->btn2);
    
57.    evas_object_smart_callback_add(ad->btn2, "clicked", btn2_cb, ad);
    
58.    elm_object_part_text_set(ad->btn2, NULL, "Change B");
    
59. 
    
60.    // Show the window
    
61.    evas_object_show(ad->win);
    
62. }

复制代码

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

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

图:Edje colorclass应用程序