Кнопки. Их виды и назначение. Пример проектирования простых кнопок

Простые кнопки (Button, SmallButton) являются самым распространенным элементом управления в формах. Они предназначены для расположения на них текста, а также нажатия на них (чтобы совершить некоторое нужное действие). Программный код простых кнопок наследуется от класса TextView и, в свою очередь, является базовым классом для класса СompoundButton. От класса CompoundButton затемнаследуются такие специальные кнопочные элементы как:

- CheckBox (флажок, кнопка без фиксации) – элемент интерфейса, позволяющий пользователю делать бинарный выбор между одним из двух возможных взаимоисключающих вариантов, например, “False”/“True”, “Да/Нет”, “Включено/Выключено”, “Пуск/Стоп” и др.), флажки часто показывают на экране в виде квадратного белого поля, у которого пустота означает состояние “False”, а внесение отметки (обычно ☑) означает “True”, После нажатия флажок автоматически возврщается в исходное состояние,

- ToggleButton(кнопка с фиксацией) – элемент, аналогичный флажку с той разницей, что после нажатия он остается в новом состоянии (одном из двух, по умолчанию они обозначаютсяOn и Off, их можно изменить при помощи свойств Text on (атрибут android:textOn) и Text off (атрибут android:textOff) ), для перевода элемента в другое состояние необходимо снова нажать его, по внешнему виду это обычная кнопка с декоративной полоской в нижней части, которая подсвечивается в включенном состоянии (имитация LED-индикатора),

- RadioButton ( переключатель ), кнопки типа RadioButton используются только в составе контейнера RadioGroup (в него могут входить идругие элементы других типов, например, TextView), из всей группы включенной может быть только одна кнопка – при ее включении ранее включенная кнопка отключается, при этом переключатели работают только в пределах своего контейнера RadioGroup, в случае двух таких контейнеров переключатели одного контейнера не влияют на поведение переключателей второго контейнера.

Аналогом простой кнопки Button являетсяэлемент вида ImageButton (android.widget.ImageButton), у которого вместо текста на поле находится картинка (Image).

Рассмотрим работу c элементами Кнопка (Button) и МалаяКнопка (SmallButton) из группы Widgets, содержащей элементы управления приложением. Для этого надо вначале переключиться в конструкторский режим нажатием кнопки Design внизу вкладки Palette. Обычная сцена приложения представляет собой некоторый макет одного из типов Layouts, который заполнен дочерними элементами типа View или Text Fields.

Для начала рассмотрим создание на поле дисплея двух управляющих элементов Кнопка (Button) и МалаяКнопка (SmallButton). У них должны быть заданы следующие свойства:

1) расположение Кнопки - в нижнем левом углу поля дисплея,

2) цвет фона – желтый непрозрачный (без канала прозрачности),

3) на кнопке нанести текстовую надпись “Пуск” полным красным цветом с полным каналом прозрачности,

4) аналогично в нижнем правом углу расположить уменьшенную кнопку типа SmallButton с черным фоном и белой прозрачной текстовой надписью “Пуск”.

 

Рассмотрим поэтапное выполнение всех действий.

1. Перетаскиваем элемент Button из вкладки Palette на поле изображения дисплея. Его схематическое изображение появляется на нем. При этом в конце файла добавляется пустой тег Button, у которого заданы по умолчанию следующие атрибуты, задающие свойства кнопки:

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="New Button"

android:id="@+id/button"

android:layout_centerVertical="true"

android:layout_alignParentRight="true"

android:layout_alignParentEnd="true"

android:layout_marginRight="223dp"

android:layout_marginEnd="223dp" />

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

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="New Button"

android:id="@+id/button"

android:layout_alignParentBottom="true"

android:layout_alignParentLeft="true"

android:layout_alignParentStart="true" />

2. Фон элементов называется background. В Свойствах надо выбрать пункт background. В этой строке справа вызвать окно Resourses и выбрать в нем из опций Project, System, Color последнюю. Откроется окно настройки цветов. В нем вначале выбираем систему задания цвета - RGB (сумму красного, зеленого и синего цветов без использования канала прозрачности). Поскольку желтый цвет образуется сложением красного и синего, то для задания насыщенного желтого надо задать интенсивности 255 в окнах Red, Green и интенсивность 0 в окне Blue. В верхней строке будет выведен полученный цвет, а в текстовом поле с меткой # - его 16-ричная кодировка FFFF00, в которой каждое из соответствующих чисел в интервале от 0 до 256 представлено двумя 16-ричными цифрами (рис.2.3).

После нажатия OK: 1) на изображении устройства рамка, соответствующая элементу, станет желтой (рис.2.4), 2) в конце программного описания элемента (перед закрывающим тегом) появится соответствующая дополнительная строка:

android:background="#ffffff00">

 

Рис.2.3. Задание желтого цвета фону элемента

Рис.2.4. Изменение цвета фона элемента на желтый

3. Свойство, определяющее текст на элементах, называется Text. В Свойствах надо выбрать этот пункт и ввести в нем слово Пуск. При этом соответственно изменится третий атрибут программного описания кнопки (android:text="Пуск"). Для задания полного красного цвета с полным каналом прозрачности задаем в окне Color цветовую модель ARGB и указываем интенсивность 255 в Аlpha-канале и пункте Red. При этом в коде элемента добавится последний атрибут вида:

android:textColor="#ffff0000" />

4. Аналогично создаем и задаем свойства кнопке SmallButton - черный фон (модель ARGB, распределение: 255-0-0-0), расположение - нижний правый угол (перетаскивание) с белой непрозрачной (модель ARGB, распределение: 255-255-255-255)текстовой надписью “Cтоп”.

Итоговый общий вид экрана устройства после выполнения всех действий дан на рис.2.5.

При этом в файле будут добавлены два пустых тега с атрибутами кнопок:

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Пуск"

android:id="@+id/button"

android:layout_alignParentBottom="true"

android:layout_alignParentLeft="true"

android:layout_alignParentStart="true"

android:background="#ffffff00"

android:textColor="#ffff0000" />

 

Рис.2.5.Общий вид экрана устройства после выполнения всех действий

При этом в файле будут добавлены два пустых тега с атрибутами кнопок:

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Пуск"

android:id="@+id/button"

android:layout_alignParentBottom="true"

android:layout_alignParentLeft="true"

android:layout_alignParentStart="true"

android:background="#ffffff00"

android:textColor="#ffff0000" />

<Button

style="?android:attr/buttonStyleSmall"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Стоп"

android:id="@+id/button2"

android:layout_alignParentBottom="true"

android:layout_alignParentRight="true"

android:layout_alignParentEnd="true"

android:background="#ff000000"

android:textColor="#ffffffff" />

Таким образом, можно было бы набрать вышеуказанный программный код в XML-файле и не пользоваться вкладками Palette и Properties. Для проверки этого можно скопировать данный кусок файла activity_main.xml в буфер, а затем удалить его из файла. После этого кнопки исчезнут с изображения дисплея. После вставки кода в файл activity_main.xml они снова появятся.