Expand description
UI Layout
There’s three main approaches for positioning UI
- Absolute: Each view is positioned manually at specific coords
- Assisted Using the [RowLayout] and [ColumnLayout] macros views are positioned in rows and columns (with spacing and padding)
- Relative Using [LayoutContext] and layout! to position and size views relative to the context and each other
§Examples
§1 Absolute
const PADDING: usize = 4;
const BUTTON_HEIGHT: usize = 30;
const BUTTON_WIDTH: usize = 70;
const HEIGHT: usize = 100;
const WIDTH: usize = 100;
let background = Rect::new((0,0), (WIDTH, HEIGHT));
let label = Text::new("Are you sure?", TextPos::px((100, 50)), (WHITE, PixelFont::Standard6x7, Positioning::Center));
let positive = Button::new((PADDING, HEIGHT - PADDING - BUTTON_HEIGHT), "Yes", Some(BUTTON_WIDTH), &style.button);
let negative = Button::new((WIDTH - PADDING - BUTTON_WIDTH, HEIGHT - PADDING - BUTTON_HEIGHT), "No", Some(BUTTON_WIDTH), &style.button);§2 Assisted
let mut lbl_name = Label::new(Text::new("Name", TextPos::px(Coord::default()), (WHITE, Standard6x7)));
let mut txt_name = TextField::new(Coord::default(), 30, Standard6x7, (None, None), "", &[TextFilter::Letters], &style.text_field);
let mut cta = Button::new(Coord::default(), "Submit", None, &style.button);
column_layout!(Rect::new((0,0),(200,200)), ColumnGravity::Left, padding: 4, views: lbl_name, txt_name, cta);§3 Relative
use pixels_graphics_lib::layout;
const BUTTON_WIDTH: usize = 70;
const PADDING: usize = 6;
const HEIGHT: usize = 100;
const WIDTH: usize = 100;
let background = Rect::new((0,0), (WIDTH, HEIGHT));
let context = LayoutContext::new_with_padding(background.clone(), PADDING);
let mut label = Label::new(Text::new("Are you sure?", TextPos::px((100, 50)), (WHITE, PixelFont::Standard6x7, Positioning::Center)));
let mut positive = Button::new((0,0), "Yes", Some(BUTTON_WIDTH), &style.button);
let mut negative = Button::new((0,0), "No", Some(BUTTON_WIDTH), &style.button);
layout!(context, label, align_centerh);
layout!(context, label, align_top);
layout!(context, positive, align_left);
layout!(context, positive, align_bottom);
layout!(context, negative, align_left);
layout!(context, negative, align_bottom);