🏄 🏡 ⛹🏽 CompositionLocal in Jetpack Compose. What is it and how to implement reactive localization of an application using it ⏬ 🙅 🍍

Power in the Technocracy blog passes to android developers. Vladislav Titov explains how to achieve uninterrupted UI when changing localization.

What is the problem

Working with string resources in Android is arranged as follows:

strings are stored as xml markup in different values folders
To get a string in the code, you need to refer to the Context object.

Context . , , -, Locale Locale.setDefault(), -, Context Locale attachBaseContext(). , UI. ? .

Jetpack Compose , ()

, Compose — .

@Composable
fun Hello() {
    Text(text = "Hello Compose!")
}

. , , . , . :


@Composable
fun Hello() {
    var name = "Compose"
    Text(text = "Hello $name!")
    TextField(
        value = name,
        onValueChanged = { name = it }
    )
}

TextField name, . , . , . Compose , name Text. ?

State — . Compose , , . . , .

@Composable
fun Hello() {
    var name by mutableStateOf("Compose")
    Text(text = "Hello ${name}!")
    TextField(
        value = name,
        onValueChanged = { name = it }
    )
}

mutableStateOf — -builder Composable. MutableState, State, property value. . State , property delegate by ( ). state.value.

(MutableState), . , , , view. , ViewModel, var name by mutableStateOf("Compose") val name by viewModel.nameLiveData.observeAsState(""), onValueChanged = { name = it } onValueChanged = { viewModel.setName(it) }. , var name val name. .

. State , Compose , Composable-. , . , , . , , . :

, Composable, State, . var name by mutableStateOf("Compose") . . , remember:


@Composable
fun Hello() {
    val name by remember { mutableStateOf("Compose") }
    Text(text = "Hello ${name}!")
    TextField(
        value = name,
        onValueChanged = { name = it }
    )
}

Composable “” , . , Composable-.

, Composable side-. - Composable side- . , Composable . , , . .

, , .

CompositionLocal

, , Composable- . . . , . , MyApp , . MyApp .


class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val viewModel: MainViewModel = viewModel()
            MyApp(viewModel.user)
        }
    }
}

@Composable
fun MyApp(user: User) {
    UserWidget(user)
}

@Composable
fun UserWidget(user: User) {
    Text(text = user.name)
}

, Composable, .

CompositionLocal. State, , Composable . CompositionLocal Composable. : “ CompositionLocal side-?” - . — .


val ActiveUser = compositionLocalOf<User> { error("No active user found!") }

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val viewModel: MainViewModel = viewModel()
            CompositionLocalProvider(ActiveUser provides viewModel.user) {
                MyApp()
            }
        }
    }
}

@Composable
fun MyApp() {
    UserWidget()
}

@Composable
fun UserWidget() {
    val user = ActiveUser.current
    Text(text = user.name)
}

, - compositionLocalOf CompositionLocal User ActiveUser. trailing User’, , .

- Composable ( , ) CompositionLocal. CompositionLocalProvider(ActiveUser provides viewModel.user) { //contnt }. ActiveUser , , content. user. Provider’. CompositionLocal side-.

CompositionLocal, Composable property CompositionLocal.current. State, Compose , CompositionLocal, Composable. setContent UserWidget, MyApp. , Composable , .

: Context

, , . LocalContext: CompositionLocal Context . , , Jetpack Compose. .

data class Localization(
    val locale: Locale, 
    val strings: MutableMap<String, String> = mutableMapOf()
)

, : , , . .

, :

localizationMap — , O(1), O(n).
supportedLocales
, .

internal val defaultLocalization: Localization = Localization(Locale.ENGLISH)

private val supportedLocales: MutableSet<Locale> = mutableSetOf()

private val localizationMap = hashMapOf<Locale, Localization>()

fun registerSupportedLocales(vararg locales: Locale): Set<Locale> {
    locales.filter { it != Locale.ENGLISH }
        .forEach {
            if (supportedLocales.add(it)) {
                registerLocalizationForLocale(it)
            }
        }
    return supportedLocales + Locale.ENGLISH
}

private fun registerLocalizationForLocale(locale: Locale) {
    localizationMap[locale] = Localization(locale)
}

, , , . . , :

fun Translatable(name: String, defaultValue: String, localeToValue: () -> Map<Locale, String>): Localization.() -> String {
    defaultLocalization.strings[name] = defaultValue
    for ((locale, value) in localeToValue().entries) {
        val localization = localizationMap[locale] ?: throw RuntimeException("There is no locale $locale")
        localization.strings[name] = value
    }
    return fun Localization.(): String {
        return this.strings[name] ?: defaultLocalization.strings[name] ?: throw RuntimeException("There is no string called $name in localization $this")
    }
}

fun NonTranslatable(name: String, defaultValue: String): Localization.() -> String {
    defaultLocalization.strings[name] = defaultValue
    return fun Localization.(): String {
        return defaultLocalization.strings[name] ?: throw RuntimeException("There is no string called $name in localization default")
    }
}

( ):

name — . .

defaultValue — ,

closure localeToValue, -.

: . . extension-, Localization, — .

extension- . , . ? CompositionLocal:

val LocalLocalization = compositionLocalOf { defaultLocalization }

, LocalLocalization object ( MaterialTheme):

object Vocabulary {
    @Composable
    @get:ReadOnlyComposable
    val localization: Localization get() = LocalLocalization.current
}

CompositionLocal:

@Composable
fun Localization(locale: Locale, content: @Composable () -> Unit) {
    CompositionLocalProvider(
        LocalLocalization provides (localizationMap[locale] ?: defaultLocalization),
        children = content
    )
}

val RUSSIAN = Locale("ru")
val TATAR = Locale("tt")

val supportedLocalesNow = registerSupportedLocales(RUSSIAN, TATAR)

val hello = Translatable("hello", "Hello!") {
    hashMapOf(
        RUSSIAN to "!",
        TATAR to "ә!"
    )
}
val nonTrans = NonTranslatable("format", "%1\$d:%2\$02d")

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Localization(locale = TATAR /*smth from supportedLocalesNow*/) {
                val localization = Vocabulary.localization
                Text(text = localization.hello())
                Text(text = localization.nonTrans().format(20, 9))
            }
        }
    }
}