Roller - rockcastle/lvgl GitHub Wiki

Written for v5.1

Overview

Roller allow you to simply select one option from more with scrolling. Its functionalities are similar to Drop down list.

The options are passed to the Roller as a string with lv_roller_set_options(roller, options). The options should be separated by \n. For example: "First\nSecond\nThird".

You can select an option manually with lv_roller_set_selected(roller, id), where id is the index of an option.

A callback function can be specified with lv_roller_set_action(roller, my_action) to call when a new option is selected.

The roller's height can be adjusted with lv_roller_set_visible_row_count(roller, row_cnt) to set number of visible options.

The width is adjusted automatically. To prevent this apply lv_roller_set_hor_fit(roller, false) and set the width manually by lv_obj_set_width(roller, width).

The Roller's open/close animation time is adjusted by lv_roller_set_anim_time(roller, anim_time). Zero animation time means no animation.

Style usage

The lv_roller_set_style(roller, LV_ROLLER_STYLE_..., &style) set the styles of a roller.

  • LV_ROLLER_STYLE_BG Style of the background. All style.body properties are used. It is used for the label's style from style.text. Gradient is applied on the top and bottom as well. Default: lv_style_pretty
  • LV_DDLIST_STYLE_SEL Style of the selected option. The style.body properties are used. The selected option will be recolored with text.color. Default: lv_style_plain_color

Example

Roller image

/*Create a default roller*/
lv_obj_t *roller1 = lv_roller_create(lv_scr_act(), NULL);
lv_roller_set_options(roller1, "Apple\n"
                               "Broccoli\n"
                               "Cabbage\n"
                               "Dewberry\n"
                               "Eggplant\n"
                               "Fig\n"
                               "Grapefruit");
lv_obj_set_pos(roller1, 50, 80);


/*Create styles*/
static lv_style_t bg_style;
lv_style_copy(&bg_style, &lv_style_pretty);
bg_style.body.main_color = LV_COLOR_WHITE;
bg_style.body.grad_color = LV_COLOR_HEX3(0xddd);
bg_style.body.border.width = 0;
bg_style.text.line_space = 20;
bg_style.text.opa = LV_OPA_40;

static lv_style_t sel_style;
lv_style_copy(&sel_style, &lv_style_pretty);
sel_style.body.empty = 1;
sel_style.body.radius = LV_RADIUS_CIRCLE;
sel_style.text.color = LV_COLOR_BLUE;

/*Create a roller and apply the new styles*/
lv_obj_t *roller2 = lv_roller_create(lv_scr_act(), NULL);
lv_roller_set_options(roller2, "0\n"
                               "1\n"
                               "2\n"
                               "3\n"
                               "4\n"
                               "5\n"
                               "6\n"
                               "7\n"
                               "8\n"
                               "9");
lv_roller_set_style(roller2, LV_ROLLER_STYLE_BG, &bg_style);
lv_roller_set_selected(roller2, 3, false);
lv_roller_set_style(roller2, LV_ROLLER_STYLE_SEL, &sel_style);
lv_roller_set_visible_row_count(roller2, 3);
lv_roller_set_hor_fit(roller2, false);
lv_obj_set_width(roller2, 40);
lv_obj_set_pos(roller2, 220, 50);