3. Размещение компонентов

Перед размещением других компонентов настроим первый - начальный экран программы.

Заполняем поля о программе (AboutScreen), название программы (AppName), заголовок (Title), версии кода (VersionCode, VersionName). Последние 2 поля следует обновлять перед очередной загрузкой программы в Google Play, иначе будет вылетать ошибка.

Свойству ориентации экрана (ScreenOrientation) зададим значение неопределено (Unspecified), а возможность прокрутки (Scrollable) отменим.

Предварительная настройка экрана сделана, в любой момент любое из свойств можно поменять. Например, см. добавление иконки программы здесь.

Т. к. положение остальных компонентов в будущей программе задано и отлично от линейного следования сверху вниз, первыми компонентами, которые нужно вытянуть на экран, являются компоненты управляющие положением других компонентов (Layout).

Схема их размещения и направления выравнивания такая:

Вытягиваем компоненты Layouts во Viewer друг по другом и настраиваем заполнение каждым компонентом Layout всего экрана программы по ширине. Жмём на поле под надписью Width с надписью Automatic... и выбираем Fill parent, в данном случае, parent - это Screen1.

Высоту этих всех компонентов можно оставить автоматической (Automatic...), тогда высота будет определяться вставленными внутрь компонентами.

Общие правила заполнения:

- Automatic - оставляет внутреннему компоненту достаточное место для правильного отображения,
- Fill parent - растягивает компонент до заполнения всего компонента-родителя по выбранному направлению. Два fill parent в одном направлении поделят это направление 50-50%, три - ровно на троих и т. д.,
- также можно ввести значение ширины (Width) или высоты (Height) в пикселях.

Остальные компоненты: 2 текстовых поля (TextBox), 2 кнопки (Button), 2 нередактируемых текстовых поля (Label) и 1 компонент браузера (WebViewer) размещаются в компонентах Layout по схеме размещения компонентов:

путь до файла должен заполнить весь верхний компонент горизонтального выравнивания,
- кнопки должны отображаться правильно,
- код и браузер должны заполнить всё возможное место по вертикали и половину по горизонтали каждый,
- строки статуса должны поделить горизонталь оставшись видимыми.

То есть, значения высоты и ширины должны составлять:

После размещения выравнивания переименуем каждый из них для придания большего смысла.

После вставки компонента, отвечающего за работу с файлами (Palette -> Storage -> File), и дополнительных настроек каждого компонента: подсказки в редактируемых текстовых полях (Hint, будет видна до заполнения поля), текст кнопок, цвета фона и шрифта (фон экрана и текстовых полей изменён на чёрный, цвет шрифтов - на белый и жёлтый), размера шрифта экран будет выглядеть так: