Compose Broadcast
5.9K subscribers
375 photos
95 videos
617 links
Все о Jetpack Compose и Compose Multiplatform

По сотрудничеству - @ab_manager
Download Telegram
Kelp - плагин для Android Studio, который улучшает интеграцию собственной дизайн системы на Jetpack Compose.

Что умеет плагин:
👉 Задать иконки для Composable функции в автокомплите
👉 Превью иконок в автодополнении
👉 Превью цветов из дизайн систем
👉 Генерация превью Composable функций в KDOC
👉 Создание live templates

Вся настройка происходит через сохранение json файла, а также есть Gradle плагин

#compose #androidstudio
Media is too big
VIEW IN TELEGRAM
Пример реализации mesh градиентов в Compose. Код найдете в статье(EN,5м)

#compose
⚙️ Вышел Jetpack Compose 1.7.8 c исправилением креш в BasicTextField

Новый compose BOM - 2025.02.00

#compose
Please open Telegram to view this post
VIEW IN TELEGRAM
⚙️ Готовится к релизу Compose 1.8.0 - вышла Beta 2

BOM файл - androidx.compose:compose-bom-beta:2025.02.00

#compose
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
⚙️ Инструкция(EN,2м) по реализации анимации прогресса двигающихся точек на Compose

🔗 Ссылка без VPN

#compose #анимация
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Статья(EN,8м) с реализацией подобного UI на. Compose

🔗 Ссылка без VPN

#compose
Инструкция(EN,5м) по созданию металлической кнопки на Compose

#compose
Carbon Compose Multiplatform (CMP) - опенсорс реализация дизайн системы IBM на CMP с поддержкой Android, Dekstop, iOS, Web WASM

#compose #uikit #android #ios #desktop #wasm
This media is not supported in your browser
VIEW IN TELEGRAM
⚙️ Исходный код реализации такого виджета на Compose смотрите на 🐱 GitHub

#compose #android
Please open Telegram to view this post
VIEW IN TELEGRAM
⚙️ Почему я не использую *Screen и выбираю Pane подход

Когда речь заходит о создании UI на Jetpack Compose с поддержкой смартфонов, планшетов и десктопов, важно не привязываться к физическим размерам экрана.

Чего я избегаю?
Я не использую именование Composable-экранов через *Screen, например:
// !!! не делайте так для экрана фичи
@Composable
fun HomeScreen() { /* UI */ }


Такой подход жестко связывает UI с понятием "экрана устройства", а это не всегда корректно, особенно в мире foldable-устройств и десктопов. UI каждой фичи должен уметь работать на всём пространстве что ему выделит контейнер, где будет показ UI фичи.

Что я использую вместо этого?
Я применяю концепцию Pane – это независимые контейнеры UI, которые адаптируются под выделенное для них место и не должны понимать ничего о размерах экрана, ориентации, расположении. Контейнер, где встраивается UI, сам определит всё и настроит UI через Modifier.
@Composable
fun HomePane(modifier: Modifier = Modifier) {
Column(modifier = modifier.fillMaxSize()) {
Text("Welcome to Home")
// Остальной UI
}
}


Такой подход позволяет:
✔️ Легко компоновать UI для разных конфигураций (например, показывать две панели на планшете и одну на телефоне).
✔️ Избежать привязки к Screen, что делает код гибче.
✔️ Улучшить переиспользуемость UI-компонентов.

📌 Как применять Pane в адаптивном UI?

Простейший пример, где на планшетах и десктопе мы показываем две панели, а на телефонах – только одну:
// Рутовая Composable функция приложения, которая понимает про текущее состояние приложения 
// на экране и в зависимости от этого располагает контент
@Composable
fun RootScreen(windowSizeClass: WindowSizeClass) {
if (windowSizeClass.widthSizeClass == WindowWidthSizeClass.Expanded) {
// Большой экран
Row(Modifier.fillMaxSize()) {
HomePane(Modifier.weight(1f))
DetailsPane(Modifier.weight(1f))
}
} else {
// Маленький или средний
HomePane()
}
}


❗️ Также важной частью работы с Pane является передача в неё Modifier параметра, через который контейнер панели будет настраивать размещение и другие параметры Pane.

Пост - это мой взгляд и рекомендация. В архитектуре и рекомендациях нет абсолютного правильного или неправильного подхода. Выбирать как делать - остаётся на вашей стороне.

#compose #android #adaptive #material #советы
Please open Telegram to view this post
VIEW IN TELEGRAM
Пример(EN,6м) реализации онбординга (рассказ про новые элементы приложения) пользователю на Compose Multiplatform. Решается задача определения положения Compose элемента на экране, затемнение фона и показ подсказки, где есть свободное место на экране

🔗 Ссылка без VPN

#compose #kmp #andorid #ios #desktop
Вышла третья Beta Compose 1.8.0, а вот Bom для него не появился ((( Исправили баги в UI и Foundation

#compose
Mesh - опенсорс утилита для создания и редактирования mesh-градиентов. Написана полностью на Compose Desktop с использованием UI Kit Jewel от JetBrains.

#compose #desktop
Как протестировать Compose Hot Reload для Desktop

Если вы хотите протестировать Compose Desktop Hot Reload, то следуйлет инструкции в официальном репозитории JetBrains. Используется специальная JDK, которая может автоматически скачаться через Gradle

#compose #desktop
Compose Text Editor - текстовый редактор со множеством возможностей на Compose Multiplatform: Android, JVM Desktop, WasmJS

#compose #android #desktop #wasm