Создание фона с помощью элемента управления Bg

Создание цветного элемента управления Bg

Существует два способа отображения фонового изображения в элементе управления. Первый способ заключается в использовании тем EDJE, второй — использование элемента управления Bg.

Создаем новое приложение BgSample. Откроем файл исходного кода bgsample.c и добавим функцию my_table_pack перед функцией create_base_gui().

static void
my_table_pack(Evas_Object *table, Evas_Object *child, int x, int y, int w, int h)
{
evas_object_size_hint_align_set(child, EVAS_HINT_FILL, EVAS_HINT_FILL);
evas_object_size_hint_weight_set(child, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
elm_table_pack(table, child, x, y, w, h);
evas_object_show(child);
}

my_table_pack() - это функция, которая добавляет элемент управления или контейнер в контейнер Table container. Table — это контейнер, который может использовать различные разрешения монитора.

Ниже приводятся упорядоченные параметры функции my_table_pack():

Мы переходим в функцию create_base_gui() и создаем элемент управления Bg. Разделы Conformant и Label будут удалены, так как они не используются в нашем примере.

/* Conformant */
/*ad->conform = elm_conformant_add(ad->win);
elm_win_indicator_mode_set(ad->win, ELM_WIN_INDICATOR_SHOW);
elm_win_indicator_opacity_set(ad->win, ELM_WIN_INDICATOR_OPAQUE);
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);*/
/* Label*/
/*ad->label = elm_label_add(ad->conform);
elm_object_text_set(ad->label, "Hello EFL");
evas_object_size_hint_weight_set(ad->label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
elm_object_content_set(ad->conform, ad->label);
evas_object_show(ad->label);*/
/* Table */
Evas_Object *table = elm_table_add(ad->win);
/* Make table homogenous - every cell will be the same size */
elm_table_homogeneous_set(table, EINA_TRUE);
/* Let the table child allocation area expand within in the box */
evas_object_size_hint_weight_set(table, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
elm_win_resize_object_add(ad->win, table);
evas_object_show(table);
{
/* Bg-1 Color */
Evas_Object *bg = elm_bg_add(ad->win);
my_table_pack(table, bg, 0, 0, 2, 2);
elm_bg_color_set(bg, 50, 150, 80);
evas_object_show(bg);
}
/* Show window after base gui is set up */
evas_object_show(ad->win);

Elm_table_add() - это API, который создает контейнер Table.

elm_bg_add() - это API, который создает элемент управления Bg.

elm_bg_color_set() - это API, который задает фоновый цвет для элемента управления Bg.

В качестве первого параметра указывается элемент управления Bg, свойства которого мы хотим изменить. Второй параметр — значение цвета в формате RGB.

Запустите проект. Убедитесь в том, что зеленым цветом залит весь экран.

Применение изображения к элементу управлени Bg: оригинаьный размер

В этом упражнении мы создадим элемент управления Bg, к которому мы применим изображение. Для этого нам потребуется графическое изображение. Создайте папку images в папке res.

Затем скопируйте файл logo.png из папки дополнительных материалов 'images' и скопируйте в папку проекта 'res/images'.

Теперь мы можем создать элемент управления Bg и фоновое изображение. Для этого нужно добавить следующий код в функцию create_base_gui() function.

/* Bg-1 Color */
Evas_Object *bg = elm_bg_add(ad->win);
my_table_pack(table, bg, 0, 0, 2, 2);
elm_bg_color_set(bg, 50, 150, 80);
evas_object_show(bg);

/* Image path */
char buf[PATH_MAX];
app_get_resource("images/logo.png", buf, (int)PATH_MAX);

/* Bg-2 Image Center */
bg = elm_bg_add(ad->win);
elm_bg_option_set(bg, ELM_BG_OPTION_CENTER);
elm_bg_file_set(bg, buf, NULL);
my_table_pack(table, bg, 2, 0, 2, 2);
}

app_get_resource() - это функция, которая находит абсолютный путь к папке /res, добавляет вложенную папку и затем возвращает путь. В качестве первого параметра используется путь к вложенной папке. В нашем случае - ‘images/logo.png’, полный путь будет ~/res/images/logo.png. Эта функция еще не создана.

Функция elm_bg_option_set() определит стиль отображения изображения. Вводя ELM_BG_OPTION_CENTER в качестве второго параметра, мы укажем, что изображение должно отображаться в центре элемента управления в оригинальном размере.

elm_bg_file_set() -это функция, которая определяет файл изображения для Bg. Ее первый параметр — это элемент управления Bg, второй параметр — путь к файлу.

Добавьте функцию app_get_resource перед функцией create_base_gui() function.

static void
app_get_resource(const char *res_file_in, char *res_path_out, int res_path_max)
{
char *res_path = app_get_resource_path();
if (res_path) {
snprintf(res_path_out, res_path_max, "%s%s", res_path, res_file_in);
free(res_path);
}
}

Запустите пример. Убедитесь в том, что изображение отображается в центре элемента управления Bg в правой части экрана в оригинальном размере.

Добавление изображения к контролу: изменение размера при сохранении оригинального соотношения сторон

Здесь мы поговорим о том, как выполнить заливку изображением с сохранением оригинальных пропорций. Добавьте код в конце функции create_base_gui().

/* Bg-2 Image Center */
bg = elm_bg_add(ad->win);
elm_bg_option_set(bg, ELM_BG_OPTION_CENTER);
elm_bg_file_set(bg, buf, NULL);
my_table_pack(table, bg, 2, 0, 2, 2);

/* Bg-3 Image Scale */
bg = elm_bg_add(ad->win);
elm_bg_option_set(bg, ELM_BG_OPTION_SCALE);
elm_bg_file_set(bg, buf, NULL);
my_table_pack(table, bg, 0, 2, 2, 2);
}

Вводя 'ELM_BG_OPTION_SCALE' в качестве второго параметра функции elm_bg_option_set() мы осуществляем заливку изображением с сохранением пропорций.

Запустите пример.

Сязывание изображения с элементом управления с игнорированием оригинальных пропорций

В этом разделе мы осуществим заливку изображением без сохранения пропорций. Добавьте код в конце функции create_base_gui() function. Он создаст четвертый элемент управления Bg .

/* Bg-3 Image Scale */
bg = elm_bg_add(ad->win);
elm_bg_option_set(bg, ELM_BG_OPTION_SCALE);
elm_bg_file_set(bg, buf, NULL);
my_table_pack(table, bg, 0, 2, 2, 2);

/* Bg-4 Image Stretch */
bg = elm_bg_add(ad->win);
elm_bg_option_set(bg, ELM_BG_OPTION_STRETCH);
elm_bg_file_set(bg, buf, NULL);
my_table_pack(table, bg, 2, 2, 2, 2);
}

Использование 'ELM_BG_OPTION_STRETCH' в качестве второго параметра функции elm_bg_option_set() осуществляет заливку изображением контрола Bg.

Запустите проект.

Связывание изображений с Bg: плиточный стиль

Добавьте код в конец функции create_base_gui() function. Это позволит создать пятый контрол Bg.

/* Bg-4 Image Stretch */
bg = elm_bg_add(ad->win);
elm_bg_option_set(bg, ELM_BG_OPTION_STRETCH);
elm_bg_file_set(bg, buf, NULL);
my_table_pack(table, bg, 2, 2, 2, 2);

/* Bg-5 Image Tile */
bg = elm_bg_add(ad->win);
elm_bg_option_set(bg, ELM_BG_OPTION_TILE);
elm_bg_file_set(bg, buf, NULL);
my_table_pack(table, bg, 1, 1, 2, 2);
}

Использование в качестве второго параметра функции elm_bg_option_set() значения 'ELM_BG_OPTION_TILE' отображает изображение повторно.

Запустите пример.