Главная » Хабрахабр » 3DTouch – Весы на iPhone

3DTouch – Весы на iPhone

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

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

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

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

Задача

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

image

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

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

image

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

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

image

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

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

image

import UIKit class ScaleView: UIView }

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

image

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

image

Рисуем круги

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

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

override func draw(_ rect: CGRect) { let context = UIGraphicsGetCurrentContext() // 1 context?.setStrokeColor(UIColor.red.cgColor) // 2 context?.setLineWidth(14.0) // 3 context?.addArc(center: CGPoint(x: 375 / 2, y: 375 / 2), radius: 375 / 2 - 14, startAngle: 0, endAngle: 2 * CGFloat(M_PI), clockwise: true) // 4 context?.strokePath() // 5
}

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

Можно скомпилировать для проверки, однако также можно задать директиву для отображения изменений прямо в Interface Builder.

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

import UIKit @IBDesignable
class ScaleView: UIView {
override func draw(_ rect: CGRect) { let context = UIGraphicsGetCurrentContext() context?.setStrokeColor(UIColor.red.cgColor) context?.setLineWidth(14.0) context?.addArc(center: CGPoint(x: 375 / 2, y: 375 / 2), radius: 375 / 2 - 14, startAngle: 0, endAngle: 2 * CGFloat(M_PI), clockwise: true) context?.strokePath() }
}

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

image

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

context?.setLineWidth(1.0)
context?.setStrokeColor(UIColor.lightGray.cgColor)
context?.addArc(center: CGPoint(x: 375 / 2, y: 375 / 2), radius: 375 / 4 - 14, startAngle: 0, endAngle: 2 * CGFloat(M_PI), clockwise: true)
context?.strokePath()

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

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

image

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

@IBOutlet weak var scaleView: ScaleView! @IBOutlet weak var forceLabel: UILabel! @IBOutlet weak var grammLabel: UILabel!

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

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

override func viewDidLoad() { super.viewDidLoad() forceLabel.text = "0% force" grammLabel.text = "0 грамм"
}

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

override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) { if let touch = touches.first { // 1 if #available(iOS 9.0, *) { // 2 if traitCollection.forceTouchCapability == UIForceTouchCapability.available { // 3 if touch.force >= touch.maximumPossibleForce { // 4 forceLabel.text = "100%+ force" grammLabel.text = "385 грамм" } else { let force = (touch.force / touch.maximumPossibleForce) * 100 // 5 let grams = force * 385 / 100 // 6 let roundGrams = Int(grams) // 7 forceLabel.text = "\(Int(force))% force" // 8 grammLabel.text = "\(roundGrams) грамм" } } } }
}

Все остальное, что мы будем делать дальше в этом уроке — это доработки. Вся механика 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

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

override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) { forceLabel.text = "0% force" grammLabel.text = "0 грамм"
}

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

image

Доработки

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

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

Этими дополнениями мы займемся в следующей статье 🙂


Оставить комментарий

Ваш email нигде не будет показан
Обязательные для заполнения поля помечены *

*

x

Ещё Hi-Tech Интересное!

[Перевод] Почему учёные считают, что Девятой планеты не существует

Представление художника о Девятой планете, как о ледяном гиганте, затмевающем центр Млечного пути, с изображённой на фоне солнцеподобной звездой. Орбита Нептуна показана как небольшой эллипс вокруг Солнца. В отличие от крохотных миров, обнаруженных ранее в поясе Койпера, типа Плутона или ...

[Перевод] [ конкурс ] Топ-25 игровых консолей (тряхнём стариной)

Каждый помнит свою первую игровую консоль — тот момент, когда её принесли в дом, и тот невероятный миг, когда началась его первая игра. Сегодня мы хотим представить вашему вниманию топ-25 игровых консолей, составленный ресурсом ign.com. Начнём с 25-го места. А ...