Internationalization and localization, dark mode and dark mode in compose

author ： Le Weng long

Opening chat

In the past two years, I have been responsible for overseas （ Europe and the United States 、 Middle East ） Project , Before that View Summed up a set of experience of internationalization and localization in the era of , see 《Android Internationalization and localization exploration 》, In the article, everything is from Language translation 、 UI Design 、 Code specification Three aspects describe my solution .

Switch to Compose after , Completely handled the international process again . At the same time, it is found that in the adaptive dark mode Compose Provides out of the box support , It greatly simplifies our development difficulty , This article will share the experience with you . If there are any mistakes in the text , I hope you can give me some advice .

Internationalization and localization

On translation norms in internationalization and UI design code , I won't go into that here , You can turn to the article mentioned at the beginning , Let's start directly at the code level .

word processing

As shown in the figure above , We need to implement relevant pages in simplified Chinese and Arabic .

First, we need to prepare relevant language resource files , Then the whole page of the message list just uses Row and Column To build , There are no other redundant operations , Don't show too much code , The preview code is as follows ：

@Preview(locale = "zh")
@Composable
fun PreviewMessageListScreen() {
    
    MessageListScreen()
}

@Preview(locale = "ar")
@Composable
fun PreviewMessageListScreenRTL() {
    
    MessageListScreen()
}

You can see that we're just giving Preview Annotation added local Parameters , preview RTL The preview effect of is fully displayed , And if it runs on a mobile phone , It will be displayed according to the language and layout direction of the mobile phone system .

Let's look at such a scene , stay View Under the system , For example, when there is Chinese in the Arabic environment , If you don't TextView Of gravity、textAlignment Properties are handled appropriately , Then the situation may appear on the left of the figure below .

Logically speaking , The text content should be attached to the side of the icon , But it's switching RTL After language , The Chinese text content is still on the left side of the screen , This is due to the View Under the system ,Gravity and TextAlignment Will control the layout direction of the text . And by the Compose in ,Text The layout direction is arranged by the parent layout container by default , I won't do any extra processing . So in Compose Developed according to the normal writing method in , The effect picture is shown in the picture on the right , Don't make too many settings at all .

So maybe at the beginning, everyone was dealing with Compose in Text Problems are encountered in the middle and other situations , How to center ？ In fact, you need to nest one in the outer layer Row perhaps Box Wait for the layout , Then change the layout direction to center , Or use its parameters TextAlign It's fine too .

Icon handling

The above is the basic layout processing , It involves the processing of some pictures , We still use it in View Scheme under the system , Use zoom to handle the left and right flip of the picture , Customize Modifier The code is as follows ：

@Composable
fun Modifier.rtl(): Modifier = composed {
    
    val layoutDirection = LocalLayoutDirection.current
    scale(
        scale = if (layoutDirection == LayoutDirection.Rtl) {
    
            -1f
        } else {
    
            1f
        }
    )
}

If the layout direction is RTL Then mirror the picture left and right , We will apply the above customization to the return button icon in the figure below Modifier, So switch to RTL After layout , The direction of the return button icon will produce a mirror change . The other icon does not apply this Modifier, Then its direction will not change .

Dark mode and night mode

There is actually a difference between dark mode and night mode ：

• Dark Mode ： If your cell phone is OLED The screen , Then the screen doesn't glow under black pixels , So it will save electricity .

• Night mode ： Its use scenario is at night , That is, in low light , Therefore, the problem to be solved is to reduce the eye stimulation effect of strong light on the screen during night use .

For the above example figure , We can only say that we have basically realized the Diablo mode , If we further deal with the picture as a whole , Decrease brightness 、 Reduce contrast , Reduce irritation to the user's eyes , Then this can be called a night mode that can further improve the user experience at night .

Processing of text color and background color

Next, let's mainly talk about the Diablo mode in Compose In the implementation of , But it doesn't use Compose Official Material Theme, But use CompositonLocal Re customize a similar color theme . The following color data classes are shown , We generally need a Main text color , Secondary text color and background color , Set separately Light、Dark Model To achieve the effect shown in the picture above .

data class MyColor(
    val textPrimary: Color,
    val textSecondary: Color,
    val background: Color
)

//Light Mode
val myLightColors = MyColor(
    textPrimary = Color(0xFF333333),
    textSecondary = Color(0xFF666666),
    background = Color(0xFFFFFFFF)
)

//Dark Mode
val myDarkColors = MyColor(
    textPrimary = Color(0xFFFFFFFF),
    textSecondary = Color(0xCCFFFFFF),
    background = Color(0xFF333333)
)

Because the value of the color theme is certain , Will not change , So we use staticCompositionLocalOf To create CompositionLocal, To improve performance .

Then create the theme of singleton mode , In the subsequent use of color , We all need to use the colors provided by this theme .

// establish CompositionLocal
val LocalMyColors = staticCompositionLocalOf {
    
    myLightColors
}

// Create your own theme 
object MyTheme {
    
    val colors: MyColor
        @Composable
        get() = LocalMyColors.current
}

@Composable
fun ComposeSampleTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit,
) {
    

    val myColors = if (darkTheme) {
    
        myDarkColors
    } else {
    
        myLightColors
    }

    CompositionLocalProvider(
        LocalMyColors provides myColors
    ) {
    
        MaterialTheme(
            colors = colors,
            typography = Typography,
            shapes = Shapes,
            content = content
        )
    }
}

Finally, we need to use CompositionLocalProvider To provide our theme colors , The default is Light Mode, Such words are in ComposeSampleTheme All composable functions under Effective Use our custom color information .

// Use custom theme colors --MyTheme.colors.textPrimary
Text(
    text = title,
    fontSize = 16.sp,
    color = MyTheme.colors.textPrimary,
    fontWeight = FontWeight.Bold,
    maxLines = 1,
    overflow = TextOverflow.Ellipsis,
)

When previewing, whether to use Dark Mode The parameters of ：

@Preview()
@Composable
fun PreviewMessageListScreenDark() {
    
    ComposeSampleTheme(darkTheme = true) {
    
        MessageListScreen()
    }
}

Icon color processing

As shown in the figure below , stay Light And Dark In mode , The color of the icon needs to be treated differently . If according to different patterns , Use different picture resources , It's a solution , However, using multiple sets of resource files will cause APP Increase in volume .

So we can think about , When using Dark Mode time , Use ColorFilter To change the color of the icon , This will not increase the volume , It is also convenient for us to deal with different colors , The code is as follows ：

@Composable
fun ThemeColorFilter(
    color: Color? = null
): ColorFilter? {
    
    val isDarkTheme = isSystemInDarkTheme()

    if (isDarkTheme) {
    
        return ColorFilter.tint(color = Color(0xCCFFFFFF))
    }

    return if (color == null) {
    
        null
    } else {
    
        ColorFilter.tint(color = color)
    }
}

When in dark mode , Let's use a grayish white color value for the icon , Otherwise, do not use color filters or use custom icon color values .

So far, the basic dark mode framework has been completed , Follow up needs to be based on their own App Add different color data to improve step by step .

summary

Compose As a modern UI tool kit , Also learned View Various development experiences in the era , It's really convenient to deal with internationalization and Diablo mode .