Найти в Дзене

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

Моё почтение! Продолжаем изучать RAD среду разработки под Android.
Компонент для вывода текста - Label.
Label
Lаbel -это не что иное как этикетка, лейбл, стикер, наклейка, надпись. Все эти названия хорошо проясняют сущность этого визуального компонента. Он нужен для вывода алфавитно-цифровой информации.

Моё почтение! Продолжаем изучать RAD среду разработки под Android.

Компонент для вывода текста - Label.
Компонент для вывода текста - Label.

Label

Lаbel -это не что иное как этикетка, лейбл, стикер, наклейка, надпись. Все эти названия хорошо проясняют сущность этого визуального компонента. Он нужен для вывода алфавитно-цифровой информации.

Чтобы ваше приложение могло выводить какой-то текст, или числовые данные, на экран вашего телефона/планшета, вам необходимо добавить на вашу активити компонент Label. Он находится во вкладке "Добавить вид", визуального конструктора среды В4А. Смотрите рисунок, там показано где находится этот компонент.

Расположение компонента Label.
Расположение компонента Label.

У этого компонента есть несколько полезных и важных свойств. Первое из которых -это текст. Тот текст, что будет выводить этот компонент на экран телефона/планшета. Смотрите рисунок.

Основное свойство компонента, -это выводимый текст.
Основное свойство компонента, -это выводимый текст.

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

Переместить компонент в то или иное место на экране, можно простым перетаскиванием курсором, на макете экрана в визуальном конструкторе. Или перетаскиванием пальцем на экране реального телефона, смотрите видео.

В приведенном выше рисунке, текстовая метка выведена на красном фоне, шрифтом желтого цвета. Цвет фона надписи, толщина и цвет окантовки, а также режим отрисовки (вспомните режимы отрисовки активити: заливка цветом, заливка градиентом, заливка обоями), задаются в разделе Label Properties окна свойств, визуального редактора. Вот где эти параметры. Цвет самого текста, а также тип шрифта и его начертание задаются в параметре "свойства текста", в окне свойств. Смотрите рисунок.

Свойства текстовой метки: режим отрисовки, цвет фона, цвет окантовки и толщина линии окантовки.
Свойства текстовой метки: режим отрисовки, цвет фона, цвет окантовки и толщина линии окантовки.

Довольно интересным параметром, является радиус скругления. Он придает прямоугольным надписям, скругление уголков. Либо вовсе превращает их в овальные. Что при умелом сочетании вышеприведённых параметров, позволяет добиться интересных визуальных эффектов. Смотрите рисунок.

Скругление углов с разной интенсивностью у компонента Label.
Скругление углов с разной интенсивностью у компонента Label.

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

Выравнивание текста по ширине.
Выравнивание текста по ширине.

Для красивого и гармоничного дизайна приложения, важно, чтобы графические элементы управления, размещались на экране не в хаотичном порядке, а в соответствие с какой-то логикой. Но для текстовых элементов, важно, чтобы и текст выводился в соответсвие с какими-то дизайнерскими соображениями. В текстовой метке, за выравнивание ТЕКСТА, но не самого элемента, отвечает параметр Alignment этот самый элайнмент, может быть горизонтальным Horizontal Alignment (горизонтальное выравнивание, по ширине) смотрите рисунок выше. И выравнивание вертикальное Vertical Alignment . Которое работает по схожей логике и размещает надписи вверху элемента, посередине и внизу. На рисунке я специально выделил фон надписи красным цветом, чтобы ясно было видно границы самого элемента и границы надписи, которая в этом элементе размещается. Кроме этого, для выведения большого объема текста, полезно бывает выводить его в несколько строк. За это отвечает параметр Single Line который по умолчанию не отмечен, то есть большой текст будет выводится в несколько строк. Визуальный конструктор сам решает, как переносить слова на новую строку. Если до конца строки остается мало места, -то длинное слово в тексте будет перенесено на новую строку. А если слово короткое, и его удастся размести в строку целиком, то текст в строке будет написан вплотную между левой и правой границей компонента Label. Чтобы отключить многострочность, следует установить флажок для параметра Single Line.

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

В следующем занятии мы изучим родного брата текстовой метки, - Edit Text. Текстовое поле, или текстовые редактор. Не забудьте подписаться на канал и просмотреть предыдущие уроки.