Overview

The containers are rectangle-like object with some special features.

You can apply a layout on the containers to automatically order their children. The layout spacing comes from style.body.padding.hor/ver/inner properties. The possible layout options:

  • LV_CONT_LAYOUT_OFF: Do not alig the children
  • LV_CONT_LAYOUT_CENTER: Align children to the center in column and keep pad.inner space between them
  • LV_CONT_LAYOUT_COL_L: Align children in a left justified column. Keep pad.hor space on the left, pad.ver space on the top and pad.inner space between the children.
  • LV_CONT_LAYOUT_COL_M: Align children in centered column. Keep pad.ver space on the top and pad.inner space between the children.
  • LV_CONT_LAYOUT_COL_R: Align children in a right justified column. Keep pad.hor space on the right, pad.ver space on the top and pad.inner space between the children.
  • LV_CONT_LAYOUT_ROW_T: Align children in a top justified row. Keep pad.hor space on the left, pad.ver space on the top and pad.inner space between the children.
  • LV_CONT_LAYOUT_ROW_M: Align children in centered row. Keep pad.hor space on the left and pad.inner space between the children.
  • LV_CONT_LAYOUT_COL_R: Align children in a bottom justified row. Keep pad.hor space on the left, pad.ver space on the bottom and pad.inner space between the children.
  • LV_CONT_LAYOUT_PRETTY: Put as may objects as possible in a row (with at least pad.inner space and pad.hor space on the sides) and begin a new row. Divide the space in each line equally between the children. Keep pad.ver space on the top and pad.inner space between the lines.
  • LV_CONT_LAYOUT_GRID: Similar to PRETTY LAYOUT but not divide horizontal space equally just let pad.hor space

You can enable an auto fit feature which automatically set the container size to include all children. Itt will keep pad.hor space on the left and right and pad.ver space on the top an bottom. The auto fit can be enable horizontally, vertically or in both direction with lv_cont_set_fit(cont, true, true) function. The second parameter is the horizontal, the third parameter is the vertical fit enable.

Style usage

  • style.body properties are used.

Notes

Example of Container in Littlev Graphics Library

						lv_obj_t * box1;
box1 = lv_cont_create(lv_scr_act(), NULL);
lv_obj_set_style(box1, &lv_style_pretty);
lv_cont_set_fit(box1, true, true);

/*Add a text to the container*/
lv_obj_t * txt = lv_label_create(box1, NULL);
lv_label_set_text(txt, "Lorem ipsum dolor\n"
                       "sit amet, consectetur\n"
                       "adipiscing elit, sed do\n"
                       "eiusmod tempor incididunt\n"
                       "ut labore et dolore\n"
                       "magna aliqua.");

lv_obj_align(box1, NULL, LV_ALIGN_IN_TOP_LEFT, 10, 10);      /*Align the container*/

/*Create a style*/
static lv_style_t style;
lv_style_copy(&style, &lv_style_pretty_color);
style.body.shadow.width = 6;
style.body.padding.hor = 5;                                 /*Set a great horizontal padding*/

/*Create an other container*/
lv_obj_t * box2;
box2 = lv_cont_create(lv_scr_act(), NULL);
lv_obj_set_style(box2, &style);     /*Set the new style*/
lv_cont_set_fit(box2, true, false); /*Do not enable the vertical fit */
lv_obj_set_height(box2, 55);        /*Set a fix height*/

/*Add a text to the new container*/
lv_obj_t * txt2 = lv_label_create(box2, NULL);
lv_label_set_text(txt2, "No vertical fit 1...\n"
                        "No vertical fit 2...\n"
                        "No vertical fit 3...\n"
                        "No vertical fit 4...");

/*Align the container to the bottom of the previous*/
lv_obj_align(box2, box1, LV_ALIGN_OUT_BOTTOM_MID, 30, -30);

lv_obj_t *

lv_cont_create

(lv_obj_t * par, lv_obj_t * copy);

Create a container objects

par pointer to an object, it will be the parent of the new container

copy pointer to a container object, if not NULL then the new object will be copied from it

return pointer to the created container

void

lv_cont_set_layout

(lv_obj_t * cont, lv_layout_t layout);

Set a layout on a container

cont pointer to a container object

layout a layout from 'lv_cont_layout_t'

void

lv_cont_set_fit

(lv_obj_t * cont, bool hor_en, bool ver_en);

Enable the horizontal or vertical fit.
The container size will be set to involve the children horizontally or vertically.

cont pointer to a container object

hor_en true: enable the horizontal fit

ver_en true: enable the vertical fit

void

lv_cont_set_style

(lv_obj_t *cont, lv_style_t * style);

Set the style of a container

cont pointer to a container object

style pointer to the new style

lv_layout_t

lv_cont_get_layout

(lv_obj_t * cont);

Get the layout of a container

cont pointer to container object

return the layout from 'lv_cont_layout_t'

bool

lv_cont_get_hor_fit

(lv_obj_t * cont);

Get horizontal fit enable attribute of a container

cont pointer to a container object

return true: horizontal fit is enabled; false: disabled

bool

lv_cont_get_ver_fit

(lv_obj_t * cont);

Get vertical fit enable attribute of a container

cont pointer to a container object

return true: vertical fit is enabled; false: disabled

lv_style_t *

lv_cont_get_style

(lv_obj_t *cont);

Get the style of a container

cont pointer to a container object

return pointer to the container's style

LittlevGL - Open-source Embedded GUI Library

LittlevGL is a free and open-source graphics library providing everything you need to create embedded GUI with easy-to-use graphical elements, beautiful visual effects and low memory footprint.

If you like LittlevGL, please
support its deveopment!


The founder of Littlev Graphics Library (LittlevGL) and related software modules is:
Gábor Kiss-Vámosi
All Rights Reserved ©  2018 Hungary