Приложение «Секундомер и таймер»

Настройка приложения

Приложение будет довольно простое и аскетичное, поэтому настройки тут минимальны:

• Название приложения «Секундомер и таймер».
• Можно подобрать картинку для иконки, например, такую:

Дизайн-макет

Первый экран

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

Внешний вид:

Компоненты:

Настроим Экран:

• Выравнивание по горизонтали — Центр.
• Выравнивание по вертикали — Центр.
• Отключить показ заголовка и статус-бара.
• Остальные настройки по желанию.

Добавим на экран 2 кнопки. Внешний вид можно настроить как угодно или оставить по умолчанию. Отличатся они будут только названием компонента и текстом.

Первая кнопка:

• Название компонента — «Секундомер».
• Текст — «Секундомер».

Вторая кнопка:

• Название компонента — «Таймер».
• Текст — «Таймер».

Незамысловатый дизайн первого экрана закончен, переходим ко второму.

Второй экран

Добавим второй экран. Поскольку он будет отвечать за секундомер, дадим ему сокращенное название Sec.

Внешний вид:

Компоненты:

Настройки аналогичны первому экрану.

Добавим Надпись. В неё будем выводить значение пройденного времени в секундах. Стоит заметить, что здесь мы делаем самый простой секундомер, который будет считать секунды, не преобразуя их в минуты и прочее. Поэтому в надпись будет выводится числовое значение и не более.

Настроить внешний вид надписи можно как угодно, желательно, чтобы она визуально выделялась на фоне кнопок. Ну и текст надписи сделать «0», чтобы пользователь, открыв приложение, мог сразу понять, что секундомер готов к работе.

Теперь нужно добавить кнопки старта и остановки. Но чтобы они смотрелись более эстетично, сначала добавим горизонтальное расположение. Его настройки можно оставить по умолчанию.

А уже в горизонтальное расположение добавим 2 кнопки. Их оформить желательно в разном стиле (хотя бы с помощью цвета), чтобы проще воспринимались.

Первая кнопка:

• Название компонента — «Старт».
• Текст — «Старт».
• Цвет фона — зеленый.

Вторая кнопка:

• Название компонента — «Стоп».
• Текст — «Стоп».
• Цвет фона — красный.

Добавим последний компонент — Часы. Он будет делать всю работу. Но предварительно выключим таймер и уберем галочку с «Таймер всегда запущен».

Макет второго экрана готов.

Третий экран

Добавим третий экран. Раз это будет таймер, то и назовем его Timer. Настройки экрана аналогичны первому.

Внешний вид:

Компоненты:

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

Настройки:

• Выравнивание по горизонтали — Центр.
• Выравнивание по вертикали — Центр.
• Ширина — наполнить родительский.

Внутрь расположения добавим компонент Текст, отвечающий за ввод текста пользователем. Сюда мы будем вводить количество минут. Поэтому настройки следующие:

• Название компонента — Минуты.
• Текст — 0.
• Поставить галочку «Только Цифры», чтобы оградить себя от ввода букв туда, где их не должно быть.

Рядом добавим Надпись, чтобы пользователю было понятно, что здесь вводить. Её внешний вид может быть любой, кроме текста. Текст — «мин».

Мы добавили строку для ввода минут. Теперь требуется добавить строку для секунд. Сделаем её по аналогии.

Добавим второе горизонтальное расположение. Его настройки аналогичны первому:

Внутрь добавим Текст. Это будет поле ввода секунд, настроим его также, как и для минут. Только компонент должен называться «Секунды».

Добавим Надпись, которая будет содержать текст «сек». Чтобы было понятно, что в этой строке вводить нужно секунды. Оформление любое.

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

Добавим третье горизонтальное расположение. Здесь будут располагаться кнопки Старт и Стоп. Поэтому оформление можно сделать такое же, как и на экране секундомера.

Настройки горизонтального расположения:

Добавив в него 2 кнопки и настроим их также:

Последний компонент- Часы.

• Сделаем таймер выключенным.
• Уберем галочку у «Таймер всегда запущен».

Макеты трех экранов готовы, можно приступать к программированию.

Программирование

Первый экран

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

• Когда кликнут кнопку Секундомер — открыть экран секундомера.
• Когда кликнут кнопку Таймер — открыть экран таймера.

Второй экран

Запуск секундомера осуществляется по кнопке Старт, её и запрограммируем.

Когда кнопка Старт нажата:

• присвоить надписи текст «0» (это на случай, если секундомер уже запускался и текст отличается от нуля);
• включить таймер компонента Часы.

Когда же нажата кнопка Стоп, таймер должен быть остановлен:

А теперь самое интересное: собственно, функционал секундомера. Когда пройдет очередной интервал таймера (в нашем случае 1000 миллисекунд), числовое значение надписи увеличится на 1.

Секундомер готов!

Третий экран

Здесь программирование не сильно сложнее, чем на предыдущем экране. Компонент «Текст» работает и без дополнительного программирования, т.е. здесь нам не требуется дополнительно задавать команды для строк ввода текста, а только обрабатывать то, что уже введено.

Таймер должен начать работу, когда была нажата кнопка Старт. Но предварительно нам нужно перевести введенные пользователем данные в секунды. Поэтому мы сделаем такой блок:

• когда Старт Щелчок:
  • присвоить надписи Таймер значение суммы количества минут, переведенных в секунды, и количества секунд, введенных пользователем;
  • запустить таймер компонента Часы.

Для примера, пользователь ввел значения 2 минуты 5 секунд. Программа сначала переведет эти значения в секунды: 2*60 + 5 = 125 (секунд) и присвоит его надписи (т.е. пользователь увидит число 125).

Выше представлен простой вариант блока старта. Он не учитывает того, что пользователь может просто не заполнить поле минут или секунд (не оставив в нем даже нуля). Поэтому, если вы попробуете запустить программу с незаполненными полями, приложение выдаст ошибку. Чтобы этого избежать, нужно добавить проверку на заполнение поля. Если проверка не пройдена, принудительно присвоить полю значение «0».

Таким образом, блок программы кнопки Старт будет выглядеть вот так:

Запрограммируем кнопку Стоп, чтобы таймер останавливал отсчет.

И укажем, что когда пройдет очередной интервал таймера (1000 миллисекунд), из числового значения текста надписи вычиталась единица (т.е. осуществлялся обратный отсчет).

На этом программирование приложения завершено. Можно проверять на эмуляторе или создавать apk файл для телефона.

Самостоятельная работа

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

• найдите в интернете короткий звук,
• загрузите его в проект,
• добавьте на второй и третий экраны компонент Звук,
• запрограммируйте проигрывание звука в момент срабатывания таймера.