✂️ Обрезка в Jetpack Compose

Обрезка — это удаление частей контента за пределами заданной формы. Представьте, что вы используете формочки для печенья: всё, что находится внутри формочки, остаётся, а всё, что снаружи, удаляется.

В Compose это делается с помощью Modifier.clip функции:

Image(
    painter = painterResource(R.drawable.avatar),
    contentDescription = null,
    modifier = Modifier
        .size(72.dp)
        .clip(CircleShape)
)

Здесь изображение обрезается по кругу, независимо от фактических границ растрового изображения.

📌 Пользовательские Формы

Если встроенных фигур (CircleShape, RoundedCornerShape и т. д.) недостаточно, вы можете создать собственную Shape и нарисовать свой собственный контур. Например:

class SquishedOvalShape : Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        return Outline.Generic(
            Path().apply {
                addOval(Rect(0f, size.height / 4f, size.width, size.height))
            }
        )
    }
}

Примените его, как и любую другую форму:

Modifier.clip(SquishedOvalShape())

🐸 Библиотека мобильного разработчика

#PixelPerfect #MiddlePath #Android

🔴 Индикатор пульса в Jetpack Compose

Индикатор пульса — это простой, но эффективный элемент пользовательского интерфейса, который помогает визуализировать состояние подключения или активности. В отличие от индикатора загрузки, он передает идею о сигнале, исходящем из центральной точки, что особенно полезно для отображения состояния GPS или сетевого подключения.

Вот полная составная функция, которая отображает индикатор пульса:

@Composable
закрытый метод PulseIndicator(
    @DrawableRes значок: Int,
 модификатор: Modifier = Modifier
) {
    val periodMs = 3600L
    val offsetsMs = longArrayOf(0L, 1200L, 2400L)

    val startNs = запомнить { System.nanoTime() }
    var frameTimeNs by запомнить { mutableLongStateOf(startNs) }

 LaunchedEffect(Единица измерения) {
        while (true) {
 withFrameNanos { now -> frameTimeNs = now }
 }
 }

    (offsetMs:  Long)фазафункция: число с плавающей запятой {
        val elapsedMs = (frameTimeNs - startNs) / 1_000_000L + offsetMs
        return ((elapsedMs % periodMs).toFloat() / periodMs.toFloat())
 }

 Box(modifier.size(80.dp), contentAlignment = Alignment.Center) {
        (p: 
        Float )Кольцофункция@Composable = Box(
 Модификатор
 .matchParentSize()
 .graphicsLayer {
 scaleX = 1f + 0,8f * p
 scaleY = 1f + 0,8f * p
 alpha = 1f - p
 }
 .border(1,5.dp, Color.White.copy(alpha = 0,9f), CircleShape)
 )

 Кольцо(фаза(смещения[0]))
 Кольцо(фаза(смещения[1]))
 Кольцо(фаза(смещения[2]))

 Box(
 Modifier
 .size(80.dp)
 .background(Color.White, CircleShape),
 contentAlignment = Alignment.Center
 ) {
 Image(
 painter = painterResource(icon),
 contentDescription = null,
 modifier = Modifier.size(32.dp)
 )
 }
 }
}

❓ Как это работает

➖ Хронометраж анимации

Компонуемый элемент использует withFrameNanos внутри LaunchedEffect. Это позволяет получить доступ к текущей временной метке кадра и обеспечивает плавность анимации, пока компонуемый элемент находится на экране. Когда компонуемый элемент покидает композицию, сопрограмма автоматически отменяется.

➖ Расчет фазы

Функция phase(offsetMs) преобразует прошедшее время в значение между 0f и 1f. Каждое кольцо смещено (0, 1200, 2400 мс), поэтому они расширяются в разные моменты. Это создаёт иллюзию непрерывных волн.

➖ Рендеринг кольца

Каждое кольцо изображается в виде Box с круглой рамкой. Его размер и непрозрачность изменяются с помощью graphicsLayer:

🔘 scaleX и scaleY постепенно увеличиваются от 1f до 1.8f.
🔘 alpha плавно переходит от 1f к 0f.

Вместе они образуют расширяющийся, затухающий круг.

➖ Значок ядра

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

🐸 Библиотека мобильного разработчика

#PixelPerfect #MiddlePath #Kotlin

🔍 Управление навигацией в SwiftUI с помощью NavigationPath

NavigationStack и NavigationPath в SwiftUI предоставляют мощный и гибкий способ выполнять программную навигацию в приложении. Когда вы управляете навигацией, часто возникает необходимость программно открывать (push) и закрывать (pop) экраны. NavigationPath позволяет делать это, сохраняя типобезопасность и гибкость.

🔹 NavigationStack(root:)

Инициализатор по умолчанию задаёт корень навигационной иерархии и управляет путём навигации “за кулисами”. Если вы хотите получить больший контроль и управлять навигацией программно, можно хранить путь в переменной @State и передавать его в инициализатор NavigationStack(path:root:).

Параметр path должен быть Binding<Data>, и есть два способа его использования.

1️⃣ Типобезопасная навигация

Первый способ — использовать массив определённого типа, который реализует протокол Hashable. Это удобно, если весь стек навигации основан на одном типе данных.

@State private var path: [Color] = []

NavigationStack(path: $path) {
    List {
        ForEach(colors, id: \.self) { color in
            Button {
                path.append(color)
            } label: {
                ...
            }
        }
    }
    .navigationDestination(for: Color.self) { color in
        VStack {
            color
            ...
            Button("Pop to root") {
                path.removeAll()
            }
        }
        ...
    }
}

В примере выше навигационный стек поддерживается массивом объектов Color, который выступает в роли NavigationPath. Каждый раз, когда элемент добавляется в path, модификатор navigationDestination(for:) показывает соответствующий экран. Вызов path.removeAll() очищает стек и возвращает пользователя к корневому экрану.

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

Когда вы находитесь в корневом экране, массив пуст.
При переходе вперёд — он заполняется элементами, где последний элемент массива соответствует текущему экрану.
Чтобы открыть новый экран — добавляем элемент, чтобы вернуться назад — удаляем последний.

2️⃣ Универсальный NavigationPath для нескольких типов

Если навигационный стек может содержать разные типы данных (например, Color, String или пользовательские типы), лучше использовать NavigationPath. Он работает как type-erased список данных, но при этом сохраняет достаточно информации, чтобы SwiftUI знал, какой экран показать для каждого типа.

@State private var path = NavigationPath()

NavigationStack(path: $path) {
    List {
        Section("Colors") {
            ForEach(colors, id: \.self) { color in
                Button {
                    path.append(color)
                } label: {
                    ...
                }
            }
        }
        Section("Genres") {
            ForEach(genres, id: \.self) { genre in
                Button {
                    path.append(genre)
                } label: {
                    ...
                }
            }
        }
    }
    .navigationDestination(for: Color.self) { color in
        VStack {
            ...
            Button("Pop to root") {
                path.removeLast(path.count)
            }
        }
        ...
    }
    .navigationDestination(for: String.self) { genre in
        VStack {
            ...
            Button("Pop to root") {
                path.removeLast(path.count)
            }
        }
        ...
    }
}

С NavigationPath вы можете добавлять разные типы данных в стек. Для каждого типа нужно задать отдельный navigationDestination(for:destination:), чтобы описать, как отображать соответствующий экран.

Если вы добавите значение в NavigationPath, но не определите navigationDestination для его типа,
ошибки компиляции не будет — однако пользователь увидит пустой экран с предупреждением.

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

🐸 Библиотека мобильного разработчика

#PixelPerfect #MiddlePath #SwiftUI

✨ Эффект свечения в стиле Apple Intelligence

Новый язык дизайна Apple представил эффект светящейся анимированной обводки, которая изящно и динамично подсвечивает формы и компоненты. Давайте рассмотрим, как воссоздать этот эффект в SwiftUI с помощью многоразовых расширений.

🔹 Расширения для View

extension View {
    @MainActor
    func intelligenceBackground<S: InsettableShape>(in shape: S) -> some View {
        background(shape.intelligenceStroke())
    }
    
    @MainActor
    func intelligenceOverlay<S: InsettableShape>(in shape: S) -> some View {
        overlay(shape.intelligenceStroke())
    }
}

🔹 Базовая реализация для фигур

extension InsettableShape {
    @MainActor
    func intelligenceStroke(
        lineWidths: [CGFloat] = [6, 9, 11, 15],
        blurs: [CGFloat] = [0, 4, 12, 15],
        updateInterval: TimeInterval = 0.4
    ) -> some View {
        IntelligenceStrokeView(
            shape: self,
            lineWidths: lineWidths,
            blurs: blurs,
            updateInterval: updateInterval
        )
        .allowsHitTesting(false)
    }
}

🔹 Рендеринг слоёв свечения

private struct IntelligenceStrokeView<S: InsettableShape>: View {
    let shape: S
    let lineWidths: [CGFloat]
    let blurs: [CGFloat]
    let updateInterval: TimeInterval
    
    @Environment(\.accessibilityReduceMotion) private var reduceMotion
    @State private var stops: [Gradient.Stop] = .intelligenceStyle
    
    var body: some View {
        let layerCount = min(lineWidths.count, blurs.count)
        let gradient = AngularGradient(stops: stops, center: .center)
        
        ZStack {
            ForEach(0..<layerCount, id: \.self) { i in
                shape
                    .strokeBorder(gradient, lineWidth: lineWidths[i])
                    .blur(radius: blurs[i])
                    .animation(
                        reduceMotion ? nil : .easeInOut(duration: 0.5 + Double(i) * 0.2),
                        value: stops
                    )
            }
        }
        .task {
            while !Task.isCancelled {
                stops = .intelligenceStyle
                try? await Task.sleep(for: .seconds(updateInterval))
            }
        }
    }
}

🔹 Цветовая палитра

private extension Array where Element == Gradient.Stop {
    static var intelligenceStyle: [Gradient.Stop] {
        let colors = [
            Color(red: 188/255, green: 130/255, blue: 243/255),
            Color(red: 245/255, green: 185/255, blue: 234/255),
            Color(red: 141/255, green: 159/255, blue: 255/255),
            Color(red: 255/255, green: 103/255, blue: 120/255),
            Color(red: 255/255, green: 186/255, blue: 113/255)
        ]
        return colors
            .map { Gradient.Stop(color: $0, location: Double.random(in: 0...1)) }
            .sorted { $0.location < $1.location }
    }
}

🔹 Использование

// Фон
Text("Текст")
    .padding(22)
    .intelligenceBackground(in: .capsule)

// Наложение
Text("Текст")
    .padding(22)
    .intelligenceOverlay(in: .rect(cornerRadius: 22))

🔹 Заключение

Эта реализация показывает, как объединить несколько обводок, размытий и анимированных градиентов для достижения эффекта свечения, аналогичного интерфейсу Apple Intelligence. Результат работает с любым объектом InsettableShape. Его можно использовать для современной и выразительной подсветки кнопок, карточек или текстовых контейнеров.

🐸 Библиотека мобильного разработчика

#PixelPerfect #MiddlePath #SwiftUI

✨ Тень под карточкой в Jetpack Compose

Красивые мягкие тени делают интерфейс объёмным и аккуратным. В Compose этого можно добиться с помощью drawBehind, чтобы контролировать цвет, размытие и смещение тени — как в дизайне.

💡Реализация

@Composable
fun ShadowCard(
    modifier: Modifier = Modifier,
    content: @Composable BoxScope.() -> Unit
) {
    Box(
        modifier = modifier
            .drawBehind {
                drawRoundRect(
                    color = Color(0x1A000000), // мягкая полупрозрачная тень
                    cornerRadius = CornerRadius(16.dp.toPx()),
                    topLeft = Offset(0f, 6.dp.toPx())
                )
            }
            .background(Color.White, RoundedCornerShape(16.dp))
            .padding(16.dp)
    ) {
        content()
    }
}

Тень выглядит естественно, без резких границ, повторяет форму карточки и не «съезжает» на светлой теме.

📌 Применение

ShadowCard(
    modifier = Modifier
        .fillMaxWidth()
        .height(120.dp)
) {
    Text("PixelPerfect ", modifier = Modifier.align(Alignment.Center))
}

Такой подход легко адаптировать под любые формы и цвета. Главное — держать параметры тени (смещение, прозрачность, радиус) в синхронизации с макетами из Figma.

🐸 Библиотека мобильного разработчика

#PixelPerfect #JuniorKit #Android

✨ Организация представлений SwiftUI с помощью ToolbarContent и @ToolbarContentBuilder

По мере роста проектов SwiftUI одна из частых проблем — управление сложными иерархиями представлений. Даже простой экран может быстро превратиться в десятки вложенных модификаторов. После снятия лимита в 10 вложенных представлений стало проще писать глубоко вложенные body, но код стал труднее читать и сопровождать.

🔹 Разбираем крупные реализации body

Когда body растягивается на десятки строк, страдает читаемость. Лучше разбивать большие представления SwiftUI на мелкие подпредставления или выделять повторно используемые части в вычисляемые свойства или функции. Это сохраняет лаконичность и упрощает понимание, тестирование и повторное использование.

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

🔹 Проблема с панелями инструментов

Модификатор .toolbar позволяет создавать кнопки, меню и элементы управления, адаптируемые под разные платформы. Но если элементов становится много, код внутри .toolbar { ... } быстро теряет читаемость.
Перенести логику в вычисляемое свойство нельзя — .toolbar ожидает содержимое, соответствующее ToolbarContent.

🔹 ToolbarContent и @ToolbarContentBuilder

SwiftUI решает это с помощью:

• ToolbarContent — протокола для элементов панели инструментов;
• @ToolbarContentBuilder — билдера, создающего набор элементов панели.

Объединив их, можно вынести содержимое панели инструментов в отдельный блок, сделав body чище и понятнее.

Пример

struct DemoView: View {
    @State private var message = "Hello, world!"

    var body: some View {
        NavigationStack {
            Text(message)
                .font(.title2)
                .padding()
                .navigationTitle("Home")
                .toolbar { toolbarContent }
        }
    }

    @ToolbarContentBuilder
    private var toolbarContent: some ToolbarContent {
        ToolbarItem(placement: .navigationBarLeading) {
            Button { message = "Left tapped" } label: {
                Label("Left", systemImage: "line.3.horizontal")
            }
        }
        ToolbarItem(placement: .navigationBarTrailing) {
            Button { message = "Right tapped" } label: {
                Label("Right", systemImage: "star")
            }
        }
    }
}

🔹 Заключение

Использование @ToolbarContentBuilder для отделения содержимого панели инструментов от основного окна имеет ряд преимуществ:

• Улучшена читаемость: Ваш body текст по-прежнему сосредоточен на вёрстке, а логика панели инструментов реализована в другом месте.
• Лучшая организация: Группировка элементов панели инструментов в отдельном блоке позволяет с первого взгляда оценить их структуру и расположение.
• Масштабируемость: Когда на панели инструментов появляется несколько кнопок, меню или условная логика, поддерживать её в рабочем состоянии становится намного проще.

🐸 Библиотека мобильного разработчика

#PixelPerfect #MiddlePath #Swift

✨ Эффект ЭЛТ-экрана в Jetpack Compose

ЭЛТ-мониторы — это размытые края, линии сканирования и лёгкое свечение. Такой эффект можно воспроизвести в Compose с помощью GraphicsLayer, градиентов и размытия.

🔹 Базовый принцип

Мы один раз записываем контент во внеэкранный буфер и многократно перерисовываем его разными слоями.

val graphicsLayer = rememberGraphicsLayer()

Box(Modifier.drawWithContent {
    graphicsLayer.record { drawContent() }
}) {
    content()
}

Теперь drawLayer(graphicsLayer) можно использовать в любых эффектах.

🔹 Линии сканирования

Создаём повторяющиеся градиенты — вертикальные и горизонтальные:

private fun DrawScope.drawScanLines(alpha: Float, blend: BlendMode) {
    val c = Colors.Black.copy(alpha)
    drawRect(
        brush = Brush.verticalGradient(
            0f to c, 0.4f to c, 0.4f to Colors.Transparent, 1f to Colors.Transparent,
            tileMode = TileMode.Repeated, endY = 10f
        ),
        blendMode = blend
    )
}

Добавляем их поверх слоя:

.drawBehind {
    layer {
        drawLayer(graphicsLayer)
        drawScanLines(alpha = 1f, blend = BlendMode.DstOut)
    }
}

DstOut вычитает градиент и создаёт характерный "CRT-срез".

🔹 Размытие и свечение

Для реалистичного свечения рисуем несколько слоёв с разным blur/scale/alpha:

val blurLayers = listOf(
    Triple(5.dp, .3f, 1.02f to 1.03f),
    Triple(0.dp, .8f, 1f to 1f),
    Triple(10.dp, .6f, 1.001f to 1f),
)

Каждый слой:

Box(
    Modifier
        .matchParentSize()
        .blur(blur, BlurredEdgeTreatment.Unbounded)
        .graphicsLayer { scaleX = scale.first; scaleY = scale.second; this.alpha = alpha }
        .drawBehind {
            layer {
                drawLayer(graphicsLayer)
                drawScanLines(1f, BlendMode.DstOut)
            }
        }
)

🔹 Дрожание экрана

var shake by remember { mutableStateOf(Offset.Zero) }

LaunchedEffect(Unit) {
    while (true) {
        shake = Offset(
            Random.nextFloat() * Random.nextInt(-1, 1),
            Random.nextFloat() * Random.nextInt(-1, 1),
        )
        delay(32)
    }
}

И применяем:

.graphicsLayer {
    translationX = shake.x
    translationY = shake.y
}

🐸 Библиотека мобильного разработчика

#PixelPerfect #MiddlePath #Kotlin