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)
)
ResourcesSnippets.kt

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)
)
ResourcesSnippets.kt

String jamak (eksperimental)

Gunakan pluralStringResource API untuk memuat bentuk jamak dengan kuantitas tertentu.

// 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
Text(
    text = pluralStringResource(
        R.plurals.runtime_format,
        quantity,
        quantity
    )
)
ResourcesSnippets.kt

Saat menggunakan metode pluralStringResource, Anda perlu meneruskan hitungan dua kali jika string berisi pemformatan string dengan angka. Misalnya, untuk string %1$d minutes, jumlah pertama parameter akan memilih string jamak yang sesuai dan jumlah kedua parameter akan dimasukkan ke dalam placeholder %1$d. Jika string jamak tidak menyertakan pemformatan string, Anda tidak perlu meneruskan parameter ketiga ke pluralStringResource.

Untuk informasi selengkapnya tentang bentuk jamak, lihat dokumentasi string kuantitas.

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)
)
ResourcesSnippets.kt

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="purple_200">#FFBB86FC</color>

// In your Compose code
Divider(color = colorResource(R.color.purple_200))
ResourcesSnippets.kt

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

Peringatan: Lebih cenderung warna dari tema dibandingkan warna hard code. Meskipun Anda dapat mengakses warna menggunakan fungsi colorResource, disarankan agar warna aplikasi Anda ditetapkan dalam MaterialTheme yang dapat diakses dari composable Anda seperti MaterialTheme.colors.primary. Pelajari hal ini lebih lanjut di dokumentasi Mendesain sistem di Compose.

Aset vektor dan resource gambar

Gunakan API painterResource untuk memuat vektor 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
)
ResourcesSnippets.kt

painterResource mendekode dan mengurai konten resource di thread utama.

Catatan: Tidak seperti halnya Context.getDrawable, painterResource hanya dapat memuat jenis Drawable platform BitmapDrawable dan VectorDrawable.

Vektor Drawable Animasi

Gunakan AnimatedImageVector.animatedVectorResource API untuk memuat XML vektor drawable animasi. Metode ini menampilkan instance AnimatedImageVector. Untuk menampilkan gambar animasi, gunakan metode rememberAnimatedVectorPainter untuk membuat Painter yang dapat digunakan di composable Image dan Icon. Parameter atEnd boolean dari metode rememberAnimatedVectorPainter 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/ic_hourglass_animated.xml

// In your Compose code
val image =
    AnimatedImageVector.animatedVectorResource(R.drawable.ic_hourglass_animated)
val atEnd by remember { mutableStateOf(false) }
Icon(
    painter = rememberAnimatedVectorPainter(image, atEnd),
    contentDescription = null // decorative element
)
ResourcesSnippets.kt

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.

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

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 {
  def composeBom = platform('androidx.compose:compose-bom:2024.09.03')
  implementation composeBom

  implementation 'androidx.compose.material:material-icons-extended'
}

Catatan: Ikon menyimpan nama yang sama yang ditentukan oleh Material, tetapi dengan nama snake_case yang dikonversi menjadi PascalCase. Misalnya, add_alarm menjadi AddAlarm. Ikon yang dimulai dengan angka, seperti 360, diawali dengan _, menjadi _360.

Peringatan: material-icons-extended adalah library yang besar dan dapat memengaruhi APK Anda ukuran. Oleh karena itu, pertimbangkan untuk menggunakan R8/Proguard dalam build produksi untuk menghapus resource yang tidak digunakan. Selain itu, karena ukurannya yang besar, waktu build project dan waktu pemuatan pratinjau Android Studio dapat meningkat selama pengembangan. Di sisi lain, material-icons-extended memungkinkan Anda melakukan iterasi dengan lebih cepat melalui akses cepat ke semua ikon versi terbaru. Anda juga dapat menggunakan {i>library<i} ini untuk menyalin kode sumber ikon untuk tetap di aplikasi Anda, atau sebagai alternatif, impor ikon menggunakan Android Aset vektor Import Studio fitur.

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(
    titleLarge = TextStyle(
        fontFamily = 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()
    }
}
ResourcesSnippets.kt

Untuk menggunakan font yang dapat didownload di Compose, lihat Halaman Font yang dapat didownload.

Pelajari tipografi lebih lanjut dalam dokumentasi Tema di Compose