как создать приложение калькулятор
В этом руководстве мы расскажем, как создать калькулятор на Java для Android. Если вы новичок в программировании и никогда раньше не создавали приложения, ознакомьтесь с нашим предыдущим руководством по написанию первого приложения для Android:
Создание проекта
Первое, что нужно сделать — это создать в Android Studio новый проект: Start a new Android Studio project или File — New — New Project :
Для этого руководства мы выбрали в панели « Add an Activity to Mobile » опцию « EmptyActivity », для « MainActivity » мы оставили имя по умолчанию – « Activity ». На этом этапе структура должна выглядеть, как показано на рисунке ниже. У вас есть MainActivity внутри пакета проекта и файл activity_main.xml в папке layout :
Включение привязки данных в проекте
Разработка макета калькулятора
Как научиться создавать приложения для Андроид? Читайте наше руководство дальше.
Общие принципы создания виджетов макета
В приложении калькулятора есть четыре основных элемента:
RelativeLayout — определяет, как другие элементы будут укладываться или отображаться на экране. RelativeLayout используется для позиционирования дочерних элементов по отношению друг к другу или к самим себе.
TextView — элемент используется для отображения текста. Пользователи не должны взаимодействовать с этим элементом. С помощью TextView отображается результат вычислений.
Button — реагирует на клики пользователя. При создании простого приложения для Андроид мы используем кнопки для цифр и операторов действий в калькуляторе.
Создание макета калькулятора
Код макета калькулятора объемный. Это связано с тем, что мы должны явно определять и тщательно позиционировать каждую из кнопок интерфейса. Ниже представлен фрагмент сокращенной версии файла макета activity_main :
Внутренние компоненты калькулятора
Затем мы используем класс DecimalFormat для форматирования результата. Конструктор десятичного формата позволяет отображать до десяти знаков после запятой.
Обработка нажатий на цифры
Обработка кликов по кнопкам операторов
Поздравляю! Мы завершили создание простого калькулятора. Теперь вы сможете создать приложение для Андроид сами.
Заключение
Если вы запустите и протестируете данное приложение, то увидите некоторые моменты, которые можно улучшить: 1) возможность нажимать на кнопку оператора, когда editText очищен ( т. е. без необходимости ввода первой цифры ), 2) возможность продолжать вычисления после нажатия кнопки « Равно ».
Пожалуйста, опубликуйте свои отзывы по текущей теме статьи. За комментарии, подписки, лайки, дизлайки, отклики низкий вам поклон!
Дайте знать, что вы думаете по данной теме в комментариях. Мы крайне благодарны вам за ваши комментарии, дизлайки, отклики, лайки, подписки!
Полный список
Попробуем написать простейший калькулятор, который берет два числа и проводит с ними операции сложения, вычитания, умножения или деления. Результат отображает в виде полного выражения.
Project name: P0191_SimpleCalculator
Build Target: Android 2.3.3
Application name: SimpleCalculator
Package name: ru.startandroid.develop.simplecalculator
Create Activity: MainActivity
Откроем main.xml и нарисуем экран:
Тут есть два поля ввода, 4 кнопки и текстовое поле для вывода. Обратите внимание на атрибут inputType для EditText. Он задает тип содержимого. Я указал numberDecimal – т.е. в поле получится ввести только цифры и запятую, буквы он не пропустит. Это удобно, не надо самому кодить различные проверки.
Для TextView указан атрибут gravity. Он указывает, как будет расположен текст в TextView. Не путайте с layout_gravity, который отвечает за размещение TextView в ViewGroup.
Теперь нам надо читать содержимое полей, определять какую кнопку нажали и выводить нужный результат. Открываем MainActivity.java и пишем код
Думаю, все понятно по каментам. Читаем значения, определяем кнопку, выполняем операцию и выводим в текстовое поле. Обработчиком нажатий на кнопки выступает Activity.
Все сохраним и запустим.
Давайте для большего функционала сделаем меню с пунктами очистки полей и выхода из приложения. Пункты будут называться Reset и Quit.
Добавим две константы – это будут ID пунктов меню.
(добавляете только строки 3 и 4)
И напишем код создания и обработки меню:
Сохраним все, запустим. Появилось два пункта меню:
Reset – очищает все поля
Quit – закрывает приложение
В качестве самостоятельной работы вы можете реализовать проверку деления на ноль. И выводить какое-нить сообщение с помощью Toast или прямо в поле результата.
На следующем уроке:
— рассмотрим анимацию View-компонентов
Присоединяйтесь к нам в Telegram:
— в канале StartAndroid публикуются ссылки на новые статьи с сайта startandroid.ru и интересные материалы с хабра, medium.com и т.п.
— в чатах решаем возникающие вопросы и проблемы по различным темам: Android, Kotlin, RxJava, Dagger, Тестирование
— ну и если просто хочется поговорить с коллегами по разработке, то есть чат Флудильня
— новый чат Performance для обсуждения проблем производительности и для ваших пожеланий по содержанию курса по этой теме
Создание калькулятора чаевых на Kotlin: как это работает?
Рассказываем, как создать простое приложение для расчета чаевых на языке Kotlin. Если точнее, то Kotlin 1.3.21, Android 4, Android Studio 3. Статья будет интересной, в первую очередь, для тех, кто начинает свой путь в разработке Android-приложений. Она позволяет понять, что и как работает внутри приложения.
Такой калькулятор пригодится, когда нужно подсчитать сумму чаевых с компании, решившей провести время в ресторане или кафе. Конечно, не все и не всегда оставляют официантам на чай, это больше западная традиция, но процесс разработки такого приложения в любом случае интересен.
Напоминаем: для всех читателей «Хабра» — скидка 10 000 рублей при записи на любой курс Skillbox по промокоду «Хабр».
Вот как выглядит приложение в процессе работы:
Вы вводите желаемый процент с общей суммы, количество участников встречи и получаете результат — сумму чаевых, которые стоит оставить.
Начинаем
Полный интерфейс приложения выглядит следующим образом:
Первое действие — загрузка основы проекта. Открываем ее в Android Studio 3.0 или более поздней версии. Строим и запускаем проект и видим белый экран. Все нормально, так и должно быть.
Изучаем проект и открываем colors.xml для оценки цветовой палитры. В strings.xml размещены текстовые данные (подписи), а в styles.xml есть несколько шрифтовых шаблонов.
Разработка раздела затрат
Открываем activity_main.xml и добавляем расположенный ниже код в LinearLayout (#1):
Теперь можно настроить стиль директории values или поиграть с цветами, используя инструмент material.io.
Сейчас проект выглядит так:
Как видите, расчет затрат производится по данным, которые вносит пользователь.
Разработка раздела счетов
Добавляем код, размещенный ниже, в LinearLayout после Expense Section (#2):
Закрываем LinearLayout после списка TODOs, а затем добавляем новый код, размещая его внутри LinearLayout (#3):
Поскольку главная задача приложения — расчет индивидуальных затрат для каждого из участников посиделок в ресторане, то основное значение играет costPerPersonTextView.
EditText ограничивает ввод данных одной строкой, у этого параметра должно быть значение NumberDecimal inputType.
Запускаем проект для теста и вводим параметры общего ущерба (разбитые чашки, тарелки и т.п.)
Разработка раздела «Люди и чаевые»
Чтобы добавить выбора объема чаевых, вставляем расположенный ниже код в новую секцию LinearLayout (#4):
Этот участок кода необходим для точного расчета суммы чаевых. Дефолтное значение текста — 20. ImageButtons снабжены иконками в папке с правами записи.
Полностью копируем раздел и добавляем следующее (#5):
Теперь при запуске приложения есть возможность добавить сумму счета, также работают кнопки «Добавить/Вычесть», но пока ничего не происходит.
Добавляем Views
Открываем MainActivity.kt и добавляем вот это в функцию initViews (#6):
Доделываем кнопки
Чтобы добавить поддержку клика кнопок, внедряем View.OnClickListener на уровне класса (#7):
Скомпилировать проект прямо сейчас не выйдет, нужно выполнить еще несколько действий (#8):
В плане кнопок и свитчей у Kotlin все организовано очень круто! Добавляем размещенный ниже код во все функции increment и decrement
Здесь код защищает функции приращения с максимальными значениями (MAX_TIP & MAX_PEOPLE). Кроме того, код защищает функции декремента с минимальными значениями (MIN_TIP & MIN_PEOPLE).
Теперь связываем кнопки со слушателями в функции initViews (#13):
Теперь можно добавлять общий ущерб, чаевые и количество участников встречи. Ну и теперь самое главное…
Раздел подсчета затрат
Этот код подсчитывает затраты (#14):
Ну а здесь вызывается функция, которая дает возможность учесть количество людей в компании и подсчитать чаевые (#15):
Запускаем приложение. Выглядит и работает оно отлично. Но может быть и лучше.
Если вы попытаетесь удалить сумму счета, а затем увеличить число подсказок или друзей, приложение упадет, поскольку еще нет проверки для нулевого значения затрат. Более того, если вы попытаетесь изменить сумму счета, расходы не будут обновлены.
Финальные шаги
Добавляем TextWatcher (#16):
Затем встраиваем слушатель billEditText (#17):
Плюс добавляем код для выполнения TextWatcher (#18):
Ну а теперь работает абсолютно все! Поздравляю, вы написали собственный «Калькулятор чаевых» на Kotlin.
Разработка андроид приложения на примере Калькулятора++. От идеи к реализации
Я, как бывший студент, а ныне инженер, часто провожу какие-либо расчёты «на лету»: будь то расчёт стоимости товара за кг, значение эффективного годового процента за кредит или построение графика распределения голосов на выборах.
После нескольких минут поиска в андроид.маркете (который просто пухнет от представленных на нём программ) было установлено с десяток самых популярных калькуляторов. Но радость оказалась не полной… Всё мне не нравилось, всё было не удобно: где дизайн подкачал, где способ ввода, где постоянные падения. Тут и родилась идея: почему бы не написать свой калькулятор, — java я знаю хорошо. Пусть с андроид не работал — но зато опыта наберусь и скилы прокачаю, да и инструмент хороший получу.
Анализ
Более подробно остановлюсь на анализе нескольких приложений на андроид.маркете:
1. RealCalc Scientific Calculator (анроид.маркет) 
Первым в списке идёт RealCalc — классический калькулятор с числом установок 5-10 млн. Средняя оценка: 4.7.
2. Cube Calculator Free (андроид.маркет) 
Число установок: 100-500 тыс. Средняя оценка: 4.8
3. Handy Calc (андроид.маркет) 
Число установок: 0.5 — 1 млн. Средняя оценка: 4.7
Общий итог:
Все рассмотренные выше приложения имеют один существенный недостаток — они имеют плохо проработанный интерфейс: где-то непонятно, что нужно нажимать, где-то нужно переключаться между экранами, где-то для доступа к функционалу нужно пройти последовательность действий, а где-то на экран не помещается весь результат вычислений.
Поняв эту простую истину, я решил, что основным отличием моего приложения будет именно продуманный интерфейс. В конце статьи я приведу примеры того, что мне удалось добиться.
Разработка
Разработку приложения я начал ещё в июне 2011 в свободное от работы время. В качестве движка вычислений был выбран JSCL; элементы GUI по большей части написаны мною, некоторые позаимствованы с просторов интернета; библиотека для построения графиков — AChartEngine (хотя не идеальна и имеет ряд довольно странных решений). Здесь стоит, наверное, добавить, что хотя я и выбрал стороннюю библиотеку для вычислений, в скором времени мне пришлось её форкать и исправлять баги/дописывать нужный функционал (она, кстати, сейчас доступна у меня на github’е).
В общем, было много фана, получено море опыта, выпита не одна чашка ароматного кофе и проведена не одна ночь перед компьютером.
Сейчас проект находится в активной фазе — продолжает дописываться функционал, почти каждую неделю выходят обновления с новыми фичами, фиксятся баги.
На момент написания статьи общее число собственных java классов в проекте равно 680 (включая внтренние классы), из которых 222 — в основном андроид-модуле (исходники), 276 — в модуле JSCL (исходники), 182 — в общем модуле (исходники).
Релиз
В какой-то момент времени я понял, что приложение уже готово для выпуска в массы. И после тестирования на устройствах коллег и знакомых Калькулятор++ появился в андроид.маркете.
Было это 16 октября.
Что получилось?
Как я писал выше — основной ставкой в Калькуляторе++ (далее К++) был продуманный интерфейс.
Как вы видите, в списке представлено довольно много простых вещей. Все вместе они сильно влияют на взаимодействие пользователя с приложением, доставляя первому удовольствие от работы, не мешая выполнять нужные операции быстро и эффективно.
Продвижение
График установок приложения:
Примечание: испанский язык появится только со следующей версии.
В этой главе также отмечу своё удивление тому, что для каждой страны продвигать приложение придётся отдельно (для меня было открытием то, что приехав в Европу и зайдя в андроид.маркет с местного компьютера, я не нашёл Калькулятор++ даже в первых 500 новых приложений). Конечно это хорошо для сильно локализованных приложений (расписания, переводчики и т. д.), но для приложений общего назначений — некий барьер.
Что дальше?
А дальше только одно — продолжение разработки; улучшение и допиливание приложения, вылизывание его кода для еще более удобной работы конечного пользователя.
Считаю, что Калькулятор++ — достойный конкурент на рынке калькуляторов в андроид.маркете, и нисколько не жалею о начале его разработки.
С вопросами, замечаниями, пожеланиями — связанными и не связанными с К++ — обращайтесь в личку или на почту, пишите комментарии. Обязательно отвечу =)
UPD Спасибо всем за замечания, ошибки, пожелания и комментарии.
UPD 2 По просьбе читателей добавил QR-code
UPD 3 На github’е есть небольшой issue tracker. Если не сложно, вводите туда баги, желаемые фичи и т.д., там будет проще мне с вами связаться + ни один запрос не будет пропущен.
Простой GUI калькулятор на Python #1. Создание дизайна приложения
В этой серии статей я научу вас делать простой кроссплатформенный десктопный калькулятор. Здесь не будет тригонометрических функций, процентов, интегралов и других полезных вещей. Вы сможете добавить их по своему желанию.
Мы будем использовать язык Python, фреймворк Qt, библиотеку PySide6, сразу установим её:
pip install PySide6
Qt Designer
Создавать интерфейс мы будем в приложении Qt Designer. Его можно скачать отдельно или найти в папке установленного PySide. Для этого перейдем по пути:
Создаем Main Window, т.е. главное окно приложения.
Сразу убираем ненужные меню и статус бары.
Название приложения можно изменить в свойстве главного окна windowTitle.
Элементы калькулятора
Перетащим нужные элементы в интерфейс. В нашем калькуляторе будет поле ввода Line Edit.
Label с временным выражением над этим полем ввода.
Grid Layout для кнопок.
Просто закинем эти элементы и выберем «Lay Out Vertically» для центрального виджета.
Теперь закинем кнопки в Grid Layout, у меня будет 4 колонки и 5 рядов. Чтобы скопировать и вставить элемент, можно перетащить его с зажатой клавишей Ctrl.
Поставим текст во все кнопки. Для Backspace мы позже поставим иконку.
Проставим горячие клавиши для всех кнопок, кроме Clear и отрицания. За это отвечает свойство shortcut. К сожалению, в Qt Designer нельзя указать несколько горячих клавиш для одной кнопки. Мы сделаем это позже в коде (для точки и равно).
Запишем 0 в Line Edit и выберем правое горизонтальное выравнивание для текста.
Нам нужно сделать так, чтобы пользователь не мог вводить что попало в это поле, чтобы он мог его только читать. Для этого существует свойство readOnly.
Укажем максимальную длину в 16 символов, как в калькуляторе Windows.
Запишем в лейбл какое-нибудь выражение и поставим правое выравнивание.
Чтобы посмотреть превью дизайна используйте сочетание клавиш Ctrl + R.
Давайте назовем элементы, чтобы в коде было проще обращаться к ним.
Размерная политика элементов
Вы спросите: «Почему интерфейс так плохо выглядит?». Все потому, что у элементов не настроена вертикальная политика. Для лейбла и поля поставим Maximum.
Конечно же не забываем сохранить файл интерфейса. Он имеет расширение ui. Обычно я называю файл «design.ui».
Для всех кнопок поставим Expanding.
Стилизация калькулятора
Сначала нужно определиться с цветовой палитрой. Я буду использовать 4 цвета:
Почти черный #121212 для фона.
Белый #FFF для текста кнопок и поля ввода.
Серый #666 для фона кнопок при наведении.
Серый посветлее #888 для текста временного выражения и фона кнопок при нажатии.
В Qt Designer поддерживается язык css. Напишем простенький stylesheet для главного окна. Для всего виджета указываем белый цвет текста и почти черный цвет #121212 для фона.
Я буду использовать бесплатный шрифт Rubik из библиотеки Google Fonts. Он довольно приятный.
Давайте посмотрим, что получается.
Давайте изменим кнопки на плоские с прозрачным фоном.
Теперь напишем изменение фона кнопок при наведении и нажатии. При наведении цвет фона будет меняться на серый #666, при нажатии на серый #888.
Посмотрим на результат.
Стили для Line Edit и Label
Теперь разберемся с Line Edit. Поставим размер шрифта 40pt и уберем границы. Я не буду делать какие-то изменения при наведении и нажатии, потому что пользователь не может взаимодействовать с этим полем.
Для лейбла укажем только цвет #888. С этим элементом пользователь тоже не может взаимодействовать.
Иконки
Теперь зайдем на Google Icons и возьмем черную иконку калькулятора и белую иконку backspace. Я возьму Sharp иконки с размером 24 пикселя. Сохранить нужно в формате PNG.
Далее идет нудный процесс вытаскивания иконок из скачанных архивов. Я думаю, вы справитесь.
Создадим файл ресурсов. Resource Browser > Edit Resources > New Resource File.
Я сохранил файл с названием «files.qrc». Добавим префикс для иконок.
Закинем туда наши две иконки.
Поставим иконку Backspace:
icon > choose Resource
Поставим размер 24 x 24 пикселя в свойстве iconSize.
То же самое проделаем для иконки приложения.
Финальные штрихи
Почти готово. Убираем текст из лейбла. Ставим размер главного окна. У меня будет 300 на 500 пикселей. Такой же размер поставлю минимальным для приложения.
Редактируем интерфейс в коде
Файл интерфейса представляет собой файл с xml разметкой. Мы можем найти блок кода с указывающей рукой, введя в поиске по коду «Pointing».
Заметим, что этот блок кода идет после блока размерной политики. Поэтому нам нужно заменить:
В современных редакторах это сделать очень просто. Например, в VS Code нужно нажать Ctrl + H.
Впишем нужные блоки кода и нажмем Replace All (Ctrl + Alt + Enter).
Проверяем в дизайне.
Дизайн сделан, поздравляю!
Конвертируем файл ресурсов и интерфейса
Для начала нам нужно конвертировать файл ресурсов в питоновский файл. Для этого напишем в терминале:
pyside6-rcc «название файла ресурсов» > «название Python файла на выходе»
pyside6-rcc files.qrc > files_rc.py
Теперь конвертируем в Python файл интерфейса. Для этого введем в терминал тот же самый синтаксис, но теперь используем pyside6-uic:
pyside6-uic design.ui > design.py
Если у вас на выходе получаются файлы с кодировкой UTF-16, конвертируйте их в UTF-8 во избежание дальнейших проблем.
Штош, в следующей статье напишем код для главного функционала калькулятора. До встречи.