Найти тему

Визуальные компоненты графического интерфейса В4А (часть 1)

Макет UI в среде В4А.
Макет UI в среде В4А.

Приветствую! В прошлых статьях мы с вами установили, настроили и даже немножко поигрались со средой В4А. А сегодня приступаем к изучению самого интересного, компонентов графического интерфейса. К компонентам графического интерфейса относятся такие хорошо известные вещи как: кнопка, надпись, флажок, переключатель, картинка и т.п.

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

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

Активити

Между обычным, компьютерным приложением (десктопным) и приложением для Android, есть существенная разница. На экра компьютера, в один и тот же момент времени, может быть открыто несколько окон приложений, см. рисунок.

Браузер, паинт, блокнот и open writer работающие одновременно.
Браузер, паинт, блокнот и open writer работающие одновременно.

В платформе Android, на экране может отображаться только одно активное окно. Которое занимает весь размер экрана. Активити (activity)в русскоязычной литературе, встречается название "активность", представляет собой функционально законченный и оформленный в виде отдельного окна блок программного кода. Например страница регистрации пользователя, страница отправки сообщений и т.д. Приложение для Android, обычно содержит от одной до нескольких активити, между которыми происходит переключение, по мере завершения действий в конкретной активити. Например, при заполнении всех регистрационных данных пользователем,в одной активити, вызывается вторая активити, с приветствием нового пользователя.

Первая активити с формой регистрации.
Первая активити с формой регистрации.
Вторая активити с приветствием.
Вторая активити с приветствием.

Все визуальные компоненты, располагаются на активити и она, по отношению к этим элементам, является материнским объектом (матерью), а графические элементы располагаемые на активити, -это её дочерние элементы (дочки).

Давайте посмотрим на экран визуального конструктора.

Окно конструктора.
Окно конструктора.

Красной рамкой я обвёл ту область, которая в схематичной форме, показывает экран вашего телефона. Если у вас планшет, или вам нужно поменять ориентацию экрана с вертикальной на горизонтальную, нажмите кнопку раскрывающегося списка, чуть выше рабочей области активити.

Смена типа, модели, ориентации устройства.
Смена типа, модели, ориентации устройства.

Пока что на данном этапе, наша активити - пустышка. Она ничего не содержит. Однако уже сейчас у неё есть некоторые свойства. Наша активити имеет собственное имя. Вот оно. main_activity

Свойства активити.
Свойства активити.

А кроме этого, активити имеет заголовок. Заголовок активити.

Заголовок активити.
Заголовок активити.

Кроме заголовка, у активити есть важный параметр, влияющий на внешний вид, -это режим отрисовки.

Режим отрисовки активити.
Режим отрисовки активити.

Существует три режима отрисовки. ColorDrawable - заливка сплошным цветом. Давайте зальём нашу активити синим фоном. На рисунке я показал ГДЕ настраивается цвет, а вот то КАК он настраивается, полагаю вы сами разберётесь, -это несложно. Смотрите рисунок.

Режим заливки сплошным цветом.
Режим заливки сплошным цветом.

Обратите внимание!!! В окне конструктора, область активити, цвет не меняет. Чтобы посмотреть на качество отображения цвета, подключите к среде разработки телефон или эмулятор.

GradientDrawable- градиентная заливка. Для градиентной заливки нужно выбрать два цвета, между которыми будет осуществляться переход. Существует несколько типов ориентации градиентной заливки. Ориентация выбирается установкой нужного параметра в соответствующей графе окна свойств. На рисунке, я показал только один тип заливки, для сокращения объемов данной статьи.

Режим градиентной заливки.
Режим градиентной заливки.

BitmapDrawable -режим обоев. В этом режиме, можно вставить фоновое изображение, примерно как у меня на рисунке.

Режим обоев.
Режим обоев.

Пользовательский интерфейс визуального конструктора среда разработки В4А, весьма дружественный. К тому же довольно хорошо русифицирован. Так что с последним режимом, вы без труда должны разобраться сами.

А в качестве домашнего задания, предлагаю вам поэкспериментировать с различными режимами активити и посмотреть, как эти режимы будут выглядеть на вашем телефоне.

А на сегодня я прощаюсь, задавайте вопросы, комментируйте, рекомендуйте друзьям и знакомым.

С подпиской рекламы не будет

Подключите Дзен Про за 159 ₽ в месяц