Oluşturulan kaynaklar

Jetpack Compose, Android projenizde tanımlanan kaynaklara erişebilir. Bu dokümanında, Compose'un bunu yapmak için sunduğu API'lerden bazıları açıklanmaktadır.

Kaynaklar, kodunuzun kullandığı ek dosyalar ve statik içeriktir. Örneğin, kullanıcı arayüzü dizeleri ve animasyon talimatları gibi yazılımlar, düzen tanımları, kullanıcı arayüzü ve diğerleri. Android'deki kaynaklara aşina değilseniz Uygulama kaynaklarına genel bakış kılavuzuna göz atın.

Yaylı Çalgılar

En yaygın kaynak türü Dizelerinizdir. stringResource API'yi kullanma XML kaynaklarınızda statik olarak tanımlanmış bir dizeyi almak için kullanın.

// 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, konumsal biçimlendirmeyle de çalışır.

// 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

Çoğul dize (deneysel)

Belirli bir miktarda çoğul yüklemek için pluralStringResource API'yi kullanın.

// 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

pluralStringResource yöntemini kullanırken sayımı iki kez iletmeniz gerekir dizeniz bir sayıyla dize biçimlendirmesi içeriyorsa. Örneğin, dize %1$d minutes, ilk sayı parametresi uygun çoğul değerini seçer dizesi ve ikinci Sayı parametresi %1$d yer tutucusuna eklenir. Çoğul dizeleriniz dize biçimlendirmesi içermiyorsa üçüncü parametreyi pluralStringResource parametresine iletmeniz gerekmez.

Çoğullar hakkında daha fazla bilgi için miktar dizesi dokümanları.

Boyutlar

Benzer şekilde, bir kaynak XML'den boyutları almak için dimensionResource API'yi kullanın. dosyası olarak kaydedebilirsiniz.

// 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

Renkler

Compose'u uygulamanızda aşamalı olarak kullanıyorsanız colorResource Bir kaynak XML dosyasından renk alma API.

// 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, statik renklerle beklendiği gibi çalışır ancak renkleri düzleştirir durum listesi kaynaklarını inceleyin.

Vektör öğeleri ve resim kaynakları

Vektör çizilebilir öğeleri veya PNG gibi raster öğe biçimlerini yüklemek için painterResource API'yi kullanın. Çizilebilir öğenin türünü bilmeniz gerekmez. Image kompozisyonlarında veya paint değiştiricilerde painterResource'ü kullanmanız yeterlidir.

// 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, ana mesajdaki kaynağın içeriğini kod çözer ve ayrıştırır.

Animasyonlu Vektör Çekilebilir Öğeleri

Animasyon yüklemek için AnimatedImageVector.animatedVectorResource API'yi kullanma çekilebilir XML. Yöntem bir AnimatedImageVector örneği döndürür. İçinde animasyonlu resmi görüntülemek için rememberAnimatedVectorPainter öğesini kullanın yöntemini kullanarak Image ve Icon composable'larda kullanılabilecek bir Painter oluşturun. rememberAnimatedVectorPainter yönteminin boole atEnd parametresi resmin tüm animasyonların sonunda çizilip çizilmeyeceğini gösterir. Değişken bir durumla kullanılırsa bu değerdeki değişiklikler ilgili animasyonu tetikler.

// 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

Simgeler

Jetpack Compose, kullanım için giriş noktası olan Icons nesnesiyle birlikte gelir Malzeme Simgeleri Oluştur'u tıklayın. Beş farklı simge teması vardır: Doldurulmuş, Dış çizgili, Yuvarlak, TwoTone ve Keskin. Her biri temanın aynı simgeleri içermesine rağmen farklı bir görsel stile sahip olması gerekir. Genellikle tutarlılık için bir tema seçip uygulamanızda kullanmanız gerekir.

Bir simge çizmek için Icon renk tonu uygulayan ve simgeyle eşleşen düzen boyutu sağlayan composable.

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

En sık kullanılan simgelerden bazıları androidx.compose.material bağımlılığı kapsamında kullanılabilir. Diğer Material simgelerinden herhangi birini kullanmak için material-icons-extended bağımlılığını build.gradle dosyasına ekleyin.

dependencies {
  def composeBom = platform('androidx.compose:compose-bom:2025.02.00')
  implementation composeBom

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

Yazı Tipleri

Oluştur'da yazı tiplerini kullanmak için yazı tipi dosyalarını indirip res/font klasörüne yerleştirerek doğrudan APK'larınıza ekleyin.

Her bir yazı tipini Font API'sini kullanarak yükleyin ve kendi Typography'nizi oluşturmak için TextStyle örneklerinde kullanabileceğiniz bir FontFamily oluşturun. İlgili içeriği oluşturmak için kullanılan aşağıdaki kod, Crane örnek oluştur ve Typography.kt dosyası olarak kaydedebilirsiniz.

// 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

Oluştur'da indirilebilir yazı tiplerini kullanmak için İndirilebilir yazı tipleri sayfasına bakın.

Oluşturma bölümünde tema oluşturma bölümünden tipografi hakkında daha fazla bilgi edinebilirsiniz. belgeleri