Row - Immediate-Mode-UI/Nuklear GitHub Wiki
Row layouts consist of fixed-height rows, where each row has a certain number of columns to place widgets in. A column may be static, meaning it has a fixed width, or dynamic, meaning it can grow or shrink horizontally depending on the space available to it.
Below are the different types of row layout you can use:
See the documentation from nuklear.h
for more information.
nk_layout_row_dynamic
This lays out widgets in rows where each widget is given the same size to work with. Rows automatically resize themselves horizontally to fill the available space.
// nk_layout_row_dynamic(struct nk_context *ctx, float height, int cols)
nk_layout_row_dynamic(ctx, 24, 3);
nk_button_label(ctx, "Button1");
nk_button_label(ctx, "Button2");
nk_button_label(ctx, "Button3");
nk_button_label(ctx, "Button4");
nk_button_label(ctx, "Button5");
nk_button_label(ctx, "Button6");
nk_layout_row_static
Same thing as nk_layout_row_dynamic except that rows do not grow or shrink. The width of all of the widgets thus needs to be specified manually.
// nk_layout_row_static(struct nk_context *ctx, float height, int item_width, int cols)
nk_layout_row_static(ctx, 24, 100, 3); // each widget is 100x24 pixels
nk_button_label(ctx, "Button1");
nk_button_label(ctx, "Button2");
nk_button_label(ctx, "Button3");
nk_button_label(ctx, "Button4");
nk_button_label(ctx, "Button5");
nk_button_label(ctx, "Button6");
nk_layout_row_xxx
Static Rows
// This will create a row layout with a single column
// void nk_layout_row_begin(struct nk_context *ctx, enum nk_layout_format fmt, float row_height, int cols)
nk_layout_row_begin(ctx, NK_STATIC, 30, 1);
{
// nk_layout_row_push(struct nk_context *ctx, float value)
// when using NK_STATIC, `value` means width of each column
nk_layout_row_push(ctx, 100);
nk_label(ctx, "First Row", NK_TEXT_LEFT);
nk_layout_row_push(ctx, 100);
nk_label(ctx, "Second Row", NK_TEXT_LEFT);
}
nk_layout_row_end(ctx);
Dynamic Rows
Defining dynamic rows works similarly. Instead of NK_STATIC you need to use NK_DYNAMIC. The second argument of nk_layout_row_push has a different meaning when working with dynamic rows. For static rows it describes an absolute width. Dynamic rows use a width percentage instead (e.g. 0.25f for 25% width).
nk_layout_row
This is similar to nk_layout_row_xxx except that you define the width of each widget for each row using an array, which will automatically repeat for each row.
// for NK_STATIC, the widths refer to absolute pixel widths
float row1_widths[] = {85, 20, 150};
// for NK_DYNAMIC, the widths refer to the fraction of the window width
// the widgets will take up
float row2_widths[] = {0.25f, 0.1f, 0.65f};
// nk_layout_row(struct nk_context *ctx, enum nk_layout_format fmt, float height, int cols, const float *ratio)
nk_layout_row(ctx, NK_STATIC, 40, 3, row1_widths);
nk_button_label(ctx, "A");
nk_button_label(ctx, "B");
nk_button_label(ctx, "C");
// the widths will repeat for these next three buttons
nk_button_label(ctx, "D");
nk_button_label(ctx, "E");
nk_button_label(ctx, "F");
nk_layout_row(ctx, NK_DYNAMIC, 40, 3, row2_widths);
nk_button_label(ctx, "G");
nk_button_label(ctx, "H");
nk_button_label(ctx, "I");
nk_layout_row_template
This is useful if you want to mix static and dynamic widgets on the same row. You define a template between nk_layout_row_template_begin
and nk_layout_row_template_end
. Below are the types of widgets you can define within a template.
Function | Defines... |
---|---|
nk_layout_row_template_push_static | A widget that has a fixed pixel width. |
nk_layout_row_template_push_dynamic | A widget that can grow or shrink in size. |
nk_layout_row_template_push_variable | A widget that can grow or shrink in size but also has a minimum allowed width. |
// let's say I want a textbox that can grow or shrink, and a button
// next to it that has a fixed size
nk_layout_row_template_begin(ctx, 24);
nk_layout_row_template_push_dynamic(ctx);
nk_layout_row_template_push_static(ctx, 100);
nk_layout_row_template_end(ctx);
static char buffer[256] = "This can grow or shrink";
nk_edit_string_zero_terminated(ctx, NK_EDIT_SIMPLE, buffer, sizeof(buffer), nk_filter_ascii);
nk_button_label(ctx, "Fixed size");
// example using nk_layout_row_template_push_variable
nk_layout_row_template_begin(ctx, 24);
nk_layout_row_template_push_variable(ctx, 100);
nk_layout_row_template_end(ctx);
nk_button_label(ctx, "This can grow or shrink, but only down to 100px");