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

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

Всем привет! 👋

Думаю, настало время дать оценку 100-дневному курсу по SwiftUI от hackingwithswift.
https://www.hackingwithswift.com/100/swiftui

🔸 Общее впечатление: 5/5
Мне определенно заходит такой формат. Отличное сочетание теории, самостоятельной работы и тестов для самопроверки.

🔸 Понятность материала: 4/5
В целом почти все темы понятны, но после прохождения курса ощущается наличие некоторых пробелов.

🔸 Подача: 5/5
Формат видео удачно построен, живое общение Пола приятно смотреть. За дублирование темы в виде текста отдельный плюс.

🔸 Полезность: 5/5
Открыл для себя разработку UI приложений. Пришло понимание как это работает на самом базовом уровне.

#hackingwithswift