Card
bileşeni, tek bir konuyla ilgili içerik ve işlemler içerir.
Anatomi
Bir kart bileşeninde yalnızca tek bir yuva vardır. Kartlar; simgeler, resimler veya etiketler içerebilir ve özelleştirilebilir.
Kartlar varsayılan olarak köşeleri yuvarlatılmış ve gradyanlı arka plana sahip dikdörtgendir. Dairesel ekranlar ekranın üst ve alt kısmının% 20'sine kadar kırpılabilir. Bu nedenle, kartınızın ekranda tamamen görüntülendiğinden emin olmak için kartınızın maksimum yüksekliğini% 60'a ayarlayın.
Başlık Kartı
Uygulama içinde, mesaj gibi bilgileri göstermek için
Başlık kartlarını kullanın. Başlık kartları; bir başlık, isteğe bağlı bir zaman alanı ve resim veya metin olan ilgili içeriğin yer aldığı üç slotlu bir düzene sahiptir.
Uygulama kartı
Birden çok uygulamadan etkileşimli öğeleri göstermek için uygulama kartlarını kullanın. Uygulama kartlarında uygulama simgesi, uygulama adı, etkinliğin gerçekleştiği saat, bir tür başlık ve resim ya da metin şeklinde ilgili içeriğin yer aldığı beş yuvalı düzen bulunur.
Tasarım önerileri
Resim kartı
Resim kartları, tek bir konuyla ilgili içerikleri arka plan resmiyle gösterir. Resim kartları bağımsız resimler de görüntüleyebilir.
TitleCard(
onClick = { ... },
title = { Text("Workout") },
backgroundPainter = CardDefaults.imageWithScrimBackgroundPainter(
backgroundImagePainter = painterResource(id = R.drawable.backgroundimage)
),
contentColor = MaterialTheme.colors.onSurface,
titleColor = MaterialTheme.colors.onSurface
) {
Text("12 songs · 1 Hour 32 mins")
}
Boyutlar
Kart genişliği
Kartlar varsayılan olarak kapsayıcının maksimum genişliğini belirler.
Kart yüksekliği
Kart yüksekliği esnektir. Bileşenlerin içeriğine göre belirlenir.
Yuvarlak saat kadranlarında, ekran yüksekliğinin% 60'ından daha uzun olan kartlar kırpılır.