♥️ 😧 🕵🏿 CompositionLocal dans Jetpack Compose. Qu'est-ce que c'est et comment implémenter la localisation réactive d'une application l'utilisant 💣 ➡️ 🙅🏿

Le pouvoir du blog Technocracy va aux développeurs Android. Vladislav Titov explique comment obtenir une interface utilisateur ininterrompue lors du changement de localisation.

Quel est le problème

Travailler avec des ressources de chaîne dans Android est organisé comme suit:

les chaînes sont stockées sous forme de balisage xml dans différents dossiers de valeurs
Pour obtenir une chaîne dans le code, vous devez faire référence à l'objet Context.

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))
            }
        }
    }
}