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

P.S. Также не забывайте о нашем чат-канале, в котором мы можете писать свои предложения. 🙂

#Article #Blog #Animation

Jetpack Compose Animations Tutorial: Getting Started

Анимация играет далеко не маловажную роль в любом Android приложении. Зачастую именно при помощи красивой и качественно реализованной анимации можно акцентировать внимание пользователя на деталях, или же, наоборот, компенсировать другие недостатки приложения. В Jetpack Compose анимациям уделено особое внимание в виде отдельного API. Именно об этом инструменте и о различных возможностях работы с ним рассказывает автор статьи на примере простой кнопки.

#Article #Medium #Navigation

Implement Bottom Bar Navigation in Jetpack Compose

Bottom Navigation - один из самых популярных паттернов в формировании дизайна Android приложения, который используется практически в каждом большом проекте. С его помощью приложение можно разделить на разные по содержимому контенту и выполняемым функциям секции. Автор статьи предлагает свой вариант реализации навигации через Bottom Navigation при помощи уже известного navigation-compose.

#Article #Medium

Jetpack Compose Interop Part 1: Using Traditional Views and Layouts in Compose with AndroidView

Интероперабельность - одно из важнейших преимуществ Jetpack Compose, обеспечивающее обратную совместимость между классическим и Composable кодом. Это позволяет без особого труда комбинировать оба подхода в рамках одного проекта, что важно, если необходимо внедрить JC в уже существующее приложение. В статье рассказывается о возможностях использования функции AndroidView, позволяющей размещать классические UI-компоненты внутри Composable-функций.

#Article #Medium

Jetpack Compose Interop Part 2: Using Compose in Traditional Android Views and Layouts with ComposeView

Продолжение предыдущей статьи о возможности обратной совместимости между Jetpack Compose и традиционным UI-фреймворком. На этот раз автор статьи рассказывает о возможностях ComposeView и AbstractComposeView, позволяющих "встраивать" Composable-код в XML-вёрстку.

#Article #Medium #Recomposition

Android Jetpack Compose: Recomposition Made Easy

Автор статьи рассказывает о рекомпозиции — свойстве Jetpack Compose, позволяющем перерисовывать UI-компоненты без необходимости вызова самих Composable-функций. Всё это решается при помощи mutableStateOf().

#Release #Alpha #Changelog

Релиз Jetpack Compose 1.0.0-alpha08

Некоторые из изменений, пришедших с новым обновлением:

▫️Убран параметр maxLines у CoreTextField. Для этих целей теперь нужно использовать BasicTextField. Также в BasicTextField, TextField and OutlinedTextField добавлен параметр singeLine.
▫️Добавлен детектор таких мультитач-жестов, как rotation, zoom и panning.
▫️AbsoluteArrangement заменен на Arrangement.Absolute.
▫️Modifier.drawOpacity и Modifier.drawShadow переименованы в Modifier.alpha и Modifier.shadow соответственно.
▫️Новое API для запуска анимаций из корутин и многое другое.

Также обновление коснулось и дополнений, связанные с навигацией и пагинацией — navigation-compose и paging-compose были обновлены до версии 1.0.0-alpha03.
Изменений на этот раз довольно мало, в основном исправление существующих проблем:

▫️Исправлена проблема, при которой popBackStack() и navigateUp() не работали после смены конфигурации или пересоздания процесса приложения
▫️Исправлена навигация по вложенному графу внутри NavHost

P.S. Также важно, что для перехода на alpha08 необходимо поднять версию Kotlin compiler до 1.4.20

#Article #Medium #Recomposition

Android Jetpack Compose: Remember Made Easy

Совсем недавно на канале выходил пост о рекомпозиции в Jetpack Compose при помощи mutableStateOf(). В качестве продолжения, в этой статье автор решил рассмотреть другую немаловажную концепцию в работе со State — remember.

#Links #Github #Codelabs #Medium

На данные момент существует большое количество источников, позволяющих детально рассмотреть основные Composable-функции для формирования UI с примерами их использования. Большим плюсом таковых является поддержание актуальности документации и примеров, что весьма немаловажно когда продукт находится в Alpha-статусе.
Решил собрать в рамках одного поста все полезные источники:

▫️ Google codelabs - официальные кодлабы от Google

▫️ Jetpack Compose Playground - отличный источник с большим количеством разделов, гайдов и примеров

▫️ Learn Jetpack Compose By Example - в дополнение к предыдущему, содержит много ответов на часто возникающие вопросы у начинающих.

▫️ Which Compose API to use? - интересный сервис, позволяющий по выбранному компоненту из классического UI-фреймворка получить эквивалентный ему в Jetpack Compose, а также посмотреть примеры его использования

▫️ Jetpack Compose Awesome - как и Playground, содержит в себе много полезных ссылок по Jetpack Compose.

P.S. Если есть интересные источники, которых нет в этом списке, пишите в наш чат-канал😉.

#Article #Medium

RecyclerView and LazyColumnFor in Jetpack Compose

Большинство мобильных приложений так или иначе работают со списками данных. В одном из прошлых постов рассказывалось как реализовать Grid-список при помощи LazyGridFor(). На этот раз поговорим о более часто используемом виде списка — линейном, который представлен в Jetpack Compose функциями LazyColumnFor() и LazyRowFor() в зависимости от необходимой ориентации списка. В статье также затрагиваются такие темы как работа с несколькими видами ViewType, а также обработка таких кейсов как ItemDecoration и Workaround.

#Release #Alpha #Changelog

Релиз Jetpack Compose 1.0.0-alpha09

Некоторые из изменений, пришедших с новым минорным обновлением:

▫️LazyColumnFor и LazyRowFor теперь deprecated, вместо них надо использовать LazyColumn и LazyRow
▫️Добавлен LazyVerticalGrid 🔥
▫️В конструктор текстовых полей добавлен параметр InteractionState (для работы с состояниями Dragged, Pressed и Focused)
▫️Modifier.focusObserver теперь deprecated, вместо этого надо использовать Modifier.onFocusChanged или Modifier.onFocusEvent
▫️Modifier.offset теперь возвращает в лямбде IntOffset вместо Float

Также обновление коснулось и дополнений, связанные с навигацией и пагинацией — navigation-compose и paging-compose были обновлены до версии 1.0.0-alpha04.
Изменений на этот раз довольно мало, в основном исправление существующих проблем:

▫️Обновлены свойства CombinedLoadStates.refresh, CombinedLoadStates.prepend и CombinedLoadStates.append применимо к переходу из состояния Loading в состояние NotLoading
▫️По навигации существенных изменений нет

P.S. Также важно, что для перехода на alpha09 необходимо поднять версию Kotlin compiler до 1.4.21. По заявлению разработчиков это последний релиз в уходящем года и новый стоят ожидать уже в январе.

Друзья, у меня есть хорошая новость! Кто еще не в курсе, Александр Горшков (автор канала Android Live) позвал меня в гости на свой Youtube-канал, где мы в прямом эфире напишем небольшое мобильное приложение на Jetpack Compose, а вы сможете задать интересующие вас вопросы.

▫️Что? — На встрече разберем такие аспекты как работа со списком, навигацией, анимацией и много чего еще.
▫️Где? — Youtube-канал Android Live (ссылка появится немного позже)
▫️Когда? — 21 декабря в 18:30 по МСК

#News

#Article #Medium #UI

StaggeredVerticalGrid of Android Jetpack Compose

В предыдущих публикациях мы уже разбирали различные реализации списков в Jetpack Compose (статьи про LazyColumnFor и LazyGridFor). Однако помимо этого, существует еще один вид списка, появляющийся в приложениях реже других, но правильное и уместное использование которого может значительно украсить ваше приложение. И имя этому списку — StaggeredVerticalGrid. Автор статьи предлагает свою реализацию этого компонента с примером использования и описанием внутреннего устройства. Весьма неплохое решение пока не появился официальный компонент в foundation-библиотеке.

#Article #Medium #Navigation

Passing string typed data with Jetpack Compose navigation component

В одном из предыдущих постов публиковалась статья о том, как добавить навигацию между вкладками вашего приложения используя compose-navigation. Однако мало какая навигация обходится без передачи между экранами дополнительных параметров. В Jetpack Compose все такие объекты по-умолчанию String-типа. В статье описывается как передавать и получать объекты такого типа между экранами.

#Article #Medium

Passing multi typed data between screens with Jetpack Compose navigation component.

Третья и последняя статья из серии, посвященной навигации в Jetpack Compose. Как уже известно, все объекты, которые можно передать между экранами, по-умолчанию являются String-типа. Однако, зачастую, нам необходимо передать объект другого примитивного типа (передача Parcelable в данный момент недоступна) и именно о том, как правильно это сделать, рассказывает автор данного материала.

​​Друзья, вот и заканчивается 2020 год.🎄 Это был год действительно больших перемен для многих из нас. Работа, различные мероприятия, да и простое общение с теми кто близок — всё перешло в режим online, к чему мы все (не сразу, конечно) адаптировались. Что же касается IT-индустрии, то она всё так же стремительно развивается, а значит в грядущем, 2021 году, всё у нас будет хорошо.👍

За почти три месяца существования канала нас уже почти 400 человек, и я уверен, что это далеко не предел, за что вам, друзья, большое спасибо. Ведь именно вместе мы участвуем в формировании Jetpack Compose сообщества в русскоязычном пространстве.💪

Желаю вам как следует отдохнуть на новогодних праздниках и с новыми силами вернуться уже в наступившем году. Ну и ждём релиза Beta (а быть может и Stable) версии JC в 2021 году 🙂

@Composable
fun Greeting(year: Int) {
Text(text = "С наступающим $year годом!")
}

#Article #Medium #DesignSystem

Building a Design System implementation using Jetpack Compose — Part2 (Component)

Вторая часть статьи о построении дизайн-системы в вашем приложении, используя декларативный подход. Кто не видел первую часть — она тут.

P.S. Также в подборку полезных материалов от Jetpack Compose добавил еще один ресурс — Jetpack Compose Awesome.

#Article #Medium #Architecture

Android Jetpack Compose — Create a Component-Based Architecture

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

#Release #Alpha #Changelog

Релиз Jetpack Compose 1.0.0-alpha10

Некоторые из изменений, пришедших с новым обновлением:

▫️Добавлен экспериментальный метод stickyHeader для списков LazyColumn и LazyRow
▫️FlowRow и FlowRow теперь deprecated
▫️В конструктор текстовых полей добавлены параметры enabled и readOnly для реализации “неактивного” поля
▫️TestUiDispatcher теперь deprecated, вместо этого использовать Dispatchers.Main
▫️Метод animate() заменён на animateAsState(), который теперь возвращает State<T> вместо T

Также обновление коснулось и дополнений, связанные с навигацией и пагинацией — navigation-compose и paging-compose были обновлены до версии 1.0.0-alpha05, однако существенных изменений в новых версиях библиотек нет.

#Article #Medium #UI

Expandable lists in Jetpack Compose

Интересная статья, в которой автор рассказывает как можно реализовать двухуровневый список, в котором каждый элемент при нажатии раскрывается и отображает собственный вложенный список. Всё это работает через ViewModel и StateFlow, а также украшено интересной анимацией сворачивания/разворачивания карточки.