Давайте создадим цифровые часы с помощью нового просмотра на холсте

Вы слышали о crontab? Нет, он не герой DC. Он существует с 1975 года, целую вечность. iOS раньше запускала crontab, хотя просматривая сообщения SO, он давно исчез. Конечно, он все еще присутствует в OS X, введите «crontab -l» под оболочкой, и вы получите ответ.

Но, возможно, еще не все потеряно, поскольку с iOS 15 Apple запустила новое представление, посвященное запуску заданий по расписанию, немного похожее на crontab. Я говорю «запустить работу», я имею в виду обновление обзора по расписанию. Теперь; Я должен признаться, что не совсем понимал, как мне следует использовать эту новую точку зрения. Я не был уверен, потому что у нас уже был планировщик в SwiftUI. Планировщик, который выглядит так.

let timer = Timer.publish(every: 0.5, on: .main, in: .common).autoconnect()

Планировщик, который вы можете поймать в своем коде и принудительно обновить вид. Обновление каждые 0,5 секунды в показанном случае.

.onReceive(timer) { _ in
  refresh += 1
}.id(refresh)

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

Начнем с самого простого TimelineView, которое я могу построить.

Фрагмент кода, который выдаст это как результат.

Краткое

Я хочу превратить это в часы, цифровые часы с цифрами. Он должен показывать секунды, минуты и часы… не более того.

Для этого моей первоначальной идеей было проанализировать строку, которую я получил от TimelineView, хотя вскоре у меня возникли сомнения, так как я был уверен, что она не выдержит хорошего возраста - кто знает, что Apple будет сообщать здесь по умолчанию в SwiftUI 4.0. Я решил, что лучшим решением будет использовать директиву onChange, чтобы наблюдать за изменением этой строки. Вот мой первый фрагмент кода для часов:

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

Теперь, помимо того, что скучно; есть более серьезная проблема - небольшой джиттер, который вы видите при его изменении. Все зависит от ширины отображаемых чисел. Ширина числа 2, например, больше 1. Я пытался исправить это с помощью рамки, но это все равно не сработало.

Теперь, если вы посмотрите, как это работает, и немного подумайте о проблеме - имеет смысл сосредоточиться на исправлении одной цифры. Если мне удастся заставить работать однозначное число, значит, я в деле. Я также хотел воспользоваться возможностью, чтобы сделать часы более интересными, и вспомнил статью, которую я опубликовал много лет назад, эту. Я решил, что попробую использовать и здесь Rotation3DEffect. После нескольких попыток я получил этот код.

Правильная дорога с точки зрения анимации, менее скучная. Чистый результат выглядит так:

Но, как вы видите на этом анимированном GIF-изображении, у меня все еще есть мерцание. Конечно, я мог бы избавиться от границы, но если бы я поместил два из этих представлений рядом друг с другом, они бы спорили о пространстве, поскольку значения менялись. Меня все еще трясет.

Что мне нужно было сделать, так это использовать изображение. Идеальная возможность использовать другое новое представление в iOS 15, а именно Canvas.

Код, который я бы встроил в предыдущую структуру, которую я создал для текстовых объектов. Легкое обновление.

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

Затем я установил переключатель, чтобы выбрать различные виды 3D-эффектов в зависимости от того, какая цифра поворачивается. У тебя есть выбор.

Приведенный выше код представляет представление, которое я бы неоднократно называл в timelineView фигурных скобках. С чистым результатом вы видите заголовок этой статьи. Признаюсь, я немного отредактировал его, чтобы вы могли видеть, как время течет быстрее, и я включил больше TimelineView, чем показываю здесь, всего шесть.

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

В общем, что подводит меня к концу этой статьи. Спасибо за прочтение.