Oluşturulan kaynaklar

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

Kaynaklar; bit eşlemler, düzen tanımları, kullanıcı arayüzü dizeleri, animasyon talimatları gibi kodunuzun kullandığı ek dosyalar ve statik içeriklerdir. 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 dizeyi 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)
)

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

Dize çoğulları (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
    )
)

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

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

Boyutlar

Benzer şekilde, kaynak XML dosyasından boyutları 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)
)

Renkler

Compose'u uygulamanızda aşamalı olarak kullanıyorsanız kaynak XML dosyasından renk almak için colorResource API'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))

colorResource, statik renklerle beklendiği gibi çalışır ancak renk durumu listesi kaynaklarını düzeltir.

Vektör öğeleri ve resim kaynakları

Vektör çekilebilir kaynaklarını veya PNG gibi pikselleştirilmiş öğe biçimlerini yüklemek için painterResource API'yi kullanın. Çekilebilir öğenin türünü bilmeniz gerekmez. Image composable'larda 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
)

painterResource, ana iş parçacığındaki kaynağın içeriğinin kodunu çözer ve ayrıştırır.

Animasyonlu Vektör Çekilebilir Öğeleri

Animasyonlu vektör çekilebilir XML yüklemek için AnimatedImageVector.animatedVectorResource API'yi kullanın. Yöntem bir AnimatedImageVector örneği döndürür. Animasyonlu resmi görüntülemek için rememberAnimatedVectorPainter yöntemini kullanarak Image ve Icon composable'larında 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şebilir bir durumla kullanılırsa bu değerde yapılan değişiklikler, karşılık gelen 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
)

Simgeler

Jetpack Compose'da, Compose'da Materyal Simgeleri'ni kullanmak için giriş noktası olan Icons nesnesi bulunur. Beş farklı simge teması vardır: Dolgulu, Dış çizgili, Yuvarlak, İki Tonlu ve Keskin. Her tema aynı simgeleri içerir ancak bunların görsel stili farklıdır. Genellikle bir tema seçmeniz ve tutarlılık için bunu uygulamanızın tamamında kullanmanız gerekir.

Simge çizmek için tonlama uygulayan ve simgeyle eşleşen düzen boyutu sağlayan Icon composable'ı kullanabilirsiniz.

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

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

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

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

Yazı Tipleri

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

Her yazı tipini Font API'yi kullanarak yükleyin ve TextStyle örneklerinde kullanabileceğiniz bir FontFamily oluşturarak kendi yazı tiplerinizi Typography oluşturun. Aşağıda, Crane oluşturma örneği ile bunun 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()
    }
}

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

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