Блог

Главная - Вопросы по программированию - Как мне использовать ресурс цвета непосредственно в Jetpack Compose?

Как мне использовать ресурс цвета непосредственно в Jetpack Compose?

#android #android-jetpack #android-jetpack-compose

#Android #android-jetpack #android-jetpack-compose

Вопрос:

Я хочу использовать пользовательские цвета, определенные в colors.xml создавайте классы напрямую, не используя цвета темы материала или тему по умолчанию, предоставляемую Jetpack. Есть ли какой-нибудь простой способ сделать это?

Ответ №1:

Вы можете использовать colorResource() , который загружает цветовой ресурс.

 Text(
    text = "Hello World",
    color = colorResource(R.color.purple_200)
)

Комментарии:

1. Это, безусловно, работает, однако я думаю, что идея состоит в том, чтобы ваши цвета были в вашем файле Colors.kt, и часть преимуществ перехода на Jetpack Compose заключается в возможности избавить проект от этой жалкой вещи, которую мы называем XML. Счастливого кодирования!

2. @JoshuaKing … идея colorResource (…) хорошо работает из-за «магических чисел», которые появляются при статическом анализе кода.

Ответ №2:

Чтобы использовать цвет в jetpack compose с помощью рекомендуемого, создайте пакет ui.theme в com.<имя_домена>.<имя_приложения>, который, вероятно, будет присутствовать по умолчанию, если вы создаете пустой проект compose. Теперь создайте Color.kt и Theme.удалите файлы kotlin, если они отсутствуют в вашем проекте.

В Color.kt добавьте нужные цвета

 package com.<domain_name>.<app_name>.ui.theme

import androidx.compose.ui.graphics.Color

val Purple200 = Color(0xFFBB86FC)
val Purple500 = Color(0xFF6200EE)
val Purple700 = Color(0xFF3700B3)
val Teal200 = Color(0xFF03DAC5)
val Flower = Color(0xFF4CAF50)
val Deer = Color(0xFFFF5722)
val Mango = Color(0xFFFF9800)
val AppbarColor = Color(0xFF2196F3)

Вот готовый к использованию шаблон цвета материала, созданный мной

Существует 3 распространенных способа использования цветов

Метод 1: прямое использование цвета

 import com.<domain_name>.<app_name>.ui.theme.*

Text(text = "Hello ", color = Flower)

Способ 2: переопределить цвета материала по умолчанию

Теперь в, Theme.kt

 private val DarkColorPalette = darkColors(
    primary = Purple200,
    primaryVariant = Purple700,
    secondary = Teal200,
    onBackground = Flower //Custom color
)

private val LightColorPalette = lightColors(
    primary = Purple500,
    primaryVariant = Purple700,
    secondary = Teal200,
    onBackground = Deer //Custom color

    /* Other default colors to override
    background = Color.White,
    surface = Color.White,
    onPrimary = Color.White,
    onSecondary = Color.Black,
    onBackground = Color.Black,
    onSurface = Color.Black,
    */
)

@Composable
fun NotepadTheme(darkTheme: Boolean = isSystemInDarkTheme(), 
content:@Composable() () -> Unit) {
    val colors = if (darkTheme) {
        DarkColorPalette
    } else {
        LightColorPalette
    }

    MaterialTheme(
        colors = colors,
        typography = Typography,
        shapes = Shapes,
        content = content
    )
}

MainActivity.kt

 class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ColorApp()
        }
    }
}

@Composable
fun ColorApp() {
    ColorTheme {
        Surface(modifier = Modifier.fillMaxSize(),
            color = MaterialTheme.colors.background) {
            Greeting("Android")
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!", color = MaterialTheme.colors.onBackground) //Using color
}

@Preview(
    showBackground = true, name = "Light mode",
    uiMode = Configuration.UI_MODE_NIGHT_NO or 
    Configuration.UI_MODE_TYPE_NORMAL
    )
@Preview(
    showBackground = true, name = "Night mode",
    uiMode = Configuration.UI_MODE_NIGHT_YES or 
    Configuration.UI_MODE_TYPE_NORMAL
)
@Composable
fun DefaultPreview() {
    ColorApp()
}

Метод 3: Настраиваемая тема (рекомендуемый метод)

 Text(text = "Hello ", color = AppNameTheme.colors.customColor)