Tizen Native：如何更改进度条颜色

Question

我正在开发一个 Tizen 原生可穿戴应用程序。

我想更改进度条的颜色，所以我关注以下链接：

• https://developer.tizen.org/zh-hans/forums/native-application-development/color-progressbar-processsmall-style?langswitch=zh-hans

• https://developer.tizen.org/zh-hans/development/ui-practices/native-application/efl/ui-component-infrastructure-modules/customizing-components?langredirect=1

我知道要更改 Tizen 中任何小部件的颜色，我需要使用“主题”，但我无法让它工作。 这就是我所做的：

在我的 app_main.c 我有：

static bool _on_create_cb(void *user_data)
{
    uib_app_manager_get_instance()->initialize();

    char resource_path[PATH_MAX];
    app_get_resource("edje/progressbar_custom.edj", resource_path, (int)PATH_MAX);
    elm_theme_extension_add(NULL, resource_path);

    return true;
}

在文件夹 res 我创建了一个文件夹 edje 然后在 res/edje 我创建了一个文件 progressbar_custom.edc progressbar_custom.edc 的内容是第一个链接中给出的答案。

然后在我的进度条对象中设置样式：

...
Evas_Object* pb;
pb = elm_progressbar_add(parent);
elm_object_style_set(pb, "custom_progress");
...

当我启动应用程序时，进度条不显示。 我想问题出在 progressbar_custom.edc 的内容上，因为我认为它来自移动设备，而不是可穿戴设备。每个教程都说要复制“默认样式”的内容，但我不知道这个“默认样式”在哪里！

感谢任何帮助，谢谢！

Answer 1

我认为您的 edc 文件中的 EDJE 语法或部件名称在当前的可穿戴 tizen 中不可用。

data.item 表示某些数据是从 edje 外部提供的。 blar_vg_blar 表示 efl 矢量图形 API 在其中绘制一些东西。 但矢量图形 API 不在 tizen 可穿戴设备 (2.3.1) 版本中。

基本上，Elementary 的 EDJE 主题与基本小部件代码超级纠缠在一起。基本小部件代码使用 EDC 文件中的硬编码信号和部件名称。

所以elementary 的主题并不意味着像css 这样的其他主题。 它具有用于查看和事件的逻辑以及一些用于查看的控制器和数据。

如果你想创建新主题，你可以再次实现默认主题中实现的所有内容。

最好的简单方法是复制原始文件并进行编辑。所以你必须检查你的目标版本以复制正确的主题。

目前，三星设备中的每个可穿戴 tizen 操作系统都低于 2.3.1。

所以你应该使主题与 tizen 2.3.1 可穿戴配置文件匹配。

this 是 tizen 2.3.1 可穿戴配置文件的基本主题。 它在真实设备中不一样，因为真实设备可以具有与原始配置文件不同的主题。与谷歌的android主题和其他供应商主题的关系相同。

无论如何，您可以参考 this，这是 tizen 2.3.1 可穿戴设备中的默认进度条主题。

我在 EDC 的第一组中用修改的默认样式做了一些简单的例子。

progressbartest.cpp

#include <app.h>
#include <Elementary.h>
#include <efl_extension.h>
#include <dlog.h>

#define LOG_TAG "progressbartest"

#include <string>
#include <cstdlib>

static void layout_back_cb(void *data, Evas_Object *obj, void *event_info)
{
    Evas_Object* win = static_cast<Evas_Object*>(data);
    elm_win_lower(win);
}

static bool create_base_gui()
{
    char *res_path_ptr = app_get_resource_path();
    std::string res_path(res_path_ptr);
    std::free (res_path_ptr);

    std::string edje_path = res_path + "edje/progressbartest.edj";
    elm_theme_extension_add(nullptr, edje_path.c_str());

    Evas_Object* win = elm_win_util_standard_add("test", "test");
    elm_win_conformant_set(win, EINA_TRUE);
    elm_win_autodel_set(win, EINA_TRUE);

    evas_object_smart_callback_add(win, "delete,request", [](void*, Evas_Object*, void*){ui_app_exit();}, NULL);
    eext_object_event_callback_add(win, EEXT_CALLBACK_BACK, layout_back_cb, win);

    Evas_Object* pb = elm_progressbar_add(win);

    bool ret = elm_object_style_set(pb, "custom_progress");

    elm_progressbar_value_set(pb, 0.5);
    evas_object_move(pb, 10, 150);
    evas_object_resize(pb, 340, 20);
    evas_object_show(pb);

    evas_object_show(win);

    return true;
}


int main(int argc, char *argv[])
{
    ui_app_lifecycle_callback_s event_callback = {};
    event_callback.create = [](void *data)->bool { return create_base_gui(); };
    return ui_app_main(argc, argv, &event_callback, nullptr) != APP_ERROR_NONE;
}

progressbartest.edc（从默认组修改组）

#define PROGRESSBAR_HEIGHT 30

collections {
   group { name: "elm/progressbar/horizontal/custom_progress";
      parts {
         part { name: "access";
            type: RECT;
            description { state: "default" 0.0;
               fixed: 1 1;
               color: 0 0 0 0;
            }
         }
         part { name: "background";
            type: RECT;
            mouse_events: 0;
            scale: 1;
            description { state: "default" 0.0;
               rel1.to: "elm.swallow.bar";
               rel2.to: "elm.swallow.bar";
               color: 71 200 71 255;
            }
         }
         part { name: "elm.swallow.bar";
            mouse_events: 0;
            scale: 1;
            type: SWALLOW;
            description { state: "default" 0.0;
               min: 1 PROGRESSBAR_HEIGHT;
               max: -1 PROGRESSBAR_HEIGHT;
            }
         }
         part { name: "drag.background";
            mouse_events: 0;
            type: RECT;
            scale: 1;
            description {
               state: "default" 0.0;
               visible: 0;
               rel1.to: "elm.swallow.bar";
               rel2.to: "elm.swallow.bar";
            }
         }
         part { name: "elm.progress.progressbar";
            type: RECT;
            mouse_events: 0;
            scale: 1;
            description {
               state: "default" 0.0;
               min: 0 0;
               fixed: 1 1;
               rel1.to: "elm.swallow.bar";
               rel2 {
                  to_x: "elm.cur.progressbar";
                  to_y: "elm.swallow.bar";
                  offset: -1 -1;
                  relative: 0.5 1.0;
               }
               color: 255 110 0 255;
            }
            description {
               state: "invert" 0.0;
               inherit: "default" 0.0;
               rel1 {
                  to_y: "elm.swallow.bar";
                  to_x: "elm.cur.progressbar";
                  relative: 0.0 0.0;
               }
               rel2.to: "elm.swallow.bar";
               rel2.relative: 1.0 1.0;
            }
            description {
               state: "state_begin" 0.0;
               inherit: "default" 0.0;
               rel1 {
                  to: "elm.swallow.bar";
                  relative: 0.0 0.0;
               }
               rel2 {
                  to: "elm.swallow.bar";
                  relative: 0.1 1.0;
               }
            }
            description {
               state: "state_end" 0.0;
               inherit: "default" 0.0;
               rel1 {
                  to: "elm.swallow.bar";
                  relative: 0.0 0.0;
               }
               rel2 {
                  to: "elm.swallow.bar";
                  relative: 1.0 1.0;
               }
            }
            description { state: "disabled" 0.0;
               inherit: "default" 0.0;
               color: 0 110 255 38;
            }
         }
         part { name: "elm.cur.progressbar";
            mouse_events: 0;
            scale: 1;
            dragable {
               confine: "drag.background";
               x: 1 1 1;
               y: 0 0 0;
            }
            description { state: "default" 0.0;
               min: 0 10;
               fixed: 1 1;
               visible: 0;
               rel1.to: "drag.background";
               rel2.to: "drag.background";
            }
         }
         part { name: "progress-rect";
            type: RECT;
            mouse_events: 0;
            scale: 1;
            description {
               state: "default" 0.0;
               rel1.to: "elm.progress.progressbar";
               rel2.to: "elm.progress.progressbar";
               color: 0 0 0 0;
            }
         }
      }
      programs {
         program { name: "slide_to_end";
            action:  STATE_SET "state_end" 0.0;
            transition: LINEAR 0.5;
            target: "elm.progress.progressbar";
            after: "slide_to_begin";
         }
         program { name: "slide_to_begin";
            signal: "elm,state,slide,begin";
            action: STATE_SET "state_begin" 0.0;
            target: "elm.progress.progressbar";
            transition: LINEAR 0.5;
            after: "slide_to_end";
         }
         program { name: "start_pulse";
            signal: "elm,state,pulse,start";
            source: "elm";
         }
         program { name: "stop_pulse";
            signal: "elm,state,pulse,stop";
            source: "elm";
            action: ACTION_STOP;
            target: "slide_to_begin";
            target: "slide_to_end";
            target: "start_pulse";
         }
         program { name: "state_pulse";
            signal: "elm,state,pulse";
            source: "elm";
            action: STATE_SET "state_begin" 0.0;
            target: "elm.progress.progressbar";
         }
         program { name: "state_fraction";
            signal: "elm,state,fraction";
            source: "elm";
            action: ACTION_STOP;
            target: "slide_to_begin";
            target: "slide_to_end";
            target: "start_pulse";
            action: STATE_SET "default" 0.0;
            target: "elm.progress.progressbar";
         }
         program { name: "set_invert_on";
            signal: "elm,state,inverted,on";
            source: "elm";
            action:  STATE_SET "invert" 0.0;
            target: "elm.progress.progressbar";
         }
         program { name: "set_invert_off";
            signal: "elm,state,inverted,off";
            source: "elm";
            action:  STATE_SET "default" 0.0;
            target: "elm.progress.progressbar";
         }
         program { name: "progressbar_disable";
            signal: "elm,state,disabled";
            source: "elm";
            action:  STATE_SET "disabled" 0.0;
            target: "elm.progress.progressbar";
            target: "background";
         }
         program { name: "progressbar_enable";
            signal: "elm,state,enabled";
            source: "elm";
            action:  STATE_SET "default" 0.0;
            target: "elm.progress.progressbar";
            target: "background";
         }
      }
   }
}