Mobile native Wearable native

Layout

A layout is a container that takes a standard Edje design file and wraps it very thinly in a UI component. Layouts are the basis of many graphics components used in Elementary.

An Edje design file describes how the elements of the UI are positioned and how they behave when interacted with. For more information about Edje, see Themes.

Creating a Layout

To create a new layout, use the elm_layout_add() function:

Evas_Object *layout;

layout = elm_layout_add(parent);

In Tizen, the layout component is extended to support different kinds of layouts. Rather than defining layouts yourself, you can use the following predefined default layouts:

  • application/default: This layout can be used to display content inside a window.
  • drawer/panel: This layout can be used to create a 2-panel view.
  • nocontents/default: This layout can be used when there is no content to display, such as in a contact or email.

To use the application/default layout:

Evas_Object *ly;

ly = elm_layout_add(parent);
elm_layout_theme_set(ly, "layout", "application", "default");

Adding Objects to the Layout

To add objects to the layout:

  • To add an Evas object to the layout, use the elm_object_part_content_set() function:

    elm_object_part_content_set(ly, "elm.swallow.content", view);

    elm.swallow.content is the swallow part of the application layout, and with this call you integrate the view inside the swallow object of the layout.

  • The drawer/panel layout can display 2 different views, the background and the main content:

    Evas_Object *ly;

ly = elm_layout_add(parent);
elm_layout_theme_set(ly, "layout", "drawer", "panel");

    To swallow an object inside the main content and background views:

    elm_object_part_content_set(ly, "elm.swallow.content", main_view);
elm_object_part_content_set(ly, "elm.swallow.background", background);

  • The nocontents/default layout is a special layout in that it does not contain any swallows. You can only set the text part. There are 2 different texts zones: elm.text and elm.help.text. To change the text:

    elm_object_part_text_set(ly, "elm.text", "Hi All :)");
elm_object_part_text_set(ly, "elm.help.text", "Hi All :)");

Using Layout Themes

The layout component supports the following predefined default themes:

  • toolbar-content: For applications with a toolbar and main content area.
  • toolbar-content-back: For applications with a toolbar, main content area (with a back button), and title area.
  • toolbar-content-back-next: For applications with a toolbar, main content area (with back and next buttons), and title area.
  • content-back: For applications with main content (with a back button) and title areas.
  • content-back-next: For applications with main content (with back and next buttons) and title areas.
  • toolbar-vbox: For applications with a toolbar and main content area as a vertical box.
  • toolbar-table: For applications with a toolbar and main content area as a table.

To set a theme to the layout, use the elm_layout_theme_set() function.

Note
Except as noted, this content is licensed under LGPLv2.1+.
Go to top