Kullanıcı Arayüzü Paketleri, her düzeyde dinamik içerik ve etkileşim desteğiyle diğer Kullanıcı Arayüzü Paketlerinin örneklerini (veya "iç içe) içerebilir. Bunların tümü Relay for Android Studio eklentisi kullanılarak otomatik olarak içe aktarılır.
İç içe yerleştirilmiş örnekler ekleme ve iç içe yerleştirilmiş parametreleri gösterme
Paket örnekleri, normalde Figma'ya bileşen örnekleri eklediğiniz gibi eklenebilir.
Bir pakete iç içe yerleştirilmiş paket örneği ekledikten sonra, diğer katmanların özelliklerinde olduğu gibi iç içe yerleştirilmiş örnek parametrelerine göre içerik ve etkileşim parametreleri ekleyebilirsiniz:
- Paketlenmiş örnek katmanını seçin.
- Figma kullanıcı arayüzü için Relay'de + ekle parametresini tıklayın.
- İç içe yerleştirilmiş paket parametrelerinden birini seçin.
Seçilen parametre veya etkileşim, üst bileşen tarafından gösterilir ve iç içe yerleştirilmiş paket parametresi ile üst bileşene eklenen yeni bir parametre arasında bağlantı oluşturur. Oluşturulan kodda artık üst öğe için bir değer sağlayabilirsiniz ve bu değer, iç içe yerleştirilmiş paketin kod bileşeninin bir örneğine geçirilir.
İç içe yerleştirilmiş örnek, üst bileşende birden fazla Figma varyantı varsa kullanıcı arayüzü, bağımsız yapılandırmayı etkinleştirmek için varyant örneklerini gruplandırır.
Varsayılan olarak, iç içe yerleştirilmiş paket örnek parametreleri üst bileşen tarafından gösterilmez. Bunun yerine, oluşturulan kod normal parametre geçersiz kılmalarında olduğu gibi, Figma'da belirttiğiniz değeri kullanır.
Aşağıdaki örneğe birlikte göz atalım:
- Çip paketinde
chip-text
adlı tek bir metin parametresi bulunur. - Açıklama Kartı paketi bir Çip paketi içerir. Parametreler şunlardır:
title
subchip-text
: Çip örneğininchip-text
parametresini gösterirsub-icon
details
Rezervasyon Kartı paketi, bir Açıklama Kartı paketi içerir. Parametreleri şunlardır:
hero-image
headline
seçeneği, Açıklama Kartı örneğinintitle
parametresini gösterir.reservation-text
seçeneği, Açıklama Kartı örneğininchip-text
parametresini gösterir.summary
seçeneği, Açıklama Kartı örneğinindetails
parametresini gösterir.
Açıklama Kartında Rezervasyon Kartı tarafından gösterilmeyen tek parametrenin sub-icon
olduğunu unutmayın. Bu nedenle, bir Rezervasyon Kartının her örneğinde Açıklama Kartı'nın varsayılan olarak sağladığı simge kullanılır.
İç içe yerleştirilmiş bileşen örneğinin bir parametresini göstermek için:
- Parametre içeren bir Kullanıcı Arayüzü Paketi iç içe yerleştirilmiş örneğini seçin. Örneği doğrudan tuvalde veya Relay instances (Geçiş örnekleri) bölümünün altındaki Relay for Figma eklentisinde seçebilirsiniz.
Parametreler'in yanındaki + işaretini tıklayın. Menüde, seçilen örneğe ait parametreler gösterilir. Bir parametre seçin.
Bu işlem, iç içe yerleştirilmiş örnekten bir parametreyi gösterir. Bu örnekte Açıklama Kartı örneği seçilmiş ve details parametresi gösterilmiştir.
Relay for Figma eklentisinin sağ tarafındaki bölmeden farklı bir parametre seçebilir veya oluşturulan kodda çağrılma şeklini değiştirmek üzere parametreyi yeniden adlandırabilirsiniz. Bu örnekte parametre, summary olarak yeniden adlandırılmıştır. Bu, iç içe yerleştirilmiş örneğimizdeki details parametresini ifade etmeye devam etmektedir.
Bir üst bileşeni (bu örnekte Rezervasyon Kartı) Android Studio'ya aktardığınızda, iç içe yerleştirilmiş tüm paketler (bu örnekte Açıklama Kartı ve Çip) otomatik olarak içe aktarılır. Kod oluşturulduğunda her paket kendi composable işlevini oluşturur.
Bu örnek için oluşturulan kod aşağıdaki gibi görünür:
RezervasyonKartı.kt
..
import com.example.hellofigma.descriptioncard.DescriptionCard
...
@Composable
fun ReservationCard(
modifier: Modifier = Modifier,
heroImage: Painter,
headline: String,
summary: String,
reservationText: String
) {
...
DescriptionCard(
title = headline,
details = summary,
subchipText = reservationText,
subIcon = painterResource(R.drawable.reservation_card_bookmark_icon),
modifier = modifier
)
...
}
AçıklamaKartı.kt
...
import com.example.hellofigma.chip.Chip
...
@Composable
fun DescriptionCard(
modifier: Modifier = Modifier,
title: String,
details: String,
subchipText: String,
subIcon: Painter
) {
...
Chip(chipText = subchipText)
...
}
İç içe paket örneğinin özelliklerini geçersiz kıl
Figma'da iç içe yerleştirilmiş bir örnek özelliğinin değerini geçersiz kılarsanız yeni değer, yalnızca iç içe yerleştirilmiş bileşen söz konusu özellik için bir parametre eklediyse Compose kodunda çevrilir. Aksi takdirde, yeni değer atlanır ve iç içe yerleştirilmiş bileşendeki orijinal değer kodda kullanılır.
Aşağıdaki örneği inceleyelim. Açıklama Kartı bileşeninin bir Çip bileşen örneği vardır. "Çip Metni" olan metni "Rezervasyon Gerekli" olarak değiştirerek Chip örneğine bir geçersiz kılma işlemi ekledik:
Çip'in metni için bir parametresi yoksa oluşturulan kodda Açıklama Kartının çipi hâlâ "Rezervasyon Gerekli" değil, "Çip Metni" olarak görünür.
@Composable
fun DescriptionCard(
modifier: Modifier = Modifier,
) {
...
Chip(
modifier = modifier
// No parameter available to override the chip's text
)
...
}
@Composable
fun Chip(
modifier: Modifier = Modifier,
) {...}
Çip'in metni için çip-metni gibi bir parametresi varsa DescriptionCard
, oluşturulan kodda chipText
parametresinin değeri olarak "Rezervasyon Gerekli" olan Chip
öğesini çağırır:
@Composable
fun DescriptionCard(
modifier: Modifier = Modifier,
) {
...
Chip(
modifier = modifier,
chipText = "Reservation Required"
)
...
}
@Composable
fun Chip(
modifier: Modifier = Modifier,
chipText: String
) {...}
Açıklama Kartı, Çip'in çip metni parametresini altçip-metni olarak gösterirse oluşturulan kodda DescriptionCard
, subchipText
parametresine sahiptir ve chipText
parametresinin değeri olarak subchipText
ile Chip
yöntemini çağırır:
@Composable
fun DescriptionCard(
modifier: Modifier = Modifier,
subchipText: String
) {
...
Chip(
modifier = modifier,
chipText = subchipText
)
...
}
@Composable
fun Chip(
modifier: Modifier = Modifier,
chipText: String
) {...}
Ayrıca, artık "Rezervasyon Gerekli" bir parametrenin değeri olduğundan, oluşturulan kodda yalnızca DescriptionCard'ın önizlemesinde görünür.
@Preview
@Composable
private fun DescriptionCardPreview() {
MaterialTheme {
RelayContainer {
DescriptionCard(
subchipText = "Reservation Required",
modifier = Modifier.rowWeight(1.0f).columnWeight(1.0f)
)
}
}
}
Sınırlamalar
- Üst bileşenle aynı varyant özelliklerine sahip iç içe yerleştirilmiş bileşen derlenemiyor
- ui-paketler dışındaki kaynakları güncellemek yeni bir derlemeyi zorunlu kılmaz
Sizin için önerilenler
- Not: Bağlantı metni JavaScript kapalıyken görüntülenir
- Bileşenleri mevcut kodla eşleme
- İçerik parametreleri
- Düzen oluşturma ile ilgili temel bilgiler