如何创建一个里面有图标的按钮？答案

【问题标题】：How to create a button with an icon iside?如何创建一个里面有图标的按钮？
【发布时间】：2016-06-08 12:27:50
【问题描述】：

如标题问题中所述，我想创建一个使用图标作为背景的按钮。我正在使用 360x360 的可穿戴圆圈模拟器。

我尝试了很多代码和示例，但没有成功。

最后使用的代码：

static void
create_base_gui(appdata_s *ad)
{
    /* Window */
    ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
    elm_win_autodel_set(ad->win, EINA_TRUE);

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

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

    /*Box*/
    ad->box = elm_box_add(ad->win);
    evas_object_size_hint_weight_set(ad->box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
    evas_object_show(ad->box);
    elm_win_resize_object_add(ad->win, ad->box);

    ad->button2 = elm_button_add(ad->box);
    elm_object_text_set(ad->button2, "Click me");
    evas_object_size_hint_weight_set(ad->button2, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
    evas_object_size_hint_align_set(ad->button2, EVAS_HINT_FILL, EVAS_HINT_FILL);

    ad->icon2 = elm_icon_add(ad->box);
    elm_image_file_set(ad->icon2, "C/Tizen/testWorkspace/BasicUI/shared/res/basicui.png", NULL);
    elm_image_resizable_set(ad->icon2, EINA_TRUE, EINA_TRUE);
    elm_object_part_content_set(ad->button2, "icon", ad->icon2);
    elm_object_content_set(ad->button2, ad->icon2);

    elm_box_pack_end(ad->box, ad->button2);

    evas_object_show(ad->button2);

    /* Show window after base gui is set up */
    evas_object_show(ad->win);
}

按钮已创建并且可以点击（尚未定义行为）。图标不显示。

我做错了什么？

谢谢

PS：基于https://developer.tizen.org/ko/development/ui-practices/native-application/efl/ui-components/wearable-ui-components/creating-wearable-buttons?langredirect=1

以及默认的 BasicUI 示例

【问题讨论】：

标签： tizen-wearable-sdk tizen-native-app

【解决方案1】：

您需要从 tizen 系统的角度声明路径。那么正确的路径就是

/opt/usr/apps/org.somepackage.yourapp/shared/res/youricon.png

不用说 org.somepackage.yourapp 是您应用的包路径，而 youricon.png 是您的图标。

您甚至可以在设备管理器中查看图标的位置。在下图中是

/opt/usr/apps/org.example.settingsui/shared/res/settingsui.png

这不是很好的解决方案，但有更好的方法：

您可以使用任一功能

app_get_shared_resource_path();
app_get_resource_path();

你可以这样写方法：

static void
app_get_shared_resource(const char *file_in, char *path_out, int path_max)
{
    char *res_path = app_get_shared_resource_path();

    if (res_path) {
        snprintf(path_out, path_max, "%s%s", res_path, file_in);
        free(res_path);
    }
}

然后像这样使用它

char icon_path[128] = {0,};
app_get_shared_resource("youricon.png", icon_path, 128);
// create your button and stuff and then
elm_image_file_set(ic, icon_path, NULL);

所有这些对于 tizen 2.3.X 及更低版本更有价值。从 Tizen 2.4 开始，您可以使用 Resource Manager

【讨论】：

这比预期的稍晚。不过，感谢您的意见。
@ossx 我知道你迟到了，但我正在处理同样的问题，希望这对未来的其他人有帮助:)

【解决方案2】：

我的猜测是图标应该添加到button 控件而不是box 控件上。

所以这个：

ad->icon2 = elm_icon_add(ad->box);

应该是：

ad->icon2 = elm_icon_add(ad->button);

希望有帮助！

【讨论】：