Object alignment

How-to
1

Description

In my project, I need to align and resize 3 objects with respect to each other, whenever the user touches and slides over them.
There is max and min for their size. for example if the user swipe right the obj1, its width should be increased to 60%, and if swipe left its width would be decreased until 30% of the container. and meanwhile the size of the other two objects should be changed too.
The device should work in a horizontal and vertical orientation. Here is a simple schematic of it:

hor_orientation
hor_orientation924Ɨ324 3.79 KB
ver_orientation
ver_orientation450Ɨ978 4.59 KB

My questions on this topic will be around this.

What MCU/Processor/Board and compiler are you using?

STM32F429, GCC

What LVGL version are you using?

V8

What do you want to achieve?

align and resize automatically.

What have you tried so far?

I created an object as a container for these 3 objects and then set a flex layout for it.
Is it a good idea to use a flexbox for what I need? Would it be better to use a grid layout or any other solution? As Iā€™m not familiar with flexbox, I would appreciate you to explain more about implementing this layout.

2

Any idea? :sunglasses:

3

Hi,

Try this:


static void swipe_event(lv_event_t * e)
{
    if(lv_indev_get_gesture_dir(lv_indev_get_act()) & LV_DIR_HOR) {
        lv_obj_t * btn = lv_event_get_target(e);

        lv_obj_t * cont = lv_obj_get_parent(btn);
        lv_obj_t * child;
        for(int i = 0; i < lv_obj_get_child_cnt(cont); i++) {
            child = lv_obj_get_child(cont, i);
            if(child == btn) lv_obj_set_flex_grow(child, 3);
            else  lv_obj_set_flex_grow(child, 1);
        }

    }
}
...
  lv_obj_t * cont = lv_obj_create(lv_scr_act());
  lv_obj_set_size(cont, 200, 400);
  lv_obj_center(cont);
  lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_COLUMN);

  for(int i = 0; i < 3; i++) {
      lv_obj_t * btn = lv_btn_create(cont);
      lv_obj_set_flex_grow(btn, 1);
      lv_obj_set_width(btn, lv_pct(100));
      lv_obj_add_event_cb(btn, swipe_event, LV_EVENT_GESTURE, NULL);
      lv_obj_clear_flag(btn, LV_OBJ_FLAG_GESTURE_BUBBLE);

      lv_obj_t * label = lv_label_create(btn);
      lv_label_set_text_fmt(label, "Button %d", i + 1);
      lv_obj_center(label);
  }

f

1 Like