Row

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:

• nk_layout_row_dynamic
• nk_layout_row_static
• nk_layout_row_xxx
• nk_layout_row
• nk_layout_row_template

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");