Проект 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

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

День 95 - Челенж

❗️ Предлагается создать приложения для броска кубика (1, 2 или 3).

Что ж, оказалось сделать это не просто 😰 И признаться я с этим не справился. Хотя потратил на это больше одного дня, с перерывами, но всё же.

Изначально я хотел сделать зацикленный прокручивающийся список. ScrollView для этого не подходит, да и в целом, у SwiftUI нет подходящей реализации, и нужно делать её самостоятельно.

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

Результат далёк от идеала, увидеть это можно на видео.

1️⃣ Полупрозрачность даёт не тот результат, который я ожидал. Особенно при анимировании, вращение прозрачных чисел выглядит как пробел в “барабане”

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

3️⃣ Добавление нового “кубика” может создать его в невалидном состоянии.

#hackingwithswift

Хоть какой-то положительный прогресс 🥳

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

Я придумал как это можно обойти, даже с использованием “стены” (по факту не важно как затемнять, главное привязать это к количеству оборотов), нужно всего лишь:
⚡️ Воспользоваться таймером и делать изменения инкрементальными. Тогда в анимации будет отражено изменяющееся затемнение.

Тут сломались генераторы, возможно из-за работы одного и того же таймера, но чинить я это сегодня не буду 🙈

Проект 19 (день 96). Подготовка к написанию приложения для поиска лыжных курортов.

🔴 NavigationSplitView - знакомимся с нюансами разработки под iPad, но очень поверхностно. Рассматривали как можно оптимальнее использовать большой экран. Единая кодовая база - 🔥

🔴 alert() & sheet() можно использовать с опциональными значениями.

Button(“Кликай”) {
    selectedUser = User()
}
.sheet(item: $selectedUser) { user in
    Text(user.id)
}

🔴 Group - view, как следует из названия, для группировки, без влияния на layout. Parent будет ответственным за отображение (вертикально, горизонтально, или по z оси). Можно задавать один стиль для набора вьюшек.

🔴 Поиск по вьюхе! Просто добавляем .searchable модификатор и появляется search bar

struct ContentView: View {
    @State private var searchText = ""

    var body: some View {
        NavigationStack {
            Text("Searching for \(searchText)")
                .searchable(text: $searchText, prompt: “Найдём что-нибудь?”)
                .navigationTitle("Searching")
        }
    }
}

🔴 @Observable как Environment элемент. Если не хочется передавать объект во вложенные вьюхи через конструктор (придется передать в каждую вью в иерархии), можно положить в .environment.
Выглядит как глобальные переменные, которые с пелёнок учат не использовать. На бэкэнде с этим хорошо справляется Dependency Injection.

#hackingwithswift

Paul Hudson так часто использует ее в примерах, что я не мог пройти мимо 😁