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 kaynaklara genel bakış rehberine bakı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 öğesi yüklemek için pluralStringResource API'sini 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, %1$d minutes dizesi için ilk sayım parametresi uygun çoğul dizeyi seçer ve ikinci sayım parametresi %1$d yer tutucusuna yerleştirilir. Çoğul dizeleriniz dize biçimlendirmesi içermiyorsa, dizeyi üçüncü parametreyi pluralStringResource olarak ayarlayın.

Çoğul ifadeler hakkında daha fazla bilgi için miktar dizesi dokümanlarına göz atın.

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 çekilebilir kaynaklarını veya pikselleştirilmiş yüklemek için painterResource API'yi kullanma öğe formatlarından biridir. Çizilebilir öğenin türünü bilmeniz gerekmez. Image kompozisyonlarında veya paint değiştiricilerinde 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 sayfadaki kaynak içeriğinin kodunu çözer ve ayrıştırır ileti dizisi.

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 tema aynı simgeleri içerir ancak farklı bir görsel tarza sahiptir. Şunları yapmalısınız: genellikle bir tema seçer ve tutarlılık için bunu uygulamanızda kullanırsınız.

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 yaygın kullanılan simgelerden bazıları androidx.compose.material bağımlılık. 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:2024.09.00')
  implementation composeBom

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

Yazı Tipleri

Compose'da yazı tipi kullanmak için yazı tipi dosyalarını doğrudan res/font klasörüne yerleştirerek APK'ları ekleyebilirsiniz.

Her yazı tipini Font API'yi açın ve FontFamily ve ve proje başlatma belgesinde TextStyle örneğini kendin için bir tane oluştur Typography İ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

Compose'da indirilebilir yazı tiplerini kullanmak için İndirilebilir yazı tipleri sayfası.

Yazı biçimi hakkında daha fazla bilgiyi Oluşturma'da tema oluşturma dokümanlarında bulabilirsiniz.