How to make the button of the list shown in the middle of every item

How-to
1

I create a list and put some images and texts in every item of list .but the image always shown algin left .
I want to move the image to several pixel right and the same with the label in the list button .

with what method can I make it right ?

2

Try lv_btn_set_layout(btn, LV_LAYOUT_CENTER) on each of the list buttons.

3

Thanks for you advice .when I set lv_btn_set_layout(btn, LV_LAYOUT_CENTER), It turns out the image of the button shows in the middle of the button and the label align right of the image . It’s not a whole entirety in the middle of the item

4

lv_label_set_align(label, LV_LABEL_ALIGN_CENTER); Use this method the label of the list button can show in the middle of the button , but the image still aligns left of the button .I use the method lv_img_set_offset_x(img,pixel) ,the image still not move a little :sob:

5

Hi.
I wanted to achieve about the same behavior, though for a regular button, but it doesn’t matter. There are translated lines on the buttons, so I decided to align the icon and label with the center of the button, as a single object. On auto-layout, I could not get the alignment I needed. So I turn it off, and align the objects in the button manually. This is of course a sunset by hand, but it didn’t work out otherwise. Here’s an example of this code:

    lv_obj_t *bt_Ok = lv_btn_create (pPageParent, NULL);
    pPageStruct->bt_Ok = bt_Ok;
    lv_obj_t *bt_Ok_img = lv_img_create (bt_Ok, NULL);
    pPageStruct->bt_Ok_img = bt_Ok_img;
    lv_img_set_src (bt_Ok_img, &lv_img_coll_tools16x16[2]); // Item "check", index in collection 2
    lv_obj_set_parent (pPageStruct->bt_Ok_img, pPageStruct->bt_Ok);
    lv_obj_set_click (pPageStruct->bt_Ok_img, false);
    lv_obj_t *bt_Ok_label = lv_label_create (bt_Ok, NULL);
    pPageStruct->bt_Ok_label = bt_Ok_label;
    lv_obj_set_auto_realign (bt_Ok_label, true);
    lv_label_set_long_mode (bt_Ok_label, LV_LABEL_LONG_EXPAND);
    lv_obj_set_size (bt_Ok, 97, 44);
    lv_btn_set_layout (bt_Ok, LV_LAYOUT_OFF);
    lv_label_set_align (bt_Ok_label, LV_LABEL_ALIGN_CENTER);
    lv_label_set_text (bt_Ok_label, tr_string ("Ok"));
    {   // Isolate into separate code block 
        // Align image and label to button center with a gap between them
        int32_t w1, w2, c;
        lv_obj_t *img1 = pPageStruct->bt_Ok_img, *lab1 = pPageStruct->bt_Ok_label;
        w1 = lv_obj_get_width (img1);
        w2 = lv_obj_get_width (lab1);
        c = (int32_t)(((w1 + w2 + 6)/2) + 0.5);
        lv_obj_align (img1, NULL, LV_ALIGN_CENTER, -c + (w1 / 2), 0);
        lv_obj_align (lab1, NULL, LV_ALIGN_CENTER, c - (w2 / 2), 0);
    }

изображение
Switch the language, alignment is not broken:
изображение
Switch the visual theme, and everything is fine too:
изображение

2 Likes
6

Thanks . It looks good ,I’’’ try your solution