Resource di Compose

Jetpack Compose dapat mengakses resource yang ditentukan dalam project Android Anda. Dokumen ini menjelaskan beberapa API yang ditawarkan Compose untuk melakukannya.

Resource adalah file tambahan dan konten statis yang digunakan kode Anda, seperti bitmap, penetapan layout, string antarmuka pengguna, instruksi animasi, dan banyak lagi. Jika Anda belum terbiasa dengan resource di Android, lihat Panduan ringkasan resource aplikasi.

String

Jenis resource yang paling umum adalah String Anda. Gunakan API stringResource untuk mengambil string yang ditentukan secara statis di resource XML Anda.

// In the res/values/strings.xml file
// <string name="compose">Jetpack Compose</string>

// In your Compose code
Text(
    text = stringResource(R.string.compose)
)

stringResource juga kompatibel dengan format posisi.

// In the res/values/strings.xml file
// <string name="congratulate">Happy %1$s %2$d</string>

// In your Compose code
Text(
    text = stringResource(R.string.congratulate, "New Year", 2021)
)

String jamak

Compose belum menawarkan metode langsung untuk mengambil String jamak. Namun, Anda dapat menggunakan pendekatan tradisional dengan metode getQuantityString dari class Resources. Untuk mengakses Resources dari Context saat ini, gunakan lokal komposisi LocalContext. Baca selengkapnya tentang lokal Komposisi di dokumentasi Interoperabilitas.

// In the res/strings.xml file
// <plurals name="runtime_format">
//    <item quantity="one">%1$d minute</item>
//    <item quantity="other">%1$d minutes</item>
// </plurals>

// In your Compose code
val resources = LocalContext.current.resources

Text(
    text = resources.getQuantityString(
        R.plurals.runtime_format, quantity, quantity
    )
)

Dimensi

Demikian pula, gunakan API dimensionResource untuk mendapatkan dimensi dari file XML resource.

// In the res/values/dimens.xml file
// <dimen name="padding_small">8dp</dimen>

// In your Compose code
val smallPadding = dimensionResource(R.dimen.padding_small)
Text(
    text = "...",
    modifier = Modifier.padding(smallPadding)
)

Warna

Jika Anda mengadopsi Compose secara bertahap di aplikasi, gunakan API colorResource untuk mendapatkan warna dari file XML resource.

// In the res/colors.xml file
// <color name="colorGrey">#757575</color>

// In your Compose code
Divider(color = colorResource(R.color.colorGrey))

colorResource berfungsi seperti yang diharapkan dengan warna statis, tetapi meratakan resource daftar status warna.

Aset vektor dan resource gambar

Gunakan API painterResource untuk memuat vector drawable atau format aset raster seperti PNG. Anda tidak perlu mengetahui jenis drawable, cukup gunakan painterResource di composable Image atau pengubah paint.

// Files in res/drawable folders. For example:
// - res/drawable-nodpi/ic_logo.xml
// - res/drawable-xxhdpi/ic_logo.png

// In your Compose code
Icon(
    painter = painterResource(id = R.drawable.ic_logo),
    contentDescription = null // decorative element
)

painterResource mendekode dan mengurai konten resource di thread utama.

Vector Drawable Animasi

Gunakan API animatedVectorResource untuk memuat XML vector drawable animasi. Metode ini menampilkan instance AnimatedImageVector. Untuk menampilkan gambar animasi, gunakan metode painterFor untuk membuat Painter yang dapat digunakan di composable Image dan Icon. Parameter atEnd boolean dari metode painterFor menunjukkan apakah gambar harus digambar di akhir semua animasi. Jika digunakan dengan status yang dapat diubah, perubahan pada nilai ini akan memicu animasi yang sesuai.

// Files in res/drawable folders. For example:
// - res/drawable/animated_vector.xml

// In your Compose code
val image = animatedVectorResource(id = R.drawable.animated_vector)
val atEnd by remember { mutableStateOf(false) }
Icon(
    painter = image.painterFor(atEnd = atEnd),
    contentDescription = null // decorative element
)

Ikon

Jetpack Compose dilengkapi dengan objek Icons yang merupakan titik entri untuk menggunakan Ikon Material di Compose. Ada lima tema ikon yang berbeda: Filled, Outlined, Rounded, TwoTone, dan Sharp. Setiap tema berisi ikon yang sama, tetapi dengan gaya visual yang berbeda. Anda biasanya harus memilih satu tema dan menggunakannya di seluruh aplikasi agar konsisten.

Untuk menggambar ikon, Anda dapat menggunakan composable Icon yang dapat menambahkan tint dan memberikan ukuran tata letak yang sesuai dengan ikon.

import androidx.compose.material.Icon

Icon(Icons.Rounded.Menu, contentDescription = "Localized description")

Beberapa ikon yang paling sering digunakan tersedia sebagai bagian dari dependensi androidx.compose.material. Untuk menggunakan salah satu ikon Material lainnya, tambahkan dependensi material-icons-extended pada file build.gradle.

dependencies {
  ...
  implementation "androidx.compose.material:material-icons-extended:$compose_version"
}

Font

Untuk menggunakan font di Compose, download dan paketkan file font langsung di APK Anda dengan menempatkannya di folder res/font.

Muat setiap font menggunakan API Font dan buat FontFamily dengan font yang Anda gunakan di instance TextStyle untuk membuat Typography Anda sendiri. Berikut adalah kode yang diambil dari contoh compose Crane dan file Typography.kt.

// Define and load the fonts of the app
private val light = Font(R.font.raleway_light, FontWeight.W300)
private val regular = Font(R.font.raleway_regular, FontWeight.W400)
private val medium = Font(R.font.raleway_medium, FontWeight.W500)
private val semibold = Font(R.font.raleway_semibold, FontWeight.W600)

// Create a font family to use in TextStyles
private val craneFontFamily = FontFamily(light, regular, medium, semibold)

// Use the font family to define a custom typography
val craneTypography = Typography(
    defaultFontFamily = craneFontFamily,
    /* ... */
)

// Pass the typography to a MaterialTheme that will create a theme using
// that typography in the part of the UI hierarchy where this theme is used
@Composable
fun CraneTheme(content: @Composable () -> Unit) {
    MaterialTheme(typography = craneTypography) {
        content()
    }
}

Pelajari tipografi lebih lanjut dalam dokumentasi Tema di Compose.