Обновить
5.62

Jetpack Compose *

декларативный UI Framework для Android

Сначала показывать
Порог рейтинга
Уровень сложности

Философия Compose

Время на прочтение10 мин
Количество просмотров6.3K

Всем привет! Недавно я начала изучать Jetpack Compose. Всё, что я изучаю по иностранным гайдам, я обычно перевожу, чтобы при повторном прочтении, мозг снова не тратил время на перевод. Мне кажется, этот фреймворк становится всё более популярен, поэтому хочу поделиться своим переводом Thinking in Compose с другими начинающими :)

Jetpack Compose — это современный декларативный UI Toolkit для Android, упрощающий написание и поддержку UI (пользовательского интерфейса) вашего приложения, и в этом гайде рассказывается за счёт чего это достигается.

Читать далее

Определение произвольной точки на полигоне. Jetpack Compose. Canvas. Algorithm

Уровень сложностиСредний
Время на прочтение5 мин
Количество просмотров2.1K

Каждый день мы работаем над улучшением наших проектов. Будь то инициатива заказчика, продукт корпорации либо Ваш собственный. Изучая отзывы пользователей своего проекта, я столкнулся с запросом ускорить действия пользователя на одном из ключевых экранов. Это можно делать разными способами - разбиение экрана на несколько, улучшение UI… Но рано или поздно придется прорабатывать UX.

Читать далее

Как я осваивал Jetpack Compose

Время на прочтение9 мин
Количество просмотров6.6K

Привет, я Михаил Селезнев, андроид-разработчик в компании 1221Systems. Поделюсь своими впечатлениями о Compose — будет интересно коллегам, которые думают о переходе на него. Расскажу, в чем были сложности и что помогло мне быстрее разобраться.

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

Само приложение написано на достаточно современном стеке: MVI, Koin, Coroutines + Flow, Jetpack Compose. При этом навигация реализована на фрагментах. В onCreateView возвращаем ComposeView, где в setContent прокидываем composable функцию.

Читать далее

Тестирование с помощью Compose

Время на прочтение6 мин
Количество просмотров5.5K

В последние годы в разработке Android наметился заметный сдвиг в сторону декларативных UI-фреймворков, и последним дополнением к этой экосистеме стал Jetpack Compose. Декларативные UI-фреймворки предлагают структуры контроля, с помощью которых можно менять способ отрисовки пользовательского интерфейса. Декларативно созданные пользовательские интерфейсы могут использовать эти структуры управления, что делает их более динамичными, чем императивные фреймворки, которые обычно используются для разработки под Android и IOS. 

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

Читать далее

Реализуем современный UI на Jetpack Compose

Время на прочтение7 мин
Количество просмотров8.1K

Всем привет, на связи Никита Пятаков, Android-разработчик в МТС Диджитал. В этой статье я расскажу вам о том, как в приложении Мой МТС была проведена работа над UI новой карточки услуги. Рассказ мой будет последовательным – сначала про саму задачку, потом про решение, которое разбито на подпункты.

Читать далее

Есть ли смысл начинать писать мобильное приложение не на Kotlin Multiplatform и Compose Multiplatform?

Уровень сложностиСредний
Время на прочтение6 мин
Количество просмотров13K

Всем привет! Меня зовут Борис Вербицкий, и я представитель того редкого типа iOS разработчиков, которые тепло относятся к Kotlin Multiplatform Project и рады появлению Compose Multiplatform. Здесь я решил поделиться своим опытом использования этих технологий, а также кое-какими размышлениями вокруг процессов с такой разработкой. Цель этой статьи - это поднять обсуждение предложенного мной подхода, послушать все за и против в комментариях.

Приятного чтения!

Читать далее

Использование Compose для ТВ-версии приложения Иви: мощный фреймворк для создания эффективных Android-приложений

Уровень сложностиСредний
Время на прочтение8 мин
Количество просмотров5.2K

В компании ИВИ, ведущем онлайн-кинотеатре, наша команда разработчиков занимается созданием приложения для платформы Android. Недавно мы успешно выпустили версию для Android TV, используя инновационный инструмент — Jetpack Compose. Несмотря на то, что библиотека Compose для ТВ еще находится в альфа-версии, мы хотим поделиться своим опытом, рассказать о трудностях, с которыми столкнулись, и обратиться к вопросу: стоит ли использовать Jetpack Compose, особенно для ТВ-приложений?

Читать далее

Библиотека «Jetpack Compose» для начинающего Android-разработчика

Уровень сложностиПростой
Время на прочтение13 мин
Количество просмотров16K

Здравствуй, дорогой читатель. Каждому Android-разработчику во время разработки своего приложения необходимо сталкиваться с созданием пользовательского интерфейса. Для этого существует несколько способов, и сегодня будет рассмотрен один из них - Jetpack Compose UI.

Jetpack Compose - это библиотека, которую представила Google в 2019 году. Данная библиотека позволяет удобным способом создавать и организовывать интерактивный UI, облегчает тестирование и дает возможность грамотно использовать ресурсы устройства.

В статье будет рассказано об основах данной библиотеки, рассмотрены конкретные примеры и приведено практическое задание, ответ на которое можно найти в данном репозитории.

Читать далее

Миграция приложения на Jetpack Compose

Уровень сложностиСредний
Время на прочтение9 мин
Количество просмотров13K

Jetpack Compose — крутой набор инструментов, который упрощает работу над интерфейсами для Android. С ним не нужно писать так много кода, как в обычных XML-разметках. А ещё в нём много полезных для разработчика фич — в этой статье расскажем о них подробно. И, конечно, выясним, как перенести UI и архитектуру приложений на Jetpack Compose и забыть View на 10 000 строк, как страшный сон.

Читать далее

Оптимизация анимации на Compose: крутим лоадеры, ищем неочевидные функции

Уровень сложностиСредний
Время на прочтение10 мин
Количество просмотров7K

Android-разработчик red_mad_robot Серёжа Чумиков рассказывает о том, как сделать классную анимацию, не перегрузив смартфон, почему ей не нужна рекомпозиция и как её избежать.

Читать далее

Фантастический Compose и его побочные эффекты

Уровень сложностиПростой
Время на прочтение8 мин
Количество просмотров18K

Всем привет! Меня зовут Иван, я - android-разработчик в компании Joy Dev.

Здесь будет знакомство с Compose и его магическими побочными эффектами . Статья рассчитана на новичков и любителей. Первая часть статьи будет посвящена экскурсу в термины и особенности Compose, вторая - расскажет о таком явлении, как побочные эффекты: что это и как работает.

Читать далее

Compose-recompose: почему происходят рекомпозиции и как уменьшить их количество

Время на прочтение17 мин
Количество просмотров18K

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

Однако, если подходить к процессу написания кода спустя рукава, Compose будет пытаться рекомпозировать множество неизменившихся частей пользовательского интерфейса. А из-за того, что рекомпозиции могут происходить на каждый кадр отрисовки, это может пагубно сказаться на производительности приложений.

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

Читать далее

Практическое руководство по Jetpack Compose: создаем анимированную кнопку-счетчик

Время на прочтение26 мин
Количество просмотров7.4K

Недавно передо мной возникла необходимость создать кнопку счетчика для небольшого приложения. Бороздя просторы интернета в поисках хороших готовых решений, я наткнулся на этот дизайн от Эхсана Рахими (Ehsan Rahimi) на Dribble. Придя к выводу, что воссоздать его в Compose — задача нетривиальная, я закатал рукава и принялся экспериментировать. В этом руководстве я поделюсь с вами каждым шагом, который я предпринял для реализации этого дизайна в Jetpack Compose.

Читать далее

Ближайшие события

Как создать анимированные шейдеры в Jetpack Compose

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров3.8K
Jetpack Compose — молодой, но бурно развивающийся фреймворк для разработки под Android, который обладает множеством не всегда очевидных фичей. Сегодня я хотел бы описать одну из таких встроенных возможностей: речь идет об использовании OpenGL-шейдеров. Они позволяют делать красивые анимированные интерфейсы, как на картинке ниже.
image
Читать дальше →

В каких случаях использовать функцию derivedStateOf из Jetpack Compose

Уровень сложностиСредний
Время на прочтение4 мин
Количество просмотров11K

derivedStateOf { ... }

derivedStateOf - это функция, которая из исходных объектов State формирует производный State. Основной смысл применения функции derivedStateOf - понизить частоту изменения исходного State, тем самым избавиться от ненужных рекомпозиций.

Лямбда-выражение, которое передается в derivedStateOf, выполняется каждый раз, когда изменяется любой из входных объектов State, и результат используется для обновления значения производного State. Важно понимать, что лямбда-выражение будет вызываться повторно только если изменится свойство value объекта State и чтение этого свойства происходит в этой лямбде. Изменение захваченных переменных другого типа не приведет к повторному вызову лямбда-выражения.

У объекта State может читаться свойство value в одной или нескольких compose-функциях. Через объект MutableState можно менять свойство value в callback'ах compose-функций или где-то еще за пределами compose, например во ViewModel'и. Если свойство изменилось, то в процессе построения следующего кадра произойдет рекомпозиция (повторный вызов) тех compose-функций, где это свойство читается. Таким образом частота изменения объекта MutableState определяет частоту рекомпозиций, но не чаще чем системный Frame rate, это примерно 60Hz, то есть 60 раз в секунду. Когда изменится State, Compose обновит UI при построении следующего кадра.

Когда частота изменения State слишком высокая, или другими словами есть некоторая последовательность изменений value State'а, при которой не нужно обновлять UI пускай даже значения разные, а следовательно не нужно совершать рекомпозицию, в этих случаях нужно использовать derivedStateOf. derivedStateOf определяет производный объект State от одного или нескольких других объектов State. Производный State должен обобщать исходные объекты State, то есть исходное множество значений State должно делиться на подмножества, и каждое такое подмножество будет соответствовать значению из производного множества. Изменения исходного State не всегда будут приводить к изменению производного State, таким образом понижается частота рекомпозиций.

Читать далее

Jetpack Compose: Expandable Text

Время на прочтение5 мин
Количество просмотров3.9K

На протяжении нескольких последних лет мобильная разработка движется в сторону декларативного пользовательского интерфейса. Кто-то начал раньше, кто-то – позже. Большой толчок развитию этого направления сообщество Android разработчиков получило благодаря языку программирования Kotlin, который отлично раскрывает данную концепцию. В 2019 Google представила свой фреймворк для создания декларативного UI: Jetpack Compose.

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

Читать далее

Circuit-фреймворк для Jetpack Compose и тестирование с Robolectric

Уровень сложностиПростой
Время на прочтение13 мин
Количество просмотров1.4K

Тестирование приложений Jetpack Compose обычно основано на использовании библиотеки Compose UI Test и создании юнит-тестов поверх библиотек мокирования или DI. Однако этот подход требует наличия эмулятора и не всегда применим для использования в конвейере CI/CD, где обычно используется Robolectric вместо настоящего Android Runtime. При этом нередко в тестах используется скриншотное тестирование (например, через использование captureToImage в Compose UI Test) и сравнение рендеров с образцом, что изначально недоступно в Robolectric из-за особенностей рендеринга. В этой статье мы рассмотрим использование библиотеки Roborazzi, которая решает эту проблему, совместно с новым подходом к архитектуре Jetpack Compose приложений, которая была предложена Slack в библиотеке Circuit.

Читать далее

Написали UI для чата поддержки с помощью Jetpack Compose: как это было

Уровень сложностиСредний
Время на прочтение7 мин
Количество просмотров5.7K

В предыдущей статье я упоминал кейс приложения «Бланк». Этот материал — логическое и более глубокое продолжение.

В официальном приложении «Бланк» на Android мы работали над пользовательским интерфейсом чата поддержки. Конечная цель — сделать удобный и отзывчивый UI. Задача – интегрировать Chatwoot с приложением с помощью Jetpack Compose.

Стек технологий: Android Studio, Kotlin, Jetpack Compose, Chatwoot.

Читать далее

Jetpack Compose — сила Android-разработки

Уровень сложностиСложный
Время на прочтение6 мин
Количество просмотров21K

Jetpack Compose — это набор инструментов для построения современных UI (пользовательских интерфейсов) в Android‑приложениях. Компания Google анонсировала Jetpack Compose в 2019 году, а уже в марте 2021 года выкатила бета‑версию фреймворка.

Стабильный Jetpack Compose 1.0, который мы ждали почти 2 года, вышел 28 июля 2021 года. К этому моменту мы в GO Digital уже были подкованы в знаниях библиотеки и активно тестировали разработку UI с помощью фреймворка (без XML‑файлов) в текущих проектах. Об одном из таких кейсов расскажем ниже.

Читать далее

Адаптация Jetpack Compose в hh.ru

Время на прочтение24 мин
Количество просмотров5.8K

Представьте: теплый осенний вечер, на столе перед вами чашечка чего-нибудь вкусного, за окном порхают пожелтевшие листья, тонко насвистывает ветер, но на душе скребутся коварные мыши. И вам точно известно, откуда эти мыши растут: еще летом вышел стабильный Jetpack Compose, а вы таки не затащили его в ваши продакшн-приложения. 

Всем привет! Меня зовут Паша Стрельченко, я Android-разработчик в hh.ru. В этой статье поведаю историю о том, как начиналась адаптация Jetpack Compose в нашем продакшн-приложении. 

Читать далее