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

Экспериментируя с реализацией различных View, я решил опробовать работу с accessibility в Compose. Написал код, запустил Talkback (специальная утилита для accessibility, для незрячих людей, которые щелкают на определенный элемент экрана, и этот talkback говорит им на что нажали) и... приложение начало крашится при старте. Я долго не мог понять в чём дело, потому что выбрасываемое исключение было не очень понятным.

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

import com.android.build.gradle.BaseExtension

configure<BaseExtension> {
    @Suppress("UnstableApiUsage")
    with(buildFeatures) {
        compose = true
    }

    @Suppress("UnstableApiUsage")
    composeOptions {
        kotlinCompilerExtensionVersion = "1.1.1
    }
}

dependencies {
    add("implementation", "androidx.compose.runtime:runtime:1.1.1")
}

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

Не забыли они и про страницы с отдельными компонентами, например, баннерами:

Или, например, кнопки:

Почти каждый компонент дизайн-системы имеет несколько разных вариантов.

Я помню этот модуль совсем крохой, но за пару лет он превратился в довольно крупную особь с десятками компонентов.

Какие-то компоненты получалось сделать довольно легко, а над некоторыми приходилось повозиться: например, наши кнопки не совсем вписывались в стандартный компоузовский Button (хотя бы из-за наших стилей текста, которые тоже не матчатся на MaterialTheme, и кастомных минимальных размеров), и пришлось реализовывать их с нуля на Surface-е. Banner-ы тоже отняли время, потому что из-за специфичных отступов у разных элементов я всё никак не мог решить, стоит ли делать его на Constraint-е (он в Compose-е выглядит слегка неудобно), или же попробовать сделать на обычных Column-ах и Row.

Как видите, ничего сверхъестественного.

Отличия точно есть, и даже больше пяти =)

Типичный экран на RecyclerView.

internal class AboutViewModel @Inject constructor(
    private val deps: AboutDeps,
    private val uiConverter: AboutUiConverter,
) : ManualStateViewModel<Nothing, AboutUiState>() {

    ...

    override fun onFirstAttach() {
        super.onFirstAttach()
        setState(
            state = uiConverter.toUiState(
              deps.getAboutScreenModel(), listeners
            )
        )
    }

}

ManualStateViewModel — это класс из нашего фреймворка, который отличается от обычной ViewModel наличием rx-ового BehaviorSubject-а под капотом для подписки на UiState.

internal class AboutComposeViewModel @Inject constructor(
    private val deps: AboutDeps,
) : ManualStateViewModel<Nothing, AboutScreenModel>() {

    override fun onFirstAttach() {
        super.onFirstAttach()

        setState(deps.getAboutScreenModel())
    }
	
  	...

}

UiConverter для этого экрана стал бесполезен, но это не значит, что он будет не нужен на всех остальных экранах: иногда требуется отобразить на множестве разных экранов один и тот же кусочек UI, тогда конвертеры могут смапить domain-сущность в одну и ту же ui-модель.

internal class AboutFragment : BaseFragment(R.layout.fragment_about) {

  	...
  
    private val viewModel: AboutViewModel by viewModelPlugin(
        renderState = this::renderState,
        viewModelProvider = { di.getInstance() }
    )

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        view.findViewById<MaterialToolbar>(DesignSystemR.id.toolbar)?.apply {
            setTitle(R.string.about_screen_title)
            setNavigationIcon(DesignSystemR.drawable.ic_arrow_back)
            setNavigationOnClickListener { activity?.onBackPressed() }
        }
        setupRecyclerView()
    }
    
    private fun setupRecyclerView() {
        with(binding.fragmentAboutRecyclerContent) {
            isNestedScrollingEnabled = false
            adapter = delegateAdapter
            layoutManager = LinearLayoutManager(context)
        }
    }

		// Метод для отрисовки UiState-а 
    private fun renderState(state: AboutUiState) {
        delegateAdapter.submitList(state.items)
    }
   

}

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
  return ComposeView(requireContext()).also(ComposeView::addSystemTopMargin)
}


private fun renderState(model: AboutScreenModel) {
  (view as? ComposeView)?.setContent {
    HHTheme {
      AboutScreen(
        aboutScreenModel = model,
        clicks = AboutComposeClicks(
          onBackIconClicked = { activity?.onBackPressed() },
          onOfficialPageLinkClicked = { viewModel.onLinkClicked(it) },
          onSocialNetworkLinkClicked = { viewModel.onSocialNetworkLinkClicked(it) },
          onRateAppClicked = { viewModel.onRateAppClicked() },
        ),
        modifier = Modifier.fillMaxSize()
      )
    }
  } ?: error("Root view is not ComposeView, or null | $view")
}

На состояние 27.07.2022 этот код уже сильно изменился, мы накрутили дополнительных абстракций для упрощения настройки, но это уже другая история.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <include
        android:id="@+id/fragment_about_appbar"
        layout="@layout/toolbar" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/fragment_about_recycler_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipToPadding="false"
        android:persistentDrawingCache="animation|scrolling"
        android:scrollbarStyle="outsideOverlay" />

</LinearLayout>

Я же говорил! Простой экран.

@Composable
internal fun AboutScreen(
    viewModel: AboutComposeViewModel,
    modifier: Modifier = Modifier,
    onBackIconClicked: () -> Unit,
) {
    val state = viewModel.subscribeUiState(initial = AboutScreenModel()).value

    Scaffold(
        topBar = { AboutScreenToolbar(onBackIconClicked) },
        backgroundColor = HHColors.white,
        modifier = modifier,
    ) {
        Column(
            modifier = Modifier
                .verticalScroll(rememberScrollState()),
        ) {
            AboutScreenHeader(
                headerModel = state.headerModel,
                modifier = Modifier
                    .padding(start = 16.dp, end = 16.dp, top = 28.dp, bottom = 24.dp)
                    .align(Alignment.CenterHorizontally)
                    .testTag(AboutScreenTestTags.header),
            )
            LinksSection(
                viewModel = viewModel,
                links = state.links,
            )

            if (state.socialNetworkLinks.isNotEmpty()) {
                Spacer(modifier = Modifier.size(HHDimens.spacer.xs))
                SectionHeaderSmall(header = stringResource(id = R.string.about_screen_official_pages))
                LinksSection(
                    viewModel = viewModel,
                    links = state.socialNetworkLinks,
                )
                Spacer(modifier = Modifier.size(HHDimens.spacer.m))
            }
        }
    }
}

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

@Composable
private fun AboutScreenHeader(
    headerModel: AboutScreenHeaderModel,
    modifier: Modifier = Modifier,
) {
    Column(
        modifier = modifier,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        headerModel.headerAppIcon?.let { iconRes ->
            Image(
                painter = painterResource(id = iconRes),
                contentDescription = null,
                modifier = Modifier
                    .size(76.dp),
            )
        }
				SpacerS()
        Text(
            text = headerModel.appName,
            style = HHTextStyles.Title1,
            color = HHColors.black,
        )
        SpacerXXS()
        Text(
            text = stringResource(
              id = R.string.about_screen_app_version, 
              headerModel.appVersion
            ),
            style = HHTextStyles.Caption2,
            color = HHColors.gray,
        )
    }
}

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

До недавнего времени аннотация @Preview работала только в application-модулях, но к счастью это исправили. Однако в документации до сих пор не написано, что для корректной работы этой фичи нужно добавлять несколько дополнительных зависимостей в build.gradle.

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

class AddressAdapterDelegate(
  private val action: (AddressDisplayableItem) -> Unit
) : BaseAdapterDelegate<AddressDisplayableItem, DisplayableItem, BaseViewHolder>() {

    override fun onCreateViewHolder(layoutInflater: LayoutInflater, parent: ViewGroup): RecyclerView.ViewHolder {
        return fromLayoutId(R.layout.item_address_suggest, layoutInflater, parent)
    }

    override fun isForViewType(item: DisplayableItem, items: List<DisplayableItem>, position: Int): Boolean {
        return item is AddressDisplayableItem
    }

    override fun onBindViewHolder(item: AddressDisplayableItem, viewHolder: BaseViewHolder) {
        with(viewHolder.getViewBinding(ItemAddressSuggestBinding::bind)) {
            itemAddressSuggestPrimary.text = item.firstAddress
            itemAddressSuggestSecondary.text = item.secondAddress
            root.setOnClickListener { action.invoke(item) }
        }
    }
}

Для каждого ViewType вы создавали отдельный AdapterDelegate, потом привязывали их к единому Delegate менеджеру, который в итоге превращался в RecyclerView-адаптер. Затем вы привязывали его к RecyclerView и ваш список мог отображать несколько типов. 

private fun initDelegationAdapter(): DelegationAdapter<DisplayableItem> {
  return DelegationAdapter<DisplayableItem>().withDelegates(
    ArticleDelegate { articleCode -> viewModel.onItemClicked(articleCode) },
    LoadingAdapterDelegate(),
    ErrorAdapterDelegate(
      defaultText = getString(ApplicantCoreUiBaseR.string.default_list_paginator_next_page_error),
      refreshButtonText = getString(ApplicantCoreUiBaseR.string.action_update),
      click = { viewModel.onLoadNextPageAction() }
    )
  )
}

Дизайнеры нарисовали 14 вариантов левой части и 7 вариантов правой, всего-то 98 разных ячеек.

public typealias IconTitleChevronItem = LeftRightItem<LeftIconTitle, RightChevron>

public typealias CheckboxSubtitleDetailItem = LeftRightItem<LeftCheckboxSubtitle, RightDetail>

public typealias ExpandTagsItem = LeftRightItem<ExpandTagsContent, LeftRightEmptyContent>

Очень классная фича Swift — можно описать generic-тип и потом просто создавать объект указанного типа:

public final class ContainerCell<ContentView: ContainerContentView>: UICollectionViewCell {

  ...

	private let itemContentView: ContentView

  public override init(frame: CGRect = .zero) {
    // ну вот просто взяли и создали что-то из generic-а, как так-то?
    itemContentView = ContentView(frame: frame).configureForAutoLayout()

    super.init(frame: frame)

    backgroundColor = .clear
    clipsToBounds = false

    setupItemContentView()
    setupLongPresspGestureRecognizer()
  }

}

Благодаря этому, просто описав typealias можно создать все нужные объекты под капотом ячейки.

class IconTitleCell<DataModel>(
    val id: String,
    override val dataModel: DataModel,
    override val icon: CellIcon,
    override val title: CellTitle,
    override val isDisabled: Boolean = false,
    override val separatorType: SeparatorType = SeparatorType.FULL,
    override val clickListener: IconTitleCellClickListener<DataModel>? = null,
    override val paddingStart: Padding = Padding.NONE,
) : CompoundCell<ImageTitleLeftCellModel, EmptyRightCellModel, DataModel>(
    leftModel = ImageTitleLeftCellModel(
        image = icon.toCellImage(),
        title = title
    ),
    rightModel = EmptyRightCellModel(),
    dataModel = dataModel,
    isDisabled = isDisabled,
    separatorType = separatorType,
    clickListener = clickListener
),
    WithCellIcon,
    WithCellTitle,
    WithCompoundCell<ImageTitleLeftCellModel, EmptyRightCellModel, DataModel> {

    override val diffingStrategy: CellDiffingStrategy by IdContentDiffingStrategy(
        diffId = id,
        diffContent = DiffContent(
            leftModel = leftModel,
            baseDiffContent = getBaseDiffContent()
        )
    )


    private data class DiffContent<DataModel>(
        private val leftModel: ImageTitleLeftCellModel,
        private val baseDiffContent: BaseDiffContent<DataModel>,
    )

}

Тонна generic-ов, куча интерфейсов, специальная diffing-стратегия, чтобы корректно сравнивать одну ячейку с другой, множество общих для всех ячеек override-параметров... В таком виде даже простые ячейки описывались довольно сложно и имели некоторые подводные камни в реализации.

@Composable
fun HHCellCarcass(
    isEnabled: Boolean,
    separatorStyle: SeparatorStyle,
    modifier: Modifier = Modifier,
    cornersStyle: CornersStyle = CornersStyle.Rectangle,
    onClick: (() -> Unit)? = {},
    right: @Composable (() -> Unit)? = null,
    left: @Composable () -> Unit,
) {
    val shape = cornersStyle.toShape()
    val alpha = when {
        onClick == null || isEnabled -> ThemeConstants.FULL_ALPHA_VALUE
        else -> ThemeConstants.DISABLED_ELEMENT_ALPHA_VALUE
    }

    val clickAndSemanticsModifier = if (onClick != null) {
        Modifier.clickable(
            interactionSource = remember { MutableInteractionSource() },
            indication = rememberRipple(color = HHColors.ripple),
            enabled = isEnabled,
            onClickLabel = null,
            role = null,
            onClick = onClick
        )
    } else {
        Modifier
    }

    CellCarcassBox(
        alpha = alpha,
        shape = shape,
        separatorStyle = separatorStyle,
        modifier = modifier,
        clickAndSemanticsModifier = clickAndSemanticsModifier,
        right = right,
        left = left
    )
}

@Composable
private fun CellCarcassBox(
    alpha: Float,
    shape: Shape,
    separatorStyle: SeparatorStyle,
    modifier: Modifier,
    clickAndSemanticsModifier: Modifier,
    right: @Composable (() -> Unit)? = null,
    left: @Composable () -> Unit,
) {
    Box(
        modifier = modifier
            .alpha(alpha)
            .clip(shape)
            .then(clickAndSemanticsModifier)
    ) {
        Column(verticalArrangement = Arrangement.Top) {
            Row(
                horizontalArrangement = Arrangement.Start,
                verticalAlignment = Alignment.CenterVertically
            ) {
                Box(Modifier.weight(1f)) {
                    left()
                }
                if (right != null) {
                    Spacers.XSSpacer(Spacers.Direction.Horizontal)
                    right()
                } else {
                    Spacers.MSpacer(Spacers.Direction.Horizontal)
                }
            }
            Row {
                CellSeparator(
                    modifier = Modifier
                        .weight(1f),
                    separatorStyle = separatorStyle
                )
            }
        }
    }
}

С момента выхода видео в "Охэхэнных историях" ячейки немного усложнились. Во-первых, мы поняли, что нам неудобно проставлять weight в каждой ячейке для растягивания левой части, поэтому вытащили weight в основной каркас. А во-вторых, у нас появилась специальная expandable-ячейка, для которой нужно было убирать click без изменений alpha и семантики.

@Composable
internal fun HHCellCarcass(
    isEnabled: Boolean,
    separatorStyle: SeparatorStyle,
    modifier: Modifier = Modifier,
    cornersStyle: CornersStyle = CornersStyle.Rectangle,
    onClick: () -> Unit = {},
    content: @Composable RowScope.() -> Unit,
) {
    Surface(
        modifier = modifier
            .alpha(if (isEnabled) ThemeConstants.FULL_ALPHA_VALUE else ThemeConstants.DISABLED_ELEMENT_ALPHA_VALUE),
        shape = cornersStyle.toShape(),
        interactionSource = remember { MutableInteractionSource() },
        indication = rememberRipple(color = HHColors.colorRipple),
        enabled = isEnabled,
        onClick = onClick
    ) {
        Column(verticalArrangement = Arrangement.Top) {
            Row(
                horizontalArrangement = Arrangement.Start,
                verticalAlignment = Alignment.CenterVertically
            ) {
                content()
            }
            Row {
                CellSeparator(
                    modifier = Modifier
                        .weight(1f),
                    separatorStyle = separatorStyle
                )
            }
        }
    }
}

@Composable
fun CheckboxCell(
    checked: Boolean,
    title: String,
    modifier: Modifier = Modifier,
    titleAlignment: Alignment.Vertical = Alignment.Top,
    subtitle: String? = null,
    isEnabled: Boolean = true,
    separatorStyle: SeparatorStyle = SeparatorStyle.None,
    onClick: () -> Unit,
    onCheckboxClick: (() -> Unit)? = null,
) {
    HHCellCarcass(
        isEnabled = isEnabled,
        separatorStyle = separatorStyle,
        modifier = modifier,
        onClick = onClick
    ) {
        CellLeftCheckbox(
            checked = checked,
            title = title,
            titleAlignment = titleAlignment,
            subtitle = subtitle,
            onCheckboxClick = onCheckboxClick,
        )
    }
}

Текущая стабильная версия Kaspresso уже давно поддерживает генерацию отчётов с шагами, главное подключить правильный test runner.

internal class AboutScreenTest : AppicantTestCase() {

    private val aboutComposeScreen = AboutComposeScreen(composeTestRule)

    @Test
    @MoreScreenSuit
    fun checkAboutScreenHeader() {
        init {
            // do nothing
        }.run {
            step("Переходим на экран About") {
                navigation { openMoreScreen() }
                moreScreen.actions { openAbout() }
            }

            step("Проверяем состояние экрана для \"России\"") {
                aboutComposeScreen {
                    checks {
                        assertHeaderIsDisplayed()
                        assertHeaderText("HeadHunter")
                        assertOfficialPagesSectionDisplayed()
                    }

                    actions {
                        clickOnBackButton()
                    }
                }
            }

            step("Меняем страну поиска и возвращаемся на экран About") {
                moreScreen.actions { changeCountry("Беларусь") }
                navigation { openMoreScreen() }
                moreScreen.actions { openAbout() }
            }

            step("Ещё раз проверяем состояние экрана") {
                aboutComposeScreen {
                    checks {
                        assertHeaderIsDisplayed()
                        assertHeaderText("rabota.by")
                        assertOfficialPagesSectionDisplayed()
                    }
                }
            }
        }
    }

}

Кстати, с тестами была одна хитрость — для взаимодействия с Compose-виджетами вам нужен специальный ComposeTestRule. И нужно внимательно выбрать fabric-метод для создания такого Rule-а, потому что можно случайно запустить несколько Activity вашего приложения. В нашем случае подошёл createEmptyComposeRule:

@get:Rule
val composeTestRule = createEmptyComposeRule()

class ComposeBannerKNode(
    semanticsProvider: SemanticsNodeInteractionsProvider,
    nodeMatcher: NodeMatcher = NodeMatcher(
        matcher = SemanticsMatcher(
            description = "Empty matcher",
            matcher = { true }
        )
    ),
) : BaseNode<ComposeBannerKNode>(semanticsProvider, nodeMatcher) {

    private val title: KNode = child {
        hasTestTag(ComposeTestTags.banner.title)
    }

    private val message: KNode = child {
        hasTestTag(ComposeTestTags.banner.message)
    }

    private val primaryButton: KNode = child {
        hasTestTag(ComposeTestTags.banner.primaryButton)
    }

    private val secondaryButton: KNode = child {
        hasTestTag(ComposeTestTags.banner.secondaryButton)
    }

}

Еще в рамках ресерча мы пробовали написать unit-тесты на отдельные виджеты с помощью Kaspresso и Robolectric. Такие тесты могут пригодиться, если вы решите написать сложную кастомную вьюшку, в которой пробрасывается сложная модель. Тогда в рамках unit-тестов получится проверить, правильно ли сетятся те или иные свойства. 

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

Стикеры постепенно "зеленели", это грело душу.

Когда ваши дизайнеры рисуют типографику в Figma, они обычно центрируют текст внутри контейнера с текстом. В Android у нас нет возможности центрировать текст внутри контейнера из коробки. Но есть специальный лайфхак с includeFontPadding и возможностью указать специальное значение firstBaselineToTopHeight и lastBaselineToBottomHeight, чтобы попробовать сделать pixel perfect текста вместе с Figma. 

Если наложить два изображения друг на друга, видим, что надписи на Compose-версии слегка уехали вниз:

Душа перфекциониста в этот момент негодует (╯ ° □ °) ╯ (┻━┻)

Как и в случае с Banner-ами, кнопками, ячейками — здесь куча вариантов.