Приложение Весы для iPhone с использованием 3D Touch

После выхода на рынок iPhone 6s и iPhone 6s Plus с экранами, которые поддерживают технологию 3D Touch, а App Store практически сразу появилось приложение для взвешивая слив и персиков.

Не могу с уверенностью сказать почему именно этих фруктов, но могу сказать однозначно почему именно фруктов. Дело в том, что сенсор экрана iPhone работает по принципу определения утечки тока с поверхности сенсора, а для этой самой утечки нужен живой палец либо что-то, что обладает электрической емкостью. Думаю, каждый знает, что на пластиковые стилус или ноготь экраны i-девайсов не срабатывают. Именно поэтому взвесить на том приложении что-то металлическое не получалось. Но фрукты имеют электрическую емкость, на них срабатывает сенсор и нормально срабатывает непосредственно 3D Touch.

Очень быстро это приложение было удалено из App Store. Лично мне кажется, что это было сделано из-за недалеких американских пользователей, которые попытались взвесить на своих устройствах пудовые гири. Разумеется, устройства сломались и они их понесли в сервисные центры. А там они сказали что-то из серии: «Приложение скачано из официального магазина,   и там не предупреждали, что нельзя…».

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

Задача

Нам нужно написать приложение, которое состоит из одного контроллера, на котором будут приглашающая надпись, нарисованный круг в центре экрана, индикаторы веса в граммах и процентов от определяемой силы (дальше по тексту будет понятнее). При нажатии на экран в месте касания будет появляться круг, который будет увеличиваться или уменьшаться в зависимости от силы нажатия. Сразу нужно сказать, что на симуляторе подобное приложение протестировать не получится. Поэтому нужно будет запускать приложение на реальном устройстве. Как это сделать можно прочитать в статье  Запуск и тестирование своих iOS-приложений на устройстве без аккаунта разработчика и без Jailbreak. По окончанию должно получиться вот такое приложение:

 

Создание проекта

Октройте XCode 8, выберите создание нового проекта, шаблон Single View Application.

Построение интерфейса в Xcode

Перейдите в Soryboard, перетащите из библиотеки элементов на контроллер несколько UILabel , разместите их ближе к верхнему или нижнему краев контроллера.  У меня получилось так:

Для эстетической привлекательности место куда будем класть предметы мы выделим красной окружностью. Можно взять уже готовую картинку с кругом, но это же не наш метод)). Круги мы нарисуем методами Core Graphics. Удобнее будет создать класс-наследник от UIView и уже с ним работать.

Добавьте в проект новый файл, назовите его ScaleView. Создайте в этом файле класс ScaleView который наследуется от UIView.

 

Далее перейдите в StoryBoard, перенесите на контроллер из библиотеки элементов UIView и расположите его в центре нашего контроллера. Выберите только что добавленный UIView и в Identity Inspector задайте класс ScaleView, который мы создали ранее.

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

Рисуем круги

Перейдите в файл ScaleView.swift. В классе ScaleView мы создали метод draw(_ rect:), который мы будем использовать для рисования внутри области отображения этого UIView.

Добавьте следующий код в метод draw(_ rect:)

  1. Получаем графический контекст, в котором мы буде рисовать
  2. Задаем цвет, которым будем рисовать. В данном случае. — это красный цвет
  3. Устанавливаем ширину лини, которой будем рисовать.
  4. Задаем путь для рисования в виде дуги, центр которой расположен в центре ScaleView, радиусом равным половине ширины ScaleView минус 14 ( это чтобы вписать дугу в видимую область View), и длинной дуги — по всей окружности в 360 градусов. Прошу учесть, что мои цифры ширины жестко заданы в предыдущем пункте с помощью констрейнтов.
  5. Рисуем по заданному пути заданными параметрами

Можно скомпилировать для проверки, однако также можно задать директиву для отображения изменений прямо в Interface Builder. Также как мы делали в циклах статей  CALayer, или как закруглить углы, сделать тень и градиент на Swift

Вся магия в директиве @IBDesignable. Отметьте этой директивой класс ScaleView

После этого перейдите в StoryBoard, немного подождите и вы увидите нарисованную красную окружность в центре ViewController

Давайте потренируемся и нарисуем еще один круг поменьше и потоньше. Для этого в файле ScaleView в метод draw(_ rect:) добавьте следующий код:

Думаю, понятно и так что мы добавили. По сути мы добавили еще одну окружность, серого цвета, радиусов в четверть ширины ScaleView и шириной в одну точку.

Результаты в StoryBoard:

Финалом наших подготовительных работ будет создание аутлетов для ScaleView и двух UILabel, который буду показывать силу нажатия на экран в процентах и вес в граммах. Ctrl-перетасктвние элементов из  ViewController создаст нужные аутлеты.

 

Непосредственно — весы

Итак, мы вплотную подошли к моменту измерения силы нажатия на экран.  Перейдите во  ViewController и в методе viewDidLoad() добавьте стартовые значения для всех UILabel

Как и все процессы, связанные с нажатиями на экран, в контроллере их можно отловить в методе touchesMoved(_::). Данный метод срабатывает когда касания экрана происходят во времени. Т.е. Если палец стоит на экране или движется по нему срабатывает этот метод и можно отследить все касания и их свойства.  Добавьте его во ViewController и напишите следующий код:

Вся механика iOS приложения Весы заключается в этом методе. Все остальное, что мы будем делать дальше в этом уроке — это доработки. Всю основную работу мы уже сделали. Давайте разбирать по пунктам

  1. Из всего множества касаний экрана выберем первое
  2. Данная директива проверяет установленную операционную систему на устройстве и пропускает далее только если версия операционной системы 9.0 и более. Работа с  3D Touch стала возможной только с 9-ой версии iOS. Пытаться его обработать в боль ранних версиях не имеет смысла
  3. А в этой строке идет проверка устройства на поддержку экрана с функцией 3D Touch. Ведь iOS версии 10 может стоять и на iPhone 6, но от этого экран этого смартфона не начнет различать силу нажатия. Данную проверку необходимо проводить по строгому требованию Apple
  4.  У касания есть свойство force в которе передается сила нажатия каждый раз, как срабатывает метод touchesMoved(_::). И в этой строке мы сравниваем значение текущей силы нажатия и максимально возможного значения силы нажатия. И если сила нажатия больше максимальной, то в наши UILabel мы передаем максимальные значения, а именно — 100 % силы и 385 грамм. Тут следует отметить почему именно 385 грамм. Дело в том, что технология 3D Touch сделана именно так, что 100% силы нажатия соответствуют 385-ти граммам. Соответственно получай процент силы нажатия мы можем легко вычислить вес в граммах.
  5. Вот тут эти вычисления и делаем. В этой строке вычисляем процент силы нажатия
  6. Тут вычислим вес в граммах, исходя из формулы 100% = 385 грамм
  7. Это простое округление граммов до целого
  8. Передаем значения процента силы и веса в граммах в наши  UILabel

Прежде чем запускать и проверять приложение нужно добавьте еще один метод, который срабатывает в момент, когда все касания на экран прекращаются touchesEnded(::), для того чтобы задать начальное положение наших UILabel и передать в них значения 0% и 0 грамм. Добавьте этот метод в класс ViewController.

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




Доработки

Основной функционал готов, но я при написании этого приложение решил добавьте две вещи:

  1. При достижении максимального значения я хочу чтобы срабатывал виброотклик как в статье Haptic feedback на iPhone 6s
  2. Обновление значений в UILabel происходят очень быстро, (я думаю вы это заметили при тестировании) поэтому нужно добавить некую плавность.
  3. В месте нажатия должен появляться полупрозрачный круг. Его диаметр должен увеличиваться по мере увеличения силы нажатия и уменьшаться по мере уменьшения силы нажатия

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

Виброотклик Haptic feedback

Импортируем фрэеймворк AudioToolbox перед декларацией класса ViewController, а также добавим свойство isPalySound для исключения многократного проигрывания виброотклика.

Далее внесите изменения в метод touchesMoved(::), чтобы он выглядел следующим образом:

Ничего сложного — при запуске iOS приложения, а в данном случае при инициализации ViewController и создании свойства класса isPlaySound мы включаем возможность проигрывания звуков — в том числе и виброоткликов. При достижении максимальной силы нажатия происходит проверка isPlaySound (1)  и если он true то выполняется вибрация и сразу срабатывает запрет (2)  на проигрывание вибрации. Этот запрет снимается (3), если сила нажатия становится меньше максимально возможного значения.

Плавность обновления

Теперь про плавность. Обновления надписей присходит очень быстро, со скоростью срабатывания метода touchesMoved(::), а это несколько сотен срабатываний в секунду. Для Уменьшения частоты обновления надписи я добавил свойство класса ViewController isUpdate и поставил наблюдателей свойств didSet.

Суть подобной конструкции в том, что как только мы устанавливаем данное свойство в значение false оно возвращается в значение true через 0,01 секунды. Соответственно при записи текста в UILabel мы будем устанавливать значение свойства isUpdate в значение false и не позволим обновлять надписи пока оно не станет true. Поэтому обновления записей будет происходить у нас не чаще одного раза в сотую доли  секунды.

В методе touchesMoved(::) в ветке, где мы выводим показания % силы и веса в граммах измените код следующим образом:

Этого будет достаточно для придания плавности при обновлении надписей

Визуализация касания

Сначала давайте создадим UIView и сделаем его полупрозрачным и круглой формы. Для этого добавим свойство класса ViewController и сделаем первоначальные настройки в методе viewDidLoad()

Свойство есть, в нем есть View, но вот в какой момент его добавить на экран? Логично, что в момент начала касания. Во ViewController нужно добавить метод touchesBegan(::)

Также выбираем из множества касаний первое и работе с этим касанием

  1. Устанавливаем координаты центра circleView в точку касания
  2. Добавляем cicrcleView на экран

В метод touchesMoved(::) в ветке, где обрабатываются проценты и вес в граммах нужно добавьте строку:

Тут мы задаем матрицу трансформации для увеличения размеров cicrcleView по высоте и ширине. Значения которые я передал в эту матрицу — это результат подбора наиболее удобных значений. Подбором методом «тыка». Так что можете поэкспериментировать и выбрать значения, которые удобны вам.

Ну и наконец при завершении касаний нужно отменить трансформацию для cicrleView и убрать его с экрана. У нас уже есть метод, где можно это отработать. В метод touchesEnded(::) добавьте две строки:

Полностью код ViewController выглядит так:

Код файла ScaleView:

Ссылка проекта на GitHub

 




Один комментарий на “Приложение Весы для iPhone с использованием 3D Touch
  1. Serg:

    круто!!! ждем продолжения!

Добавить комментарий для Serg Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*