Все потоки
Поиск
Написать публикацию
Обновить
11.08

Jetpack Compose *

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

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

Библиотека «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.3K

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

Читать далее

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

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров3.7K
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.8K

На протяжении нескольких последних лет мобильная разработка движется в сторону декларативного пользовательского интерфейса. Кто-то начал раньше, кто-то – позже. Большой толчок развитию этого направления сообщество 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.6K

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

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

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

Читать далее

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

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

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 в нашем продакшн-приложении. 

Читать далее

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

Jetpack Compose для тех, кто в танке

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

Приблизительно три года назад на Google I/O 2019 была анонсирована новая перспективная библиотека для разработки Android-приложений под названием compose. С тех пор он рос все больше и больше и становился все лучше и лучше. Многие люди даже говорят, что он знаменует собой конец использования XML в разработке Android-приложений. С тех пор, как Google выпустил первую стабильную версию, была написана куча учебных пособий, выпущено множество курсов и разработано большое количество библиотек для поддержки экосистемы.

Читать далее

Введение в Jetpack Compose

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

Привет, меня зовут Саша, я Android-разработчик команды разработки мобильного приложения Банка РНКБ. Сегодня хочу поделиться своим опытом использования Compose.

В июле прошлого года Google анонсировал первую стабильную версию Jetpack Compose, а на момент написания статьи уже вышла версия 1.1. Несмотря на то, что использовать данный инструмент можно было задолго до фактического релиза, сейчас метаморфозы API завершились(хотя некоторые его части всё ещё помечены аннотацией @Experimental*Api). Сам Compose как инструмент для разработки теперь точно стал production ready (ну так обещают).

Читать далее

Jetpack Compose в проектах на React Native: плюсы, минусы и интеграция

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

Привет! Меня зовут Сергей Курочкин, я руковожу Android-разработкой в СберМаркете. Сегодня я расскажу, зачем нужен Jetpack Compose в проектах React Native, и поделюсь опытом интеграции фреймворка в наши приложения. В конце на примере простого компонента разберем весь процесс разработки на Jetpack Compose.

Читать далее

Эволюция декларативных UI-фреймворков: от динозавров к Jetpack Compose

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


Проект Jetpack Compose привлёк много внимания в Android-мире, ещё когда был в альфа-версии. А недавно добрался до беты — так что теперь всем Android-разработчикам пора понимать, что он собой представляет.


Поэтому мы сделали для Хабра текстовую версию доклада Матвея Малькова с нашей конференции Mobius. Матвей работает в Google UK и лично причастен к Compose, так что из доклада можно узнать кое-что о «внутренностях» проекта. Но рассказ не ограничивается этим: внимание уделено не только Jetpack Compose, а всему декларативному подходу в целом.


Кстати, недавно появился ещё и проект Compose for Desktop от JetBrains. И скоро на Mobius о нём тоже будет рассказ из первых рук: 14 апреля об этом расскажет руководитель проекта Николай Иготти.


Далее повествование будет от лица спикера.

Читать дальше →

CompositionLocal в Jetpack Compose. Что это и как с его помощью реализовать реактивную локализацию приложения

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

Власть в блоге Технократии переходит андроид-разработчикам. Владислав Титов рассказывает, как добиться непрерывающегося UI при смене локализации.

Читать далее

Погружение в Jetpack Compose

Время на прочтение7 мин
Количество просмотров9.9K
Всем привет. Перед уходом на выходные спешим поделиться с вами еще одним переводом, подготовленным специально для студентов курса «Android-разработчик. Продвинутый курс».



Пробуем новый UI-фреймворк для Android-приложений


В течение последних нескольких лет, участвуя во многих мобильных проектах, мне приходилось использовать различные технологии, например, такие как Android, ReactNative и Flutter. Переключение с ReactNative обратно на классический Android вызвало у меня смешанные чувства. Возвращение к Kotlin прошло хорошо, но я очень скучал по UI-фреймворку React. Небольшие повторно используемые компоненты, с помощью которых создается пользовательский интерфейс, великолепны и обеспечивают большую гибкость и скорость разработки.
Читать дальше →