Uygulandığında, çoğu bileşenin içeriği sabit olmaz. Bir bileşene sağlanan verilere bağlı olarak değişir. Bunu tasarımlarınıza yansıtmak için içerik parametrelerini kullanabilirsiniz. İçerik parametreleri, gerçek verileri koda gömmeden, bir tasarımın hangi bölümünün veri içereceğini belirtmenizi sağlar.
İçerik parametresi ekleme
Figma dosyanızda, bileşeni seçin ve Relay for Figma eklentisini açın (Eklentiler > Figma için Geçiş).
Ana Figma penceresinde, Mac'te ⌘ + tıklama veya Windows ve Linux'ta Ctrl + tıklama ile Başlık katmanını seçin. Ardından, eklentide, "Parametreler"in yanındaki + işaretini tıklayın ve katman için parametre eklemek üzere metin içeriği'ni seçin.
Başlık metni içerik parametresinin adını değiştirmek için adı Ad alanına girin. Bu eğitim için Başlık girin.
Adı düzenlemenin yanı sıra, farklı mülk türlerini seçebilir veya kodda yorum oluşturmak için bir açıklama ekleyebilirsiniz. En uygun adlandırma şemasını bulmak için geliştiricilerinizle birlikte çalışın. İçerik parametrelerinin adları, oluşturulan composable'daki parametrelerin adlarına dönüştürülür.
Adlandırılmış sürümü kaydet
Şimdi bu sürümü koda aktarılmaya hazır olarak işaretleyelim.
- Açık değilse Figma Relay eklentisini açın.
- Geliştiriciyle paylaş'ı tıklayın.
Geliştiriciyle paylaş ekranında, sürüm için bir ad ve açıklama girin.
Örnek Başlık: Hello World Card V3
Örnek Açıklama: Eklenen parametreler
Bileşeni Android Studio'da güncelleyin
Bileşeni Android Studio'da güncelleyelim.
Android Studio'da, Proje aracı penceresinin Android görünümünde olduğundan emin olun. Ardından
app/ui-packages/hello_card/
'yi sağ tıklayın ve Kullanıcı Arayüzü Paketini Güncelle'yi tıklayın.Projenizi tekrar derlemek için seçeneğini tıklayın.
app/java/com/example/hellofigma/hellocard/HelloCard.kt
uygulamasını açarsanız bir parametrenin eklendiğini fark edersiniz:title
. Parametrenin adı, Figma'da belirttiğimiz içerik parametresinin adıdır:app/java/com/example/hellofigma/MainActivity.kt
adlı görüşmeyi açın.title
parametresine bir değer eklemek içinMainActivity
sınıfındaki bir satırı değiştirin:class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { HelloFigmaTheme { // A surface container using the 'background' color from the theme Surface(color = MaterialTheme.colors.background) { HelloCard(title="Balloon World!") // Change this line } } } } }
Aynı dosyanın aşağısındaki composable'ın önizlemesinde bir satırı değiştirin:
@Preview(showBackground = true) @Composable fun DefaultPreview() { HelloFigmaTheme { HelloCard(title="Balloon World!") // Change this line } }
Projenizi yeniden oluşturun ve güncellenmiş bileşeni önizlemede görün. Yeni parametre değerinin artık görünür olduğunu unutmayın.
Aynı güncellemeleri emülatörde görmek için uygulamayı çalıştırın.
Harika! Relay iş akışının temellerini öğrendiniz.
Sonraki adım
Böylece temel eğitim sona ermiş oldu. Relay iş akışının birçok özelliğini görmüş olsanız da kullanabileceğiniz birkaç başka özellik daha vardır. Etkileşim işleyiciler ve birden fazla Figma varyantı olan bileşenlerle çalışma gibi özellikleri nasıl kullanacağınızı öğrenmek isterseniz ileri seviye eğiticiye geçebilirsiniz.
Sizin için önerilenler
- Not: Bağlantı metni JavaScript kapalıyken görüntülenir
- Android Studio'da tasarımları koda dönüştürme
- Tasarım güncellemeleri yapma ve yayma
- Düzen oluşturma ile ilgili temel bilgiler