CheckBox (Флажок)
Компонент CheckBox является флажком, с помощью которого пользователь может отметить (поставить галочку) определённую опцию. Очень часто флажки используются в настройках, когда нужно выборочно выбрать определённые пункты, необходимые для комфортной работы пользователю.
Компонент находится в группе Buttons.
Для управления состояниями флажка используйте методы setChecked() или togglе(). Чтобы узнать текущее состояние флажка, вызовите свойство isChecked.
Для экспериментов воспользуемся программой «Счётчик ворон», которую писали при изучении щелчка кнопки.
Как вы помните, в программе была кнопка и текстовое поле. Добавим ещё два элемента CheckBox, а также четыре текстовые метки TextView. Нам нужно постараться, чтобы элементы были аккуратно сгруппированы. Для этой цели воспользуемся вложенными компоновками LinearLayout. Заодно применим интересный приём — мы не будем использовать текст у флажков CheckBox, а воспользуемся текстовыми метками с разными размерами шрифтов. Верхняя метка с крупным шрифтом будет указывать на основную функциональность флажка, а нижняя метка с мелким шрифтом будет использоваться в качестве своеобразной подсказки, в которой содержится дополнительная информация для пользователя.
На самом деле вы можете попробовать другие способы разметки, не воспринимайте как догму. А мы идём дальше. Флажки в нашем приложении нужны для того, чтобы пользователь мог менять вывод текста в текстовом поле. По желанию, можно выводить текст красным цветом и жирным стилем по отдельности или в совокупности. Для этого нам нужно добавить дополнительные строчки кода в обработчик щелчка кнопки.
// Если этот код работает, его написал Александр Климов, // а если нет, то не знаю, кто его писал. package ru.alexanderklimov.checkbox; import android.graphics.Color; import android.graphics.Typeface; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.widget.Button; import android.widget.CheckBox; import android.widget.EditText; public class MainActivity extends AppCompatActivity < private int mCount = 0; private EditText mMessageEditText; private CheckBox mColorCheckBox; private CheckBox mBoldCheckBox; @Override protected void onCreate(Bundle savedInstanceState) < super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); setTitle("CheckBox"); mMessageEditText = (EditText) findViewById(R.id.editText); mColorCheckBox = (CheckBox)findViewById(R.id.checkBoxColor); mBoldCheckBox = (CheckBox)findViewById(R.id.checkBoxBold); Button mCrowsCounterButton = (Button) findViewById(R.id.buttonCounter); mCrowsCounterButton.setOnClickListener(new View.OnClickListener() < @Override public void onClick(View v) < if(mColorCheckBox.isChecked()) mMessageEditText.setTextColor(Color.RED); else mMessageEditText.setTextColor(Color.BLACK); if(mBoldCheckBox.isChecked()) mMessageEditText.setTypeface(Typeface.DEFAULT_BOLD); else mMessageEditText.setTypeface(Typeface.DEFAULT); mMessageEditText.setText("Я насчитал " + ++mCount + " ворон"); >>); > >
Запустите проект и попробуйте снимать и ставить галочки у флажков в разных комбинациях, чтобы увидеть, как меняется текст после щелчка кнопки. Код очень простой — проверяется свойство isChecked. Если галочка у флажка установлена, то свойство возвращает true и мы меняем цвет (красный) или стиль текста (жирный). Если флажок не отмечен, то свойство возвращает false, и мы используем стандартные настройки текста.
Отслеживаем смену состояния флажка
С помощью слушателя-интерфейса OnCheckedChangeListener с его методом onCheckedChanged() можно отслеживать смену состояния флажка.
// Kotlin val textView: TextView = findViewById(R.id.textView) val checkBox: CheckBox = findViewById(R.id.checkBox) checkBox.setOnCheckedChangeListener < buttonView, isChecked ->if (isChecked)< textView.text = "Флажок выбран" >else < textView.text = "Флажок не выбран" >>
// Java TextView textView = findViewById(R.id.textView); CheckBox checkBox = findViewById(R.id.checkBox); checkBox.setOnCheckedChangeListener(new OnCheckedChangeListener() < @Override public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) < if(isChecked) textView.setText("Флажок выбран"); else < textView.setText("Флажок не выбран"); >> >);
Собственные стили
Если вы используете стандартный проект, то флажок будет использовать цвета Material Design, в частности цвет colorAccent для фона флажка.
В файле res/values/styles.xml добавим строки:
Свойство colorControlNormal отвечает за прямоугольник в невыбранном состоянии, а colorControlActivated за закрашенный прямоугольник в выбранном состоянии.
Присваиваем созданный стиль атрибуту android:theme:
Теперь цвета флажков изменились.
Собственный вид
Если вас не устраивает стандартный вид элементов CheckBox, то не составит никакого труда реализовать свои представления о дизайне.
В папке res/drawable создаём файл checkbox_selector.xml:
Также необходимо подготовить два изображения для двух состояний флажков — выбран и не выбран. В нашем случае это две звезды — серая и жёлтая.
Осталось прописать селектор в компоненте CheckBox (атрибут android:button):
Готово! Можете запускать проект и проверять работу флажков. Ниже код для реагирования на смену состояния флажков:
@Override public void onCreate(Bundle savedInstanceState) < super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); final TextView textView = (TextView)findViewById(R.id.textView); CheckBox starCheckBox = (CheckBox) findViewById(R.id.checkBox); starCheckBox.setOnCheckedChangeListener(new OnCheckedChangeListener() < @Override public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) < if(isChecked) textView.setText("Флажок выбран"); else < textView.setText("Флажок не выбран"); >> >); >
AnimatedStateListDrawable. Анимация между переключением состояния
Когда мы создали собственный вид флажка, то переключение происходит сразу без анимации. В API 21 появилась возможность установить анимацию при помощи нового класса AnimatedStateListDrawable.
Создадим как прежде файл для собственного вида флажка.
res/drawable/toggle.xml
Далее нужные два значка. Они сделаны в векторном виде.
res/drawable/toggle_checked.xml
res/drawable/toggle_unchecked.xml
Присвоим созданный вид атрибуту android:button.
Код будет работать на устройствах, которые поддерживают векторную графику (API 14), но анимации не будет. Для анимации создадим альтернативный вариант файла в папке res/drawable-v21.
AnimatedStateListDrawable похож на обычный StateListDrawable, но позволяет указать анимацию перехода между двумя состояниями. Мы также указываем две картинки, но также добавляем элементы transition.
res/drawable-v21/toggle.xml
res/drawable-v21/toggle_unchecked_checked.xml
res/drawable-v21/toggle_checked_unchecked.xml
Если запустить пример на старом устройстве, то никакой анимации не увидим, но код будет работать без ошибок. На новых устройствах анимация будет работать.
HTML: Чекбокс
В интернет-магазинах, часто, поиск реализуется с помощью указания категорий, в которых хотим искать товар. Для реализации множественного выбора существуют чекбоксы (или, как их ещё называют — флажки).
Чекбоксы позволяют выбирать множество элементов из представленных:
Для создания чекбокса используются два тега:
- с указанием type=»checkbox»
- , в котором будет текст, связанный с нужным нам чекбоксом
Для создания связи с существует два способа:
- Связь по id . Для этого необходимо задать уникальный id для и связать с чекбоксом с помощью атрибута for
- Вложить внутрь тега . При этом указание уникального id не требуется
Для того, чтобы после отправки формы на сервер возможно было узнать, какие именно пункты были выбраны, используется атрибут value , внутри которого находится значение, позволяющее определить чекбокс.
Так как чекбоксов на странице может быть много, и они могут относиться к разным формам, для определения конкретной группы чекбоксов используется атрибут name . Для каждой группы чекбоксов указывается своё имя, по которому, в дальнейшем, возможно отделить группы чекбоксов при обработке на сервере.
Задание
Создайте форму, у которой файл с обработчиком данных лежит по адресу /people . Внутри формы создайте 2 чекбокса. Свяжите их вложив внутри . Не забудьте добавить атрибуты name и value
Упражнение не проходит проверку — что делать? ��
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет ��
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя ��
Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно ��
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
Подключение Checkbox к сайту
Отметьте чекбокс Автоматически отправлять чек на email покупателя, если вы хотите чтобы система Checkbox отправляла автоматическое письмо с чеком на почту покупателя после фискализации чека.
Отметьте чекбокс Автоматически отправлять чек по SMS, если вы хотите, чтобы система Checkbox отправляла автоматическое письмо с чеком на почту покупателя после фискализации чека.
Отметьте чекбокс Включить и нажмите Сохранить.
Обратите внимание: для отправки данных о чеках по SMS, в вашем аккаунте Checkbox включите опцию Отправка чеков по смс в Настройки → Модули.
Настройка доступа для менеджеров сайта
Менеджеру сайта необходимо дать права для фискализации чека при обработке заказа в Настройки → Админы→ чекбокс Разрешить фискализацию чека.
Функционал фискализации доступен администраторам сайта с ролями owner и manager.
Менеджеры, у которых нет прав на фискализацию, смогут просматривать и печатать созданные чеки.
Дополнительные настройки для чеков
Передача формы оплаты в фискальный чек
Для каждого из настроенных в админ панели Хорошопа вариантов оплаты можно настроить отображение в чеке форма оплаты. Для этого перейдите в Настройки — Варианты оплаты и выберите соответствующий способ оплаты для редактирования:
В поле Форма оплаты в фискальном чеке выберите одну из форм оплаты Готівка/Безготівкова оплата из выпадающего списка.
Если вы выбрали Безготівкова оплата, то дополнительно можно указать значение для отображения в чеке, например, Карткою, Післяплата, Кредит. Для этого заполните поле Название формы оплаты в фискальном чеке.
Для формы оплаты Готівка в чек всегда передается значение Готівка.
Для вариантов оплаты по умолчанию уже заданы значения формы оплаты, которые вы можете изменить при необходимости:
Безготівкова оплата/Картка для Онлайн-оплата банковской картой (WayForPay);Онлайн-оплата банковской картой (Portmone); Онлайн-оплата банковской картой; «Оплата частями» ПриватБанка и «Покупка частями» от monobank.
Готівка для Наличными и Оплата при получении.
Передача в чек номера заказа
Добавлена возможность передавать в подвал чека дополнительную информацию, в частности номер заказа. Для этого в Настройки — Чеки Chechbox заполните поле Дополнительная информация в чеке.
Для передачи номера заказа используйте переменную .
Налоговые ставки для товаров
Если согласно законодательству вы должны передать в чек обозначение налоговых ставок для товаров, необходимо:
Заполнить справочник налоговых ставок в админ панели сайта.
Включить отображение ставок для налогов в настройках Чеки Chechbox.
Заполнить соответствующие данные для товаров в магазине.
Справочник налоговых ставок
Перейдите в Настройки — Checkbox: налоговая ставка и внесите в справочник налоговые ставки так, как они заполнены у вас в аккаунте Checkbox. Уникальный код налога в Хорошопе должен совпадать с уникальным кодом налога в аккаунте Chechbox.
Внимание: налоговые ставки должны быть обязательно предварительно заполнены в вашем аккаунте Checkbox.
В справочнике доступны к заполнению три поля:
Название налога
Уникальный код налога
Первые два поля справочные, для вашего удобства, уникальный код налога должен строго соответствовать уникальному коду налога в аккаунте Checkbox.
Включить передачу налогов в чек
Перейдите в Настройки — Чеки Chechbox и включите чекбокс Передавать налоги для товаров. После этого в редактировании товаров появится поле Уникальный код налога.
Импорт значений налоговых ставок для товаров
Заполнить значение налоговой ставки для товара можно вручную в редактировании товара. Для этого выберите значение из выпадающего списка в поле Уникальный код налога.
Массово заполнить это значение для товаров можно при помощи импорта. Таблица должна содержать две колонки Артикул и Уникальный код налога.
Внимание: импорт осуществляется только по цифровому значению уникального кода налога.
Фискализация чека
После настройки на странице обработки заказа появится кнопка Фискализировать чек.
Как работать с checkbox
Элемент CheckBox или флажок предназначен для установки одного из двух значений: отмечен или не отмечен. Чтобы отметить флажок, надо установить у его свойства Checked значение true .
Кроме свойства Checked у элемента CheckBox имеется свойство CheckState , которое позволяет задать для флажка одно из трех состояний — Checked (отмечен), Indeterminate (флажок не определен — отмечен, но находится в неактивном состоянии) и Unchecked (не отмечен)
Также следует отметить свойство AutoCheck — если оно имеет значение false , то мы не можем изменять состояние флажка. По умолчанию оно имеет значение true .
При изменении состояния флажка он генерирует событие CheckedChanged . Обрабатывая это событие, мы можем получать измененный флажок и производить определенные действия:
private void checkBox_CheckedChanged(object sender, EventArgs e) < CheckBox checkBox = (CheckBox)sender; // приводим отправителя к элементу типа CheckBox if (checkBox.Checked == true) < MessageBox.Show("Флажок " + checkBox.Text + " теперь отмечен"); >else < MessageBox.Show("Флажок " + checkBox.Text + " теперь не отмечен"); >>
Radiobutton
На элемент CheckBox похож элемент RadioButton или переключатель. Переключатели располагаются группами, и включение одного переключателя означает отключение всех остальных.
Чтобы установить у переключателя включенное состояние, надо присвоить его свойству Checked значение true .
Для создания группы переключателей, из которых можно бы было выбирать, надо поместить несколько переключателей в какой-нибудь контейнер, например, в элементы GroupBox или Panel. Переключатели. находящиеся в разных контейнерах, будут относиться к разным группам:
Похожим образом мы можем перехватывать переключение переключателей в группе, обрабатывая событие CheckedChanged . Связав каждый переключатель группы с одним обработчиком данного события, мы сможем получить тот переключатель, который в данный момент выбран:
private void radioButton_CheckedChanged(object sender, EventArgs e) < // приводим отправителя к элементу типа RadioButton RadioButton radioButton = (RadioButton)sender; if (radioButton.Checked) < MessageBox.Show("Вы выбрали " + radioButton.Text); >>