Jetpack Compose, Android projenizde tanımlanan kaynaklara erişebilir. Bu belgede, Compose'un bu amaçla sunduğu bazı API'ler açıklanmaktadır.
Kaynaklar, kodunuzun kullandığı ek dosyalar ve statik içeriklerdir. Örneğin, bit eşlemler, düzen tanımları, kullanıcı arayüzü dizeleri, animasyon talimatları vb. Android'deki kaynaklar hakkında bilgi edinmek için 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'sini 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çimlendirme ile 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 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 dizenizde sayıyla dize biçimlendirmesi varsa sayıyı iki kez iletmeniz gerekir. Örneğin, %1$d minutes
dizesi için ilk sayı parametresi uygun çoğul dizesini seçer ve ikinci sayı parametresi %1$d
yer tutucusuna eklenir.
Çoğul dizeleriniz dize biçimlendirmesi içermiyorsa üçüncü parametreyi pluralStringResource
'ya iletmeniz gerekmez.
Çoğullar hakkında daha fazla bilgi için miktar dizesi dokümanını inceleyin.
Boyutlar
Benzer şekilde, bir 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
Uygulamanızda Compose'u kademeli olarak kullanıyorsanız bir kaynak XML dosyasından renkleri almak için colorResource
API'sini 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üzleştirir.
Vektör öğeler ve resim kaynakları
Vektör çizilebilir öğeleri veya PNG gibi rasterleştirilmiş öğe biçimlerini yüklemek için painterResource
API'sini kullanın. Çizilebilir öğenin türünü bilmeniz gerekmez. Image
composable'ları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 )
painterResource
, ana iş parçacığında kaynağın içeriğini kod çözme ve ayrıştırma işlemlerini yapar.
Animasyonlu Vektör Çizilebilir Öğeler
Animasyonlu bir vektör çizilebilir XML'si yüklemek için AnimatedImageVector.animatedVectorResource
API'sini kullanın. Yöntem, bir AnimatedImageVector
örneği döndürür. Animasyonlu resmi göstermek 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 belirtir.
Değiştirilebilir bir durumla kullanıldığında 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 )
Simgeler
Jetpack Compose, Compose'da Materyal Simgeleri'ni kullanmak için giriş noktası olan Icons
nesnesiyle birlikte gelir. Beş farklı simge teması vardır:
Dolu,
Anahatlı,
Yuvarlak,
İki Tonlu ve
Keskin. Her temada aynı simgeler bulunur ancak görsel stil farklıdır. Genellikle bir tema seçip tutarlılık için uygulamanızda kullanmanız gerekir.
Simge çizmek için, renk tonu uygulayan ve simgeyle eşleşen bir düzen boyutu sağlayan Icon
composable'ını kullanabilirsiniz.
Icon(Icons.Rounded.Menu, contentDescription = "Localized description")
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.05.00')
implementation composeBom
implementation 'androidx.compose.material:material-icons-extended'
}
Yazı Tipleri
Compose'da yazı tiplerini kullanmak için yazı tipi dosyalarını res/font
klasörüne yerleştirerek doğrudan APK'larınıza indirip paketleyin.
Font
API'yi kullanarak her bir yazı tipini yükleyin ve TextStyle
örneklerinde kendi Typography
'inizi oluşturmak için kullanabileceğiniz FontFamily
oluşturun. Aşağıdaki kod, Crane Compose örneğinden ve Typography.kt
dosyasından alınmıştır.
// 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() } }
Oluşturma'da indirilebilir yazı tiplerini kullanmak için İndirilebilir yazı tipleri sayfasına bakın.
Yazı biçimi hakkında daha fazla bilgiyi Compose'da tema oluşturma dokümanında bulabilirsiniz.
Sizin için önerilenler
- Not: JavaScript kapalıyken bağlantı metni gösterilir.
- Resim yükleme {:#loading-images}
- Compose'da Material Design 2
- Compose'da özel tasarım sistemleri