İçerik parametreleri

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

1. Figma dosyanızda, bileşeni seçin ve Relay for Figma eklentisini açın (Eklentiler > Figma için Geçiş).

   

2. 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.

   

3. 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.

1. Açık değilse Figma Relay eklentisini açın.
2. Geliştiriciyle paylaş'ı tıklayın.

3. 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.

1. 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.

   

2. 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:

   

3. app/java/com/example/hellofigma/MainActivity.kt adlı görüşmeyi açın.

4. title parametresine bir değer eklemek için MainActivity 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
                   }
               }
           }
       }
   }
   

5. 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
       }
   }
   

6. 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.

   

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