Интеграция Compose в существующий проект Android

Всем привет, я Android разработчик в компании Enaza подразделения Games, которая занимается дистрибуцией ключей для игр. В данном посте опишу опыт интеграции Jetpack Compose в существующий проект.

Проект: лаунчер мобильных игры по подписке.

Проект представляет из себя мобильное приложение написанное на Kotlin с использованием многомодульной архитектуры в качестве DI был использован Dagger Hilt, в качестве навигации был выбран frag-nav за свою гибкость открытия фрагментов из любой части приложения.

В данном опыте цель пере использовать дублирующиеся фрагменты дизайна интерфейса, а именно:

1.      Карточка игры, использующаяся в личном кабинете в разделе игры, в поиске и каталоге

2.      Экран активации промо кода, новый функционал, который зашел в приложение + он сам по себе не большой в верстке

Для начала нужно импортировать библиотеки compose через gradle

build.gradle.kts

dependencies {
    implementation(Dependencies.AndroidX.core)
    implementation(Dependencies.AndroidX.appCompat)
    implementation(Dependencies.Google.material)

    implementation(Dependencies.Compose.annotation)
    implementation(Dependencies.Compose.composeConstraint)
    implementation(Dependencies.Compose.composeMaterial)
    implementation(Dependencies.Compose.composeUi)
    implementation(Dependencies.Compose.composeUiTool)
    implementation(Dependencies.Compose.composeUiToolPreview)
    implementation(Dependencies.Compose.composeUiUtil)
    implementation(Dependencies.AndroidX.compose)

    implementation(Dependencies.Commons.codec)
    implementation(Dependencies.Coil.coil)
    implementation(Dependencies.Coil.coilCompose)
}

Dependencies.kt

object Dependencies {
    
    object AndroidX {
        const val core = "androidx.core:core-ktx:1.6.0"
        const val appCompat = "androidx.appcompat:appcompat:1.3.0"
        const val activity =  "androidx.activity:activity-ktx:1.3.1"
        const val constraintlayout = "androidx.constraintlayout:constraintlayout:1.1.3"
        const val recyclerview = "androidx.recyclerview:recyclerview:1.2.1"
        const val compose = "androidx.activity:activity-compose:1.4.0"
    }

    object Coil {
        const val coil = "io.coil-kt:coil-compose:1.3.2"
        const val coilCompose = "io.coil-kt:coil-compose:1.3.2"
    }
    
    object Compose {
        const val annotation = "androidx.annotation:annotation:1.2.0"
        const val composeUi = "androidx.compose.ui:ui:1.0.5"
        const val composeMaterial = "androidx.compose.material:material:1.0.5"
        const val composeUiUtil = "androidx.compose.ui:ui-util:1.0.5"
        const val composeUiToolPreview = "androidx.compose.ui:ui-tooling-preview:1.0.5"
        const val composeUiTool = "androidx.compose.ui:ui-tooling:1.0.5"
        const val composeNavigation = "androidx.navigation:navigation-compose:2.4.0-alpha10"
        const val composeLiveDate = "androidx.compose.runtime:runtime-livedata:1.0.5"
        const val composeConstraint = "androidx.constraintlayout:constraintlayout-compose:1.0.0-rc01"
    }
}

Для разделения ответственности модулей, работу с компонентами Compose вынесену в отдельный модуль под названием compose-component в котором будут содержаться UI элементы, цвет, шрифты и screen @Composable контейнеры для отрисовки окон интерфейса приложения собранного из разных UI компонентов кнопочек, полей ввода, текста.

Рассмотрим Color.kt который содержит в себе цвета использующиеся в приложения

val uiBorder = Color(0x1f000000)
val textHelp = Color(0xbdffffff)
val uiBackground = Color(0xFF2B2C2F)
val borderYear = Color(0x1AFFFFFF)
val uiBlue = Color(0xFF0064FF)
val uiError = Color(0xFFFF007A)

val lightBlue = Color(0xFF349EFF)
val blueBackgroundButton = Color(0xFF0064FF)

Shape.kt используется в Modifier для закругления границ UI элементов

val Shapes = Shapes(
    small = RoundedCornerShape(4.dp),
    medium = RoundedCornerShape(8.dp),
    large = RoundedCornerShape(16.dp)
)

Type.kt содержит в себе шрифты с сопутствующими настройками для отображения текста в интерфейсе

private val Montserrat = FontFamily(
        Font(R.font.montserrat_regular, FontWeight.Normal),
        Font(R.font.montserrat_bold, FontWeight.Bold)
)

placeholderTyp = TextStyle(
        fontFamily = Montserrat,
        fontSize = 16.sp,
        color = Color.LightGray,
        fontWeight = FontWeight.Light,
        lineHeight = 16.sp,
        letterSpacing = 1.25.sp
)

PromoCodeUI.kt это screen окна активации промо кода включающий в себя две @Composable функции для состояния экрана активации с вводом промо кода и успешной активации

@Composable
fun activatePromoCode(
        valuePromoCode: (String) -> Unit,
        onNext: () -> Unit,
        screenState: PromoCodeState?
) {
    var promoCodeInput by rememberSaveable { mutableStateOf("") }
    val state = PromoCodeState(screenState?.state ?: ScreenState.UNKNOWN)
    val isError = state.isFailed && promoCodeInput.isNotBlank()
    val focusRequester = FocusRequester()
    LaunchedEffect(true) {
        focusRequester.requestFocus()
    }
    ConstraintLayout(modifier = Modifier
            .fillMaxSize()
            .padding(horizontal = 30.dp)) {
        val (containerContent, header) = createRefs()
        createVerticalChain(containerContent, chainStyle = ChainStyle.Packed(0.3F))
        Text(
                modifier = Modifier
                        .fillMaxWidth()
                        .constrainAs(header) {
                            top.linkTo(parent.top, margin = 31.dp)
                            //растягиваем по всей ширине контейнера с дальнейшим обрезанием текста если осуществился выход за границы
                            width = Dimension.fillToConstraints
                        },
                text = "Промокод".uppercase(),
                style = headerCatalog,
                textAlign = TextAlign.Center
        )
        Column(
                modifier = Modifier
                        .fillMaxWidth()
                        .constrainAs(containerContent) {
                            top.linkTo(header.bottom)
                            bottom.linkTo(parent.bottom)
                            start.linkTo(parent.start, margin = 20.dp)
                            end.linkTo(parent.end, margin = 20.dp)
                        }
        ) {
            Text(
                    modifier = Modifier
                            .padding(bottom = 35.dp)
                            .align(Alignment.CenterHorizontally),
                    style = headerTyp,
                    color = Color.White,
                    textAlign = TextAlign.Center,
                    text = "Чтобы начать пользоваться приложением активируйте промо код"
            )
            GbTextField(
                    modifier = Modifier
                            .fillMaxWidth()
                            .padding(bottom = if (isError) 10.dp else 20.dp)
                            .align(Alignment.CenterHorizontally)
                            .focusRequester(focusRequester),
                    value = promoCodeInput,
                    onValueChange = {
                        promoCodeInput = it
                        valuePromoCode.invoke(it)
                    },
                    placeholder = "Введите промокод",
                    isError = state.isFailed
            )
            if (isError) {
                Text(
                        modifier = Modifier
                                .padding(bottom = 20.dp)
                                .align(Alignment.Start),
                        style = textFieldErrorTyp,
                        fontSize = 14.sp,
                        textAlign = TextAlign.Start,
                        text = "Такого промокода не существует"
                )
            }
            GbBlueButton(
                    modifier = Modifier
                            .fillMaxWidth()
                            .height(50.dp)
                            .align(Alignment.CenterHorizontally),
                    textButton = "Активировать".uppercase(),
                    onClick = onNext
            )
        }
    }
}

@Composable
fun successPromoCode(
        onFinish: () -> Unit,
        isCheckPermission: Boolean
) {
    Column(
            modifier = Modifier
                    .fillMaxSize()
                    .padding(start = 35.dp, end = 35.dp, top = 123.dp),
            horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Image(
                painter = painterResource(id = R.drawable.ic_support_check_ok),
                contentDescription = null,
                colorFilter = ColorFilter.tint(Color.White),
                alignment = Alignment.Center,
                modifier = Modifier
                        .padding(bottom = 35.dp)
        )
        Text(
                modifier = Modifier
                        .fillMaxWidth()
                        .padding(bottom = 15.dp),
                text = "Промокод активирован".uppercase(),
                style = headerCatalog,
                textAlign = TextAlign.Center
        )
        Text(
                modifier = Modifier
                        .padding(bottom = 60.dp),
                style = headerTyp,
                color = Color.White,
                textAlign = TextAlign.Center,
                text = "Подписка успешно активирована"
        )
        val textButtonSuccess = if (isCheckPermission)
            "Перейти к играм"
        else
            "Перейти к разрешениям"
        GbBlueButton(
                modifier = Modifier
                        .fillMaxWidth()
                        .height(50.dp),
                textButton = textButtonSuccess.uppercase(),
                onClick = onFinish
        )
    }

}

@Preview()
@Composable
private fun PromoCodeContentPreview() {
    activatePromoCode({}, {}, screenState = PromoCodeState(ScreenState.FAILED))
}

Button.kt файлик с кнопочками использующиеся в проекте

@Composable
internal fun GbStateCardButton(
        state: StateDownload,
        modifier: Modifier = Modifier,
        contentPadding: PaddingValues,
        onClick: () -> Unit
) {
    val isInstallComplete = state == StateDownload.installComplete
    Button(
            onClick = { onClick.invoke() },
            contentPadding = contentPadding,
            modifier = modifier,
            colors =
            if (isInstallComplete)
                ButtonDefaults.outlinedButtonColors(
                    backgroundColor = Color.Transparent,
                    contentColor = uiError
                )
            else
                ButtonDefaults.buttonColors(
                    backgroundColor = uiBlue,
                    contentColor = Color.White
                ),
            border = if (isInstallComplete) BorderStroke(1.dp, uiError) else null
    ) {
        when (state) {
            StateDownload.wait, StateDownload.error ->
                Text(text = stringResource(id = R.string.game_card_download), style = textBoldMontserrat)
            StateDownload.downloadComplete ->
                Text(text = stringResource(id = R.string.game_card_install), style = textBoldMontserrat)
            StateDownload.download ->
                Text(text = stringResource(id = R.string.game_card_stop), style = textBoldMontserrat)
            StateDownload.installComplete ->
                Text(text = stringResource(id = R.string.game_card_delete), style = textBoldMontserrat, color = uiError)
        }
    }
}

StateDownload enum class опрделяющий состояние кнопки  в карточке игры

enum class StateDownload {
    //игры скачивается, показывать кнопку остановить
    download,
    //игры скачана, показывать кнопку установить
    downloadComplete,
    //игра установлена, показывать кнопку удалить
    installComplete,
    //ожидание скачивания, показывать кнопку скачать
    wait,
    //ошибка скачивания, показывать кнопку скачать
    error
}

PromoCodeState data class хранящий в себе состояние валидации введенного промо кода.

data class PromoCodeState(var state: ScreenState = ScreenState.UNKNOWN) {
    val isFailed: Boolean
        get() = state == ScreenState.FAILED

    val isSuccess: Boolean
        get() = state == ScreenState.SUCCESS
}

В функции PromoCodeContentPreview() вывожу на preview экран ввода промо кода, то как он бы выглядел при запущенному эмуляторе или устройстве.

,

var promoCodeInput by rememberSaveable { mutableStateOf("") }

отличительной особенностью от remember является, что Saveable хранит в себе состояние введённого значения при перевороте экрана.  

Начнём первую интеграцию, подружим fragment с @Composable функцией

PromoCodeFragment.kt

@AndroidEntryPoint
class PromoCodeFragment : BaseFragment() {

    override val screenViewModel by viewModels<PromoCodeViewModel>()
    override var isCompose: Boolean = true

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
        return ComposeView(requireContext()).apply {
            setContent {
                PromoCodeScreen(
                        valuePromoCode = {
                            screenViewModel.savePromoCode(it)
                        },
                        onNext = { screenViewModel.checkPromoCode() },
                        onFinish = {
                            
                        },
                        isCheckPermission = requireArguments().getBoolean(CHECK_PERMISSION, false)
                )
            }
        }
    }

    @Composable
    fun PromoCodeScreen(
            valuePromoCode: (String) -> Unit,
            onNext: () -> Unit,
            onFinish: () -> Unit,
            isCheckPermission: Boolean
    ) {
        val screenState = screenViewModel.promoCodeState.asLiveData().observeAsState()

        GbSurface {
            when(screenState.value?.state ?: ScreenState.UNKNOWN) {
                ScreenState.FAILED, ScreenState.UNKNOWN -> {
                    activatePromoCode (
                            onNext = onNext,
                            valuePromoCode = valuePromoCode,
                            screenState = screenState.value
                    )
                }
                ScreenState.SUCCESS -> {
                    hideSoftKeyboard()
                    successPromoCode(
                            onFinish = onFinish,
                            isCheckPermission = isCheckPermission
                    )
                }
            }

        }
    }

    companion object {
        private const val CHECK_PERMISSION = "check_permission"

        fun newInstance(isCheck: Boolean) = PromoCodeFragment().apply {
            arguments = bundleOf(CHECK_PERMISSION to isCheck)
        }
    }
}

для отображения ранее написанных screen в методе onCreateView фрагмента используем ComposeView(context: Context)

Теперь попробуем все списки RecyclerView использующиеся в проекте пере использовать, для этого возьмем источник данных UI это будет Adapter, если ранее для отображения элемента списка в методе onCreateViewHolder делали inflate layout то теперь здесь будем передавать compose view holder

class SearchAdapter(
        private val showCard: (CatalogTemplateAdapterModel) -> Unit
) : ListAdapter<CatalogTemplateAdapterModel, ComposeCardItemViewHolder>(DiffUtilCallback()) {

    private var arr: List<CatalogTemplateAdapterModel> = emptyList()

    override fun onCreateViewHolder(
            parent: ViewGroup,
            viewType: Int,
    ): ComposeCardItemViewHolder {
        return ComposeCardItemViewHolder(
                showCard = showCard,
                composeView = ComposeView(parent.context)
        )
    }

    override fun onViewRecycled(holderCardItem: ComposeCardItemViewHolder) {
        holderCardItem.composeView.disposeComposition()
    }

    override fun onBindViewHolder(holderCardItem: ComposeCardItemViewHolder, position: Int) {
        holderCardItem.bind(arr[position])
    }

    override fun getItemCount() = arr.size

    fun setArr(catalogCard: List<CatalogTemplateAdapterModel>) {
        this.arr = catalogCard
        notifyDataSetChanged()
    }

    fun existCard() = arr.isNotEmpty()
}

class ComposeCardItemViewHolder(
        val showCard: (CatalogTemplateAdapterModel) -> Unit,
        val composeView: ComposeView,
        private val width: Int = 0
) : RecyclerView.ViewHolder(composeView) {

    init {
        composeView.setViewCompositionStrategy(
                ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed
        )
    }

    fun bind(input: CatalogTemplateAdapterModel) {
        composeView.setContent {
            if(width != 0){
                CartItem(input, showCard, modifier = Modifier.width(width.dp))
            } else {
                CartItem(input, showCard)
            }
        }
    }
}

во ViewHolder класса ComposeCardItemViewHolder в блоке init для корректной работы жизненного цикла item очищаем их при помощи установки стратегии ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed при удалении view очищаем item с данными.

Итоговый результат представлен на видео фрагменте

В методе bind класса ComposeCardItemViewHolder ранее было присваивание элементам интерфейса значений, теперь стало проще с compose передаём в @Composable функцию данные модельки и происходит отрисовка соответствующего контента.

Заключение: в итоге интеграция Compose в существующий проект занимает не так много сил, как это ожидается. Желаю всем попробовать и у себя в проекте применить методики compose, начинать нужно с малого.

Примечание: мой первый опыт публикаций статей на Habr.

Github: Joker4567