Oluşturulan kaynaklar

Jetpack Compose, Android projenizde tanımlanan kaynaklara erişebilir. Bu dokümanda, Compose'un bu amaçla sunduğu API'lerden bazıları açıklanmaktadır.

Kaynaklar, kodunuzun kullandığı ek dosyalar ve statik içeriklerdir (ör. bitmap'ler, düzen tanımları, kullanıcı arayüzü dizeleri, animasyon talimatları vb.). 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. XML kaynaklarınızda statik olarak tanımlanmış bir dize almak için stringResource API'yi 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, dizenizde sayı içeren dize biçimlendirmesi varsa sayıyı iki kez iletmeniz gerekir. Ö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 üçüncü parametreyi pluralStringResource parametresine iletmeniz gerekmez.

Ç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 dosyasından boyut almak için dimensionResource API'yi kullanın.

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

Uygulamanızda Compose'u aşamalı olarak kullanıyorsanız bir kaynak XML dosyasından renk almak için colorResourceAPI'yi kullanın.

// 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 renk durumu listesi kaynaklarını düzleştirir.

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

Animasyonlu bir vektör çizilebilir XML yüklemek için AnimatedImageVector.animatedVectorResource API'yi kullanın. Yöntem bir AnimatedImageVector örneği döndürür. Animasyonlu görüntüyü görüntülemek için Image ve Icon kompozisyonlarında kullanılabilecek bir Painter oluşturmak üzere rememberAnimatedVectorPainter yöntemini kullanın. rememberAnimatedVectorPainter yönteminin boole atEnd parametresi, resmin tüm animasyonların sonunda çizilip çizilmeyeceğini belirtir. 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, Compose'da Materyal Simgelerini kullanmanın giriş noktası olan Icons nesnesini içerir. Beş farklı simge teması vardır: Doldurulmuş, Kenarları kalın, Yuvarlak, İki Tonlu ve Keskin. Her tema aynı simgeleri içerir ancak farklı bir görsel tarza sahiptir. Genellikle tutarlılık için bir tema seçip uygulamanızda kullanmanız gerekir.

Simge çizmek için, ton uygulayan ve simgeyle eşleşen düzen boyutu sağlayan Icon bileşenini kullanabilirsiniz.

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:2024.10.01')
  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. Aşağıda, Crane derleme örneğinden ve Typography.kt dosyasından alınan kod verilmiştir.

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

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