Kullanıcı Arayüzü Paketini ve Oluşturulan Kodu Anlama

Kullanıcı Arayüzü Paketi

Kullanıcı Arayüzü Paketleri, kullanıcı arayüzü bilgilerini almanın yeni ve esnek bir yoludur. Tasarımcılar, Figma'daki bileşenlerden Kullanıcı Arayüzü Paketleri oluşturmak için Relay for Figma eklentisini kullanır. Bu da tasarımın geliştiriciler tarafından kullanılmaya hazır olduğunu belirtir. Tasarımcılar daha sonra geliştiricilere Figma tasarım dosyalarının URL'sini sağlar.

Geliştiriciler, Kullanıcı Arayüzü Paketlerini Figma tasarım dosyasından içe aktarmak için Android Studio eklentisini kullanır. Bir Android Studio projesinde Kullanıcı Arayüzü Paketi; yazı tipi dosyaları, resimler ve SVG'ler dahil olmak üzere ilişkili öğelerle birlikte içe aktarılan Figma bileşenlerinin bildirimsel açıklamalarını içerir.

Kullanıcı Arayüzü Paketleri kalıcı yapılardır ve kaynak kontrolüne atanabilir. Geliştirici bir Android Studio projesine Figma paketi aktardığında, dosyalar ui-packages klasörü içindeki projeye eklenir. İçe aktarılan Kullanıcı Arayüzü Paketinin bir örneğini burada görebilirsiniz:

Kullanıcı Arayüzü Paketinin İçeriği

İçe aktarılmış kullanıcı arayüzü paketine sahip bir proje aşağıdaki dosyaları içerir:

  • [component_name].json — Bileşeni açıklayan bir JSON dosyası (örneğin, story_card.json).
  • config.json: Belirli bir kullanıcı arayüzü paketi için meta verileri depolar.
  • fonts/: Bileşen tarafından kullanılan yazı tipi öğelerinin (varsa) depolandığı klasör.
  • *.png - Bileşende kullanılan resim öğeleri (ör. menu.png).
  • [component_name]_preview.png — Bileşenin önizleme resmi (örneğin, story_card_preview.png).
  • *.svg: Bileşende kullanılan vektör grafik öğeleri (ör. üçgen).
  • FONTS.txt: Varsa kullanılan yazı tiplerinin listesi.
  • DEPS.txt: Tüm alt bileşenlerin adlarıdır.
  • VERSION.txt — Kullanıcı arayüzü paketini oluşturmak ve içe aktarmak için kullanılan Relay'in sürümü.

Bunlar src/main/ui-packages/[package_name] altında depolanır.

Kullanıcı Arayüzü Paketlerini Kaldırma

Bir Kullanıcı Arayüzü Paketini projeden kaldırmak için ui-packages/ altındaki klasörü silebilirsiniz. Klasör kaldırıldıktan sonra projeyi yeniden oluşturduğunuzda, oluşturulan kod da kaldırılır.

Oluşturulan kod klasörü yapısı

Proje derlendiğinde bu Kullanıcı Arayüzü Paketleri, geliştiricinin çağırabileceği @Composable işlevlerini içeren oluşturulmuş koda dönüştürülür. Bunlar build/generated/ altında depolanır. Android görünümünde bunlar, modül dizininizin (bu örnekte, app dizini) java (generated) ve res olarak görünür.

Android Studio'da oluşturulan dosyaları içeren klasörler

Aşağıdaki ekran görüntüleri bu dizindeki dosyalarda adım adım yol gösterir:

  • Yazı tipleri ve resimler gibi kaynaklar build/generated/res/relay/ hizmetine kopyalanır.

    res klasörünün altında oluşturulan kaynaklar

  • Her Kullanıcı Arayüzü Paketinde, build/generated/source/relay/ altına yerleştirilmiş bir kod bulunur. Her Kullanıcı Arayüzü Paketi'nin oluşturulan kod klasörü, içe aktarılan bileşene karşılık gelen tek bir dosyaya sahiptir. Ayrıca, Fonts.kt ile biten ve bileşen tarafından kullanılan yazı tipi öğelerine referanslar içeren tek bir dosya içerir.

    Java(oluşturulan) klasörü altında oluşturulan Kotlin dosyaları

  • Ayrıca, oluşturulan kodun kullandığı işlevi sağlayan com.google.relay.compose adlı bir çalışma zamanı kitaplığı da vardır.

    Geçiş çalışma zamanı kitaplığı

Oluşturulan kod yapısı

Bestelenebilirler

Figma'daki bileşenler katmanlardan oluşur. Örneğin, bu tasarım, Resim (bir resim katmanı) ve Başlık (metin katmanı) olmak üzere iki alt katman içeren bir Merhaba Kart çerçeve katmanı içerir:

Resim ve Başlık katmanlarına sahip Merhaba Kartı bileşeni

Bu tasarım koda çevrildiğinde, her katman için ayrı composable işlevler oluştururuz. Burada Figma katmanının adı, composable işlevin adıdır (Kotlin söz dizimine uygun olacak şekilde değiştirilir). Katmanlar şu şekilde çevrilir:

  1. Merhaba Kart katmanı:

    @Composable
fun HelloCard(
  modifier: Modifier = Modifier,
  title: String
) {
  TopLevel(modifier = modifier) {
      Image()
      Title(title = title)
  }
]

  2. Resim katmanı:

    @Composable
fun Image(modifier: Modifier = Modifier) {
  Image(...)
}

  3. Başlık katmanı:

    @Composable
fun Title(
  title: String,
  modifier: Modifier = Modifier
) {
  Text(...)
}

Çevrilmiş Figma varyantları ve parametreleri

Bir Figma bileşeninin birden fazla varyantı varsa oluşturulan kod her varyant özelliği için bir enum içerir. Her bir varyant sıralamasındaki değerler, söz konusu varyant özelliğinin değerine karşılık gelir. composable, her varyant enum için bir parametre içerir.

// Design to select for NewsCard
enum class View {
    HeroItem,
    ArticleItem,
    AudioItem
}

/**
 *   This composable was generated from the UI Package 'news_card'.
 *   Generated code; do not edit directly
 */
@Composable
fun NewsCard(
    modifier: Modifier = Modifier,
    view: View = View.HeroItem,
    onNewsCardTapped: () -> Unit = {},
    thumbnail: Painter,
    headline: String,
    author: String,
    date: String,
    onMenuTapped: () -> Unit = {}
) {
       when (view) {
           View.HeroItem -> TopLevelViewHeroItem(...) {
               ContentViewHeroItem { ... }
           }
           View.ArticleItem -> TopLevelViewArticleItem(...) {
               ContentViewArticleItem { ... }
           }
           View.AudioItem -> TopLevelViewAudioItem(...) {
               ContentViewAudioItem { ... }
           }
       }
   }
}

Figma bileşeninin her içerik parametresi ve etkileşim işleyicisi, composable'ın parametresine dönüştürülür. Aşağıdaki NewsCard composable, dört içerik parametresi (bir resim ve üç dize) ve iki etkileşim işleyiciye (son iki parametre) sahiptir.

/**
 *   This composable was generated from the UI Package 'news_card'.
 *   Generated code; do not edit directly
 */
@Composable
fun NewsCard(
    modifier: Modifier = Modifier,
    view: View = View.HeroItem,
    thumbnail: Painter,
    headline: String,
    author: String,
    date: String,
    onNewsCardTapped: () -> Unit = {},
    onMenuTapped: () -> Unit = {}
) {...}