Проект 17 (день 88)

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

Наконец-то свои карточки делаем 😆

#hackingwithswift

На видео заметны небольшие лаги. Сначала думал, что симулятор тормозит, но такое же поведение на реальном девайсе.
Что-то неправильно реализовано или это особенность SwiftUI DragGesture? 👀

Проект 17 (день 89)

Сегодня в программе (всё можно увидеть на видео):

🟢 Цветные карточки при свайпе. Влево - 🔴 вправо - 🟢
При включенной опции accessibilityDifferentiateWithoutColor мы не красим карточки, а показываем индикаторы на экране куда смахивать правильные и куда неправильные карточки.

🟢 Таймер на экране и состояние активности приложения (когда можно смахивать карточки). Также когда приложение сворачивается - таймер останавливается. Если ничего не предпринимать, то несколько секунд будет потеряно, поскольку iOS не сразу останавливает таймер.

🟢 Финальный аккорд - кнопка перезапуска, если карточек больше не осталось.

Согласитесь классный курс? 🤩

#hackingwithswift

Проект 17 (день 90)

90 день, время летит, знания прибавляются ⏳

🟢 Пофиксили баги, оказывается они появляются не всегда просто так, а иногда намеренно, чтобы выучить новые уроки.
Самый забавный баг заключается в том, что не только верхнюю карточку можно смахнуть, но и любую другую из стека. В основном баги были связаны с accessibility. А так же с анимацией (не назвал бы это багом), добавили bounce анимацию, если карточка была недостаточно далеко отведена и отпущена.

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

Добавил карточки, которые, надеюсь, всем очевидны 😆

#hackingwithswift

Проект 17 (день 91)

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

➡️ Очищаю текстовые поля после добавления новой карточки
➡️ Пофиксил: если карточка была немного сдвинута вправо - при возвращении она становилась немного красной
➡️ При смахивании карточки влево, она возвращается обратно в стек. Это было самое сложное, т.к. пришлось переделать ForEach, который был основан на индексах. А так же реализовал разные обработчики свайпа вправо и влево.

#hackingwithswift

Начинаем проект 18 (день 92)

Это технический проект, где мы начинаем изучать особенности layout системы SwiftUI.
На мой взгляд, самая сложная тема, которая требует большого количества экспериментов. Поскольку порой поведение вьюшек, скажем, удивляет.

🔴 Основное правило определение размеров состоит из 3 шагов:
1️⃣ Parent предлагает доступное пространство (propose size)
2️⃣ Child выбирает свой собственный размер (chooses its size)
3️⃣ Parent позиционирует child внутри себя

🔴 alignmentGuide модификатор и кастомный VerticalAlignment. Тут я совсем не понял как это работает и нужно с этим отдельно разобраться #todo

🔴offset & position
🔸offset - относительное смещение, интересно, что не влияет на последующие модификаторы (например, background color);
🔸position - абсолютное позиционирование на экране.

Читал в группах по разработке, что layouts это одна из самых важных тем. Посмотрим как пойдёт дальше. Возможно, понадобится посмотреть дополнительные ролики или почитать статьи 👀

Как вам новый стиль эмоджи? 🔥 правда?

#hackingwithswift

Проект 18 (день 93)

Продолжаем знакомиться с layout системой 📕

🔴 GeometryReader - предоставляет информацию о размере и положении вью внутри доступного пространства. С его помощью можно центрировать элемент вручную, иметь адаптивный размер вью, создавать кастомный layout.

GeometryReader { proxy in
    Image(.example)
        .resizable()
        .scaledToFit()
        .frame(width: proxy.size.width * 0.8, height: 300)
}

К слову, containerRelativeFrame работает не так, при использовании его внутри HStack, VStack. GeometryReader в этом случае справляется “лучше”.

Тут есть и обратная сторона, элемент с таким frame будет позиционирован не по центру, а в левом верхнем углу. Фиксится это так:

GeometryReader { proxy in
    Image(.example)
        .resizable()
        .scaledToFit()
        .frame(width: proxy.size.width * 0.8)
        .frame(width: proxy.size.width, height: proxy.size.height)
}

Выглядит как костылище! Нет, это он и есть… Сначала говорим картинке, что у неё ширина 80%, а потом говорим, что оно должно отображаться на всей доступной области.

🔴 У GeometryReader есть возможность получить координаты относительно CoordinateSpace: глобальный, локальный, кастомный. Например, proxy.frame(in: .global).midX.
Область применения мне пока не понятна, но безусловно хорошо, что такое есть.

🔴 В ScrollView есть возможность получить доступ к неявному GeometryReader через visualEffect.

Text("Number \(num)")
    .font(.largeTitle)
    .padding()
    .background(.red)
    .frame(width: 200, height: 200)
    .visualEffect { content, proxy in
        content
            .rotation3DEffect(.degrees(-proxy.frame(in: .global).minX) / 8, axis: (x: 0, y: 1, z: 0))
    }

Классный эффект с вращающимся текстом при скроллинге 😺

Текущий этап изучения: ох уж этот SwiftUI 👶
Мне определенно нужно будет пройти этот проект ещё раз. Но я надеюсь, что я не столкнусь с проблемами связанными с layout 😆

#hackingwithswift

Всем привет и извиняюсь за недельное отсутствие ⏳

После небольшого перерыва я снова в строю и продолжаю путь за знаниями. Честно говоря, я не сидел сложа руки - каждый день смотрел видео по разработке на Swift и SwiftUI

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

А пока хочу порекомендовать вот этот канал: https://www.youtube.com/@Kavsoft
Очень интересно наблюдать, как там создают красивые эффекты и функциональные View. Ставь 🔥 если тоже подписан(а)

Замечу, что пошла последняя неделя 100 дневного курса
Как-то даже грустно 😢

Но впереди реализация моего приложения! И я с нетерпением жду этого ⏳

Проект 18 (день 94)

Заключительная часть Проекта 18 включает:
🔴 Тест - результаты которого можно найти в предыдущем посте https://t.me/c/2294310025/234
🔴 Челленж - видео будет в следующем посте. В основу взят список с различными (фиксированными цветами).

Челенж небольшой, всего 3 задания:
🟢 эффект прозрачности для элементов сверху списка
🟢 масштабирование - сверху элементы меньше размером, внизу больше
🟢 менять цвета в зависимости от положения на экране, но я также добавил изменение цвета ещё и в зависимости от индекса

#hackingwithswift

Зачесались руки поэкспериментировать с шейдерами ✌️